/* ===========================================================
   Re:Cycla — playerassublimadas.com · concepto "Ya existe"
   Una sola página con las siete hojas del catálogo general.
   Teléfono primero: en celular cada sección fluye en una columna;
   desde 1024 px cada sección ocupa la pantalla como una hoja.
   Excon (títulos y cifras) + Satoshi (texto) · fondo #0B0B0C · naranja #F84808
   =========================================================== */

:root{
  --fondo:#0B0B0C; --panel:#141416; --blanco:#FFFFFF; --texto:#E6E6EA;
  --gris:#9A9AA0; --naranja:#F84808; --linea:rgba(255,255,255,.09);
  --nav:60px; --barra:56px; --g:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--fondo)}
body{background:var(--fondo);color:var(--blanco);overflow-x:clip;
  font-family:'Satoshi',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-bottom:0}
img{max-width:100%;display:block}
a{color:inherit}
b{font-weight:700}
ul,ol{list-style:none}
figure{margin:0}
address{font-style:normal}

/* ---------- tipografía ---------- */
.tit{font-family:'Excon','Satoshi',system-ui,sans-serif;font-weight:300;letter-spacing:-0.02em;
  line-height:1.06;text-wrap:balance;font-size:min(30px,7.6vw)}
.tit b{font-weight:700}
h1.tit{font-size:min(36px,9.3vw)}
.tit span{display:block}   /* en teléfono la segunda parte del título va en su renglón */
.raya{width:56px;height:4px;background:var(--naranja);margin-bottom:16px}
.parr{margin-top:12px;color:var(--texto);font-size:16px;line-height:1.55;max-width:64ch}
.destacado{margin-top:14px;font-weight:700;color:var(--blanco);font-size:16px;line-height:1.45;max-width:64ch}
h3{font-family:'Excon','Satoshi',system-ui,sans-serif;font-weight:700;letter-spacing:-0.01em}

/* ---------- menú fijo ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top);
  background:rgba(11,11,12,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--linea)}
.nav-in{max-width:1440px;margin:0 auto;height:var(--nav);padding:0 var(--g);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center;min-height:44px}
.nav-logo img{height:20px;width:auto}
.menu,.nav-cta{display:none}
.hamb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer}
.hamb span{display:block;width:22px;height:2px;border-radius:2px;background:var(--blanco);transition:transform .22s,opacity .22s}
.hamb.abierto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb.abierto span:nth-child(2){opacity:0}
.hamb.abierto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.panel{display:none;max-height:calc(100svh - var(--nav));overflow-y:auto;padding:4px var(--g) 14px;
  background:var(--fondo);border-top:1px solid var(--linea)}
.panel.abierto{display:block}
.panel a{display:flex;align-items:center;min-height:52px;text-decoration:none;font-size:17px;font-weight:500;
  border-bottom:1px solid var(--linea)}
.panel a:last-child{border-bottom:0;color:var(--naranja);font-weight:700}

/* ---------- hojas (teléfono: una columna) ---------- */
.hoja{position:relative;padding:56px var(--g);scroll-margin-top:var(--nav)}
.hoja + .hoja{border-top:1px solid var(--linea)}
.texto,.lado,.cabeza,.tela-lista,.kit,.fichas,.nota,.cierre-in{max-width:680px;margin-left:auto;margin-right:auto}

/* foto a todo el ancho que se funde con el negro */
.foto,.foto-panel{display:block;position:relative;margin:0 calc(-1 * var(--g))}
.foto img,.foto-panel img{width:100%;height:auto;object-fit:cover}
.foto::after,.foto-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,12,0) 0%,var(--fondo) 100%)}

/* ---------- 1 · portada ---------- */
.portada{padding-top:0}
.portada .foto img{aspect-ratio:4/5}
.portada .texto{position:relative;z-index:2;margin-top:-84px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chips li{font-size:13px;font-weight:700;line-height:1.3;color:var(--blanco);
  border:1px solid rgba(255,255,255,.5);border-radius:8px;padding:5px 11px;background:rgba(11,11,12,.35)}
.chips .insignia{background:var(--naranja);border-color:var(--naranja);text-transform:uppercase;letter-spacing:.12em;font-size:12px;padding:6px 12px}

/* ---------- video ---------- */
.video-bloque{padding:0}
.video{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.video img{width:100%;height:100%;object-fit:cover}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  border:0;cursor:pointer;color:var(--blanco);font:inherit;
  background:linear-gradient(0deg,rgba(11,11,12,.6) 0%,rgba(11,11,12,.18) 60%,rgba(11,11,12,.25) 100%)}
.play-b{width:68px;height:68px;border-radius:50%;background:var(--naranja);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.4);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.play-b svg{width:24px;height:24px;margin-left:3px;fill:var(--fondo)}
.play:hover .play-b{transform:scale(1.06)}
.play-t{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}

/* ---------- 2 · diez botellas ---------- */
.botellas{padding-top:0}
.botellas .foto-panel img{aspect-ratio:4/3}
.botellas .lado{position:relative;z-index:2;margin-top:-44px}
.cadena{width:100%;max-width:560px;height:auto;margin-top:26px}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;margin-top:30px}
.nums dt{font-family:'Excon','Satoshi',system-ui,sans-serif;font-weight:700;font-size:40px;line-height:.95;letter-spacing:-0.03em}
.nums dd{margin-top:6px;font-size:14px;color:var(--texto)}
.sellos{display:grid;gap:14px;margin-top:30px}
.sello{display:flex;align-items:center;gap:14px}
.sello img{width:96px;height:52px;object-fit:contain;object-position:left center;flex:none}
.sello p{font-size:14.5px;line-height:1.4;color:var(--texto)}
.sello b{display:block;font-size:16px;color:var(--blanco)}
.ficha{margin-top:26px;background:var(--panel);border-left:4px solid var(--naranja);border-radius:0 12px 12px 0;
  padding:15px 18px;font-size:15px;line-height:1.45;color:var(--texto)}
.ficha b{display:block;margin-bottom:3px;font-size:16px;color:var(--blanco)}

/* ---------- 3 · planta ---------- */
.planta{padding-top:0}
.planta .foto img{aspect-ratio:4/5}
.planta .texto{position:relative;z-index:2;margin-top:-72px}

/* ---------- 4 · atención personalizada: mismas tarjetas que telas ---------- */
.tela img.enfoque-oficina{object-position:50% 55%}
.tela img.enfoque-camion{object-position:50% 62%}
.tela img.enfoque-disenadores{object-position:22% 50%}
.tela img.prenda{object-fit:contain;padding:4% 3%}   /* frente a la izquierda, espalda a la derecha, sin recuadro */

/* ---------- 5 · telas ---------- */
.tela-lista{display:grid;gap:16px;margin-top:28px}
.tela{display:flex;flex-direction:column;background:var(--panel);border-radius:14px;overflow:hidden}
.tela img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.tela .t{display:flex;flex-direction:column;flex:1;padding:16px 18px 20px}
.tela h3{font-size:22px}
.tela .sub{font-size:13.5px;color:var(--gris);margin:1px 0 8px}
.tela .t > p:not(.sub):not(.para){font-size:15px;line-height:1.45;color:var(--texto)}
.chips.chicos{gap:6px;margin:12px 0 0}
.chips.chicos li{font-size:12.5px;padding:4px 9px;background:none}
.tela .para{margin-top:auto;padding-top:12px;color:var(--naranja);font-weight:700;font-size:15px;line-height:1.35}

/* ---------- 6 · qué fabricamos ---------- */
.kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 10px;margin-top:28px;text-align:center}
.kit img{width:100%;height:auto;aspect-ratio:520/646;object-fit:contain}
.kit b{display:block;margin-top:6px;font-size:14px;line-height:1.3}
.kit span{display:block;margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--gris)}
.fichas{display:grid;gap:12px;margin-top:30px}
.fichas .ficha{margin-top:0}
.nota{margin-top:18px;font-size:14px;line-height:1.5;color:var(--gris)}

/* ---------- 7 · cuéntenos su evento ---------- */
.cierre{padding-top:0}
.cierre .foto img{aspect-ratio:4/3}
.cierre-in{position:relative;z-index:2;margin-top:-48px;display:grid;row-gap:28px;
  grid-template-areas:"texto" "forma" "pasos" "autoriza" "contacto"}
.pasos{grid-area:pasos;display:grid;gap:18px}
.pasos li{border-left:2px solid rgba(255,255,255,.14);padding-left:14px}
.pasos .k{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--naranja)}
.pasos b{display:block;margin:2px 0 4px;font-family:'Excon','Satoshi',system-ui,sans-serif;font-size:19px;letter-spacing:-0.01em}
.pasos p{font-size:15px;line-height:1.45;color:var(--texto)}
.autoriza{grid-area:autoriza;margin-top:-6px}
.cierre-texto{grid-area:texto}
.forma{grid-area:forma}
.contacto{grid-area:contacto}

/* formulario de cotización (los tres campos de siempre) */
.forma{display:grid;gap:16px;padding:20px 18px;border-radius:16px;
  background:rgba(20,20,22,.95);border:1px solid var(--linea)}
.campo{display:grid;gap:6px}
.campo label{font-size:14px;font-weight:700}
.campo label em{font-style:normal;color:var(--naranja)}
.campo input,.campo textarea{width:100%;min-height:48px;font-family:inherit;font-size:16px;color:var(--blanco);
  background:var(--fondo);border:1px solid #3A3A40;border-radius:10px;padding:12px 14px;
  -webkit-appearance:none;appearance:none;transition:border-color .16s,box-shadow .16s}
.campo textarea{min-height:96px;resize:vertical;line-height:1.45}
.campo input::placeholder,.campo textarea::placeholder{color:#6F6F76}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--naranja);box-shadow:0 0 0 3px rgba(248,72,8,.25)}
.campo.mal input,.campo.mal textarea{border-color:#FF5A4A;box-shadow:0 0 0 3px rgba(255,90,74,.18)}
.tel{display:grid;grid-template-columns:76px 1fr;gap:8px}
.tel #f-lada{text-align:center;font-weight:700}
.err{display:none;font-size:13px;line-height:1.4;font-weight:700;color:#FF7A6B}
.campo.mal .err{display:block}
.ayuda{font-size:13px;line-height:1.45;color:var(--gris)}
.btn-nar{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:0 20px;
  font-family:inherit;font-size:16px;font-weight:700;color:var(--fondo);background:var(--naranja);
  border:0;border-radius:999px;cursor:pointer;transition:transform .18s cubic-bezier(.16,1,.3,1)}
.btn-nar svg{width:18px;height:18px;flex:none}
.btn-nar:hover{transform:translateY(-1px)}
.btn-nar[disabled]{opacity:.6;cursor:progress}
.nota-f{font-size:13px;line-height:1.45;text-align:center;color:var(--gris)}
.nota-f a{color:var(--blanco)}
.gracias{display:none;background:var(--fondo);border-left:4px solid var(--naranja);border-radius:0 10px 10px 0;padding:14px 16px}
.gracias.ver{display:block}
.gracias h3{font-size:17px;margin-bottom:4px}
.gracias p{font-size:14px;line-height:1.5;color:var(--texto)}
.gracias a{color:var(--naranja);font-weight:700}

.contacto{display:flex;flex-direction:column;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--texto)}
.contacto > *{display:flex;align-items:center;min-height:30px}
.contacto b{font-size:17px;color:var(--blanco)}
.contacto a{min-height:44px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.contacto .gris{color:var(--gris)}
.contacto .presencia{padding:4px 0;line-height:1.45}
.contacto .nar{color:var(--naranja);font-weight:700}

/* ---------- pie ---------- */
.pie{padding:22px var(--g) 26px;border-top:1px solid var(--linea);text-align:center;font-size:13px;color:var(--gris)}

/* ---------- botón flotante de WhatsApp (abajo a la derecha, en todas las pantallas) ---------- */
.whats{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;
  width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:transform .2s cubic-bezier(.16,1,.3,1)}
.whats:hover{transform:scale(1.06)}
.whats:focus-visible{outline:3px solid #fff;outline-offset:3px}
.whats svg{width:32px;height:32px;flex:none}

/* ---------- accesibilidad ---------- */
.saltar{position:absolute;left:-9999px;top:0;z-index:60;background:var(--naranja);color:var(--fondo);
  font-weight:700;font-size:15px;padding:12px 18px;text-decoration:none}
.saltar:focus{left:0}
:focus-visible{outline:2px solid var(--blanco);outline-offset:3px;border-radius:4px}
.campo input:focus-visible,.campo textarea:focus-visible{outline:none}
a,button,input,textarea,label{touch-action:manipulation}
a,button{-webkit-tap-highlight-color:rgba(248,72,8,.22)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ===================== TELÉFONO GRANDE Y TABLETA ===================== */
@media (min-width:600px){
  :root{--g:32px}
  .hoja{padding:72px var(--g)}
  .portada,.botellas,.planta,.cierre{padding-top:0}
  h1.tit{font-size:46px}
  .tit{font-size:36px}
  .portada .foto img{aspect-ratio:16/10;object-position:70% 50%}
  .portada .texto{margin-top:-120px}
  .planta .foto img{aspect-ratio:4/3}
  .planta .tit span,.telas .tit span,.fabricamos .tit span{display:inline}
  .video-bloque{padding:48px var(--g)}
  .video{max-width:680px;margin:0 auto;border-radius:14px}
  .nums{grid-template-columns:repeat(4,auto);justify-content:space-between}
  .tela{flex-direction:row}
  .tela img{width:42%;flex:none;align-self:flex-start}
  .tela .t{padding:18px 20px 20px}
}

/* barra: en tableta ya es botón flotante */
@media (min-width:768px){
  body{padding-bottom:0}
  .whats{right:24px;bottom:calc(24px + env(safe-area-inset-bottom))}
  .pie{padding-bottom:26px}
}

/* ===================== COMPUTADORA: cada sección es una hoja ===================== */
@media (min-width:1024px){
  :root{--nav:68px;--g:48px}
  .nav-logo img{height:22px}
  .menu{display:flex;align-items:center;gap:14px;margin-left:auto}
  .menu a{display:flex;align-items:center;min-height:44px;padding:0 8px;text-decoration:none;font-size:15px;color:rgba(255,255,255,.78);transition:color .16s}
  .menu a:hover{color:var(--blanco)}
  .nav-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;
    background:var(--naranja);color:var(--fondo);font-weight:700;font-size:15px;text-decoration:none}
  .hamb{display:none}
  .panel{display:none !important}

  .hoja{min-height:100vh;min-height:100svh;padding:calc(var(--nav) + 40px) var(--g) 56px;
    display:flex;flex-direction:column;justify-content:center;scroll-margin-top:0;
    padding-left:max(var(--g),calc((100% - 1376px) / 2));padding-right:max(var(--g),calc((100% - 1376px) / 2))}
  .texto,.lado,.cabeza,.tela-lista,.kit,.fichas,.nota,.cierre-in{max-width:none;margin-left:0;margin-right:0}
  .tit{font-size:clamp(36px,3.2vw,50px)}
  h1.tit{font-size:clamp(48px,4.6vw,72px)}
  .parr,.destacado{font-size:17px}

  /* foto de fondo a hoja completa */
  .portada .foto,.planta .foto,.cierre .foto{position:absolute;inset:0;margin:0}
  .portada .foto img,.planta .foto img,.cierre .foto img{width:100%;height:100%;aspect-ratio:auto}
  .portada .foto::after,.planta .foto::after,.cierre .foto::after{inset:0;height:auto}

  /* 1 · portada */
  .portada{justify-content:flex-end;padding-top:calc(var(--nav) + 40px);padding-bottom:88px}
  .portada .foto img{object-position:50% 50%}
  .portada .foto::after{background:
    linear-gradient(90deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.84) 30%,rgba(11,11,12,.3) 54%,rgba(11,11,12,0) 66%),
    linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,0) 18%),
    linear-gradient(0deg,rgba(11,11,12,.5) 0%,rgba(11,11,12,0) 22%)}
  .portada .texto{margin-top:0;max-width:700px}
  .portada .parr{max-width:600px}

  /* video */
  .video-bloque{align-items:center;padding:calc(var(--nav) + 40px) var(--g) 64px}
  .video{width:min(100%,calc((100svh - var(--nav) - 120px) * 16 / 9));max-width:none;border-radius:16px}
  .play-b{width:84px;height:84px}
  .play-b svg{width:30px;height:30px}
  .play-t{font-size:13px}

  /* 2 · diez botellas: foto vertical a media hoja, texto al lado */
  .botellas{padding-left:calc(50% + 56px);padding-top:calc(var(--nav) + 32px);padding-bottom:88px}
  .botellas .foto-panel{position:absolute;left:0;top:0;bottom:0;width:50%;margin:0}
  .botellas .foto-panel img{height:100%;aspect-ratio:auto;object-position:50% 70%}
  .botellas .foto-panel::after{inset:0;height:auto;background:
    linear-gradient(90deg,rgba(11,11,12,0) 66%,var(--fondo) 100%),
    linear-gradient(180deg,var(--fondo) 0%,rgba(11,11,12,0) 14%),
    linear-gradient(0deg,var(--fondo) 0%,rgba(11,11,12,0) 14%)}
  .botellas .lado{margin-top:0;max-width:660px}
  .cadena{max-width:520px;margin-top:22px}
  .nums{margin-top:24px}
  .nums dt{font-size:clamp(30px,2.7vw,46px)}
  .nums dd{white-space:nowrap}
  .sellos{gap:10px;margin-top:22px}
  .ficha{margin-top:20px}

  /* 3 · planta: la foto real a hoja completa */
  .planta{justify-content:flex-end;padding-bottom:88px}
  .planta .foto img{object-position:50% 40%}
  .planta .foto::after{background:
    linear-gradient(0deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.8) 24%,rgba(11,11,12,.2) 48%,rgba(11,11,12,0) 60%),
    linear-gradient(180deg,rgba(11,11,12,.6) 0%,rgba(11,11,12,0) 18%)}
  .planta .texto{margin-top:0;max-width:900px}

  /* 5 · telas: tres tarjetas */
  .telas .cabeza .parr,.atencion .cabeza .parr{max-width:none}
  .telas,.atencion{padding-top:calc(var(--nav) + 24px);padding-bottom:40px}
  .tela-lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px;
    width:min(100%,max(900px,calc((100svh - 500px) * 3 + 48px)))}
  .tela{flex-direction:column}
  .tela img{width:100%}
  .tela .t{padding:14px 18px 16px}
  .tela .t > p:not(.sub):not(.para){font-size:14.5px}
  .chips.chicos li{font-size:12px}

  /* 6 · qué fabricamos */
  .kit{grid-template-columns:repeat(9,minmax(0,1fr));gap:14px;margin-top:32px}
  .kit img{max-height:calc(100svh - 600px);min-height:150px;margin:0 auto}
  .kit b{font-size:14.5px;margin-top:10px}
  .kit span{font-size:13px}
  .fichas{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}
  .nota{margin-top:16px}

  /* 7 · cuéntenos su evento */
  .cierre{padding-top:calc(var(--nav) + 32px);padding-bottom:64px}
  .cierre .foto::after{background:
    linear-gradient(180deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.82) 22%,rgba(11,11,12,0) 42%),
    linear-gradient(90deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.78) 32%,rgba(11,11,12,0) 58%),
    linear-gradient(0deg,rgba(11,11,12,.7) 0%,rgba(11,11,12,0) 26%)}
  .cierre-in{margin-top:0;column-gap:64px;row-gap:0;
    grid-template-columns:minmax(0,1fr) minmax(360px,430px);
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:"pasos pasos" "autoriza autoriza" "texto forma" "contacto forma"}
  .pasos{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
  .pasos li{border-left:0;padding-left:0}
  .autoriza{margin-top:18px}
  .cierre-texto{align-self:end;margin-top:40px}
  .forma{margin-top:40px;align-self:end;padding:24px 24px 22px;background:rgba(20,20,22,.84);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .contacto{margin-top:20px;align-self:end}
  .contacto > *{min-height:26px}
  .contacto a{min-height:36px}

}

@media (min-width:1440px){
  :root{--g:64px}
  .botellas{padding-left:calc(50% + 72px)}
}

/* ===================== PANTALLAS ANCHAS (2560, ultrawide 3440, zoom chico) =====================
   Arriba de 1920 la página deja de estirarse: un lienzo de 1920 centrado, con las fotos
   desvanecidas hacia el negro en las orillas, y cada hoja con un alto máximo para que la
   foto de fondo no se recorte a una tira (orden de Alan, 9 oct, monitor LG ultrawide). */
@media (min-width:1921px){
  main#principal,.pie{max-width:1920px;margin-left:auto;margin-right:auto}
  .hoja{min-height:min(100svh,1180px)}
  .portada .foto img,.planta .foto img,.cierre .foto img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .botellas .foto-panel img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%);
            mask-image:linear-gradient(90deg,transparent 0,#000 12%)}
  .video{width:min(100%,calc((min(100svh,1180px) - var(--nav) - 120px) * 16 / 9))}
}

/* ===================== COMPACTO (9 oct, Alan: "que se vea bien en iPad; menos scroll") ===================== */
/* teléfono: las fotos de las tarjetas más bajas */
@media (max-width:599px){
  .tela img{aspect-ratio:16/10}
}
/* iPad vertical y tabletas: prendas más chicas, fotos acotadas */
@media (min-width:600px) and (max-width:1023px){
  .hoja{padding-top:48px;padding-bottom:48px}
  .kit{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 10px}
  .kit img{max-width:150px;margin:0 auto}
  .botellas .foto-panel img{max-height:46vh;object-fit:cover}
  .cierre .foto img{aspect-ratio:16/9}
  .tela img{max-height:260px;object-fit:cover}
  .video-bloque{padding:40px var(--g)}
  .texto,.lado,.cabeza,.tela-lista,.kit,.fichas,.nota,.cierre-in{max-width:none}
  .tela-lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .tela{flex-direction:column}
  .tela img{width:100%;max-height:none;aspect-ratio:4/3}
  .tela .t{padding:12px 12px 14px}
  .tela .t > p:not(.sub):not(.para){font-size:13.5px}
  .pasos{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}
/* computadora angosta y vertical (iPad Pro de pie): sin hojas a pantalla completa */
@media (min-width:1024px) and (orientation:portrait){
  .hoja{min-height:0;padding-top:calc(var(--nav) + 32px);padding-bottom:56px}
  .portada{min-height:min(62vh,820px)}
  .planta{min-height:min(52vh,700px)}
  .botellas{min-height:min(56vh,760px)}
  .cierre{min-height:0}
  .video-bloque{padding-top:56px;padding-bottom:56px}
  .video{width:100%}
  .kit{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 14px}
  .kit img{max-height:none;min-height:0;max-width:170px}
}

/* ---------- "Y mucho más" al final de las prendas, y zoom de cada prenda (9 oct) ---------- */
.kit-mas a{display:block;color:inherit;text-decoration:none}
.kit-mas .mas-caja{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:520/646;
  border-radius:14px;border:1.5px dashed rgba(248,72,8,.55);background:rgba(248,72,8,.07);color:var(--naranja);
  transition:background-color .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.kit-mas .mas-caja svg{width:34%;height:auto}
.kit-mas a:hover .mas-caja{background:rgba(248,72,8,.14);transform:translateY(-2px)}
.kit-mas b{color:var(--naranja)}
/* teléfono: tres por renglón, así que el décimo va a lo ancho como franja */
@media (max-width:599px){
  .kit-mas{grid-column:1 / -1}
  .kit-mas a{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 14px;border-radius:14px;
    border:1.5px dashed rgba(248,72,8,.55);background:rgba(248,72,8,.07)}
  .kit-mas .mas-caja{width:44px;height:44px;aspect-ratio:auto;border:0;background:var(--naranja);color:var(--fondo);border-radius:50%;flex:none}
  .kit-mas .mas-caja svg{width:22px}
  .kit-mas b{margin-top:0}
}
@media (min-width:1024px){
  .kit{grid-template-columns:repeat(10,minmax(0,1fr))}
}
@media (min-width:1024px) and (orientation:portrait){
  .kit{grid-template-columns:repeat(5,minmax(0,1fr))}
}
.kit-mas .mas-caja{max-width:150px;margin:0 auto}
@media (min-width:1024px){ .kit-mas .mas-caja{max-width:none;max-height:calc(100svh - 600px);min-height:150px} }
@media (max-width:599px){ .kit-mas .mas-caja{max-width:none;margin:0} }

/* computadora acostada: las prendas en dos filas de cinco, más grandes (9 oct, revisión visual) */
@media (min-width:1024px) and (orientation:landscape){
  .kit{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 28px;margin-top:24px}
  .kit img{max-height:calc((100svh - 440px) / 2);min-height:110px}
  .kit-mas .mas-caja{max-height:calc((100svh - 440px) / 2);min-height:110px;max-width:calc((100svh - 440px) / 2 * 520 / 646)}
}
@media (min-width:600px) and (max-width:1023px){
  .planta .foto img{max-height:44vh;object-fit:cover}
}

/* cuatro telas (9 oct: entró Marisol) */
@media (min-width:600px) and (max-width:1023px){ .tela-lista.cuatro{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){
  .tela-lista.cuatro{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .tela-lista.cuatro .tela img{max-height:calc(100svh - 520px);object-fit:cover}
}

/* ===================== TELÉFONO MÁS COMPACTO (9 oct, 18:16: "está demasiado larga la página en teléfono") ===================== */
@media (max-width:599px){
  .hoja{padding-top:40px;padding-bottom:40px}
  /* planta: la foto ancha para que se vean las dos impresoras */
  .planta .foto img{aspect-ratio:3/2;object-position:35% 50%}
  /* botellas: la foto más baja */
  .botellas .foto-panel img{aspect-ratio:16/9}
  /* atención: foto a la izquierda y texto a la derecha */
  .tela-lista.atn{gap:10px}
  .tela-lista.atn .tela{flex-direction:row;align-items:stretch}
  .tela-lista.atn .tela img{width:38%;flex:none;aspect-ratio:1/1;height:auto}
  .tela-lista.atn .tela .t{padding:10px 12px;align-self:center}
  .tela-lista.atn .tela h3{font-size:17px}
  .tela-lista.atn .tela .t > p:not(.sub){font-size:13.5px;line-height:1.35}
  /* telas: dos por renglón, solo lo esencial */
  .tela-lista.cuatro{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tela-lista.cuatro .tela img{aspect-ratio:4/3}
  .tela-lista.cuatro .tela .t{padding:10px 10px 12px}
  .tela-lista.cuatro .tela h3{font-size:16px}
  .tela-lista.cuatro .tela .sub,
  .tela-lista.cuatro .tela .t > p:not(.sub):not(.para),
  .tela-lista.cuatro .tela .chips li:first-child{display:none}
  .tela-lista.cuatro .tela .chips{margin-top:6px}
  .tela-lista.cuatro .tela .para{font-size:12.5px;padding-top:6px}
}

/* contador de botellas PET (abajo a la izquierda; el botón de WhatsApp va a la derecha) */
.contador-pet{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:39;
  display:flex;flex-direction:column;justify-content:center;min-height:52px;padding:7px 14px;border-radius:14px;
  background:rgba(11,11,12,.88);border:1px solid rgba(248,72,8,.55);box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:none}
.contador-pet b{font-family:'Excon','Satoshi',system-ui,sans-serif;font-size:18px;line-height:1.1;color:var(--naranja);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.contador-pet span{font-size:11.5px;line-height:1.2;color:var(--texto)}
@media (min-width:768px){ .contador-pet{left:24px;bottom:calc(24px + env(safe-area-inset-bottom));padding:9px 16px} .contador-pet b{font-size:21px} .contador-pet span{font-size:12.5px} }
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){ .contador-pet{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} }

.pie a{color:var(--gris);text-decoration:underline;text-underline-offset:3px}
.nota-f a{color:var(--blanco)}

/* ---------- aviso de cookies (9 oct 2026): arriba, bajo el menú (abajo están el contador y WhatsApp).
   Va en position:absolute: se ve al entrar y se va con el scroll, sin tapar el formulario. ---------- */
.aviso-cookies{position:absolute;z-index:45;left:12px;right:12px;top:calc(var(--nav) + env(safe-area-inset-top) + 8px);
  max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px 10px 14px;
  background:rgba(20,20,22,.96);border:1px solid var(--linea);border-left:3px solid var(--naranja);border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.5);font-size:13.5px;line-height:1.4;color:var(--texto);
  animation:avisoEntra .24s cubic-bezier(.16,1,.3,1)}
.aviso-cookies p{flex:1 1 260px;margin:0}
.aviso-cookies a{color:var(--blanco);text-decoration:underline;text-underline-offset:3px}
.aviso-cookies-b{display:flex;gap:8px;flex:0 0 auto;margin-left:auto}
.aviso-cookies button{min-height:40px;padding:0 14px;border-radius:999px;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.aviso-cookies .ac-si{background:var(--naranja);color:var(--fondo);border:0}
.aviso-cookies .ac-no{background:none;color:var(--texto);border:1px solid rgba(255,255,255,.22)}
.aviso-cookies button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.aviso-cookies.saliendo{opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}
@keyframes avisoEntra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .aviso-cookies{animation:none} .aviso-cookies.saliendo{transition:none} }

/* interruptor "No medir mi visita" (página de cookies) */
.medir-sw{display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;padding:14px 16px;text-align:left;
  background:var(--panel);border:1px solid var(--linea);border-radius:12px;color:var(--blanco);font:inherit;cursor:pointer}
.medir-sw .riel{position:relative;flex:none;width:48px;height:28px;border-radius:999px;background:rgba(255,255,255,.18);transition:background .2s}
.medir-sw .riel::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}
.medir-sw[aria-checked="true"] .riel{background:var(--naranja)}
.medir-sw[aria-checked="true"] .riel::after{transform:translateX(20px)}
.medir-sw b{display:block;font-size:15.5px}
.medir-sw span{display:block;font-size:13.5px;color:var(--gris)}
.medir-sw:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* pie con ligas legales; el relleno de abajo deja libres las ligas del contador y del botón de WhatsApp */
.pie .legales{display:block;margin-top:6px}
body .pie{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
/* en las páginas legales, mientras se ve el aviso, el título baja para no quedar tapado */
.con-aviso-cookies .legal{padding-top:calc(var(--nav) + 140px)}