/* ==========================================================================
   Capa de acabado (v3)
   Se carga al final: sistema de motion, profundidad, foco accesible y
   rediseño de las secciones que quedaban planas. No reemplaza app.css,
   lo termina.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root{
  --ease:cubic-bezier(.22,.61,.28,1);
  --ease-soft:cubic-bezier(.16,.84,.36,1);
  --dur-1:.18s;
  --dur-2:.34s;
  --dur-3:.55s;

  /* Sombras en capas y con temperatura cálida, no un blur plano */
  --e1:0 1px 2px rgba(44,32,24,.05),0 3px 10px rgba(44,32,24,.05);
  --e2:0 2px 4px rgba(44,32,24,.05),0 12px 28px rgba(44,32,24,.09);
  --e3:0 4px 10px rgba(44,32,24,.05),0 26px 60px rgba(44,32,24,.14);
  --e-accent:0 20px 48px rgba(189,89,24,.26);
  --e-dark:0 26px 60px rgba(0,0,0,.4);

  --hair:rgba(28,28,28,.1);
  --hair-strong:rgba(28,28,28,.22);
  --hair-light:rgba(255,255,255,.16);
  --tint:rgba(229,122,45,.07);
}

/* --- 2. Fundamentos: tipografía, foco, selección -------------------------- */

/* clip (y no hidden) recorta el sangrado de 100vw sin romper el header sticky */
body{text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3{text-wrap:balance}
p,li,figcaption,blockquote{text-wrap:pretty}

::selection{background:var(--accent);color:var(--white)}

/* El sitio no tenía anillo de foco propio en ningún control */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.home-hub :where(a,button):focus-visible,
.home-products :where(a,button):focus-visible,
.social-proof :where(a,button):focus-visible,
.hero-home :where(a,button):focus-visible,
.home-note-card--dark:focus-visible,
.cta-banner :where(a,button):focus-visible{outline-color:#ffb277}

.skip-link{transition:top var(--dur-2) var(--ease)}

/* Los anclas no quedan tapadas por el header pegajoso */
:target{scroll-margin-top:120px}

/* --- 3. Sistema de motion ------------------------------------------------ */

/* El reveal usa animation y no transition: así no se apropia de la propiedad
   `transition` de las tarjetas, que la necesitan para sus estados de hover.
   Con fill-mode backwards la animación deja de influir al terminar, y el
   transform vuelve a quedar libre para el hover. */
.js .reveal{opacity:0}
.js .reveal.is-visible{
  opacity:1;
  animation:revealIn .58s var(--ease-soft) var(--reveal-delay,0s) backwards;
}
@keyframes revealIn{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}

/* Entrada escalonada del hero: el bloque aparece completo y sus piezas
   entran en secuencia, en lugar de un solo fundido. */
.js .hero-home__copy.reveal{opacity:1;animation:none}
.js .hero-home__copy>*{animation:heroIn .95s var(--ease-soft) backwards}
.js .hero-home__copy>*:nth-child(1){animation-delay:.08s}
.js .hero-home__copy>*:nth-child(2){animation-delay:.18s}
.js .hero-home__copy>*:nth-child(3){animation-delay:.28s}
.js .hero-home__copy>*:nth-child(4){animation-delay:.38s}
.js .hero-home__copy>*:nth-child(5){animation-delay:.48s}
@keyframes heroIn{to{opacity:1;transform:none}}

/* Parallax suave de la foto del hero (lo calcula app.js) */
.hero-home__visual>picture{
  transform:translate3d(0,var(--hero-shift,0px),0) scale(var(--hero-zoom,1));
  transform-origin:70% 40%;
  will-change:transform;
}

/* --- 4. Header ----------------------------------------------------------- */

.site-header{
  transition:
    min-height var(--dur-3) var(--ease),
    background var(--dur-3) var(--ease),
    box-shadow var(--dur-3) var(--ease),
    backdrop-filter var(--dur-3) var(--ease);
}
.site-header.is-scrolled{
  min-height:76px;
  background:rgba(255,253,249,.78);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 1px 0 var(--hair),0 14px 34px rgba(44,32,24,.07);
}
.brand img{transition:width var(--dur-3) var(--ease),height var(--dur-3) var(--ease)}
.site-header.is-scrolled .brand img{width:58px;height:58px}

/* Barra de progreso de lectura */
.scroll-progress{
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  transform:scaleX(var(--progress,0));
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  pointer-events:none;
}

.desktop-nav a::after{transition:right var(--dur-2) var(--ease)}
.desktop-nav a,.header-account{transition:color var(--dur-1) var(--ease)}
.desktop-nav a:hover,.header-account:hover{color:var(--accent-dark)}
.header-account{position:relative}
.header-account::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:0;
  height:1px;
  background:var(--accent);
  transition:right var(--dur-2) var(--ease);
}
.header-account:hover::after{right:0}

.mobile-menu summary{transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.mobile-menu summary:hover{background:var(--cream);border-color:var(--hair-strong)}
.mobile-menu summary span{transition:transform var(--dur-2) var(--ease)}
.mobile-menu[open] summary span:first-child{transform:translateY(3.5px) rotate(45deg)}
.mobile-menu[open] summary span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu nav{animation:menuIn var(--dur-2) var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* --- 5. Botones y enlaces ------------------------------------------------ */

.button{
  position:relative;
  overflow:hidden;
  transition:
    background var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}
.button::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.22) 50%,transparent 64%);
  transform:translateX(-120%);
  transition:transform .75s var(--ease);
  pointer-events:none;
}
.button:hover::after{transform:translateX(120%)}
.button>span,.button>b{transition:transform var(--dur-2) var(--ease)}
.button:hover>span,.button:hover>b{transform:translate(3px,-3px)}
.button:hover{transform:translateY(-3px)}
.button:active{transform:translateY(-1px)}
.button--dark:hover{box-shadow:var(--e2)}
.button--accent:hover{box-shadow:var(--e-accent)}
.button--cream:hover{background:var(--white);box-shadow:var(--e2)}

.arrow-link{transition:color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.arrow-link span{display:inline-block;transition:transform var(--dur-2) var(--ease)}
.arrow-link:hover{color:var(--accent-dark);border-color:var(--accent)}
.arrow-link--light:hover,.home-products .arrow-link:hover{color:#f3c19f;border-color:#f3c19f}
.arrow-link:hover span{transform:translate(4px,-4px)}

/* Subrayado que crece: los enlaces de tarjeta dejan de ser texto subrayado fijo */
.service-card__body>a,
.blog-card__body>a,
.service-visual-card a,
.service-menu-card a,
.store-voucher__body a:not(.button),
.branch-card__actions a,
.school-ribbon>a,
.article-back,
.account-new a,
.footer-main>div:not(.footer-brand) a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  transition:background-size var(--dur-3) var(--ease),color var(--dur-2) var(--ease);
}
.service-card:hover .service-card__body>a,
.blog-card:hover .blog-card__body>a,
.service-visual-card:hover a,
.service-menu-card:hover a,
.branch-card:hover .branch-card__actions a,
.school-ribbon:hover>a,
.article-back:hover,
.account-new a:hover,
.footer-main>div:not(.footer-brand) a:hover,
.service-card__body>a:hover,
.blog-card__body>a:hover{background-size:100% 1px}

/* Flechas: se mueven con la tarjeta, no solo con el enlace */
.service-card__body>a span,
.blog-card__body>a span,
.product-preview__copy>a span:first-of-type,
.home-note-card b,
.home-paths b,
.location-card>b,
.social-proof__links b,
.press-list>a>b,
.product-index b{
  display:inline-block;
  transition:transform var(--dur-2) var(--ease);
}
.service-card:hover .service-card__body>a span,
.blog-card:hover .blog-card__body>a span,
.product-preview:hover .product-preview__copy>a span:first-of-type,
.home-note-card:hover b,
.home-paths>a:hover b,
.location-card:hover>b,
.social-proof__links>a:hover b,
.press-list>a:hover>b,
.product-index>a:hover b{transform:translate(4px,-4px)}

/* --- 6. Tarjetas: elevación y foco fotográfico --------------------------- */

.service-card,
.blog-card,
.product-preview,
.voucher-card,
.service-visual-card,
.store-voucher,
.account-mini,
.voucher-mini{
  transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease);
}
.service-card:hover,
.blog-card:hover,
.product-preview:hover,
.voucher-card:hover,
.service-visual-card:hover,
.store-voucher:hover{transform:translateY(-7px);box-shadow:var(--e3)}
.account-mini:hover,.voucher-mini:hover{transform:translateY(-7px);box-shadow:var(--e-dark)}

.service-card__media img,
.blog-card__image img,
.service-visual-card__image img,
.story-teaser__media img,
.school-ribbon__photo,
.press-feature__visual img,
.blog-feature__image img{
  transition:transform .8s var(--ease-soft),filter .8s var(--ease-soft);
}
.service-card:hover .service-card__media img,
.blog-card:hover .blog-card__image img,
.service-visual-card:hover .service-visual-card__image img,
.blog-feature:hover .blog-feature__image img{transform:scale(1.06)}
.story-teaser__grid:hover .story-teaser__media img{transform:scale(1.04);filter:grayscale(.35) contrast(1.03) brightness(.95)}
/* Las tapas de archivo van contenidas con margen: ampliarlas las recortaría */
.blog-card--archive:hover .blog-card__image img{transform:none}
.blog-card--archive:hover .blog-card__image::after{opacity:0}
.school-ribbon:hover .school-ribbon__photo{transform:scale(1.05)}

.service-card__media,
.blog-card__image,
.service-visual-card__image{position:relative}
.service-card__media::after,
.blog-card__image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(28,28,28,.22),transparent 55%);
  opacity:0;
  transition:opacity var(--dur-3) var(--ease);
  pointer-events:none;
}
.service-card:hover .service-card__media::after,
.blog-card:hover .blog-card__image::after{opacity:1}

.service-card__media>span{
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
  z-index:1;
}
.service-card:hover .service-card__media>span{background:var(--accent);color:var(--white)}

.product-preview__art{position:relative;overflow:hidden}
.product-preview .product-packshot>img{transition:transform .8s var(--ease-soft)}
.product-preview:hover .product-packshot>img{transform:scale(1.06)}

/* --- 7. Relleno progresivo en las superficies clicables ------------------- */

.home-paths>a,
.location-card,
.press-card,
.social-proof__links>a,
.home-note-card{position:relative;overflow:hidden}
.home-paths>a::before,
.location-card::before,
.press-card::before,
.social-proof__links>a::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ink);
  transform:scaleY(0);
  transform-origin:50% 100%;
  transition:transform var(--dur-3) var(--ease);
}
.home-paths>a:hover::before,
.location-card:hover::before,
.press-card:hover::before,
.social-proof__links>a:hover::before{transform:scaleY(1)}
/* :where() deja la especificidad en cero para no pisar a los hijos que ya
   estaban posicionados (las flechas absolutas de cada tarjeta). */
:where(.home-paths>a,.location-card,.press-card,.social-proof__links>a)>*{
  position:relative;
  z-index:1;
}
.home-paths>a,
.location-card,
.press-card,
.social-proof__links>a{transition:color var(--dur-2) var(--ease)}
.home-paths>a:hover,
.location-card:hover,
.press-card:hover{background:transparent;color:var(--white)}

/* --- 8. Rediseño: directorio de sucursales ------------------------------- */

.location-grid{border-top-color:var(--hair);border-left-color:var(--hair);background:var(--white)}
.location-card{border-right-color:var(--hair);border-bottom-color:var(--hair)}
.location-card>span{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid var(--hair-strong);
  border-radius:50%;
  color:var(--ink-soft);
  font-size:.58rem;
  letter-spacing:.02em;
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.location-card:hover>span{border-color:var(--accent);background:var(--accent);color:var(--white)}
.location-card strong{transition:transform var(--dur-2) var(--ease)}
.location-card:hover strong{transform:translateX(3px)}
.location-card small{
  display:inline-block;
  margin-top:3px;
  font-size:.58rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.location-card>b{opacity:0;transform:translate(-6px,6px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.location-card:hover>b{opacity:1;transform:none}

/* Resumen por zona: el conteo antes del listado */
.location-summary{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin:0 0 22px;
  padding:0;
  list-style:none;
  border-top:1px solid var(--hair);
}
.location-summary li{
  display:flex;
  align-items:baseline;
  gap:11px;
  padding:18px 30px 18px 0;
}
.location-summary li+li{margin-left:30px;padding-left:30px;border-left:1px solid var(--hair)}
.location-summary strong{
  font-family:var(--font-display);
  font-size:2.1rem;
  font-weight:400;
  line-height:1;
  color:var(--accent);
}
.location-summary span{
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* La invitación cierra la retícula: misma forma, jerarquía de acento */
.location-card--all{background:var(--tint);color:var(--accent-dark)}
.location-card--all::before{background:var(--accent)}
.location-card--all:hover{color:var(--white)}
.location-card--all>span{border-color:var(--accent);color:var(--accent-dark);font-weight:600}
.location-card--all:hover>span{border-color:var(--white);background:var(--white);color:var(--accent-dark)}
.location-card--all strong{color:var(--ink)}
.location-card--all:hover strong{color:var(--white)}
.location-card--all small{color:var(--ink-soft)}
.location-card--all:hover small{color:#ffe6d3}
.location-card--all>b{opacity:1;transform:none}

@media (max-width:760px){
  .location-summary li{padding:14px 16px 14px 0}
  .location-summary li+li{margin-left:16px;padding-left:16px}
  .location-summary strong{font-size:1.7rem}
}

/* --- 9. Rediseño: comunidad (banda oscura a sangre) ---------------------- */

.social-proof{
  position:relative;
  isolation:isolate;
  align-items:center;
  margin-block:0;
  padding-block:96px;
  border:0;
  color:var(--white);
}
.social-proof::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:var(--brown-deep);
}
.social-proof .eyebrow{color:#f3c19f}
.social-proof__intro h2{color:var(--white)}
.social-proof__intro p{color:#c9c0b9}
.social-proof__links{background:var(--hair-light);border-color:var(--hair-light)}
.social-proof__links>a{background:#242322;color:var(--white)}
.social-proof__links>a:hover{background:transparent;color:var(--white)}
.social-proof__links>a::before{background:var(--accent)}
.social-proof__links small{color:#b3a9a2}
.social-proof__links>a:hover small,
.social-proof__links>a:hover em{color:#ffe6d3}
.social-proof__links strong{transition:color var(--dur-2) var(--ease)}
.social-proof__links>a:hover strong{color:var(--white)}
/* Placa blanca para los logos oficiales: se muestran tal cual, sin recolorear,
   y el logo de Facebook ya trae su fondo blanco. */
.social-proof__mark{
  width:52px;
  height:52px;
  border:0;
  border-radius:14px;
  background:var(--white);
  transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease);
}
.social-proof__mark img{width:30px;height:30px}
.social-proof__links>a:hover .social-proof__mark{transform:scale(1.08) rotate(-4deg)}

/* --- 10. Rediseño: notas de prensa y franquicias ------------------------- */

.home-notes{padding-bottom:0}
.school-ribbon{
  transition:background var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease);
}
.school-ribbon:hover{background:var(--cream-2);box-shadow:var(--e2)}
.school-ribbon>a span,.school-ribbon>a{white-space:nowrap}

.home-note-card{
  border:1px solid var(--hair);
  transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease),border-color var(--dur-3) var(--ease);
}
.home-note-card::after{
  content:"";
  position:absolute;
  right:-90px;
  top:-90px;
  width:260px;
  height:260px;
  border:1px solid var(--hair);
  border-radius:50%;
  transition:transform var(--dur-3) var(--ease),border-color var(--dur-3) var(--ease);
}
.home-note-card:hover{transform:translateY(-6px);box-shadow:var(--e3);border-color:var(--hair-strong)}
.home-note-card:hover::after{transform:scale(1.15);border-color:rgba(229,122,45,.4)}
.home-note-card--dark{border-color:rgba(255,255,255,.12)}
.home-note-card--dark::after{border-color:var(--hair-light)}
.home-note-card--dark:hover{box-shadow:var(--e-dark);border-color:rgba(255,255,255,.28)}
.home-note-card h2{transition:color var(--dur-2) var(--ease)}
.home-note-card:not(.home-note-card--dark):hover h2{color:var(--accent-dark)}

/* --- 11. Rediseño: cierre / CTA ------------------------------------------ */

.cta-banner{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  align-items:center;
  background:linear-gradient(135deg,#ec8f45 0%,var(--accent) 46%,var(--accent-dark) 100%);
}
.cta-banner::before,
.cta-banner::after{
  content:"";
  position:absolute;
  z-index:-1;
  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;
  pointer-events:none;
}
.cta-banner::before{right:-130px;top:-160px;width:440px;height:440px}
.cta-banner::after{right:60px;bottom:-260px;width:340px;height:340px;border-color:rgba(255,255,255,.16)}
.cta-banner h2{text-shadow:0 1px 30px rgba(120,50,10,.18)}

/* --- 12. Accesos rápidos del inicio -------------------------------------- */

.home-paths>a{border-right-color:var(--hair)}
.home-paths>a:first-child{border-left-color:var(--hair)}
.home-paths>a>span{transition:color var(--dur-2) var(--ease)}
.home-paths>a:hover>span{color:#ffb277}
.home-paths strong{transition:transform var(--dur-2) var(--ease)}
.home-paths>a:hover strong{transform:translateX(3px)}

/* --- 13. Hero: sellos y refuerzos ---------------------------------------- */

.hero-proof div{transition:border-color var(--dur-2) var(--ease)}
.hero-proof strong{
  background:linear-gradient(180deg,var(--white),#e5ddd6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* --- 13b. Páginas internas ----------------------------------------------- */

/* Sucursales: la ficha reacciona como una tarjeta, no como una celda */
.branch-card{
  transition:background var(--dur-3) var(--ease),transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease);
}
.branch-card:hover{background:var(--white);transform:translateY(-4px);box-shadow:var(--e2)}
.branch-card__pin{transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.branch-card__pin i{transition:transform var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.branch-card:hover .branch-card__pin{border-color:var(--accent);background:var(--accent)}
.branch-card:hover .branch-card__pin i{background:var(--white);transform:scale(1.25)}

/* Prensa: la fila completa se enciende */
.press-list>a{
  padding-inline:14px;
  margin-inline:-14px;
  transition:background var(--dur-2) var(--ease);
}
.press-list>a:hover{background:var(--cream)}
.press-list h2{transition:color var(--dur-2) var(--ease)}
.press-list>a:hover h2{color:var(--accent-dark)}

/* App y vales: retículas con vida */
.benefit-grid article,
.voucher-steps>div,
.story-numbers article,
.account-stats article{transition:background var(--dur-3) var(--ease)}
.benefit-grid article:hover,
.voucher-steps>div:hover,
.story-numbers article:hover{background:var(--cream)}
.story-numbers strong,
.account-stats strong{transition:transform var(--dur-3) var(--ease)}
.story-numbers article:hover strong{transform:translateY(-3px)}

.account-appointment>a{transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.account-appointment>a:hover{background:var(--ink);border-color:var(--ink);color:var(--white);transform:scale(1.06)}

.blog-jump-links a{transition:color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),padding-left var(--dur-2) var(--ease)}
.blog-jump-links a:hover{color:var(--accent-dark);border-color:var(--accent);padding-left:6px}

.article-aside{top:calc(76px + 34px)}
.article-gallery a{overflow:hidden}
.article-gallery img{transition:transform .8s var(--ease-soft)}
.article-gallery a:hover img{transform:scale(1.05)}

/* --- 14. Formularios ----------------------------------------------------- */

.account-form input,
.account-recovery input,
.branch-tools input{
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
.branch-tools input:focus{border-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.area-filters button{
  position:relative;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);
}
.area-filters button:hover{transform:translateY(-2px)}
.area-filters button.is-active{border-color:var(--ink)}

/* --- 15. Pie de página --------------------------------------------------- */

.site-footer{border-top:1px solid var(--hair)}
.footer-logo img,.footer-brand img{transition:transform var(--dur-3) var(--ease)}
.footer-logo:hover img{transform:rotate(-4deg) scale(1.04)}
.footer-phone strong{transition:color var(--dur-2) var(--ease)}
.footer-phone:hover strong{color:var(--accent-dark)}
.social-link svg,.social-link img{transition:transform var(--dur-2) var(--ease)}
.social-link:hover svg,.social-link:hover img{transform:translateY(-2px) scale(1.06)}
.store-badge,.footer-main .store-actions a{transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease)}
.store-badge:hover,.footer-main .store-actions a:hover{transform:translateY(-3px)}

/* --- 16. Ritmo y jerarquía de secciones ---------------------------------- */

/* El alto de cada sección sigue su peso comercial, no una medida única:
   lo que lleva a agendar respira, lo secundario se compacta. */
.section{padding-block:clamp(76px,9vw,132px)}
.section-heading--split{margin-bottom:clamp(36px,4.5vw,64px)}

/* Dónde: fondo crema para separarla de Servicios, que va sobre papel */
.locations-preview{background:var(--cream)}
.locations-preview .location-grid{background:var(--paper)}
.locations-preview .location-summary{border-top-color:var(--hair-strong)}

/* Escuela de Cejas: foto, identidad y acceso a cursos en una sola tarjeta. */
.home-school{background:var(--paper);padding-block:clamp(48px,6vw,80px)}
.home-school__grid{
  display:grid;
  grid-template-columns:.8fr 1.4fr;
  gap:0;
  align-items:stretch;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.home-school__media{
  position:relative;
  min-width:0;
  margin:0;
  min-height:280px;
  overflow:hidden;
  background:var(--cream-2);
}
.home-school__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;transition:transform .9s var(--ease-soft)}
.home-school__grid:hover .home-school__media img{transform:scale(1.04)}
.home-school__copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(26px,3.5vw,44px)}
.home-school__identity{display:flex;align-items:center;gap:20px;min-width:0}
.home-school__identity>div{min-width:0}
.home-school__copy .school-ribbon__logo{width:42px;height:64px;margin:0;object-fit:contain}
.home-school__identity .eyebrow{font-size:.62rem;letter-spacing:.08em;line-height:1.6}
.home-school__identity .eyebrow::before{display:none}
.home-school__copy h2{margin:7px 0 0;font-size:clamp(1.9rem,3vw,2.8rem);font-weight:400;line-height:1.1}
.home-school__copy p{max-width:52ch;margin:20px 0 24px;font-size:.92rem;line-height:1.7}

/* Historia: banda baja, no bloque de media pantalla */
.history-strip-section{padding-block:clamp(48px,5vw,72px);background:var(--cream)}
.history-strip{
  display:grid;
  grid-template-columns:132px minmax(0,1fr) auto auto;
  align-items:center;
  gap:clamp(26px,3.4vw,52px);
  padding:22px 26px 22px 22px;
  background:var(--paper);
  border:1px solid var(--hair);
}
.history-strip__media{margin:0}
.history-strip__media img{
  width:132px;
  height:132px;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.9);
}
/* El crédito del archivo no entra sobre una foto de 132px: va debajo */
.history-strip__media figcaption{
  margin-top:9px;
  font-size:.52rem;
  line-height:1.4;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.history-strip__copy{min-width:0}
.history-strip__copy h2{margin:12px 0 8px;font-size:clamp(1.7rem,2.4vw,2.5rem);font-weight:400;line-height:1.04}
.history-strip__copy p{max-width:56ch;margin:0;font-size:.86rem}
.history-strip__facts{display:flex;gap:26px;flex:0 0 auto}
.history-strip__facts strong{
  display:block;
  font-family:var(--font-display);
  font-size:2.3rem;
  font-weight:400;
  line-height:1;
  color:var(--accent);
}
.history-strip__facts span{
  display:block;
  margin-top:6px;
  font-size:.56rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.history-strip .arrow-link{flex:0 0 auto;margin-top:0;white-space:nowrap}

/* Productos: sigue siendo banda oscura, pero más contenida */
.home-products{padding-block:clamp(62px,7vw,92px)}
.product-preview__art{height:214px}

/* Blog y notas cierran la página: menos aire que las secciones que venden */
.home-blog{padding-block:clamp(64px,7vw,96px) clamp(48px,5vw,70px)}
.blog-grid--home .blog-card__image{aspect-ratio:16/10}
.blog-grid--home .blog-card__body{padding:22px 24px 24px}
.blog-grid--home .blog-card h3{margin:14px 0 10px;font-size:1.45rem}
.home-notes{padding-bottom:0}
.social-proof{padding-block:clamp(70px,8vw,104px)}

@media (max-width:1100px){
  .history-strip{grid-template-columns:110px minmax(0,1fr) auto;row-gap:20px}
  .history-strip__media img{width:110px;height:110px}
  .history-strip .arrow-link{grid-column:2/-1;justify-self:start}
}
@media (max-width:760px){
  .history-strip-section{padding-block:44px}
  .history-strip{grid-template-columns:1fr;gap:20px;padding:18px}
  .history-strip__media img{width:100%;height:180px}
  .history-strip__facts{gap:34px}
  .history-strip .arrow-link{grid-column:auto}
  .home-school{padding-block:44px}
  .home-school__grid{grid-template-columns:86px minmax(0,1fr);gap:18px 16px;padding:18px}
  .home-school__media{height:126px;min-height:0;border-radius:8px;grid-column:1;grid-row:1}
  .home-school__media img{object-position:48% center}
  .home-school__copy{display:contents}
  .home-school__identity{grid-column:2;grid-row:1;gap:12px;align-self:center}
  .home-school__copy .school-ribbon__logo{width:28px;height:43px}
  .home-school__identity .eyebrow{font-size:.55rem;letter-spacing:.035em}
  .home-school__copy h2{font-size:1.45rem;line-height:1.15}
  .home-school__copy p{grid-column:1/-1;font-size:.85rem;line-height:1.65;margin:0}
  .home-school__copy>.button{grid-column:1/-1;justify-self:stretch;justify-content:space-between;padding:16px 18px}
  .product-preview__art{height:250px}
  .services-intro .service-card__media{aspect-ratio:16/10;max-height:240px}
  .services-intro .service-card__media img{object-position:center 55%}
}

/* --- 17. Preferencia de movimiento reducido ------------------------------ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .js .hero-home__copy>*{opacity:1;transform:none;animation:none}
  .hero-home__visual>picture{transform:none}
  .button:hover,.service-card:hover,.blog-card:hover,.product-preview:hover,
  .home-note-card:hover,.account-mini:hover,.voucher-mini:hover{transform:none}
}

/* --- 18. Adaptaciones ---------------------------------------------------- */

@media (max-width:1100px){
  .social-proof{padding-block:72px}
}
@media (max-width:760px){
  .site-header.is-scrolled{min-height:66px}
  .site-header.is-scrolled .brand img{width:52px;height:52px}
  .social-proof{padding-block:64px}
  .home-note-card::after{right:-110px;top:-110px}
  /* En táctil el hover no existe: las tarjetas se muestran ya resueltas */
  .location-card>b{opacity:1;transform:none}
}
@media (hover:none){
  .button::after{display:none}
  .location-card>b{opacity:1;transform:none}
}

/* --- 19. Hero: la foto siempre llena la caja ------------------------------
   La imagen es 1.78 y la caja del hero solo coincide con esa proporción cerca
   de los 1400px. Con object-fit:contain, cualquier otro ancho dejaba franjas
   de fondo: 111px vacíos a 1200, 279px a 900, 358px a 761. Con cover la foto
   se amplía para llenar siempre, anclada al 78 % horizontal, que es donde
   está el rostro; lo que se recorta es el lado izquierdo, que de todos modos
   queda debajo del bloque de texto.
   ------------------------------------------------------------------------ */

.hero-home__visual>picture>img{
  object-fit:cover;
  object-position:78% center;
}

/* Al llenar la caja, en anchos intermedios el rostro entra en la zona del
   texto. Este velo cae sobre la mitad izquierda —donde vive el bloque de
   texto— y se disuelve antes de llegar a la cara. */
@media (min-width:761px){
  .hero-home__visual::before{
    content:"";
    position:absolute;
    z-index:2;
    inset:0;
    background:linear-gradient(90deg,rgba(28,28,28,.93) 0%,rgba(28,28,28,.8) 26%,rgba(28,28,28,.34) 52%,rgba(28,28,28,0) 76%);
    pointer-events:none;
  }
}

/* --- 20. Hero en móvil ---------------------------------------------------
   La foto deja de ser un bloque apilado debajo del texto —que dejaba una
   franja de fondo carbón y ocupaba media pantalla sin decir nada— y pasa a
   cubrir el hero entero como fondo atenuado. El hero queda del alto de su
   propio contenido: una sola pieza, sin espacio muerto.
   ------------------------------------------------------------------------ */

@media (max-width:760px){
  .hero-home{min-height:0}
  .hero-home__copy{padding:66px 22px 60px}

  .hero-home__visual{
    position:absolute;
    inset:0;
    height:auto;
    min-height:0;
  }
  /* El parallax desplazaba la foto y dejaba asomar el fondo por arriba */
  .hero-home__visual>picture{transform:none}
  .hero-home__visual>picture>img{
    object-fit:cover;
    object-position:center 30%;
    opacity:.62;
  }

  /* Velo sobre la foto: sostiene el contraste del texto, que en el hero es
     largo (volanta, título de cuatro líneas, párrafo, botones y cifras). */
  .hero-home__visual::before{
    content:"";
    position:absolute;
    z-index:2;
    inset:0;
    background:linear-gradient(180deg,rgba(28,28,28,.7) 0%,rgba(28,28,28,.45) 44%,rgba(28,28,28,.72) 100%);
    pointer-events:none;
  }
  .hero-home__visual::after{background:none}
}

/* --- 21. Resultados y locales -------------------------------------------
   Las dos cosas que al sitio le faltaban: fotos del resultado y prueba
   física de que los locales existen. Los interiores vacíos no se muestran
   como fotos sueltas —un salón sin gente no vende— sino atenuados detrás
   de la portada de sucursales, igual que en la presentación de marca.
   ------------------------------------------------------------------------ */

.home-results{background:var(--brown-deep);color:var(--white)}
.home-results .section-heading h2{color:var(--white)}
.home-results .section-heading p{color:#c9c0b9}

.results-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px);
}
.result-shot{
  position:relative;
  min-width:0;
  margin:0;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--brown);
}
.result-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease-soft);
}
.result-shot::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(28,28,28,0) 62%,rgba(28,28,28,.5));
  opacity:0;
  transition:opacity var(--dur-3) var(--ease);
}
.results-grid:hover .result-shot img{transform:scale(1.03)}
.result-shot:hover img{transform:scale(1.06)}
.result-shot:hover::after{opacity:1}
/* La primera respira un poco más: es el detalle de la ceja, el argumento */
.result-shot:first-child{aspect-ratio:4/5}

/* Portada de sucursales sobre el interior real de un local */
.page-hero--locations{
  position:relative;
  isolation:isolate;
  background:var(--brown-deep);
  color:var(--white);
  overflow:hidden;
}
.page-hero--locations::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background:url("../../images/locales/interior-amplio.webp") center 42%/cover no-repeat;
  opacity:.5;
}
.page-hero--locations::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(28,28,28,.92) 0%,rgba(28,28,28,.78) 40%,rgba(28,28,28,.62) 72%,rgba(28,28,28,.55) 100%);
}
.page-hero--locations .eyebrow{color:#f3c19f}
.page-hero--locations p{color:#d3cbc4}

@media (max-width:1100px){
  .results-grid{gap:12px}
}
@media (max-width:760px){
  /* Tres verticales en una columna serían una tira infinita: se muestran
     en carrusel horizontal, que además invita a recorrerlas. */
  .results-grid{
    grid-template-columns:repeat(3,74%);
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(50% - 50vw);
    padding-inline:calc(50vw - 50% );
  }
  .results-grid::-webkit-scrollbar{display:none}
  .result-shot{scroll-snap-align:start}
  .result-shot:first-child{aspect-ratio:3/4}
  .page-hero--locations::before{background-position:center 45%;opacity:.42}
  .page-hero--locations::after{background:linear-gradient(180deg,rgba(28,28,28,.82),rgba(28,28,28,.66))}
}

/* Portada de agendar sobre un local real: es la página donde se decide, y
   ver el lugar donde vas a estar sentada ayuda más que un fondo liso. */
.booking-hero{
  position:relative;
  isolation:isolate;
  background:var(--brown-deep);
  color:var(--white);
  overflow:hidden;
  border-bottom:0;
}
.booking-hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background:url("../../images/locales/interior-detalle.webp") center 46%/cover no-repeat;
  opacity:.5;
}
.booking-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(28,28,28,.92) 0%,rgba(28,28,28,.78) 42%,rgba(28,28,28,.6) 100%);
}
.booking-hero .eyebrow{color:#f3c19f}
.booking-hero p{color:#d3cbc4}
.booking-context{background:rgba(255,253,249,.1);border-left-color:var(--accent)}
.booking-context span{color:#f3c19f}
.booking-context strong{color:var(--white)}
@media (max-width:760px){
  .booking-hero::after{background:linear-gradient(180deg,rgba(28,28,28,.86),rgba(28,28,28,.7))}
}