/* ============================================================
   servicio.css — estilos exclusivos de /servicios/[slug].php
   Usa las variables de color ya definidas en style.css:
   --rosa, --verde, --amarillo, --tinta, --crema, --gris, --linea
   Si tu style.css usa otros nombres de variable, ajusta aquí.
   ============================================================ */

/* ===== RAIL LATERAL DE PROGRESO (signature element) ===== */
.diente-rail{
    position:fixed;
    right:28px;
    top:50%;
    transform:translateY(-50%);
    z-index:50;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(6px);
    padding:14px 10px;
    border-radius:30px;
    box-shadow:0 6px 24px rgba(30,158,140,.15);
}
.diente-rail .punto{
    width:9px;height:9px;border-radius:50%;
    background:var(--linea, #E7E1D6);
    cursor:pointer;
    transition:all .3s ease;
    position:relative;
}
.diente-rail .punto.activo{
    background:var(--rosa, #E85D8A);
    transform:scale(1.5);
}
.diente-rail .punto:hover::after{
    content:attr(data-label);
    position:absolute;
    right:20px;top:50%;
    transform:translateY(-50%);
    background:var(--tinta, #1B2A2A);
    color:#fff;
    font-size:11px;
    padding:4px 10px;
    border-radius:20px;
    white-space:nowrap;
}
@media (max-width:900px){ .diente-rail{ display:none; } }

/* ===== HERO =====
   Imagen panorámica 1600x600 a todo el ancho, con overlay de gradiente
   solo donde va el texto (izquierda/abajo). Altura fija moderada —
   deliberadamente más baja que el hero de home para que se lea como
   "estoy dentro de una sección", no como portada. Sin breadcrumb:
   duplicaba la sensación de menú justo debajo del header real. */
.servicio-hero{
    position:relative;
    width:100%;
    aspect-ratio:1600/600;
    max-height:520px;
    min-height:340px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
}
.servicio-hero img{
    position:absolute; inset:0;
    display:block;
    width:100%; height:100%;
    object-fit:cover;
    transform:scale(1.05);
    animation:svHeroZoom 9s ease-out forwards;
}
@keyframes svHeroZoom{ to{ transform:scale(1); } }
.servicio-hero::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(20,30,30,.88) 0%, rgba(20,30,30,.72) 38%, rgba(20,30,30,.25) 65%, rgba(20,30,30,.05) 100%);
}
.hero-contenido{
    position:relative;
    z-index:2;
    color:#fff;
    padding:0 0 44px;
}
.hero-contenido .hero-texto{
    max-width:600px;
}
.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--amarillo, #F4C21A);
    font-weight:600;
    margin-bottom:14px;
    opacity:0;
    animation:svSube .7s ease forwards .1s;
}
.hero-eyebrow .linea{ width:28px;height:2px;background:var(--amarillo, #F4C21A); }
.hero-contenido h1{
    font-family:var(--font-display, inherit);
    font-size:clamp(1.9rem, 3.6vw, 2.8rem);
    font-weight:600;
    line-height:1.15;
    color:#fff;
    opacity:0;
    animation:svSube .8s ease forwards .25s;
}
.hero-contenido p{
    margin-top:14px;
    font-size:1rem;
    max-width:460px;
    color:rgba(255,255,255,.9);
    opacity:0;
    animation:svSube .8s ease forwards .4s;
}
.hero-ctas{
    margin-top:24px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    opacity:0;
    animation:svSube .8s ease forwards .55s;
}
@media (max-width:760px){
    .servicio-hero{ aspect-ratio:auto; min-height:0; padding:48px 0; align-items:center; }
    .servicio-hero::after{ background:linear-gradient(180deg, rgba(27,42,42,.35) 0%, rgba(27,42,42,.78) 100%); }
}
/* Pantallas de poca altura (ej. 1366x768, el tamaño más común en laptops):
   el hero de 520px + header dejaba el CTA fuera del viewport visible.
   Se apunta a la altura del viewport, no al ancho. */
@media (max-height:800px) and (min-width:761px){
    .servicio-hero{ max-height:400px; min-height:0; }
    .hero-contenido{ padding-bottom:28px; }
    .hero-contenido h1{ font-size:clamp(1.6rem, 3vw, 2.2rem); }
    .hero-contenido p{ margin-top:10px; }
    .hero-ctas{ margin-top:16px; }
}
@keyframes svSube{
    from{opacity:0; transform:translateY(22px);}
    to{opacity:1; transform:translateY(0);}
}
.servicio-hero .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 30px;
    border-radius:100px;
    font-weight:600;
    font-size:.95rem;
    transition:all .25s ease;
    border:2px solid transparent;
}
.servicio-hero .btn-primario{ background:var(--rosa, #E85D8A); color:#fff; }
.servicio-hero .btn-primario:hover{ background:#d34877; transform:translateY(-2px); box-shadow:0 10px 24px rgba(232,93,138,.35); }
.servicio-hero .btn-fantasma{ border-color:rgba(255,255,255,.55); color:#fff; }
.servicio-hero .btn-fantasma:hover{ background:rgba(255,255,255,.15); border-color:#fff; }

/* ===== FRANJA DE ESPECIALIDADES (sticky) =====
   Por defecto hace wrap a una segunda línea si no caben los 10 chips
   — evita el scroll horizontal silencioso que "escondía" servicios
   sin ninguna pista visual. El scroll-x queda solo como resguardo
   para pantallas muy angostas (móvil), donde el wrap ocuparía
   demasiado alto verticalmente. */
.franja-especialidades{
    background:#fff;
    border-bottom:1px solid var(--linea, #E7E1D6);
    position:sticky;
    top:0;
    z-index:40;
}
.franja-especialidades .fila{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:14px 24px;
    max-width:1180px;
    margin:0 auto;
}
@media (max-width:560px){
    .franja-especialidades{
        overflow-x:auto;
        scrollbar-width:none;
    }
    .franja-especialidades::-webkit-scrollbar{ display:none; }
    .franja-especialidades .fila{
        flex-wrap:nowrap;
        min-width:max-content;
    }
}
.franja-especialidades .chip{
    padding:9px 18px;
    border-radius:100px;
    font-size:.85rem;
    font-weight:500;
    color:var(--gris, #6B7373);
    white-space:nowrap;
    transition:all .2s ease;
    border:1px solid var(--linea, #E7E1D6);
}
.franja-especialidades .chip:hover{ border-color:var(--verde, #1E9E8C); color:var(--verde, #1E9E8C); }
.franja-especialidades .chip.activo{
    background:var(--verde, #1E9E8C);
    color:#fff;
    border-color:var(--verde, #1E9E8C);
}

/* ===== REVEAL ON SCROLL ===== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    .servicio-hero img{ animation:none; transform:scale(1); }
    .hero-eyebrow, .hero-contenido h1, .hero-contenido p, .hero-ctas{ opacity:1; animation:none; transform:none; }
    .cta-final-diente{ animation:none; }
}

/* ===== SECCIÓN GENÉRICA ===== */
.seccion{ padding:32px 0; }
.seccion-consiste{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:860px){ .seccion-consiste{ grid-template-columns:1fr; gap:40px; } }

.kicker{
    display:inline-block;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--rosa, #E85D8A);
    margin-bottom:12px;
}
.seccion h2{
    font-family:var(--font-display, inherit);
    font-size:clamp(1.8rem, 3vw, 2.6rem);
    font-weight:600;
    margin-bottom:20px;
    line-height:1.15;
}
/* El offset real para el ancla #consiste depende de TODO lo que quede
   fijo/sticky arriba (header principal + franja de especialidades), y
   ese alto cambia entre desktop/mobile y si el cliente edita el header
   más adelante. Por eso el scroll-margin-top se calcula por JS en
   servicio.js en vez de un valor fijo aquí — ver ajustaScrollMargin(). */
.seccion-consiste p{ color:var(--gris, #6B7373); font-size:1.05rem; margin-bottom:16px; }

.consiste-imagen{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:800/600; }
.consiste-imagen img{ width:100%; height:100%; object-fit:cover; }
.badge-flotante{
    position:absolute; bottom:20px; left:20px;
    background:#fff; padding:14px 20px; border-radius:16px;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
    display:flex; align-items:center; gap:12px;
}
.badge-flotante .num{ font-family:var(--font-display, inherit); font-size:1.6rem; font-weight:700; color:var(--verde, #1E9E8C); }
.badge-flotante .txt{ font-size:.78rem; color:var(--gris, #6B7373); line-height:1.2; }

/* ===== INCLUYE — tarjetas escalonadas ===== */
.seccion-incluye{ background:#fff; }
.incluye-cabecera{ text-align:center; max-width:640px; margin:0 auto 32px; }
.incluye-cabecera h2{ margin-bottom:14px; }
.incluye-cabecera p{ color:var(--gris, #6B7373); }

.incluye-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; align-items:start; }
@media (max-width:900px){ .incluye-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .incluye-grid{ grid-template-columns:1fr; } }

.tarjeta-incluye{
    background:var(--crema, #FBF8F3);
    border-radius:20px;
    padding:28px 24px;
    transition:transform .35s ease, box-shadow .35s ease;
    border:1px solid var(--linea, #E7E1D6);
}
/* Antes las tarjetas 2 y 4 tenían margin-top:22px para un efecto
   escalonado — se quitó porque, combinado con alturas de contenido
   desiguales, se leía como tarjetas desalineadas hacia abajo en vez
   de un escalonado intencional. */
.tarjeta-incluye:hover{ transform:translateY(-8px); box-shadow:0 16px 32px rgba(30,158,140,.12); border-color:transparent; }

.icono-diente{ width:48px;height:48px; margin-bottom:16px; }
.icono-verde{ color:var(--verde, #1E9E8C); }
.icono-rosa{ color:var(--rosa, #E85D8A); }
.icono-amarillo{ color:var(--amarillo, #F4C21A); }

.tarjeta-incluye h3{ font-family:var(--font-display, inherit); font-size:1.05rem; font-weight:600; margin-bottom:8px; }
.tarjeta-incluye p{ font-size:.9rem; color:var(--gris, #6B7373); }

/* ===== GALERÍA =====
   Caso base: exactamente 3 fotos de 600x450 en grid parejo.
   Si el marcado trae 4 fotos o más, .galeria-grid lleva también la
   clase .es-carrusel (añadida por servicio.js al contar los hijos)
   y pasa a scroll horizontal con snap, sin romper el layout de 3. */
.seccion-galeria{ padding-top:32px; }

.galeria-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
}
.galeria-grid a{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    display:block;
    aspect-ratio:600/450;
}
.galeria-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.galeria-grid a:hover img{ transform:scale(1.08); }
.galeria-grid a::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 50%, rgba(27,42,42,.5));
    opacity:0; transition:opacity .3s ease;
}
.galeria-grid a:hover::after{ opacity:1; }

@media (max-width:760px){
    .galeria-grid{ grid-template-columns:1fr 1fr; }
    .galeria-grid a:first-child{ grid-column:1/3; }
}

/* Modo carrusel — se activa solo cuando hay 4+ imágenes */
.galeria-grid.es-carrusel{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:20px;
    padding-bottom:10px;
}
.galeria-grid.es-carrusel::-webkit-scrollbar{ height:6px; }
.galeria-grid.es-carrusel::-webkit-scrollbar-thumb{ background:var(--linea, #E7E1D6); border-radius:10px; }
.galeria-grid.es-carrusel a{
    flex:0 0 300px;
    scroll-snap-align:start;
}
@media (max-width:760px){
    .galeria-grid.es-carrusel a{ flex-basis:78vw; }
}

/* ===== CONFIANZA ===== */
.seccion-confianza{ background:var(--verde, #1E9E8C); color:#fff; position:relative; overflow:hidden; }
.seccion-confianza::before{
    content:""; position:absolute; width:520px; height:520px;
    background:radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
    top:-200px; right:-160px; border-radius:50%;
}
.confianza-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; }
@media (max-width:860px){ .confianza-grid{ grid-template-columns:1fr; } }
.confianza-cita{ font-family:var(--font-display, inherit); font-size:1.5rem; font-weight:500; line-height:1.4; }
.confianza-autor{ margin-top:20px; font-size:.9rem; opacity:.85; }
.confianza-stats{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.confianza-stats .cifra{ font-family:var(--font-display, inherit); font-size:2.6rem; font-weight:700; color:var(--amarillo, #F4C21A); }
.confianza-stats .etiqueta{ font-size:.85rem; opacity:.85; margin-top:4px; }

/* ===== CTA FINAL ===== */
.seccion-cta-final{ text-align:center; padding:44px 0; }
.cta-final-diente{ width:64px; height:64px; margin:0 auto 24px; animation:svFlotar 3.4s ease-in-out infinite; }
@keyframes svFlotar{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.seccion-cta-final h2{ font-family:var(--font-display, inherit); font-size:clamp(1.8rem,3.4vw,2.8rem); font-weight:600; margin-bottom:14px; }
.seccion-cta-final p{ color:var(--gris, #6B7373); max-width:480px; margin:0 auto 34px; }
/* El .btn.btn-primario de "En qué consiste"/hero solo tenía estilo dentro
   de .servicio-hero .btn — fuera de esa sección (como aquí, el CTA final)
   se mostraba como link de texto plano, sin fondo ni forma de botón. */
.seccion-cta-final .btn-primario{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 30px;
    border-radius:100px;
    font-weight:600;
    font-size:.95rem;
    background:var(--rosa, #E85D8A);
    color:#fff;
    border:2px solid transparent;
    transition:all .25s ease;
}
.seccion-cta-final .btn-primario:hover{
    background:#d34877;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(232,93,138,.35);
}

/* ===== OTRAS ESPECIALIDADES — carrusel ===== */
.seccion-otras{ background:#fff; }
.otras-cabecera{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:36px; flex-wrap:wrap; gap:16px; }
.otras-carrusel{ display:flex; gap:20px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; }
.otras-carrusel::-webkit-scrollbar{ height:6px; }
.otras-carrusel::-webkit-scrollbar-thumb{ background:var(--linea, #E7E1D6); border-radius:10px; }
.tarjeta-otra{ flex:0 0 260px; scroll-snap-align:start; border-radius:20px; overflow:hidden; position:relative; height:320px; transition:transform .35s ease; }
.tarjeta-otra:hover{ transform:translateY(-6px); }
.tarjeta-otra img{ width:100%; height:100%; object-fit:cover; }
.tarjeta-otra::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(27,42,42,.85)); }
.tarjeta-otra .txt{ position:absolute; bottom:18px; left:18px; right:18px; z-index:2; color:#fff; }
.tarjeta-otra .txt span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--amarillo, #F4C21A); font-weight:600; }
.tarjeta-otra .txt h3{ font-family:var(--font-display, inherit); font-size:1.15rem; font-weight:600; margin-top:6px; color:#fff; }