/* ============================================================ PetEco · Páginas de servicio (detalle) — sistema compartido Estilo sobrio + animado. Se apoya en styles.css (nav, footer, faq, section, hero-chip, breadcrumb...). El acento de cada página se define en con --ink / --soft / --tint. ============================================================ */ .svc{ --ink:var(--brand-ink); --soft:var(--brand-soft); --tint:var(--brand); } .svc .eyebrow{ color:var(--ink); } .svc .eyebrow::before{ background:var(--tint); } .svc .faq-item.open .pm{ background:var(--tint); } .svc .link-arrow:hover{ color:var(--ink); } /* ---------- Hero ---------- */ .svc-hero{ background:var(--bg-soft); overflow:visible; padding:clamp(40px,5.5vw,76px) 0 clamp(44px,5vw,80px); position:relative; } .svc-hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center; } .svc-hero .lead{ margin-top:2px; } .svc-hero .hero-actions{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; } .svc-hero .btn{ --bg:var(--ink); } .svc-hero .hero-chip svg{ color:var(--ink); } /* ---------- Visual: foto ---------- */ .svc-photo{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-lg); background:var(--soft); } .svc-photo img{ position:relative; z-index:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); } .svc-photo:hover img{ transform:scale(1.05); } .svc-photo::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,transparent 55%,rgba(18,18,26,.30)); } /* wash de acento: unifica la fotografía de stock con el color de cada servicio (misma temperatura en las 14 páginas → no parecen pegadas de sitios distintos) */ .svc-photo--accent::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(145deg, color-mix(in srgb,var(--tint) 40%,transparent) 0%, transparent 58%); mix-blend-mode:multiply; } .svc-photo .viz__badge{ z-index:3; } /* ---------- Visual: animación de procedimiento ---------- */ .viz{ position:relative; border-radius:var(--radius); aspect-ratio:4/5; overflow:hidden; background: radial-gradient(120% 90% at 70% 15%, color-mix(in srgb, var(--tint) 55%, #fff) 0%, transparent 55%), linear-gradient(160deg, var(--soft), #fff 78%); box-shadow:var(--shadow-lg); display:grid; place-items:center; } .viz svg{ width:64%; height:auto; overflow:visible; color:var(--ink); } .viz__badge{ position:absolute; left:16px; bottom:16px; z-index:3; display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:999px; background:rgba(255,255,255,.94); backdrop-filter:blur(6px); font-family:'Hanken Grotesk'; font-weight:700; font-size:13px; color:var(--fg); box-shadow:var(--shadow); } .viz__badge i{ width:8px; height:8px; border-radius:50%; background:var(--ink); flex:0 0 auto; animation:vizBlink 1.8s var(--ease) infinite; } @keyframes vizBlink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } } /* barrido de escaneo compartido */ .viz__scan{ position:absolute; left:0; right:0; top:0; height:34%; z-index:2; pointer-events:none; background:linear-gradient(180deg, color-mix(in srgb,var(--tint) 45%,transparent), transparent); mix-blend-mode:multiply; animation:vizScan 4.6s var(--ease) infinite; } @keyframes vizScan{ 0%{ transform:translateY(-40%); opacity:0 } 12%{ opacity:.9 } 88%{ opacity:.9 } 100%{ transform:translateY(320%); opacity:0 } } /* que las transformaciones usen el bbox propio del elemento (rotaciones/escalas fiables) */ .viz .beat,.viz .pupil,.viz .cell,.viz .hb,.viz .pulseNode,.viz .retic,.viz .ring, .viz .wave,.viz .rip,.viz .lupa,.viz .liquid,.viz .leaf,.viz .hand,.viz .limb{ transform-box:fill-box; } /* trazos comunes de las escenas SVG */ .viz .stroke{ fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .viz .thin{ stroke-width:1.6; } .viz .fillc{ fill:currentColor; stroke:none; } .viz .soft{ opacity:.28; } /* -- ECG / latido (cardiología) -- */ .viz-ecg .trace{ stroke-dasharray:280; stroke-dashoffset:280; animation:ecgDraw 2.6s var(--ease) infinite; } @keyframes ecgDraw{ 0%{ stroke-dashoffset:280 } 55%{ stroke-dashoffset:0 } 80%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:-280 } } .viz-ecg .beat{ transform-origin:center; animation:beat 1.4s var(--ease) infinite; } @keyframes beat{ 0%,100%{ transform:scale(1) } 14%{ transform:scale(1.14) } 28%{ transform:scale(1) } } /* -- Monitor de constantes (urgencias / hospitalización / cirugía) -- */ .viz-pulse .trace{ stroke-dasharray:340; stroke-dashoffset:340; animation:ecgDraw 3s linear infinite; } .viz-pulse .dot{ animation:vizBlink 1s steps(1,end) infinite; } /* -- Laboratorio: tubos + burbujas -- */ .viz-lab .liquid{ transform-origin:bottom; animation:labFill 3.4s var(--ease) infinite alternate; } @keyframes labFill{ 0%{ transform:scaleY(.5) } 100%{ transform:scaleY(.92) } } .viz-lab .bub{ animation:bub 2.4s var(--ease) infinite; } .viz-lab .bub2{ animation:bub 2.4s var(--ease) .8s infinite; } .viz-lab .bub3{ animation:bub 2.4s var(--ease) 1.5s infinite; } @keyframes bub{ 0%{ transform:translateY(6px); opacity:0 } 30%{ opacity:1 } 100%{ transform:translateY(-16px); opacity:0 } } /* -- Ojo (oftalmología) -- */ .viz-eye .ring{ transform-origin:center; opacity:0; animation:eyeRing 3s var(--ease) infinite; } .viz-eye .ring2{ animation-delay:1s; } .viz-eye .ring3{ animation-delay:2s; } @keyframes eyeRing{ 0%{ transform:scale(.4); opacity:.8 } 100%{ transform:scale(1.5); opacity:0 } } .viz-eye .pupil{ transform-origin:center; animation:beat 3s var(--ease) infinite; } /* -- Diente (odontología): brillo -- */ .viz-tooth .shine{ animation:shine 3s var(--ease) infinite; opacity:0; } @keyframes shine{ 0%{ transform:translate(-8px,-8px); opacity:0 } 40%{ opacity:.9 } 70%{ opacity:0 } 100%{ opacity:0 } } /* -- Jeringa (vacunación): gota -- */ .viz-syr .drop{ animation:drop 2.4s var(--ease) infinite; } @keyframes drop{ 0%{ transform:translateY(0); opacity:0 } 20%{ opacity:1 } 70%{ transform:translateY(20px); opacity:1 } 100%{ transform:translateY(26px); opacity:0 } } /* -- Microchip: anillos de lectura -- */ .viz-chip .wave{ transform-origin:center; opacity:0; animation:eyeRing 2.8s var(--ease) infinite; } .viz-chip .wave2{ animation-delay:.9s } .viz-chip .wave3{ animation-delay:1.8s } /* -- Piel / lupa (dermatología) -- */ .viz-derma .lupa{ transform-origin:center; animation:lupa 5s var(--ease) infinite; } @keyframes lupa{ 0%,100%{ transform:translate(-6px,-4px) } 50%{ transform:translate(8px,6px) } } .viz-derma .rip{ transform-origin:center; opacity:0; animation:eyeRing 3s var(--ease) infinite; } /* -- Neurología: señal viajando -- */ .viz-neuro .spark{ offset-path:path('M20 60 Q 40 20 60 55 T 100 50'); animation:spark 2.6s linear infinite; } @keyframes spark{ 0%{ offset-distance:0%; opacity:0 } 10%{ opacity:1 } 90%{ opacity:1 } 100%{ offset-distance:100%; opacity:0 } } .viz-neuro .pulseNode{ animation:beat 1.6s var(--ease) infinite; transform-origin:center; } /* -- Oncología: retícula girando -- */ .viz-onco .retic{ transform-origin:center; animation:spin 8s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg) } } .viz-onco .cell{ animation:beat 2.4s var(--ease) infinite; transform-origin:center; } /* -- Rehabilitación: arco de movimiento -- */ .viz-rehab .limb{ transform-origin:0 0; animation:swing 2.8s var(--ease) infinite; } @keyframes swing{ 0%,100%{ transform:rotate(-16deg) } 50%{ transform:rotate(20deg) } } /* -- Digestivo: ondas -- */ .viz-belly .wavey{ stroke-dasharray:6 8; animation:flow 3s linear infinite; } @keyframes flow{ to{ stroke-dashoffset:-28 } } /* -- Geriatría: corazón + reloj lento -- */ .viz-senior .hand{ transform-origin:50% 100%; animation:spin 6s linear infinite; } .viz-senior .hb{ transform-origin:center; animation:beat 1.8s var(--ease) infinite; } /* -- Nutrición: cuenco + hoja -- */ .viz-food .leaf{ transform-origin:50% 100%; animation:sway 3.4s var(--ease) infinite; } @keyframes sway{ 0%,100%{ transform:rotate(-8deg) } 50%{ transform:rotate(8deg) } } /* flotante que acompaña a la animación (aparece a la derecha) */ .svc-float{ position:absolute; z-index:4; top:22px; right:-14px; display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:var(--radius-sm); background:#fff; box-shadow:var(--shadow-lg); max-width:240px; animation:svcBob 5s var(--ease) infinite; } @keyframes svcBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } } .svc-float .fic{ width:40px; height:40px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:var(--soft); color:var(--ink); } .svc-float b{ font-family:'Hanken Grotesk'; font-size:14px; display:block; line-height:1.2; } .svc-float small{ color:var(--muted); font-size:12.5px; } /* ---------- Grid "qué tratamos/revisamos" ---------- */ .svc-do{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .svc-do--3{ grid-template-columns:repeat(3,1fr); } .svc-do-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:22px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .svc-do-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent; } .svc-do-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--soft); color:var(--ink); margin-bottom:14px; } .svc-do-card h3{ font-size:16.5px; margin-bottom:6px; } .svc-do-card p{ color:var(--muted); font-size:14px; } /* ---------- Barra fija móvil ---------- */ .svc-bar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:none; grid-template-columns:1fr 1fr; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-top:1px solid var(--border); } .svc-bar a{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px; border-radius:100px; font-family:'Hanken Grotesk'; font-weight:700; font-size:15px; } .svc-bar .call{ background:var(--ink); color:#fff; } .svc-bar .wa{ background:var(--green-ink); color:#fff; } /* ---------- Responsive ---------- */ @media (max-width:900px){ .svc-hero .wrap{ grid-template-columns:1fr; gap:32px; } .svc-hero .hero-copy{ text-align:center; } .svc-hero .lead{ margin-inline:auto; } .svc-hero .breadcrumb, .svc-hero .hero-chips, .svc-hero .hero-actions{ justify-content:center; } .svc-photo, .viz{ max-width:420px; margin-inline:auto; } .svc-do{ grid-template-columns:1fr 1fr; } .svc-do--3{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .svc-bar{ display:grid; } body.svc{ padding-bottom:76px; } .svc-float{ display:none; } .svc-do, .svc-do--3{ grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){ .viz *, .viz__scan, .svc-float{ animation:none !important; } .viz-ecg .trace, .viz-pulse .trace{ stroke-dashoffset:0; } } /* ---------- Servicios relacionados (interlinking) ---------- */ .rel .section-head{ margin-bottom:26px; } .rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .rel-card{ display:flex; gap:13px; align-items:flex-start; padding:17px 18px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; color:inherit; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .rel-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(20,20,40,.07); border-color:var(--accent-ink); } .rel-ic{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink); } .rel-tx b{ display:block; font-weight:650; margin-bottom:2px; } .rel-tx small{ color:var(--muted,#667085); font-size:.86rem; line-height:1.4; } @media (max-width:900px){ .rel-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .rel-grid{ grid-template-columns:1fr; } }