/* =============================================================================
   SALVIA · clon de estudio
   La geometría es la medida: contenedor de 1800 con 32 de margen (1216 de contenido
   a 1280 de ventana), secciones a 80/80, escala 80/56/40/32/24/20/16/14/12, radios
   8/12/16/24/32/40 y un borde de 1 px al 16 % de la tinta. El vestido es otro.
   ========================================================================== */

:root{
  --claro:#f8f7f5;
  --blanco:#ffffff;
  --oscuro:#020120;
  --oscuro-2:#0e0e0e;
  --acento:#2862e9;
  --acento-oscuro:#164ac3;
  --bg-1:#eceff4;
  --bg-2:#e3ebfa;
  --medio:#8eb0ef;
  --borde:rgba(2,1,32,.16);
  --borde-claro:rgba(255,255,255,.16);

  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Schibsted Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --h1:80px; --h2:56px; --h3:40px; --h4:32px; --h5:24px;
  --t-grande:20px; --t-cuerpo:16px; --t-pequeno:14px; --t-rotulo:12px;

  --r-xxs:8px; --r-xs:12px; --r-s:16px; --r-m:24px; --r-r:32px; --r-g:40px; --r-redondo:100vw;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--claro);
  color:var(--oscuro);
  font-family:var(--sans);
  font-size:var(--t-cuerpo);
  font-weight:400;
  line-height:150%;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- tipografía */
.h1{font-family:var(--sans);font-size:var(--h1);line-height:100%;letter-spacing:-.04em;font-weight:500}
.h2{font-family:var(--sans);font-size:var(--h2);line-height:100%;letter-spacing:-.04em;font-weight:500}
.h4{font-size:var(--h4);line-height:112%;letter-spacing:-.02em;font-weight:500}
.h5{font-size:var(--h5);line-height:112%;letter-spacing:-.02em;font-weight:600}
.h1.serif,.h2.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:104%}
.serif{font-family:var(--serif);font-weight:400}
.sin-margen{margin:0}
.texto-grande{font-size:var(--t-grande);line-height:140%}
.texto{font-size:var(--t-cuerpo);line-height:150%}
.texto-pequeno{font-size:var(--t-pequeno);line-height:142%}
.semibold{font-weight:600}
.opacidad-50{opacity:.5}
.subrayado{text-decoration:underline}
.rotulo{
  font-family:var(--mono);font-size:var(--t-rotulo);line-height:16px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:500;
}

/* La máscara de renglón del original: overflow oculto con márgenes negativos
   compensados por padding, para que las astas descendentes no se corten. */
.hide{overflow:hidden;margin:-8px 0 -15px;padding:8px 0 15px}

/* ------------------------------------------------------------------- rejilla */
.marco{
  position:relative;z-index:2;width:100%;max-width:1800px;
  margin:0 auto;padding:0 32px;
}
.seccion{position:relative;padding:80px 0;background:var(--claro)}
.linea{width:100%;height:1px;background:var(--borde);margin-right:auto}
.linea--clara{background:var(--borde-claro)}

/* -------------------------------------------------------------------- barra */
.centinela{position:absolute;top:0;left:0;width:1px;height:10px;pointer-events:none}
.navbar-master{position:fixed;top:16px;left:0;right:0;z-index:999;padding:0 24px}
.navbar{
  max-width:1800px;margin:0 auto;padding:20px 0;
  border-radius:var(--r-g);background:var(--blanco);
  box-shadow:0 15px 20px rgba(2,1,32,.08);
  transition:background-color .25s,box-shadow .25s;
}
.navbar--desnuda{background:transparent;box-shadow:none}
/* El estado de la barra atado al scroll POR CSS, no por un evento: una clase que
   pone JavaScript puede llegar un cuadro tarde cuando se salta al tope de golpe, y
   entonces la pastilla se queda puesta arriba. Con `scroll()` lo resuelve el
   compositor en el mismo cuadro en que pinta. El camino de JavaScript queda como
   respaldo para los navegadores que no lo tienen. */
@supports (animation-timeline: scroll()){
  .navbar,.navbar--desnuda{
    background:transparent;box-shadow:none;
    animation:vestir-barra 1ms linear both;
    animation-timeline:scroll(root block);
    animation-range:6px 26px;
  }
  @keyframes vestir-barra{
    from{background-color:#0000;box-shadow:0 15px 20px #0000}
    to{background-color:var(--blanco);box-shadow:0 15px 20px rgba(2,1,32,.08)}
  }
}
.nav-container{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;max-width:1800px;margin:0 auto;padding:0 24px;
}
.nav-left{display:flex;align-items:center;gap:64px;margin-right:auto}
.nav-right{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav-menu-wrap{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:24px}
.nav-menu{display:flex;align-items:center;gap:24px}
.nav-link{font-weight:600;transition:opacity .2s}
.nav-link:hover{opacity:.5}

.marca{display:flex;align-items:center;gap:8px;height:32px}
.marca__signo{width:22px;height:22px;fill:currentColor;stroke:none;flex:none}
.marca__nombre{font-family:var(--serif);font-size:26px;line-height:1;letter-spacing:-.01em}
.marca--pie .marca__nombre{font-size:28px}

.nav-burger{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav-burger span{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .25s}

/* ------------------------------------------------------------------ botones */
.cta-main{
  display:flex;align-items:center;justify-content:center;
  padding:12px 32px;border-radius:var(--r-g);
  background:var(--acento);color:var(--claro);
  font-size:var(--t-cuerpo);font-weight:600;line-height:150%;text-align:center;
  transition:background-color .2s,color .2s;overflow:hidden;
}
.cta-main:hover{background:var(--acento-oscuro)}
.cta-main--pequena{padding:8px 16px;font-size:var(--t-pequeno)}
.cta-main--clara{background:var(--bg-1);color:var(--oscuro)}
.cta-main--clara:hover{background:var(--medio)}

.cta-cita{
  display:flex;align-items:center;gap:8px;
  padding:8px 20px 8px 8px;border-radius:var(--r-g);
  background:var(--blanco);transition:background-color .2s,color .2s;
}
.cta-cita:hover{background:var(--oscuro);color:var(--claro)}
.cta-cita__cara{width:32px;height:32px;border-radius:var(--r-redondo);overflow:hidden;flex:none}
.cta-cita__cara img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* --------------------------------------------------------------------- hero */
.seccion.seccion--hero{padding:144px 0 0;overflow:clip}
.hero__titular{
  position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:32px;margin-bottom:20px;
}
.hero__renglones{display:flex;flex-direction:column}
.hero__botones-fila{display:flex;gap:8px}

/* cinta */
.cinta-marco{width:100%}
.cinta{position:relative;display:flex;align-items:center;justify-content:center}
.cinta__tramo{
  display:flex;align-items:center;flex:none;
  animation:vaiven 60s linear infinite;
}
.cinta__hueco{
  flex:none;width:100%;max-width:736px;height:523px;
  margin:0 28px;border-radius:var(--r-r);
}
.cinta__hueco img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-m)}
@keyframes vaiven{
  0%{transform:translateX(0)}
  50%{transform:translateX(-120%)}
  100%{transform:translateX(0)}
}
/* Las dos máscaras en arco: una elipse muy plana del color del fondo, dibujada.
   Tapa 109 px en el centro y nada en los extremos, y por eso las fotos de los
   lados parecen inclinadas sin que haya ni una rotación. */
.cinta__mascara{
  position:absolute;left:0;right:0;height:109px;z-index:1;pointer-events:none;
  background-repeat:no-repeat;background-size:cover;
}
.cinta__mascara--arriba{
  top:-56px;background-position:50% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1512' height='109' viewBox='0 0 1512 109'%3E%3Cpath d='M-482 0H1994V0.1C1674.8 67.4 1237.9 108.84 756 108.84S-162.8 67.4-482 0.1Z' fill='%23f8f7f5'/%3E%3C/svg%3E");
}
.cinta__mascara--abajo{
  bottom:-56px;background-position:50% 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1512' height='109' viewBox='0 0 1512 109'%3E%3Cpath d='M-482 108.84H1994V108.74C1674.8 41.4 1237.9 0 756 0S-162.8 41.4-482 108.74Z' fill='%23f8f7f5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------- cifras */
.seccion.seccion--cifras{padding-bottom:120px}
.linea--cifras{margin-bottom:64px}
.cifras__mitades{display:grid;grid-template-columns:1fr 2fr;gap:24px}
.cifras__derecha{display:flex;flex-direction:column;gap:80px}
.cifras__rejilla{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:64px}
.cifra{display:flex;flex-direction:column;gap:16px;padding-left:32px;border-left:1px solid var(--borde)}

/* ----------------------------------------------------------------- consulta */
.seccion.seccion--consulta{padding-bottom:160px}
.degradado{
  position:absolute;top:0;left:0;right:0;height:1069px;z-index:1;pointer-events:none;
  background-image:linear-gradient(var(--bg-2),var(--claro));
}
.consulta__mitades{display:grid;grid-template-columns:1fr 1fr;gap:32px;justify-content:space-between}
.consulta__contenido{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:24px}
.consulta__alto{display:flex;flex-direction:column;gap:64px}
.consulta__titular{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.consulta__cuartos{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:40px}
.ficha{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ficha p{text-wrap:balance}
.ficha__icono{width:24px;height:24px;color:var(--acento);stroke-width:1.75;opacity:1}
.consulta__foto{max-width:640px;height:800px;border-radius:var(--r-s);overflow:hidden;justify-self:end;width:100%}
.consulta__foto img{width:100%;height:100%;object-fit:cover}

/* ----------------------------------------------------------------- historia */
.seccion.seccion--historia{
  z-index:1;background:var(--oscuro);color:var(--claro);padding-bottom:120px;
}
.historia__titular{display:flex;flex-direction:column;gap:64px;margin-bottom:80px}
.historia__renglones{display:flex;flex-direction:column}
.historia__mitades{display:grid;grid-template-columns:2fr 1fr;gap:32px}
.historia__foto{width:100%;height:562px;border-radius:var(--r-s);overflow:hidden}
.historia__foto img{width:100%;height:100%;object-fit:cover}
.historia__derecha{display:flex;flex-direction:column;align-items:flex-start;gap:32px}

/* ------------------------------------------------------------------- merece */
.seccion.seccion--merece{padding-top:120px}
.linea--merece{margin-bottom:64px}
.merece__titular{margin-bottom:80px}
.merece__rejilla{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px}
.bloque{display:flex;flex-direction:column;gap:32px}
.bloque__chapa{
  width:64px;height:64px;border-radius:var(--r-s);background:var(--bg-1);
  display:flex;align-items:center;justify-content:center;color:var(--oscuro);
}
.bloque__chapa svg{width:32px;height:32px;stroke-width:2}
.bloque__pie{display:flex;flex-direction:column;gap:16px}

/* -------------------------------------------------------------------- vídeo */
.seccion.seccion--video{display:flex;align-items:center;justify-content:center;padding:40px 8px}
.video{
  position:relative;width:100%;max-width:1900px;height:800px;
  border-radius:var(--r-s);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.video__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video__velo{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(58% 40% at 50% 50%,rgba(14,14,14,.62),rgba(14,14,14,0) 74%),
    linear-gradient(180deg,rgba(14,14,14,.5),rgba(14,14,14,.34) 18%,rgba(14,14,14,.66) 48%,rgba(14,14,14,.5));}
.video__contenido{
  position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:32px;color:var(--blanco);
  text-shadow:0 1px 24px rgba(2,1,32,.45);
}
.video__boton{
  width:72px;height:72px;border:1.5px solid var(--blanco);border-radius:var(--r-redondo);
  color:var(--blanco);
  display:flex;align-items:center;justify-content:center;transition:transform .2s;
}
.video__boton:hover{transform:scale(1.3)}
.video__boton svg{width:16px;height:18px;margin-left:5px;fill:currentColor;stroke:none}

/* --------------------------------------------------------------- testimonio */
.testimonio{position:relative}
.testimonio__ventana{overflow:hidden}
.testimonio__tren{display:flex;transition:transform .5s cubic-bezier(.215,.61,.355,1)}
.testimonio__hoja{flex:0 0 100%;width:100%}
.testimonio__mitades{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.testimonio__foto{position:relative;height:800px;border-radius:var(--r-s);overflow:hidden}
.testimonio__foto img{width:100%;height:100%;object-fit:cover}
.testimonio__velo{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--claro)}
.testimonio__derecha{display:flex;flex-direction:column;gap:64px;width:90%;justify-self:end}
.testimonio__texto{position:relative}
.linea--cita{margin-bottom:64px}
.linea--cita-2{margin-bottom:32px}
.testimonio__tapa{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--claro)}
.testimonio__fila{display:flex;align-items:center;justify-content:space-between;gap:24px}
.testimonio__firma{display:flex;flex-direction:column;gap:4px}
.testimonio__flechas{display:flex;gap:16px}
.testimonio__flecha{
  flex:none;width:48px;height:48px;border:1px solid var(--borde);border-radius:var(--r-redondo);
  background:var(--claro);display:flex;align-items:center;justify-content:center;
  transition:background-color .2s,color .2s;
}
.testimonio__flecha svg{width:16px;height:16px}
.testimonio__flecha:hover{background:var(--oscuro);color:var(--claro)}

/* ------------------------------------------------------------------- diario */
.seccion.seccion--diario{padding-bottom:120px}
.linea--diario{margin-bottom:64px}
.diario__titular{display:flex;align-items:center;justify-content:space-between;margin-bottom:80px}
.diario__mitades{display:grid;grid-template-columns:2fr 1fr;gap:32px}
.pieza{display:flex;flex-direction:column;gap:16px;width:100%}
.pieza__foto{position:relative;width:100%;height:240px;border-radius:var(--r-s);overflow:hidden}
.pieza__foto--alta{height:480px}
.pieza__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.215,.61,.355,1)}
.pieza:hover .pieza__foto img{transform:scale(1.04)}
.pieza__datos{display:flex;flex-direction:column;gap:16px}
.pieza__meta{display:flex;align-items:center;gap:8px}
.pieza .h5{transition:opacity .2s}
.pieza:hover .h5{opacity:.82}

/* ------------------------------------------------------------------- cierre */
.seccion.seccion--cierre{
  padding:120px 0;
  background-image:linear-gradient(var(--claro),var(--medio) 50%,var(--claro));
}
.cierre{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;padding:160px 24px;text-align:center;
  border-radius:var(--r-s);background:var(--blanco);
  box-shadow:0 24px 32px rgba(2,1,32,.08);
}
.cierre__alto{display:flex;flex-direction:column;align-items:center;gap:24px}
.cierre__limite{max-width:450px}

/* -------------------------------------------------------------- distintivo */
.distintivo{
  position:fixed;right:24px;bottom:24px;z-index:998;
  display:flex;align-items:center;gap:8px;
  padding:8px 20px 8px 8px;border-radius:var(--r-g);
  background:var(--blanco);box-shadow:0 15px 20px rgba(2,1,32,.08);
  transition:background-color .2s,color .2s;
}
.distintivo:hover{background:var(--oscuro);color:var(--claro)}
.distintivo__signo{
  width:32px;height:32px;border-radius:var(--r-redondo);background:var(--oscuro);
  color:var(--claro);display:flex;align-items:center;justify-content:center;flex:none;
  transition:background-color .2s,color .2s;
}
.distintivo:hover .distintivo__signo{background:var(--claro);color:var(--oscuro)}
.distintivo__signo svg{width:16px;height:16px;fill:currentColor;stroke:none}

/* ---------------------------------------------------------------------- pie */
.pie{background:var(--claro);overflow:hidden;padding:45px 0 0}
.pie__mitades{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pie__izquierda{display:flex;flex-direction:column;gap:40px}
.pie__derecha{display:flex;gap:32px;justify-content:space-between}
.pie__columna{display:flex;flex-direction:column;gap:28px;flex:none}
.pie__enlaces{display:flex;flex-direction:column;gap:12px}
.pie__enlace{font-size:var(--t-grande);font-weight:600;line-height:150%;transition:opacity .2s}
.pie__enlace:hover{opacity:.5}
.boletin{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.boletin__alto{display:flex;flex-direction:column;gap:12px}
.boletin__campo{position:relative}
.boletin__entrada{
  width:304px;height:48px;padding:0 44px 0 16px;
  border:1px solid transparent;border-radius:var(--r-xxs);
  background:var(--blanco);color:var(--oscuro);
  font-family:inherit;font-size:var(--t-cuerpo);line-height:150%;
}
.boletin__entrada:focus{outline:none;border-color:var(--acento)}
.boletin__entrada::placeholder{color:rgba(2,1,32,.5)}
.boletin__flecha{
  position:absolute;right:16px;top:0;bottom:0;display:flex;align-items:center;
  color:var(--acento);
}
.boletin__flecha svg{width:16px;height:16px}
.pie__banda{margin-top:64px;padding:32px 0;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.pie__banda-fila{display:flex;align-items:center;justify-content:space-between;gap:40px}
.pie__derechos{display:flex;align-items:center;gap:32px}
.pie__social{display:flex;align-items:center;gap:16px}
.social{color:rgba(2,1,32,.72);transition:color .2s}
.social:hover{color:var(--oscuro)}
.social svg{width:20px;height:20px}
.pie__nota{padding:32px 0}

/* =========================================================== movimiento
   Todo es trigger-once: entra y se queda. El renglón sube 200 % de su propia
   altura en 800 ms con outCubic, dentro de la máscara .hide. */
.hide > *{
  transform:translateY(200%);
  transition:transform .8s cubic-bezier(.215,.61,.355,1);
}
.hide.visto > *{transform:translateY(0)}
.aparece{opacity:0;transition:opacity .35s ease .1s}
.aparece.visto{opacity:1}
.testimonio__velo,.testimonio__tapa{height:100%;transition:height .55s cubic-bezier(.215,.61,.355,1)}
.testimonio.visto .testimonio__velo,.testimonio.visto .testimonio__tapa{height:0}

/* A 390 px el original NO dispara las cifras una vez: las ata al scroll y rebobinan
   al subir (medido: desplazamiento 0→406 px, reversible en la vuelta). En escritorio
   esa misma banda es de disparo único, así que la mecánica cambia con el ancho y hay
   que escribir las dos. Con `view()` lo lleva el compositor y es reversible de balde. */
@media screen and (max-width:991px){
  @supports (animation-timeline: view()){
    .cifras__rejilla .hide > *{
      transform:translateY(200%);
      transition:none;
      animation:sube-el-dato linear both;
      animation-timeline:view(block);
      animation-range:entry 35% entry 100%;
    }
    @keyframes sube-el-dato{
      from{transform:translateY(200%)}
      to{transform:translateY(0)}
    }
  }
  /* La cita entera desde que aparece: el barrido dejaba media caja en blanco y su
     ultima linea asomando bajo la barra flotante. */
  .testimonio__tapa{display:none}
  .testimonio__velo,.testimonio.visto .testimonio__velo{transition-duration:.45s}
}

@media (prefers-reduced-motion:reduce){
  .hide > *{transform:none}
  .aparece{opacity:1}
  .cinta__tramo{animation:none}
  .testimonio__velo,.testimonio__tapa{height:0}
}

/* ================================================================ 991 px */
@media screen and (max-width:991px){
  .seccion{padding:64px 0}
  .h2{font-size:48px}
  .h1{font-size:64px}
  .navbar{padding:12px 0}
  .nav-menu-wrap{
    position:absolute;top:100%;left:0;right:0;transform:none;
    margin-top:20px;display:none;
  }
  .nav-menu-wrap.abierto{display:block}
  .nav-menu{
    flex-direction:column;align-items:flex-start;gap:0;
    border-radius:var(--r-s);background:var(--blanco);
    box-shadow:0 15px 20px var(--borde);padding:16px;
  }
  .nav-menu .nav-link{margin:16px 0}
  .nav-burger{display:flex}
  .nav-container{justify-content:space-between}
  .nav-left{margin-right:0;gap:24px}
  .nav-right{gap:16px}
  .nav-link--suelto{display:none}

  .cinta__hueco{max-width:450px;height:400px;margin:0 16px}
  .seccion.seccion--cifras,.seccion.seccion--consulta,.seccion.seccion--diario{padding-bottom:64px}
  .seccion.seccion--historia{padding-bottom:64px}
  .seccion.seccion--merece{padding-top:64px}
  .merece__titular{margin-bottom:64px}
  .merece__rejilla{grid-template-columns:1fr 1fr;row-gap:48px}
  .cierre{padding-top:120px;padding-bottom:120px}
  .consulta__foto{width:100%;height:400px;max-width:none}
  .consulta__mitades{grid-template-columns:1fr}
  .cifras__mitades{grid-template-columns:1fr;gap:48px}
  .consulta__contenido{align-items:center}
  .consulta__titular,.ficha{text-align:center;align-items:center}
  .historia__titular{margin-bottom:64px}
  .historia__mitades{grid-template-columns:1fr;gap:48px}
  .seccion.seccion--video{padding-left:24px;padding-right:24px}
  .video{height:auto;padding:200px 0}
  .testimonio__foto{height:600px}
  .testimonio__derecha{width:100%;gap:48px}
  .linea--cita{margin-bottom:48px}
  .diario__titular{margin-bottom:64px}
  .pie__mitades{grid-template-columns:1fr;gap:56px}
  .pie__derecha{margin-right:0;justify-content:flex-start}
}

/* ================================================================ 767 px */
@media screen and (max-width:767px){
  .h2{font-size:40px}
  .h1{font-size:56px}
  .pieza__foto--alta{height:360px}
  .cierre{padding-top:100px;padding-bottom:100px}
  .consulta__foto{height:350px}
  .consulta__mitades{gap:56px}
  .pie__derecha{flex-wrap:wrap;gap:56px 64px}
  .cinta__hueco{max-width:300px;height:250px;margin:0 10px}
  .cinta__mascara--arriba{height:65px;top:-35px}
  .video{padding:150px 0}
  .video__boton{width:56px;height:56px}
  .video__boton svg{width:14px;height:16px}
  .testimonio__mitades{grid-template-columns:1fr;gap:32px}
  .testimonio__foto{order:2}
  .testimonio__derecha{width:100%}
  .historia__titular{gap:48px;margin-bottom:48px}
  .diario__titular{flex-wrap:wrap;gap:32px}
  .diario__mitades{grid-template-columns:1fr}
  .pie__banda-fila{flex-direction:column;align-items:flex-start;gap:24px}
}

/* ================================================================ 479 px */
@media screen and (max-width:479px){
  .marco{padding:0 16px}
  .seccion{padding:48px 0}
  .cta-main{font-size:var(--t-rotulo);padding:10px 24px}
  .h1{font-size:12.2vw}   /* 13vw parte el primer renglon en dos: el original va a dos lineas */
  .h2{font-size:36px}
  .h4{font-size:24px}
  .h5{font-size:20px}
  .texto-grande{font-size:16px;line-height:150%}
  .texto{font-size:14px;line-height:160%}
  .rotulo{font-size:10px;line-height:12px}
  .navbar-master{top:8px;padding:0 16px}
  .navbar{padding:6px 0}
  .marca{height:25px}
  .marca__nombre{font-size:21px}
  .marca__signo{width:18px;height:18px}
  .cta-main.cta-main--pequena{padding:7px 14px}
  .nav-container{padding:0}
  .hero__titular{align-items:flex-start;text-align:left;gap:24px;margin-bottom:24px}
  .hero__botones-fila{flex-wrap:wrap}
  .cinta__hueco{max-width:250px;height:200px}
  .cinta__mascara--arriba{height:50px;top:-29px}
  .cinta__mascara--abajo{height:50px;bottom:-34px}
  .seccion.seccion--cifras,.seccion.seccion--consulta,.seccion.seccion--diario,.seccion.seccion--historia{padding-bottom:48px}
  .seccion.seccion--merece{padding-top:48px}
  .linea--cifras,.linea--diario,.linea--merece{margin-bottom:48px}
  .cifras__mitades{gap:32px}
  .cifras__rejilla{column-gap:8px;row-gap:32px}
  .cifra{padding-left:16px;gap:12px}
  .consulta__contenido{align-items:flex-start}
  .consulta__titular,.ficha{text-align:left;align-items:flex-start}
  .consulta__alto{gap:32px}
  .consulta__mitades{gap:32px}
  .consulta__foto{height:300px}
  .merece__rejilla{grid-template-columns:1fr;row-gap:24px}
  .bloque{gap:20px}
  .hide > *{transform:translateY(110%)}
  .merece__titular{margin-bottom:48px}
  .bloque__chapa{width:48px;height:48px}
  .bloque__chapa svg{width:20px;height:20px}
  .historia__titular,.historia__mitades{gap:32px}
  .historia__foto{height:300px}
  .historia__derecha{gap:24px}
  .seccion.seccion--video{padding-left:16px;padding-right:16px}
  .testimonio__foto{height:300px}
  .testimonio__derecha{gap:32px}
  .testimonio__flecha{width:40px;height:40px}
  .pieza--grande{grid-template-columns:1fr}
  .pieza__foto--alta{height:240px}
  .diario__titular{margin-bottom:48px}
  .seccion.seccion--cierre{padding:56px 0}
  .pie{padding-top:24px}
  .cierre{padding:80px 24px;text-align:left;align-items:flex-start}
  .cierre__alto{align-items:flex-start}
  .boletin,.boletin__alto,.boletin__campo,.boletin__entrada{width:100%}
  .pie__derechos{flex-direction:column;align-items:flex-start;gap:24px}
  .pie__derecha{gap:48px 56px}
  .pie__enlace{font-size:var(--t-cuerpo)}
  .distintivo{right:16px;bottom:48px}
}

/* ── Distintivo de Clínicas: el camino de vuelta al portafolio ────────────────
   Lo añade scripts/publicar-piezas.mjs al publicar. NO está en la fuente de la pieza, y no debe:
   el vídeo del portafolio se graba de la fuente y ahí este sello sobra. */
.ct-firma{position:fixed;left:14px;bottom:14px;z-index:2147483000;display:inline-flex;align-items:center;gap:.35em;
  padding:.55em .85em;border-radius:999px;background:rgba(17,17,17,.84);color:#fff;
  font:500 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  letter-spacing:.01em;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 1px 4px rgba(0,0,0,.22);opacity:.6;transition:opacity .18s ease}
.ct-firma:hover,.ct-firma:focus-visible{opacity:1;color:#fff;text-decoration:none}
.ct-firma b{font-weight:700}
@media (max-width:520px){.ct-firma{left:10px;bottom:10px;font-size:11px;padding:.5em .75em}}
@media (prefers-reduced-motion:reduce){.ct-firma{transition:none}}
@media print{.ct-firma{display:none}}