/* ═══ CAPA FINAL: fotos reales + bloques ═══ */
.ph{position:relative;overflow:hidden;background:var(--nacar-2)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}

/* HERO con foto */
.hh{position:relative;min-height:min(100svh,780px);display:grid;align-items:end;isolation:isolate;overflow:hidden}
/* OJO con el selector: `.hh picture` alcanzaba TAMBIÉN al <picture> de la
   tarjeta flotante, que se agregó después. Esa miniatura quedaba en
   position:absolute con z-index:-2, o sea DETRÁS del fondo crema de la
   tarjeta: se veía un cuadro vacío. Se limita al hijo directo. */
.hh > picture,.hh img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;z-index:-2}
.hh::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* lateral: pesa hacia donde vive el texto, se apaga antes de la mitad */
    linear-gradient(100deg,rgba(20,14,12,.46) 0%,rgba(20,14,12,.28) 28%,rgba(20,14,12,.06) 54%,rgba(20,14,12,0) 72%),
    /* vertical: empieza a cerrar en 28% porque en 1440 la línea de prueba
       social cae al 36% de la foto y es el texto con menos piso debajo */
    linear-gradient(180deg,rgba(20,14,12,.30) 0%,rgba(20,14,12,.08) 16%,rgba(20,14,12,.07) 28%,rgba(20,14,12,.26) 40%,rgba(20,14,12,.46) 56%,rgba(20,14,12,.66) 74%,rgba(20,14,12,.78) 90%,rgba(20,14,12,.82) 100%)}
.hh-in{position:relative;z-index:2;display:grid;gap:1.3rem;padding:var(--gut);padding-bottom:clamp(1.5rem,4vw,2.6rem);align-items:end;color:#fff}
/* La línea de prueba social es el texto más alto del bloque, o sea el que
   menos degradado tiene debajo: en 1440 se quedaba en 3.91:1. Se le da
   una sombra corta y densa (piso local, no un cuadro) además de la difusa. */
.hh .social{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#fff;margin-bottom:.65rem;
  text-shadow:0 1px 2px rgba(16,10,9,.95),0 0 6px rgba(16,10,9,.85),0 2px 16px rgba(16,10,9,.7)}
.hh .social .st{color:#F2CF97;letter-spacing:.08em}
.hh h1{color:#fff;font-size:clamp(2.35rem,1.6rem + 3.3vw,4rem);line-height:.97;letter-spacing:-.03em;max-width:13ch;text-shadow:0 2px 30px rgba(20,14,12,.45)}
.hh-sub{color:rgba(255,255,255,.93);max-width:30ch;margin-top:.6rem;font-size:var(--lg);text-shadow:0 1px 16px rgba(20,14,12,.55)}
.hh-cta{margin-top:1.15rem;display:flex;gap:.6rem;flex-wrap:wrap}
.btn-l{background:#FAF7F2;color:var(--ink)}.btn-l:hover{background:#fff}
.btn-g{border-color:rgba(255,255,255,.6);color:#fff}.btn-g:hover{background:rgba(255,255,255,.15)}

/* tarjeta de pieza en el hero */
.hh-card{background:rgba(250,247,242,.96);backdrop-filter:blur(12px);border-radius:.65rem;padding:.7rem;
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;max-width:23rem;
  box-shadow:0 16px 42px -20px rgba(20,14,12,.7);text-decoration:none}
.hh-card .ph{width:74px;aspect-ratio:1;border-radius:.4rem;flex:none}
.hh-card .pill{display:inline-block;background:var(--wine);color:var(--paper);font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.18rem .48rem;border-radius:2rem;margin-bottom:.25rem}
.hh-card h3{font-size:1.02rem;font-weight:500}
.hh-card .pr{font-family:'Fraunces',serif;font-size:1.06rem;margin-top:.05rem}
.hh-card .pr small{font-family:'Hanken';font-size:.74rem;color:var(--ink-soft)}

/* beneficios estáticos (sin marquesina) */
.bn{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.bn-in{display:grid;grid-template-columns:repeat(2,1fr)}
.bn div{padding:.85rem 1rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  text-align:center;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.bn div:nth-child(2n){border-right:0}

/* intención */
.iq{display:grid;grid-template-columns:1fr;gap:.65rem;margin-top:1.6rem}
.iq a{display:flex;align-items:center;justify-content:space-between;gap:1rem;text-decoration:none;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:.55rem;padding:1rem 1.1rem;
  transition:background .25s var(--e),border-color .25s var(--e),transform .2s var(--e)}
.iq a:hover{background:#fff;border-color:var(--wine);transform:translateY(-2px)}
.iq b{font-family:'Fraunces',serif;font-weight:500;display:block}
.iq small{color:var(--ink-soft);display:block;font-size:.83rem}
.iq .ar{width:1.9rem;height:1.9rem;border-radius:50%;background:var(--wine);color:var(--paper);
  display:grid;place-items:center;flex:none;transition:transform .25s var(--e)}
.iq a:hover .ar{transform:translateX(3px)}

/* piezas con foto + quick add */
.grid .frame{aspect-ratio:1;background:none;border:1px solid var(--rule)}
.qa{position:absolute;right:.5rem;bottom:.5rem;width:2.75rem;height:2.75rem;min-width:44px;min-height:44px;border-radius:50%;
  background:rgba(250,247,242,.94);color:var(--wine);display:grid;place-items:center;border:1px solid var(--rule);
  cursor:pointer;font-size:1.05rem;line-height:1;transition:transform .2s var(--e),background .2s var(--e)}
.qa:hover{background:var(--wine);color:var(--paper)}
.qa:active{transform:scale(.9)}
@media (hover:hover) and (pointer:fine){
  .qa{opacity:0;transform:translateY(6px)}
  .piece:hover .qa,.qa:focus-visible{opacity:1;transform:none}
}

/* stock honesto */
.stk{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--ink-soft);margin-top:.35rem}
.stk i{width:.5rem;height:.5rem;border-radius:50%;flex:none;font-style:normal}
.s-ok{background:#2E7D57}.s-low{background:#C08A2E}.s-out{background:#A79A94}

/* boceto real */
.sk-sec{background:var(--paper-2);border-block:1px solid var(--rule)}
.sk-grid{display:grid;gap:1.6rem;align-items:center}
.sk-grid .ph{border-radius:.5rem;border:1px solid var(--rule);rotate:-1deg;
  box-shadow:.5px 1px 1.2px rgba(60,40,35,.05),2px 4px 4.8px -.8px rgba(60,40,35,.05),5px 10px 12px -1.6px rgba(60,40,35,.06)}

/* UGC */
.ugc{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;
  overscroll-behavior-x:contain;scrollbar-width:thin;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.ugc::-webkit-scrollbar{height:5px}.ugc::-webkit-scrollbar-thumb{background:var(--rule);border-radius:99px}
.ugc-c{flex:0 0 clamp(9.5rem,44vw,12rem);scroll-snap-align:start;position:relative;aspect-ratio:9/16;
  border-radius:.5rem;overflow:hidden;border:1px solid var(--rule);text-decoration:none;
  transition:transform .3s var(--e)}
.ugc-c:hover{transform:translateY(-3px)}
.ugc-c img{width:100%;height:100%;object-fit:cover}
.ugc-c figcaption{position:absolute;left:0;right:0;bottom:0;padding:.55rem .65rem;color:#fff;font-size:.76rem;
  background:linear-gradient(0deg,rgba(26,18,17,.8),transparent)}

@media (min-width:48rem){
  .bn-in{grid-template-columns:repeat(4,1fr)}
  .bn div{border-bottom:0}
  .bn div:nth-child(2n){border-right:1px solid var(--rule)}
  .bn div:last-child{border-right:0}
  .iq{grid-template-columns:repeat(2,1fr)}
  .sk-grid{grid-template-columns:.85fr 1.15fr;gap:2.5rem}
}
@media (min-width:62rem){
  .hh-in{grid-template-columns:1.15fr auto}
  .iq{grid-template-columns:repeat(4,1fr)}
}
.hh-card{color:var(--ink);display:none}
.hh-card h3,.hh-card .pr{color:var(--ink)}
@media (min-width:62rem){ .hh-card{display:grid} }
.hh-card .ph img{width:100%;height:100%}
.ph picture{display:block;width:100%;height:100%}

/* ── EL BOCETO SE REVELA, ahora sobre la foto real ──
   Mismo gesto que antes: un círculo que crece desde arriba, como si
   la mano fuera descubriendo el dibujo. Se dispara al entrar en pantalla,
   no al cargar, porque la sección vive a mitad del scroll. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .sk-grid .ph img{
      clip-path:circle(0% at 50% 12%);
      animation:sk-reveal both;
      animation-timeline:view();
      animation-range:entry 6% cover 34%;
    }
  }
}
@keyframes sk-reveal{to{clip-path:circle(140% at 50% 12%)}}

/* el papel entra apenas inclinándose */
@media (prefers-reduced-motion:no-preference){
  .sk-grid .ph{transition:rotate .6s var(--e)}
  .sk-grid .ph:hover{rotate:0deg}
}

/* etiqueta "foto pendiente": ya no aplica, quedan fotos reales */
.tagph{display:none}

/* ══ La capa de vida, extendida a los bloques nuevos ══
   Se quedaron fuera cuando se agregaron junto con las fotos. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .iq a, .ugc-c, .bn div{
      animation:rise both;
      animation-timeline:view();
      animation-range:entry 3% cover 20%;
    }
    /* la franja de beneficios entra de izquierda a derecha */
    .bn div:nth-child(1){animation-range:entry 2% cover 16%}
    .bn div:nth-child(2){animation-range:entry 4% cover 18%}
    .bn div:nth-child(3){animation-range:entry 6% cover 20%}
    .bn div:nth-child(4){animation-range:entry 8% cover 22%}
    /* los cuadros de intención, escalonados */
    .iq a:nth-child(1){animation-range:entry 2% cover 18%}
    .iq a:nth-child(2){animation-range:entry 5% cover 21%}
    .iq a:nth-child(3){animation-range:entry 8% cover 24%}
    .iq a:nth-child(4){animation-range:entry 11% cover 27%}
  }
}

/* el carrusel de clientas: la foto crece apenas dentro del marco */
@media (hover:hover) and (pointer:fine){
  .ugc-c img{transition:scale .55s var(--e)}
  .ugc-c:hover img{scale:1.06}
  .ugc-c figcaption{transition:padding-bottom .3s var(--e)}
  .ugc-c:hover figcaption{padding-bottom:.85rem}
}

/* pista de que el carrusel se desliza: la última asoma cortada */
.ugc::after{content:"";flex:0 0 .3rem}

/* el token que faltaba */
.stk i{transition:transform .3s var(--e)}
.piece:hover .stk i{transform:scale(1.35)}

/* ══ MARQUESINA DE SERVICIO ══
   Vuelve, pero bien: se pausa en hover y en focus, con máscara en
   los bordes para que no corte seco, y solo con hechos permanentes.
   Lo que la lista negra prohíbe es el marquee decorativo con fecha
   de campaña (que caduca y nadie actualiza), no éste. */
.mq{
  position:relative;overflow:hidden;background:var(--wine);
  color:rgba(250,247,242,.94);padding-block:.62rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.mq-track{display:flex;width:max-content;align-items:center;gap:2.6rem;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.mq-track span{display:flex;align-items:center;gap:2.6rem}
.mq-track span::after{content:"·";opacity:.45}
@media (prefers-reduced-motion:no-preference){
  .mq-track{animation:mq-slide 38s linear infinite}
  .mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}
}
@keyframes mq-slide{to{transform:translateX(-50%)}}

/* la franja estática se va: decía exactamente lo mismo 300px abajo */
.bn{display:none}

/* ══ A11Y — auditoría 13-ago-2026 ══ */
/* touch targets ≥44px (WCAG 2.5.8 / Apple HIG) sin romper el ritmo visual */
.navlinks a,.f-col a,.mark,.bag,.link-u{display:inline-flex;align-items:center;min-height:44px}
.f-col a{min-height:44px}
@media (max-width:760px){ .f-col a{padding-block:.35rem} }
/* foco visible en TODO lo enfocable */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--wine);outline-offset:3px;border-radius:.25rem}
.hh a:focus-visible,.ugc a:focus-visible{outline-color:#fff}
/* refuerzo local de contraste bajo el bloque de texto del hero */
/* NO usar un scrim anclado a .hh-in: ese elemento es .wrap (ancho máximo
   centrado), así que el degradado se dibuja como un RECTÁNGULO con bordes
   verticales duros encima de la foto. Se veía como un cuadro pegado.
   El scrim tiene que ser a sangre completa y vive en .hh::after. */
/* el botón fantasma sobre foto necesita piso propio */
.hh .btn-g{background:rgba(18,12,11,.42);backdrop-filter:blur(3px);border-color:rgba(255,255,255,.7)}
.hh .btn-g:hover{background:rgba(18,12,11,.62)}
/* footer y breadcrumb: área táctil real (el selector .f-col no existía en este footer) */
.site .fgrid a{display:inline-flex;align-items:center;min-height:44px}
.site .fgrid .mark{min-height:44px}
nav[aria-label="Ruta"] a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
.hh .social a{display:inline-flex;align-items:center;min-height:44px}

/* La regla del nav vivía en .nav, que está dentro de .wrap (ancho máximo):
   sobre el hero se veía como una rayita que se corta a media pantalla.
   Se pasa al <header> a sangre completa. */
.nav{border-bottom:0}
header.wrap{position:relative}
header.wrap::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:100vw;max-width:100%;height:1px;background:var(--rule)}
body>header.wrap::after{width:100vw;max-width:none}