/* =====================================================================
   Zaalas — Experiencia "Sala Jaaz" (página real del producto).
   Estilos portados 1:1 desde el prototipo aprobado /experiencia/ (v19).
   Hoja AUTOCONTENIDA: define sus propias :root y reset; se encola sola en
   la single-product del producto-experiencia (main.css/style.css se quitan
   en cola en esa vista para clonar el diseño exacto).
   ===================================================================== */
  :root{
    --rojo:#2d3b32; --negro:#2d3b32; --gris:#878f88; --grisc:#F1F1EC; --blanco:#FFFFFE; --azul:#2d3b32; --laton:#F1F1EC; --crema:#F6F6F6; --error:#b5523f; --bronce:#9a8a63;
    --maxw:1340px; --ease:cubic-bezier(.22,1,.36,1);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:'Lato',system-ui,sans-serif;color:var(--negro);background:var(--crema);
       -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
  .disp{font-family:'Poppins',system-ui,sans-serif;font-weight:300;letter-spacing:-.02em;line-height:1.05}
  img{display:block;max-width:100%}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 7vw}
  .reveal{opacity:0;transform:translateY(40px)}
  .eyebrow{font-family:'Poppins';font-weight:600;font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--rojo)}
  em.red{font-style:normal;color:var(--rojo);font-weight:500}

  /* NAV — el estilo del nav vive en el bloque ".site-nav" (compartido, más abajo).
     Se ELIMINÓ el antiguo selector genérico `nav{position:fixed…}` y las reglas
     bare `.brand`/`.nav-cta`: también afectaban al <nav> del footer (lo fijaban
     arriba como menú vertical y tapaban los enlaces del nav real). */
  .progress{position:fixed;top:0;left:0;height:2px;background:var(--rojo);width:0;z-index:60}

  /* HERO (sala visible al cargar + capas de profundidad) */
  .hero{position:relative;min-height:100vh;overflow:hidden;
        background:radial-gradient(130% 95% at 50% 0%,#FFFFFE 0%,#f6f4ef 60%,#eee9df 100%)}
  /* Título arriba; queda DETRÁS del sofá (z-index bajo) → durante el parallax pasa por detrás. */
  .hero-copy{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;width:100%;max-width:1100px;
             padding:12vh 5vw 0;text-align:center;pointer-events:none}
  .hero .eyebrow{margin-bottom:22px}
  .hero h1{font-size:clamp(2.3rem,6.4vw,5rem);margin-bottom:0}
  .hero h1 .ln{display:block;overflow:hidden;padding-bottom:.05em}
  .hero h1 .ln span{display:block}
  .hero h1 em{font-style:normal;font-weight:400}
  .hero .sub{font-size:clamp(.95rem,1.3vw,1.08rem);color:#2d3b32;max-width:34ch;margin:18px auto 0;font-weight:300}
  /* Línea sutil del sofá-cama en el hero. */
  .hero-tag{margin:14px 0 0;font-family:'Poppins',sans-serif;font-weight:500;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
  /* La escena ocupa TODO el hero; el sofá ancla abajo-centro.
     La escena va POR ENCIMA del texto (z-index alto) → el texto pasa por detrás del sofá. */
  .hero-scene{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:center}
  .hl{position:absolute;bottom:0;will-change:transform}
  /* Sofá GRANDE: recorte real (ancho), dimensionado por ancho; tope de alto para no cortarse. */
  .layer--sofa{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;margin-bottom:0}
  .layer--sofa img{width:min(900px,98vw);height:auto;max-height:72vh;object-fit:contain;filter:drop-shadow(0 30px 42px rgba(0,0,0,.16))}
  .scrollcue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:6;font-size:.6rem;letter-spacing:.3em;
             text-transform:uppercase;color:var(--gris);display:flex;flex-direction:column;align-items:center;gap:9px;font-family:'Poppins'}
  .scrollcue i{width:1px;height:36px;background:var(--gris);display:block;transform-origin:top}

  /* EDITORIAL */
  .editorial{padding:21vh 0;background:var(--blanco)}
  .editorial .eyebrow{margin-bottom:28px;display:block}
  .editorial h2{font-size:clamp(2rem,5.4vw,4.6rem);max-width:17ch}
  .editorial h2 em{font-style:normal;color:var(--negro);font-weight:400}
  .editorial .lead{margin-top:32px;max-width:46ch;color:#2d3b32;font-size:1.08rem;font-weight:300}

  /* SPREAD (con parallax suave) */
  .spread{padding:13vh 0;background:var(--blanco)}
  .spread .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:center}
  .spread .ph{aspect-ratio:4/5;overflow:hidden;border-radius:5px;background:#f0ede5}
  .spread .ph img{width:100%;height:118%;object-fit:cover;will-change:transform}
  .spread h2{font-size:clamp(1.8rem,4.2vw,3.4rem);max-width:13ch}
  .spread p{margin-top:22px;max-width:40ch;color:#2d3b32;font-size:1.05rem;font-weight:300}
  .spread .eyebrow{display:block;margin-bottom:20px}

  /* FULL-BLEED (parallax profundo + desenfoque tras texto) */
  .band{position:relative;height:100vh;overflow:hidden}
  .band__media{position:absolute;inset:-19% 0;width:100%;height:138%;z-index:0;will-change:transform}
  .band__media img{width:100%;height:100%;object-fit:cover}
  .band__media img{will-change:filter}
  /* Degradado ligero: solo lo justo arriba para leer el texto en la fase inicial. */
  .band::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.12) 30%,transparent 56%)}
  .band__cap{position:absolute;left:7vw;top:16vh;z-index:3;color:#FFFFFE;max-width:24ch;
             text-shadow:0 2px 26px rgba(0,0,0,.45);will-change:filter,opacity}
  .band__cap .eyebrow{color:#FFFFFE;opacity:.95;display:inline-flex;align-items:center;margin-bottom:14px}
  .band__cap .eyebrow::before{content:"";width:22px;height:2px;background:var(--rojo);display:inline-block;margin-right:12px}
  .band__cap h2{font-size:clamp(1.8rem,4.2vw,3.4rem)}

  /* GALERÍA DE ÁNGULOS */
  .angulos{padding:18vh 0;background:var(--blanco)}
  .angulos .eyebrow{display:block;margin-bottom:18px}
  .angulos h2{font-size:clamp(1.9rem,4.6vw,3.6rem);max-width:13ch;margin-bottom:clamp(34px,5vw,56px)}
  .ang-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start}
  .ang{margin:0}
  .ang picture{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:#f0ede5}
  .ang img{width:100%;height:100%;object-fit:cover;display:block}
  .ang figcaption{margin-top:12px;font-family:'Poppins',sans-serif;font-weight:600;font-size:.68rem;
                  letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
  @media(max-width:820px){ .ang-grid{grid-template-columns:1fr;gap:26px} }

  /* TELAS */
  /* SECCIÓN VIDEO (facade YouTube): miniatura + botón de play; iframe bajo demanda */
  .pvideo{padding:18vh 0;background:var(--blanco)}
  .pvideo .eyebrow{margin-bottom:18px;display:block}
  .pvideo h2{margin:0 0 30px}
  .pvideo__frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 24px 70px rgba(45,59,50,.20)}
  .pvideo__btn{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;display:block}
  .pvideo__thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .3s ease}
  .pvideo__btn:hover .pvideo__thumb,.pvideo__btn:focus-visible .pvideo__thumb{transform:scale(1.03);filter:brightness(.9)}
  .pvideo__play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;background:var(--rojo);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 34px rgba(0,0,0,.34);transition:transform .16s ease}
  .pvideo__play svg{width:30px;height:30px;margin-left:4px;fill:#FFFFFE}
  .pvideo__btn:hover .pvideo__play,.pvideo__btn:focus-visible .pvideo__play{transform:scale(1.07)}
  .pvideo__btn:focus-visible{outline:2px solid var(--rojo);outline-offset:3px;border-radius:16px}
  .pvideo__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
  @media(max-width:560px){ .pvideo__frame{border-radius:12px} .pvideo__play{width:64px;height:64px} .pvideo__play svg{width:24px;height:24px} }
  .telas{padding:18vh 0;background:var(--grisc)}
  .telas .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:center}
  /* Visual de la sección telas: la FOTO va a tamaño completo; el círculo de textura
     va SOBREPUESTO (position:absolute) en la esquina inferior izquierda, montado
     un poco sobre el borde ("calcomanía"). No empuja ni encoge la foto. */
  .telas__visual{position:relative}
  .tela-texture{position:absolute;z-index:4;left:0;bottom:0;transform:translate(-16%,16%);
                width:clamp(116px,11vw,150px);aspect-ratio:1/1;margin:0;
                border-radius:50%;overflow:hidden;background:#f0ede5;border:4px solid #FFFFFE;box-shadow:0 18px 40px rgba(0,0,0,.24)}
  .tela-texture__layer{position:absolute;inset:0;background-size:cover;background-position:center;
                opacity:0;transition:opacity .45s var(--ease)}
  .tela-texture__layer.is-front{opacity:1}
  .telas .stage{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;
                background:#f0ede5;box-shadow:0 30px 60px rgba(0,0,0,.07)}
  /* Dos capas de foto para crossfade entre variaciones de tela. */
  .telas .stage .stage__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
                opacity:0;transition:opacity .55s var(--ease)}
  .telas .stage .stage__photo.is-front{opacity:1}
  /* Tinte de color: oculto por defecto; el JS solo lo activa como respaldo si una
     variación no tiene foto propia. z-index sobre las fotos. */
  .telas .stage .tint{position:absolute;inset:0;z-index:2;mix-blend-mode:multiply;opacity:0;
                transition:opacity .4s var(--ease),background .5s var(--ease)}
  .telas .eyebrow{display:block;margin-bottom:20px}
  .telas h2{font-size:clamp(1.9rem,4.6vw,3.6rem);margin-bottom:14px;max-width:13ch}
  .telas .desc{color:#2d3b32;font-weight:300;max-width:34ch;margin-bottom:34px;font-size:1.05rem}
  .swatches{display:flex;gap:15px;flex-wrap:wrap}
  .sw{width:52px;height:52px;border-radius:50%;cursor:pointer;border:2px solid transparent;
      box-shadow:0 4px 14px rgba(0,0,0,.12);transition:.3s var(--ease)}
  .sw[aria-pressed="true"]{border-color:var(--rojo);transform:scale(1.08)}
  .sw:hover{transform:scale(1.1)}
  .selname{margin-top:30px;font-family:'Poppins',sans-serif;font-weight:500;font-size:1.5rem;letter-spacing:-.01em}
  .badge{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:9px 18px;border-radius:40px;
         font-family:'Poppins';font-weight:600;font-size:.8rem}
  .badge.inm{background:rgba(40,160,95,.12);color:#1f8a52}
  .badge.ped{background:rgba(0,0,0,.05);color:#878f88}
  .badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
  /* En angosto: el círculo se mantiene sobrepuesto en la esquina INFERIOR IZQUIERDA,
     proporcional y con inset (sin spill negativo para no cortarse en el borde). */
  @media(max-width:820px){
    .tela-texture{left:12px;bottom:12px;transform:none;width:84px;border-width:3px;box-shadow:0 12px 26px rgba(0,0,0,.26)}
  }
  /* Precio junto al configurador de telas (visible al elegir tela). */
  .exp-price{margin-top:22px;font-family:'Poppins',sans-serif;font-weight:600;font-size:1.5rem;letter-spacing:-.01em;color:var(--negro)}
  .exp-price__ship{font-weight:500;font-size:.92rem;color:#1f8a52;letter-spacing:0}

  /* MEDIDAS Y MATERIALES */
  .ficha{padding:18vh 0;background:var(--blanco)}
  .ficha .eyebrow{display:block;margin-bottom:18px}
  .ficha h2{font-size:clamp(1.9rem,4.6vw,3.6rem);max-width:14ch;margin-bottom:clamp(30px,4vw,46px)}
  .ficha__list{margin:0;max-width:760px}
  .ficha__row{display:grid;grid-template-columns:1fr 2fr;gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid #e7e2d8}
  .ficha__row dt{font-family:'Poppins',sans-serif;font-weight:500;margin:0}
  .ficha__row dd{margin:0;color:#2d3b32;font-weight:300}
  .ficha__note{margin-top:22px;font-size:.8rem;color:var(--gris);font-weight:300}
  @media(max-width:820px){ .ficha__row{grid-template-columns:1fr;gap:.2rem} }

  /* CHECKOUT — modal minimalista */
  .modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:4vh 4vw}
  .modal[hidden]{display:none}
  .modal__backdrop{position:absolute;inset:0;background:rgba(20,18,18,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .35s var(--ease)}
  .modal__dialog{position:relative;z-index:1;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:#FFFFFE;border-radius:14px;
    box-shadow:0 40px 90px rgba(0,0,0,.3);opacity:0;transform:translateY(24px) scale(.98);transition:opacity .4s var(--ease),transform .4s var(--ease);-webkit-overflow-scrolling:touch}
  .modal.is-open .modal__backdrop{opacity:1}
  .modal.is-open .modal__dialog{opacity:1;transform:none}
  .modal__close{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid rgba(45,59,50,.14);background:#FFFFFE;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--negro)}
  .modal__body{padding:clamp(26px,4vw,44px)}
  .co__title{font-size:clamp(1.5rem,4vw,2.2rem);margin:6px 0 24px}
  .co__step{padding:18px 0;border-top:1px solid #ece7dd}
  .co__step:first-of-type{border-top:none;padding-top:0}
  .co__steplabel{font-family:'Poppins',sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rojo);margin:0 0 14px}
  #co-swatches{margin-bottom:14px}
  .co__telainfo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .co__telaname{font-family:'Poppins',sans-serif;font-weight:500;font-size:1.1rem}
  .co__price{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.1rem;color:var(--negro);margin-left:auto}
  .co__deliv{margin:0 0 12px;font-size:.92rem;color:#2d3b32;font-weight:300}
  .co__datelbl,.co__fields label{display:flex;flex-direction:column;gap:6px;font-family:'Poppins',sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.04em;color:#878f88}
  /* Calendario de entrega */
  .cal{margin-top:6px;border:1px solid #ece7dd;border-radius:14px;padding:18px 18px 16px;background:#FFFFFE}
  .cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .cal__month{font-family:'Poppins',sans-serif;font-weight:500;font-size:1.06rem;text-transform:capitalize;color:var(--negro)}
  .cal__nav{width:40px;height:40px;border-radius:50%;border:1px solid rgba(45,59,50,.14);background:#FFFFFE;font-size:1.4rem;line-height:1;color:var(--negro);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s}
  .cal__nav:hover:not(:disabled){border-color:var(--azul);color:var(--azul)}
  .cal__nav:disabled{opacity:.28;cursor:not-allowed}
  .cal__week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px}
  .cal__week span{text-align:center;font-family:'Poppins',sans-serif;font-weight:600;font-size:.66rem;letter-spacing:.06em;color:var(--gris)}
  .cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .cal__day{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:0;border-radius:10px;font-family:'Poppins',sans-serif;font-weight:400;font-size:1rem;border:1px solid transparent;background:transparent;color:#cdcac3;cursor:default;-webkit-appearance:none;appearance:none}
  .cal__day.is-empty{visibility:hidden}
  .cal__day.is-avail{color:var(--azul);background:rgba(45,59,50,.08);border-color:rgba(45,59,50,.24);cursor:pointer;font-weight:500;transition:background .14s,color .14s,transform .14s}
  .cal__day.is-avail:hover{background:rgba(45,59,50,.18);transform:translateY(-1px)}
  .cal__day.is-selected,.cal__day.is-selected:hover{background:var(--azul);color:#FFFFFE;border-color:var(--azul);font-weight:600;transform:none}
  .cal__day:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
  .cal__legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-family:'Poppins',sans-serif;font-size:.72rem;color:var(--gris)}
  .cal__lg{display:inline-flex;align-items:center;gap:8px}
  .cal__chip{width:14px;height:14px;border-radius:5px;display:inline-block}
  .cal__chip--avail{background:rgba(45,59,50,.12);border:1px solid rgba(45,59,50,.42)}
  .cal__chip--sel{background:var(--azul)}
  .co__fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .co__wide{grid-column:1/-1}
  .modal input{font-family:'Lato',system-ui,sans-serif;font-size:1rem;color:var(--negro);padding:.78em .9em;border:1px solid rgba(45,59,50,.16);border-radius:8px;background:#FFFFFE;width:100%}
  .modal input:focus-visible{outline:2px solid var(--rojo);outline-offset:1px;border-color:var(--rojo)}
  .modal input.has-error{border-color:var(--error);background:rgba(181,82,63,.04)}
  /* Selector de Estado: mismo lenguaje visual que los inputs + flecha propia (sin estilo nativo del SO). */
  .modal select{font-family:'Lato',system-ui,sans-serif;font-size:1rem;color:var(--negro);padding:.78em 2.5em .78em .9em;border:1px solid rgba(45,59,50,.16);border-radius:8px;background-color:#FFFFFE;width:100%;line-height:1.25;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231a1a1c'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9em center;background-size:14px}
  .modal select:focus-visible{outline:2px solid var(--rojo);outline-offset:1px;border-color:var(--rojo)}
  .modal select.has-error{border-color:var(--error);background-color:rgba(181,82,63,.04)}
  .modal select:required:invalid{color:#878f88}   /* "Selecciona…" en gris mientras no se elige */
  .modal select option{color:var(--negro)}
  .co__summary{margin-top:8px;background:var(--grisc);border-radius:10px;padding:20px 22px}
  .co__row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #e7e2d8;font-size:.95rem}
  .co__row span{color:var(--gris)}
  .co__row strong{font-weight:500;text-align:right}
  .co__row--total{border-bottom:none;margin-top:4px;font-size:1.05rem}
  .co__pay{width:100%;margin-top:18px;text-align:center}
  .co__pay[disabled]{opacity:.6;cursor:progress}
  .co__paymsg{margin-top:12px;font-size:.85rem;color:var(--rojo);font-weight:500;text-align:center}
  .co__paymsg.is-ok{color:#1f8a52}
  .co__note{margin-top:10px;font-size:.78rem;color:var(--gris);text-align:center}
  /* Confirmación "pedido recibido" (reemplaza el contenido del modal) */
  .co__done{text-align:center;padding:14px 0 6px}
  .co__done__check{width:64px;height:64px;border-radius:50%;background:rgba(40,160,95,.12);color:#1f8a52;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:2rem}
  .co__done h2{font-size:clamp(1.4rem,4vw,2rem);margin-bottom:10px}
  .co__done p{color:#2d3b32;font-weight:300;max-width:40ch;margin:0 auto 8px}
  .co__done .co__ordernum{font-family:'Poppins',sans-serif;font-weight:600;color:var(--negro)}
  /* Spinner de "Generando tu pago seguro…" */
  .co__spin{width:36px;height:36px;border-radius:50%;border:3px solid rgba(45,59,50,.18);border-top-color:var(--azul);margin:0 auto 18px;animation:co-spin .8s linear infinite}
  .co__spin--inline{width:15px;height:15px;border-width:2px;display:inline-block;margin:0 8px -2px 0}
  @keyframes co-spin{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){ .co__spin{animation:none} }
  body.modal-open{overflow:hidden}
  /* ===== Barra de compra sticky (producto): aparece al pasar el hero ===== */
  .buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#FFFFFE;border-top:1px solid rgba(45,59,50,.10);box-shadow:0 -8px 30px rgba(45,59,50,.10);opacity:0;transform:translateY(110%);pointer-events:none;transition:opacity .26s ease,transform .26s ease;padding-bottom:env(safe-area-inset-bottom)}
  .buybar.is-on{opacity:1;transform:none;pointer-events:auto}
  .buybar__inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 5vw}
  .buybar__price{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.06rem;color:var(--negro);line-height:1.1;white-space:nowrap}
  .buybar__btn{margin:0;white-space:nowrap;padding:.7em 1.7em}
  body.modal-open .buybar{opacity:0!important;transform:translateY(110%)!important;pointer-events:none!important}   /* nunca encima del modal */
  @media(max-width:560px){ .buybar__inner{padding:10px 16px} .buybar__price{font-size:.98rem} .buybar__btn{padding:.7em 1.4em} }
  @media(max-width:560px){ .modal{padding:0} .modal__dialog{max-height:100vh;border-radius:0} .co__fields{grid-template-columns:1fr} }
  @media(prefers-reduced-motion:reduce){ .modal__backdrop,.modal__dialog{transition:none} }

  /* CTA */
  .cta{padding:24vh 0;text-align:center;background:radial-gradient(120% 90% at 50% 25%,#FFFFFE,#f0ede5)}
  .cta .eyebrow{display:block;margin-bottom:22px}
  .cta h2{font-size:clamp(2.2rem,6vw,5rem);max-width:15ch;margin:0 auto}
  .cta h2 em{font-style:normal;color:var(--rojo);font-weight:500}
  .cta .price{margin-top:24px;font-family:'Poppins';font-weight:500;font-size:1.08rem;color:#2d3b32;letter-spacing:.02em}
  .btn{display:inline-block;margin-top:36px;background:var(--rojo);color:#FFFFFE;font-family:'Poppins';font-weight:600;
       font-size:1rem;letter-spacing:.02em;padding:19px 50px;border-radius:50px;text-decoration:none;border:none;cursor:pointer;
       transition:.3s var(--ease);box-shadow:0 16px 34px rgba(45,59,50,.26)}
  .btn:hover{background:var(--bronce);color:#FFFFFE;transform:translateY(-3px);box-shadow:0 18px 38px rgba(45,59,50,.20)}
  .foot{padding:60px 7vw;text-align:center;color:var(--gris);font-size:.8rem;background:var(--grisc);font-family:'Poppins';letter-spacing:.05em}

  @media(max-width:820px){
    .spread .grid,.telas .grid{grid-template-columns:1fr;gap:44px}
    .band__cap{max-width:82%}
  }
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

  /* =====================================================================
     NAV + FOOTER COMPARTIDOS (home + producto) — v0.18.0
     Menú limpio, legible, responsive (hamburguesa). Footer único con NAP/redes.
     Sobrescriben el nav/.foot antiguos de esta hoja.
     ===================================================================== */
  .site-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
    padding:16px 7vw;mix-blend-mode:normal;background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(45,59,50,.06);transition:background .3s var(--ease),box-shadow .3s var(--ease),padding .3s var(--ease)}
  .site-nav.is-scrolled{background:rgba(255,255,255,.97);box-shadow:0 6px 24px rgba(0,0,0,.07);padding-top:12px;padding-bottom:12px}
  .site-nav .brand{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:.2em;color:var(--negro);text-decoration:none}
  .site-nav .nav-menu{display:flex;align-items:center;gap:30px}
  .site-nav .nav-menu>a:not(.nav-cta){font-family:'Poppins',sans-serif;font-weight:500;font-size:.82rem;letter-spacing:.04em;
    color:var(--negro);text-decoration:none;opacity:.85;transition:opacity .2s,color .2s}
  .site-nav .nav-menu>a:not(.nav-cta):hover{opacity:1;color:var(--rojo)}
  .site-nav .nav-cta{font-family:'Poppins',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.04em;
    color:#FFFFFE;background:var(--rojo);border:none;padding:11px 22px;border-radius:40px;text-decoration:none;
    transition:background .2s,transform .2s;box-shadow:0 8px 20px rgba(45,59,50,.22)}
  .site-nav .nav-cta:hover{background:var(--bronce);color:#FFFFFE;transform:translateY(-1px)}
  .nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:60}
  .nav-toggle span{width:24px;height:2px;background:var(--negro);display:block;transition:transform .3s var(--ease),opacity .3s}
  .site-nav.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-nav.is-open .nav-toggle span:nth-child(2){opacity:0}
  .site-nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media(max-width:820px){
    .nav-toggle{display:flex}
    .site-nav .nav-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
      background:#FFFFFE;padding:8px 7vw 20px;box-shadow:0 16px 30px rgba(0,0,0,.1);
      transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
    .site-nav.is-open .nav-menu{transform:none;opacity:1;pointer-events:auto}
    .site-nav .nav-menu>a:not(.nav-cta){width:100%;padding:14px 0;border-bottom:1px solid #eee;font-size:.95rem;opacity:1}
    .site-nav .nav-cta{margin-top:16px;width:100%;text-align:center}
  }

  .site-foot{background:var(--negro);color:#cfcfd2;padding:clamp(48px,7vw,84px) 0 40px}
  .site-foot .wrap{max-width:var(--maxw);margin:0 auto;padding:0 7vw}
  .site-foot__grid{display:grid;grid-template-columns:1.4fr .8fr 1.3fr;gap:7vw;align-items:start}
  .site-foot .brand--dark{color:#FFFFFE;font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:.18em;font-size:1.05rem}
  .site-foot__brand p{margin:12px 0 16px;font-weight:300;font-size:.92rem;max-width:32ch}
  .site-foot__social{display:flex;gap:12px}
  .site-foot__social a{width:38px;height:38px;border-radius:50%;border:1px solid #3a3a3d;color:#cfcfd2;
    display:flex;align-items:center;justify-content:center;transition:.25s var(--ease)}
  .site-foot__social a:hover{background:var(--rojo);border-color:var(--rojo);color:#FFFFFE;transform:translateY(-2px)}
  .site-foot__nav{display:flex;flex-direction:column;gap:10px}
  .site-foot__nav a{color:#cfcfd2;text-decoration:none;font-family:'Poppins',sans-serif;font-size:.9rem}
  .site-foot__nav a:hover{color:#FFFFFE}
  .site-foot__nap{font-style:normal;font-size:.92rem;font-weight:300;line-height:1.85}
  .site-foot__nap strong{color:#FFFFFE;font-family:'Poppins',sans-serif;font-weight:600}
  .site-foot__nap a{color:#cfcfd2;text-decoration:underline}
  .site-foot__nap a:hover{color:#FFFFFE}
  .site-foot__legal{margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:1px solid #2d3b32;
    font-size:.8rem;color:#8c8c90;font-family:'Poppins',sans-serif;letter-spacing:.04em}
  @media(max-width:820px){ .site-foot__grid{grid-template-columns:1fr;gap:34px} }

  /* =====================================================================
     PÁGINA "COMPRA RECIBIDA" (order-received / thank-you) — v0.20.0
     ===================================================================== */
  .ty{padding:clamp(120px,18vh,210px) 0 12vh;min-height:82vh;
      background:radial-gradient(120% 90% at 50% 0%,#FFFFFE 0%,#f6f4ef 60%,#eee9df 100%)}
  .ty .eyebrow{display:block;margin-bottom:18px}
  .ty h1{font-size:clamp(2.1rem,5.6vw,3.8rem);max-width:18ch}
  .ty__lead{margin-top:18px;max-width:50ch;color:#2d3b32;font-weight:300;font-size:1.08rem}
  .ty__lead strong{font-weight:600;color:var(--negro)}
  .ty__card{margin:38px 0 30px;max-width:540px;background:#FFFFFE;border:1px solid #e7e2d8;border-radius:14px;
            padding:24px 28px;box-shadow:0 24px 56px rgba(0,0,0,.07)}
  .ty__cardtitle{font-family:'Poppins',sans-serif;font-weight:500;font-size:.74rem;letter-spacing:.2em;
                 text-transform:uppercase;color:var(--gris);margin-bottom:8px}
  .ty__row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #efeae0}
  .ty__row span{color:var(--gris)}
  .ty__row strong{font-weight:500;text-align:right;font-family:'Poppins',sans-serif}
  .ty__row--total{border-bottom:none;padding-bottom:0;font-size:1.12rem}
  .ty__next{display:flex;align-items:center;gap:12px;margin-bottom:32px;max-width:46ch;
            font-family:'Poppins',sans-serif;font-weight:500;color:var(--negro)}
  .ty__nexticon{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:2px solid var(--rojo);color:var(--rojo);
                display:flex;align-items:center;justify-content:center}
  .ty__actions{margin:0}
  .ty .btn{margin-top:0}

/* ===== MÓVIL: espaciado vertical de sección más compacto (menos scroll) v0.25.1 =====
   Recorte ~38% (≤768) / ~44% (≤480) del aire de sección; bandas full-screen acortadas.
   Solo responsive — el desktop NO se toca. Heroes (100vh) se conservan. */
@media(max-width:768px){
  .editorial{padding:13vh 0}
  .spread{padding:8vh 0}
  .angulos,.pvideo,.telas,.ficha{padding:11vh 0}
  .cta{padding:15vh 0}
  .band{height:66vh}
}
@media(max-width:480px){
  .editorial{padding:12vh 0}
  .spread{padding:7vh 0}
  .angulos,.pvideo,.telas,.ficha{padding:10vh 0}
  .cta{padding:14vh 0}
  .band{height:58vh}
}