/* ------------------------------------------------------------------
   Veganits · la web como láminas (07-09-2026)

   La primera versión era un sitio corriente con tarjetas, tablas y
   párrafos, y el CEO no reconoció en ella las 30 piezas de Instagram.
   Tenía razón. Este archivo reproduce el sistema de `gen30.py`:

     · foto a sangre que llena la lámina
     · tipografía Archivo 900 enorme encima, con interletrado -0.045em
       y altura de línea 0.9
     · una sola línea con caja jade detrás, como `caja_bg`
     · la pegatina «sí.» girada, con su borde blanco y su sombra
     · la banda del llamado abajo, de 150 px en las piezas
     · el grano encima de todo
     · y las tres bases que alternan: negro, jade y crema, que es de
       donde sale la luz

   Los valores de color y las proporciones salen de `gen30.py`, no de
   ojo, para que la web y las piezas se vean de la misma mano.
   ------------------------------------------------------------------ */

:root {
  --jade: #00A878;
  --pino: #0F3D2E;
  --crema: #F2F1EC;
  --negro: #0A0B0A;
  --pebre: #E4442B;
  --gris: #8F968F;
  --banda: 116px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--crema);
  font-family: Archivo, system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* El grano de las 30 piezas, encima de todo y sin estorbar el puntero. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: 0.10; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
}

/* ── La lámina ──────────────────────────────────────────────────── */

.lamina {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
/* Sin foto, pegar el contenido abajo deja media pantalla muerta. Se centra.
   `safe` evita que un contenido más alto que la pantalla se salga por arriba:
   sin eso el formulario, que mide 842 px, quedaba debajo de la marca. */
.lamina-jade, .lamina-crema, .lamina-negro { justify-content: safe center; }
.lamina > img {
  /* -2 y no -1: el velo es un ::before y con el mismo nivel gana el que va después
     en el DOM, que es la imagen. Con los dos en -1 el velo quedaba tapado y no hacía
     nada, y los titulares sobre foto medían 1,1:1 contra un mínimo de 3. */
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Un velo que baja de transparente a negro: sin él la tipografía blanca
   se pierde sobre las zonas claras del plato. */
.lamina.foto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom,
    rgba(10,11,10,0.60) 0%, rgba(10,11,10,0.22) 22%, rgba(10,11,10,0.55) 42%,
    rgba(10,11,10,0.88) 58%, rgba(10,11,10,0.96) 74%, rgba(10,11,10,0.98) 100%);
}
.lamina .dentro {
  padding: 0 clamp(22px, 4.4vw, 64px) clamp(30px, 4vw, 54px);
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}
/* Después del abreviado a propósito: con la misma especificidad, gana el último. */
.lamina-jade .dentro, .lamina-crema .dentro, .lamina-negro .dentro {
  /* El mínimo tiene que superar la altura real de la marca: 30 + 46 + 30 = 106 px.
     Con 104 chocaba por 2 px en una pantalla de 768 de alto. */
  padding-top: clamp(152px, 15vh, 200px);
  padding-bottom: calc(var(--banda) + clamp(30px, 4vw, 54px));
}

.gigante {
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.9;
  margin: 0;
  font-size: clamp(46px, 9.4vw, 132px);
  text-wrap: balance;
  /* En las 30 piezas el titular nunca ocupa todo el ancho. Sin este límite, a
     1440 el renglón más largo llegaba a 1182 px y la pegatina empieza en 1172:
     se comía diez píxeles de letra. */
  /* Dos límites a la vez, porque un solo número no sirve: la pegatina se coloca
     contra el borde de la pantalla y el titular contra un contenedor centrado de
     1.360 px, así que a anchos medios se cruzaban aunque a 1920 no. El segundo
     término reserva siempre el sitio de la pegatina. */
  max-width: min(16ch, calc(100% - 250px));
}
.mediano { max-width: min(20ch, calc(100% - 250px)); }
@media (max-width: 860px) { .gigante, .mediano { max-width: 100%; } }
.mediano { font-size: clamp(34px, 5.6vw, 80px); }

/* La caja detrás de una línea, igual que `caja_bg` en las piezas. */
.caja {
  background: var(--jade);
  color: var(--negro);
  padding: 0 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.lamina-jade .caja { background: var(--negro); color: var(--jade); }
.lamina-crema .caja { background: var(--jade); color: var(--negro); }

.bajada {
  margin: 18px 0 0;
  font-size: clamp(16px, 1.5vw, 21px);
  color: var(--crema);
  max-width: 42ch;
  font-weight: 600;
  text-shadow: 0 1px 14px rgba(10, 11, 10, 0.85);
}
.lamina-jade .bajada, .lamina-crema .bajada { text-shadow: none; }
.lamina-jade .bajada { color: var(--negro); }
.lamina-crema .bajada { color: #3C423C; }

/* La banda del llamado, abajo del todo. */
.banda {
  margin-top: clamp(26px, 3.4vw, 40px);
  margin-left: calc(clamp(22px, 4.4vw, 64px) * -1);
  margin-right: calc(clamp(22px, 4.4vw, 64px) * -1);
  margin-bottom: calc(clamp(30px, 4vw, 54px) * -1);
  min-height: var(--banda);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px clamp(22px, 4.4vw, 64px);
  background: var(--jade); color: var(--negro);
  font-weight: 900; letter-spacing: -0.03em;
  font-size: clamp(21px, 2.6vw, 34px);
  text-decoration: none;
}
.banda:hover { background: var(--crema); }
/* La banda iba en las ocho láminas y el corte de color se leía como error. Queda
   en la portada y en el cierre, que es donde de verdad pide algo. */
.sin-banda .banda { display: none; }
/* Y sin banda tampoco se le reserva sitio: 146 px de relleno abajo esperando algo
   que no se dibuja son 146 px de vacío en cada lámina de color. */
.sin-banda .dentro { padding-bottom: clamp(30px, 4vw, 54px); }
.lamina-jade .banda, .lamina-crema .banda {
  background: var(--negro); color: var(--crema);
  /* Con el contenido centrado, la banda seguía al texto y quedaba a media
     lámina con base debajo. Va clavada al fondo. */
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
}
.lamina-jade .banda:hover, .lamina-crema .banda:hover { background: #1A1D1A; }

/* Las bases que alternan. La luz de la página sale de acá. */
.lamina-jade { background: var(--jade); color: var(--negro); }
.lamina-crema { background: var(--crema); color: var(--negro); }
.lamina-negro { background: var(--negro); color: var(--crema); }

/* ── La pegatina «sí.» ──────────────────────────────────────────── */

.pegatina {
  position: absolute; z-index: 3;
  right: clamp(22px, 4.4vw, 64px);
  top: clamp(118px, 13vh, 176px);
  padding: 12px; background: #FFFFFF; border-radius: 27%;
  box-shadow: 0 30px 60px rgba(0,0,0,0.42), 0 4px 10px rgba(0,0,0,0.25);
  transform: rotate(9deg);
  display: inline-flex;
}
.pegatina.izquierda { transform: rotate(-8deg); }

.sello {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 22%; font-weight: 900; letter-spacing: -0.03em; line-height: 1;
  background: var(--jade); color: var(--negro);
}
.lamina-jade .pegatina .sello { background: var(--negro); color: var(--jade); }
.punto {
  display: inline-block; border-radius: 50%;
  background: var(--crema); vertical-align: baseline;
}
.lamina-jade .pegatina .punto { background: var(--jade); }

.sello-g { width: clamp(96px, 12vw, 168px); height: clamp(96px, 12vw, 168px); font-size: clamp(42px, 5.3vw, 74px); }
.sello-g .punto { width: 0.20em; height: 0.20em; margin-left: 0.03em; }
.sello-p { width: clamp(52px, 5vw, 72px); height: clamp(52px, 5vw, 72px); font-size: clamp(23px, 2.2vw, 32px); }
.sello-p .punto { width: 0.20em; height: 0.20em; margin-left: 0.03em; }

/* ── La barra de arriba ─────────────────────────────────────────── */

/* La marca va DENTRO de cada lamina, como en las 30 piezas, y toma el color de
   su base. Un encabezado fijo con mix-blend-mode se ponia rosado sobre la crema,
   porque jade menos crema da rosa. */
.arriba {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: clamp(18px, 2.4vw, 30px) clamp(22px, 4.4vw, 64px);
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marca .nombre { font-weight: 900; font-size: clamp(28px, 3.1vw, 44px); letter-spacing: -0.045em; }
.cuenta { font-weight: 700; font-size: clamp(14px, 1.3vw, 18px); color: inherit; text-decoration: none; }
.lamina.foto .cuenta { text-shadow: 0 1px 12px rgba(10,11,10,0.9); }
.lamina.foto .arriba { color: var(--crema); }
.lamina-jade .arriba, .lamina-crema .arriba { color: var(--negro); }
.lamina-jade .marca .sello { background: var(--negro); color: var(--jade); }
.lamina-jade .marca .punto { background: var(--jade); }

/* ── El dato grande, como las piezas 12, 16 y 26 ────────────────── */

.rotulo {
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  font-size: clamp(13px, 1.2vw, 16px); color: var(--pebre); margin: 0 0 20px;
}
.lamina-jade .rotulo, .lamina-crema .rotulo { color: var(--negro); }
.cifra { font-size: clamp(96px, 20vw, 268px); font-weight: 900; letter-spacing: -0.06em; line-height: 0.82; margin: 0; }
.fuente { font-size: clamp(13px, 1.2vw, 16px); color: #4A504A; margin: 26px 0 0; font-weight: 500; }
.lamina-crema .fuente { color: #4A504A; }
.lamina-jade .fuente { color: var(--negro); }

/* ── Los pasos ──────────────────────────────────────────────────── */

.pasos { counter-reset: paso; margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.pasos li {
  counter-increment: paso; display: flex; gap: clamp(16px, 2vw, 28px); align-items: baseline;
  padding: clamp(14px, 1.8vw, 22px) 0; border-top: 2px solid rgba(10,11,10,0.16);
  font-weight: 900; letter-spacing: -0.035em; line-height: 1;
  font-size: clamp(24px, 3.4vw, 46px);
}
.pasos li::before { content: counter(paso); flex: 0 0 auto; opacity: 0.34; }
.pasos li span { font-weight: 600; font-size: clamp(14px, 1.3vw, 17px); letter-spacing: 0; color: var(--negro); display: block; margin-top: 10px; line-height: 1.4; opacity: 0.82; }

/* ── El formulario ──────────────────────────────────────────────── */

form { display: grid; gap: 14px; max-width: 540px; margin-top: 30px; }
label { display: grid; gap: 6px; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
input[type=text], input[type=tel] {
  font-family: inherit; font-size: 18px; font-weight: 600; padding: 14px 16px; min-height: 54px;
  border-radius: 12px; border: 2px solid rgba(10,11,10,0.18); background: rgba(255,255,255,0.5);
  color: var(--negro);
}
input::placeholder { color: rgba(10,11,10,0.38); }
input:focus { outline: 3px solid var(--negro); outline-offset: 1px; }

.marcar { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 600; }
.marcar .casilla { position: relative; flex: 0 0 44px; height: 44px; margin: -10px 0 -10px -10px; }
.marcar .casilla input { position: absolute; inset: 0; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.marcar .casilla span {
  position: absolute; left: 10px; top: 10px; width: 24px; height: 24px;
  border: 2px solid rgba(10,11,10,0.35); border-radius: 7px; background: rgba(255,255,255,0.5); pointer-events: none;
}
.marcar .casilla input:checked + span { background: var(--negro); border-color: var(--negro); }
.marcar .casilla input:checked + span::after {
  content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px;
  border: solid var(--jade); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.marcar .casilla input:focus-visible + span { outline: 3px solid var(--negro); outline-offset: 3px; }
.marcar .texto { padding-top: 3px; }

.enviar {
  min-height: 60px; padding: 0 32px; border: 0; border-radius: 12px;
  background: var(--negro); color: var(--jade); font-family: inherit;
  font-size: clamp(19px, 2vw, 24px); font-weight: 900; letter-spacing: -0.03em; cursor: pointer;
}
.enviar:hover { background: #1A1D1A; }
.aviso { font-size: 15px; font-weight: 700; padding: 14px 16px; border-radius: 11px; display: none; }
.aviso.mal { display: block; background: var(--pebre); color: #FFF; }
.aviso.bien { display: block; background: var(--negro); color: var(--jade); }

/* ── Las preguntas ──────────────────────────────────────────────── */

.preguntas { padding: clamp(56px, 8vw, 110px) clamp(22px, 4.4vw, 64px); max-width: 1000px; margin: 0 auto; }
.preguntas h2 { font-size: clamp(34px, 5.4vw, 72px); font-weight: 900; letter-spacing: -0.045em; line-height: 0.92; margin: 0 0 34px; }
details { border-top: 1px solid #23271F; }
summary {
  cursor: pointer; padding: 20px 0; font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 800; letter-spacing: -0.025em; list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--jade); font-weight: 900; }
details[open] summary::after { content: "–"; }
details p { color: var(--gris); font-size: 17px; padding-bottom: 18px; margin: 0; max-width: 68ch; }

footer {
  padding: 40px clamp(22px, 4.4vw, 64px) calc(40px + var(--banda));
  color: var(--gris); font-size: 15px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
footer a { color: var(--gris); }

/* ── El llamado fijo en móvil ───────────────────────────────────── */

.fijo { display: none; }
@media (max-width: 860px) {
  header .cuenta { display: none; }
  /* En movil, forzar la pantalla completa en una lamina de color deja un vacio de
     300 a 400 px, porque el texto es corto y la foto no esta para llenarlo. Las de
     color se ajustan a su contenido; las de foto siguen a pantalla completa, que es
     donde la imagen tiene que respirar. */
  .lamina.foto { min-height: 92svh; }
  .lamina-jade, .lamina-crema { min-height: 0; }
  .lamina-jade .dentro, .lamina-crema .dentro { padding-top: clamp(104px, 13vh, 140px); }
  /* Con la lámina al alto de su contenido, el titular sube y queda debajo de la
     pegatina. En pantalla angosta la pegatina se achica y el titular arranca más
     abajo, para que no se pisen. Medido a 390: se montaban 60 px. */
  .pegatina { padding: 8px; top: 58px; }
  .pegatina .sello-g { width: 72px; height: 72px; font-size: 32px; }
  /* Medido a 390: la pegatina termina en 146 px. El titular arranca en 176 y así
     quedan 30 px de aire. Con 152 se montaban 18. */
  .lamina-jade .dentro, .lamina-crema .dentro { padding-top: 176px; }
  .fijo {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
    transition: transform 0.2s ease;
  }
  .fijo a {
    display: flex; align-items: center; justify-content: center; min-height: 62px;
    background: var(--jade); color: var(--negro); text-decoration: none;
    font-weight: 900; font-size: 21px; letter-spacing: -0.03em;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .fijo.guardada { transform: translateY(110%); }
  /* La barra fija repetía «Inscribe tu local» sobre la portada, que ya trae su
     banda verde. Dos llamados iguales en la misma pantalla se leen como error. */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* Un sello chico abajo a la derecha en las láminas de color, como en las piezas
   de dato, que lo llevan de firma. */
.firma { position: absolute; right: clamp(22px, 4.4vw, 64px); bottom: calc(var(--banda) + clamp(34px, 4vw, 56px)); z-index: 3; }
.lamina-crema .firma .sello { background: var(--jade); color: var(--negro); }
.lamina-crema .firma .punto { background: var(--crema); }
@media (max-width: 860px) { .firma { display: none; } }

/* ── Dos columnas donde el contenido lo pide ────────────────────────
   Con el formulario en una sola columna, la mitad derecha de la lámina
   quedaba vacía en pantallas anchas. El titular se va a la izquierda y
   el formulario a la derecha, y la lámina se llena. Lo mismo con los
   pasos. Bajo 900 px vuelve a una columna. */
.dos { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (min-width: 900px) {
  .dos { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: clamp(40px, 5vw, 80px); }
  .dos form { margin-top: 0; max-width: none; }
  .dos .pasos { margin-top: 0; }
}

/* ── El pie, con arte propio ─────────────────────────────────────────
   Un tejido de sellos «sí.» a distintos tamaños y giros, dibujado en SVG
   y puesto como fondo. No es una textura comprada: son las piezas de la
   marca repetidas, que es lo que la hace nuestra. */
footer {
  position: relative;
  padding: clamp(64px, 9vw, 130px) clamp(22px, 4.4vw, 64px) calc(clamp(56px, 7vw, 100px) + var(--banda));
  background: var(--pino);
  color: var(--crema);
  overflow: hidden;
  display: block;
}
footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'><g fill='%2300A878'><rect x='18' y='26' width='72' height='72' rx='17' transform='rotate(-9 54 62)'/><rect x='168' y='8' width='46' height='46' rx='11' transform='rotate(12 191 31)'/><rect x='248' y='96' width='96' height='96' rx='23' transform='rotate(7 296 144)'/><rect x='104' y='128' width='58' height='58' rx='14' transform='rotate(-14 133 157)'/><rect x='6' y='196' width='104' height='104' rx='25' transform='rotate(11 58 248)'/><rect x='186' y='236' width='64' height='64' rx='15' transform='rotate(-7 218 268)'/><rect x='286' y='268' width='40' height='40' rx='10' transform='rotate(16 306 288)'/></g><g fill='%23F2F1EC' opacity='0.5'><circle cx='72' cy='84' r='6'/><circle cx='324' cy='176' r='8'/><circle cx='92' cy='284' r='9'/><circle cx='236' cy='288' r='5'/></g></svg>");
  background-size: 340px 340px;
}
footer .pie {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap;
  max-width: 1360px; margin: 0 auto;
}
footer .pie .grande { font-weight: 900; letter-spacing: -0.045em; font-size: clamp(30px, 4.6vw, 66px); line-height: 0.95; }
footer .pie p { margin: 12px 0 0; font-size: clamp(15px, 1.4vw, 18px); color: #BFD6CC; max-width: 46ch; }
footer a { color: var(--jade); font-weight: 700; }
footer a:hover { color: var(--crema); }
footer .sello { background: var(--jade); color: var(--negro); }
footer .punto { background: var(--pino); }