/* Tipografía de la marca, blindada (2026-11-10): la de la playera es Times New Roman (DECISIONES.md). Se usa la Times del
   aparato; si no la tiene (Android), Tinos, clon libre con las mismas medidas (Apache 2.0, fuentes/LICENSE-Tinos.txt),
   servido desde el propio sitio: no depende de Google ni de nadie. */
@font-face{font-family:"Marca";font-style:normal;font-weight:400;font-display:swap;
  src:local("Times New Roman"),local("TimesNewRomanPSMT"),url("fuentes/tinos-regular.woff2") format("woff2")}
@font-face{font-family:"Marca";font-style:normal;font-weight:700;font-display:swap;
  src:local("Times New Roman Bold"),local("TimesNewRomanPS-BoldMT"),url("fuentes/tinos-bold.woff2") format("woff2")}
/* Cabeza de Ocho · dirección en DISENO.md. Lo memorable son las fotos; la interfaz calla. */
:root{
  --blanco:#FFFFFF; --tinta:#000000; --grafito:#6F6F6B; --niebla:#EDEDEB; --rosa:#E7B9B0;
  --titulo:"Marca","Times New Roman",Times,serif;
  --texto:"Marca","Times New Roman",Times,serif;
  --margen:clamp(1.25rem,5vw,4.5rem);
  --medida:38rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--blanco);color:var(--tinta);font-family:var(--texto);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--rosa)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--rosa);outline-offset:3px}
p{margin:0 0 1em}

/* Titulares: Times de la marca; las frases en negrita, como en la playera */
h1,h2,h3{font-family:var(--titulo);font-weight:400;line-height:1.08;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(1.9rem,4.6vw,3.2rem);margin-bottom:.5rem}
h3{font-size:clamp(1.35rem,3vw,1.9rem)}
.sub,.nota,.estado,.pie-foto,figcaption,.precio-nota{color:var(--grafito);font-size:.9375rem}
.sub{max-width:var(--medida);margin-bottom:2.5rem}

/* Encabezado */
.cab{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem var(--margen)}
.marca{font-family:var(--titulo);font-weight:700;font-size:1.05rem;text-decoration:none;letter-spacing:.22em;white-space:nowrap}
.cab nav{display:flex;gap:.25rem}
.cab nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .55rem;text-decoration:none;font-size:.9375rem}
.cab nav a:hover{text-decoration:underline}
.cab.sobre{position:absolute;inset:0 0 auto 0;z-index:2}

/* Botones: una sola forma, rectangular, negro */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.6rem;background:var(--tinta);
  color:var(--blanco);text-decoration:none;font-weight:500;font-size:.9375rem;letter-spacing:.01em;
  transition:background-color .2s ease,color .2s ease}
.boton:hover{background:#2b2b2b}
.enlace{display:inline-flex;align-items:center;min-height:48px;padding:0 .4rem;font-size:.9375rem}

/* Portada: la foto manda */
.apertura{display:grid;min-height:100svh}
.foto-portada{margin:0;background:var(--niebla);overflow:hidden}
.heroe{width:100%;height:100%;object-fit:cover;object-position:100% 100%;animation:aparece 1.6s ease-out both}
/* el ancla abajo a la derecha conserva la leyenda «Imagen ilustrativa» de la foto en cualquier recorte */
@keyframes aparece{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.heroe{animation:none}}
.titular{padding:2.5rem var(--margen) 3rem;align-self:end}
.titular h1{font-size:clamp(2.1rem,7vw,4.6rem);max-width:13ch;margin:.2rem 0 1.2rem}
.serie-num{font-size:.9375rem;color:var(--grafito);margin:0}
.pie-foto{margin:0}
@media (min-width:56rem){
  .apertura{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:100vh}
  .foto-portada{grid-column:2;grid-row:1;height:100vh;position:sticky;top:0}
  .titular{grid-column:1;grid-row:1;padding-bottom:4rem}
}
@media (max-width:55.99rem){
  .cab.sobre{color:var(--blanco);background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,0))}
  .apertura{min-height:0}
  .foto-portada,.heroe{height:auto}
}

/* Presentación y compra */
.presentacion{display:grid;gap:2rem;padding:clamp(3rem,8vw,7rem) var(--margen);border-top:1px solid var(--niebla)}
.lema{font-family:var(--titulo);font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.2;max-width:22ch;margin:0}
.precio{font-family:var(--titulo);font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;margin:0 0 .5rem}
.precio-nota{margin-bottom:1.4rem}
@media (min-width:56rem){.presentacion{grid-template-columns:1.4fr 1fr;align-items:end}}

/* Campaña: galería editorial, asimétrica en pantalla ancha */
.campana,.serie,.playera,.pedir{padding:clamp(3rem,8vw,7rem) var(--margen)}
.galeria{display:grid;gap:clamp(1.5rem,4vw,3.5rem)}
.galeria figure{margin:0}
.galeria img{width:100%;background:var(--niebla)}
.galeria figcaption{margin-top:.6rem}
@media (min-width:56rem){
  .galeria{grid-template-columns:repeat(12,1fr);align-items:start}
  .galeria figure:nth-child(3n+1){grid-column:1 / span 7}
  .galeria figure:nth-child(3n+2){grid-column:9 / span 4;margin-top:9rem}
  .galeria figure:nth-child(3n){grid-column:3 / span 5}
}

/* Serie: índice tipográfico I a VIII */
.indice{list-style:none;margin:0;padding:0;border-top:1px solid var(--tinta)}
.indice li{display:grid;grid-template-columns:3.2rem 1fr;gap:.25rem 1rem;padding:1.6rem 0;border-bottom:1px solid var(--niebla);align-items:start}
.romano{font-family:var(--titulo);font-size:1.15rem;padding-top:.35rem}
.indice .acciones{margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.indice .diseno{grid-column:2;max-width:15rem;margin-top:1.2rem}
.indice .pronto h3{color:var(--grafito)}
.estado{margin:.5rem 0 0}
@media (min-width:56rem){
  .indice li{grid-template-columns:5rem 1fr 15rem;column-gap:2rem}
  .indice .diseno{grid-column:3;grid-row:1;margin-top:0}
}

/* Ficha de la playera */
.ficha{margin:0;max-width:52rem}
.ficha div{display:grid;gap:.15rem 2rem;padding:1.1rem 0;border-bottom:1px solid var(--niebla)}
.ficha dt{font-weight:500}
.ficha dd{margin:0;color:#2a2a2a}
@media (min-width:40rem){.ficha div{grid-template-columns:10rem 1fr}}

/* Cómo pedir: pasos (sí es una secuencia) */
.pasos{margin:0 0 2rem;padding:0;list-style:none;counter-reset:paso;max-width:var(--medida)}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:2.4rem 1fr;padding:.7rem 0}
.pasos li::before{content:counter(paso);font-family:var(--titulo);font-size:1.3rem;line-height:1.3}
.pedir .acciones{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-bottom:1.2rem}
.pedir .nota{max-width:var(--medida)}

/* Pie */
.pie{padding:3rem var(--margen) 7rem;border-top:1px solid var(--tinta);font-size:.9375rem}
.pie p{margin:0 0 .6rem}
.pie a{display:inline-flex;align-items:center;min-height:44px;margin-right:1.1rem}
.marca-pie{font-family:var(--titulo);font-weight:700;font-size:1.3rem;letter-spacing:.22em}

/* Barra fija para pedir, solo en celular */
/* textos en columna a la izquierda: la esquina derecha la tapa el botón «Powered by Netlify» del plan gratis (no se puede quitar, 2026-11-11) */
.barra-pedir{position:fixed;inset:auto 0 0 0;z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.1rem;padding-right:13rem!important;
  min-height:56px;padding:.5rem var(--margen) calc(.5rem + env(safe-area-inset-bottom));background:var(--tinta);color:var(--blanco);
  text-decoration:none;font-weight:500;font-size:.9375rem}
@media (min-width:56rem){.barra-pedir{display:none}.pie{padding-bottom:3rem}}

/* Páginas de texto (tallas, términos, privacidad) */
body:not(.inicio) .cab{border-bottom:1px solid var(--niebla)}
body:not(.inicio) main{max-width:46rem;padding:clamp(2rem,6vw,4rem) var(--margen) 4rem}
body:not(.inicio) h1{font-size:clamp(2.2rem,6vw,3.4rem);margin-bottom:1.5rem}
body:not(.inicio) h2{font-size:1.6rem;margin:2.4rem 0 .6rem}
body:not(.inicio) .barra-pedir{display:none}
body:not(.inicio) .pie{padding-bottom:3rem}
.borrador{background:var(--niebla);color:var(--tinta);text-align:center;font-weight:500;padding:.7rem var(--margen);font-size:.9375rem}
.aviso{color:var(--grafito)}
table{border-collapse:collapse;width:100%;font-size:.9375rem;margin:1rem 0 2rem}
caption{text-align:left;font-weight:500;padding:.4rem 0}
th,td{border-bottom:1px solid var(--niebla);padding:.65rem .4rem;text-align:center}
thead th{border-bottom:1px solid var(--tinta);font-weight:500}
tbody th{text-align:left;font-weight:400}
.tabla{overflow-x:auto}

/* Las frases van en negrita, igual que en la espalda */
.titular h1,.indice h3{font-weight:700;letter-spacing:-.005em}
/* En la playera el ∞ se dibuja más grande que las letras (firma.py, con_infinito) */
.ocho{font-size:1.45em;line-height:0;vertical-align:-.08em;letter-spacing:0}

/* Test de gustos */
.invita{margin:1.2rem 0 0;font-size:.9375rem}
.invita a{display:inline-flex;align-items:center;min-height:44px}
.oculto{position:absolute;left:-9999px}
.test{width:min(34rem,calc(100% - 2rem));max-height:calc(100svh - 2rem);border:0;padding:0;background:var(--blanco);color:var(--tinta)}
.test::backdrop{background:rgba(0,0,0,.55)}
.test form{padding:1.6rem clamp(1.25rem,5vw,2.4rem) 2rem}
.test-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.progreso{margin:0;color:var(--grafito);font-size:.9375rem}
.cerrar{background:none;border:0;font:inherit;font-size:.9375rem;color:var(--grafito);min-height:44px;padding:0 .2rem;cursor:pointer;text-decoration:underline;text-underline-offset:.22em}
.test h2{font-size:clamp(1.7rem,6vw,2.3rem);font-weight:700;margin-bottom:.4rem}
.test-intro{color:var(--grafito);font-size:.9375rem;margin-bottom:1.4rem}
.test fieldset{border:0;margin:0 0 1rem;padding:0}
.test legend{font-size:1.15rem;margin-bottom:.8rem;padding:0}
.opcion{display:flex;align-items:center;gap:.8rem;min-height:48px;padding:.55rem .9rem;margin-bottom:.5rem;border:1px solid var(--niebla);cursor:pointer}
.opcion:has(input:checked){border-color:var(--tinta);background:#F7F7F5}
.opcion input{accent-color:var(--tinta);width:1.1rem;height:1.1rem;margin:0;flex:none}
.tallas{display:flex;flex-wrap:wrap;gap:.5rem}
.tallas .opcion{margin:0;min-width:4.2rem;justify-content:center}
.campo{display:block;font-size:1.15rem;margin-bottom:.6rem}
.test input[type=text]{width:100%;min-height:48px;padding:.6rem .8rem;border:1px solid var(--tinta);font:inherit;border-radius:0;background:var(--blanco)}
.acepto{display:flex;gap:.7rem;align-items:flex-start;margin:1rem 0;font-size:.9375rem}
.acepto input{accent-color:var(--tinta);width:1.1rem;height:1.1rem;margin-top:.25rem;flex:none}
.falta{color:#8A1C1C;font-size:.9375rem}
.test-botones{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-top:1.4rem}
.test-botones .boton{margin-left:auto;border:0;font:inherit;font-weight:500;cursor:pointer}
.test-botones .enlace{background:none;border:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:.22em}
.r-num{color:var(--grafito);margin:0}
.r-frase{font-size:clamp(1.8rem,7vw,2.6rem);font-weight:700;line-height:1.08;margin:.3rem 0 1rem}
.r-descuento{border-top:1px solid var(--tinta);margin-top:1.4rem;padding-top:1rem}
.r-codigo{font-size:1.6rem;font-weight:700;letter-spacing:.12em;margin:.2rem 0}
.test.en-resultado h2,.test.en-resultado .test-intro{display:none}