/* ─────────────────────────────────────────────────────────────────────────────
   Sistema de diseño · Anyel Palacios · «Comedia en mi cocina, con flores»
   La única fuente de estilo: todo carrusel, página, email y video enlaza este archivo.
   Aquí se cambian los valores. En las piezas nunca se escribe un color ni una fuente a mano.
   ───────────────────────────────────────────────────────────────────────────── */

/* Sus fuentes (bajadas con herramientas/fuentes.py a fonts/). Una línea por familia. */
@import url("fonts/baloo-2.css");
@import url("fonts/nunito.css");
@import url("fonts/gochi-hand.css");
@import url("fonts/sacramento.css");

@import url("trazos.css");

:root {
  /* ── Color: cuatro, cada uno con su trabajo ── */
  --fondo:  #FFF8EC;   /* crema de su cocina: donde vive casi todo */
  --tinta:  #3B2418;   /* chocolate del granito: el texto y la línea */
  --acento: #C0362A;   /* rojo tomate, el de sus raíces: una cosa por pantalla */
  --apoyo:  #BFDDEB;   /* celeste de su ropa: acompaña, tarjetas, pastillas, marcador */
  --blanco: #FFFFFF;
  --sobre-acento: #FFFFFF;     /* sobre el rojo tomate, letra blanca (5.5) */
  /* Lo que va sobre una tarjeta blanca se ve igual de día y de noche. Estas copias se resuelven
     aquí arriba, por eso conservan los colores de día aunque la tarjeta esté dentro de .modo-oscuro.
     Un color propio que tampoco deba cambiar de noche se declara aquí con su valor escrito (hex). */
  --tinta-papel: #3B2418;
  --acento-papel: #C0362A;
  --apoyo-papel: #BFDDEB;
  --sobre-acento-papel: #FFFFFF;
  /* sus dos colores que juegan (no cambian de noche) */
  --lila:  #D9CCF0;    /* juega: cintas, pastillas, la acuarela de la estrella. Lleva letra chocolate */
  --oliva: #6E7041;
  --vino:  #7B2333;    /* el borgoña de su cocina: tercer fondo de lámina (.modo-vino), con letra crema */    /* hojas y ramitas. Nunca lleva letra chocolate encima */
  --linea: #3B2418;    /* la línea chocolate de stickers, burbujas y botones: igual de día y de noche */

  /* ── Letras: una por trabajo ── */
  --f-titulo:  "Baloo 2", system-ui, sans-serif;
  --f-enfasis: "Baloo 2", system-ui, sans-serif;
  --f-cuerpo:  "Nunito", system-ui, sans-serif;
  --f-mano:    "Gochi Hand", cursive;
  --f-firma:   "Sacramento", cursive;   /* solo su firma: su nombre y nada más */

  --peso-titulo: 800;
  --f-pieza: var(--f-cuerpo);  /* la letra de pastillas y botones */
  --peso-pieza: 900;
  --track-titulo: -0.025em;
  --track-cuerpo: -0.005em;
  --alto-titulo: .92;
  --alto-cuerpo: 1.5;
  --enfasis-escala: 1;       /* la palabra clave va del mismo tamaño, sobre su bloque rojo */
  --enfasis-estilo: normal;

  /* ── Forma ── */
  --radio-lamina: 22px;
  --radio-pastilla: 999px;
  --borde-lamina: 4px;       /* su línea chocolate */
  --giro: -2deg;             /* sus piezas van un poquito giradas, como stickers */
  --sombra: 10px 10px 0 var(--linea);   /* sombra dura, sin difuminar */
}

/* ── Tamaños de lámina (1080 px de ancho). Una lámina SIEMPRE mide esto, esté donde esté. ── */
:root, .lamina {
  --t-hook: 112px;           /* portada */
  --t-titulo: 88px;          /* título de lámina */
  --t-sub: 46px;
  --t-cuerpo: 40px;
  --t-nota: 56px;            /* Gochi Hand se ve chica: va un poco más grande */
  --t-chico: 30px;
  --radio: var(--radio-lamina);
  --borde: var(--borde-lamina);
  --margen: 90px;            /* aire mínimo al borde */
}
/* Presentación (1920 × 1080): se lee desde el fondo de un salón y en un recuadro de Zoom */
.lamina.pres { --t-hook: 150px; --t-titulo: 96px; --t-sub: 56px; --t-cuerpo: 40px; --t-nota: 64px; --t-chico: 36px; --margen: 110px; }
/* Reel (1080 × 1920): se ve más chico en pantalla, la letra va más grande */
.lamina.reel { --t-hook: 120px; --t-titulo: 104px; --t-sub: 60px; --t-nota: 76px; --t-chico: 38px; --margen: 80px; }

/* ── En video: el hook y los subtítulos también son parte de su marca ── */
:root {
  --t-hook-video: 84px;            /* el título del hook, sobre un video de 1080 de ancho */
  --t-subtitulo: 112px;            /* subtítulos de una palabra */
  --subtitulo-color: #FFFFFF;
  --subtitulo-clave: #F07A63;      /* la palabra destacada: su rojo de noche, que sí se lee sobre video */
  --subtitulo-clave-escala: 1.4;   /* cuánto más grande va la palabra destacada */
  --velo-color: #2B1A12;           /* su chocolate de noche: el velo detrás del hook y la sombra de las letras */
  --velo-video: color-mix(in srgb, var(--velo-color) 60%, transparent);
  --pantalla-completa: color-mix(in srgb, var(--tinta) 80%, transparent);  /* frase a pantalla completa: se ve ella detrás */
}

/* ── Modo oscuro: sobre color fuerte, foto o video ── */
.modo-oscuro {
  --fondo: #2B1A12;          /* chocolate de noche */
  --tinta: #FFF8EC;
  --apoyo: color-mix(in srgb, #FFF8EC 16%, transparent);
  --acento: #F07A63;         /* el tomate no se lee de noche: pasa a rojo coral (6.1) */
  --sobre-acento: #2B1A12;   /* sobre el coral, letra chocolate */
}


/* ── Su borgoña: el rojo vino de su cocina, como fondo de una lámina ──
   Letra crema (9.3). La nota a mano va en lila (6.5); la palabra clave, en bloque crema con letra vino. */
.modo-vino {
  --fondo: #7B2333;
  --tinta: #FFF8EC;
  --apoyo: color-mix(in srgb, #FFF8EC 16%, transparent);
  --acento: #D9CCF0;
  --sobre-acento: #7B2333;
}

/* ── Base ── */
.sd, .lamina, .sd-pagina {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);
  line-height: var(--alto-cuerpo);
  letter-spacing: var(--track-cuerpo);
}

/* ── Texto ── */
.hook, .titulo, .sub {
  font-family: var(--f-titulo);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--track-titulo);
  line-height: var(--alto-titulo);
  margin: 0;
  text-wrap: balance;
}
.hook   { font-size: var(--t-hook); }
.titulo { font-size: var(--t-titulo); }
.sub    { font-size: var(--t-sub); }
.cuerpo { font-size: var(--t-cuerpo); margin: 0; text-wrap: pretty; }
.chico  { font-size: var(--t-chico); }

/* Una o dos palabras de énfasis dentro de un título. Nunca texto corrido. */
.enfasis {
  font-family: var(--f-enfasis);
  font-style: var(--enfasis-estilo);
  font-weight: 400;
  font-size: calc(1em * var(--enfasis-escala));
  letter-spacing: -0.01em;
}
.resaltado { background: linear-gradient(transparent 58%, var(--apoyo) 58%); padding: 0 .08em; }
.modo-oscuro .enfasis { color: var(--acento); }

/* Nota a mano: comentario corto al margen */
.nota-mano {
  font-family: var(--f-mano);
  font-size: var(--t-nota);
  line-height: 1.05;
  letter-spacing: 0;
  display: inline-block;
  transform: rotate(calc(var(--giro) * -1.5));
}

/* ── Piezas ── */
.pastilla {
  display: inline-block;
  font-family: var(--f-pieza);
  font-weight: var(--peso-pieza);
  font-size: var(--t-chico);
  letter-spacing: var(--track-cuerpo);
  line-height: 1;
  padding: .55em 1em;
  border-radius: var(--radio-pastilla);
  background: var(--apoyo);
  color: var(--tinta);
  border: var(--borde) solid var(--tinta);
  transform: rotate(var(--giro));
}
.pastilla.fuerte { background: var(--acento); color: var(--sobre-acento); }
.pastilla.tinta  { background: var(--tinta); color: var(--fondo); }

.tarjeta {
  background: var(--blanco);
  color: var(--tinta-papel);
  border-radius: var(--radio);
  border: var(--borde) solid var(--tinta);
  box-shadow: var(--sombra);
  padding: 1.1em 1.2em;
  transform: rotate(var(--giro));
}
.tarjeta.apoyo { background: var(--apoyo); color: var(--tinta); }
/* dentro de una tarjeta blanca todo vuelve a los colores de día */
.tarjeta:not(.apoyo) { --tinta: var(--tinta-papel); --acento: var(--acento-papel); --apoyo: var(--apoyo-papel); --sobre-acento: var(--sobre-acento-papel); }
.tarjeta:not(.apoyo) .enfasis { color: inherit; }

.boton {
  display: inline-block;
  font-family: var(--f-pieza);
  font-weight: var(--peso-pieza);
  letter-spacing: var(--track-cuerpo);
  line-height: 1;
  padding: .85em 1.5em;
  border-radius: var(--radio-pastilla);
  background: var(--acento);
  color: var(--sobre-acento);
  border: var(--borde) solid var(--tinta);
  text-decoration: none;
}
.boton.linea { background: transparent; color: var(--tinta); border: 2px solid var(--tinta); }

/* Su foto: recortada o en marco, siempre real */
.foto { border-radius: var(--radio); box-shadow: var(--sombra); object-fit: cover; display: block; }
.foto.enmarcada { border: solid var(--blanco); border-width: .5em .5em 1.7em; border-radius: 6px; }
/* para inclinarla o pegarle algo encima (una cinta), la foto va dentro de una caja */
.pegada { display: inline-block; position: relative; transform: rotate(var(--giro)); }

/* Foto a pantalla completa detrás del texto (reel, portada) y el velo que deja leer encima.
   El texto va en el aire libre de la foto: nunca sobre su cara ni su cuerpo. Si falta aire arriba,
   la foto se agranda un poco (height: 112%) para bajarla a ella. */
.foto-fondo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.velo { position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--fondo) 55%, transparent), transparent 46%); }

/* Un trazo a mano: el dibujo es un SVG puesto como máscara (--m: url(...)) y toma el color del texto.
   Para voltearlo: primero se refleja y después se gira (transform: rotate(…) scaleX(-1)). */
.trazo { display: inline-block; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }

/* ── Sus piezas propias ──
   De su mezcla «Comedia en mi cocina, con flores»: lo juguetón de la 2, el lápiz y las flores de la 3,
   su firma fina y la ondita roja de la 1. Máximo 2 dibujos o stickers por pieza, más su firma. */

/* La palabra clave va sobre un bloque rojo tomate, como un sticker de texto, de día y de noche.
   Reemplaza al énfasis del molde (también cuando lleva .resaltado). */
.enfasis, .enfasis.resaltado, .modo-oscuro .enfasis {
  font-weight: 800;
  background: var(--acento-papel);
  color: var(--sobre-acento-papel);
  padding: 0 .16em .02em;
  border-radius: .14em;
  display: inline-block;
  transform: rotate(-2deg);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.tarjeta:not(.apoyo) .enfasis { color: var(--sobre-acento-papel); }

/* Pastillas y botones gruesos, con su línea y su sombra dura */
.pastilla { font-weight: 900; border-color: var(--linea); }
.pastilla.lila { background: var(--lila); color: var(--tinta-papel); }
.boton { border: 3px solid var(--linea); box-shadow: var(--sombra); }
.tarjeta { border-color: var(--linea); }

/* Burbuja de diálogo: lo que dice su clienta, un meme, un "yo a las 8 p. m.".
   Siempre blanca con letra chocolate, con su colita abajo a la izquierda. */
.burbuja {
  position: relative;
  background: var(--blanco); color: var(--tinta-papel);
  border: var(--borde) solid var(--linea); border-radius: 1.1em;
  box-shadow: var(--sombra);
  padding: .8em 1em .9em;
}
.burbuja::after {
  content: ""; position: absolute; width: .9em; height: .9em;
  background: var(--blanco); border: inherit; border-top: 0; border-left: 0;
  bottom: -.5em; left: 18%; transform: rotate(45deg); border-radius: 0 0 .18em 0;
}
.burbuja.derecha::after { left: auto; right: 18%; }

/* Sticker: su foto recortada con borde blanco grueso, línea chocolate y girada.
   Es su manera de mostrarse y de mostrar su comida real. */
.sticker {
  display: block; background: var(--blanco);
  padding: var(--sticker-borde); border-radius: calc(var(--radio) + 4px);
  border: var(--borde) solid var(--linea); box-shadow: var(--sombra);
  transform: rotate(calc(var(--giro) * -2));
}
.sticker img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radio) * .55); }
:root, .lamina { --sticker-borde: 18px; --cinta-ancho: 190px; }
.sd-pagina { --sticker-borde: 10px; --cinta-ancho: 110px; }

/* Cinta adhesiva lila: pega un sticker o una nota. Una por pieza. */
.cinta {
  position: absolute; width: var(--cinta-ancho); height: calc(var(--cinta-ancho) * .28);
  background: color-mix(in srgb, var(--lila) 85%, transparent); transform: rotate(-8deg);
  border-left: 3px dashed color-mix(in srgb, #FFFFFF 80%, transparent);
  border-right: 3px dashed color-mix(in srgb, #FFFFFF 80%, transparent);
}

/* La ondita roja de la 1, debajo de un título importante (portada, página). Una por pieza.
   Uso: <span class="trazo t-subrayado onda"></span> justo después del título. */
.onda { display: block; width: 4.4em; height: 1.2em; color: var(--acento); font-size: var(--t-sub); margin-top: .1em;
  -webkit-mask-size: 100% auto; mask-size: 100% auto; }

/* Su firma (y su logo): "Anyel Palacios" en Sacramento con su huellita de gato en acuarela.
   Va al cierre de cada pieza. La huellita es solo de la firma. */
.firma {
  display: inline-flex; align-items: center; gap: .14em;
  font-family: var(--f-firma); font-weight: 400; line-height: 1; white-space: nowrap;
  letter-spacing: 0;
}
.huella { position: relative; display: inline-block; width: .9em; height: .9em; flex: none; }
.huella::before, .huella::after { content: ""; position: absolute; inset: 0; }
.huella::before { background: var(--acento-papel); opacity: .45; transform: translate(.04em, .04em);
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZyBmaWxsPSIjMDAwIj48cGF0aCBkPSJNNTMgNTAgQyA2OCA1MCwgODIgNjQsIDgwIDc3IEMgNzggODksIDY2IDg4LCA1NCA4NSBDIDQyIDg4LCAzMCA4OSwgMjggNzcgQyAyNiA2NCwgNDAgNTAsIDUzIDUwIFoiLz48ZWxsaXBzZSBjeD0iMjIiIGN5PSI0NCIgcng9IjkiIHJ5PSIxMiIgdHJhbnNmb3JtPSJyb3RhdGUoLTIwIDIyIDQ0KSIvPjxlbGxpcHNlIGN4PSI0MCIgY3k9IjI1IiByeD0iOSIgcnk9IjEyIiB0cmFuc2Zvcm09InJvdGF0ZSgtNiA0MCAyNSkiLz48ZWxsaXBzZSBjeD0iNjQiIGN5PSIyNSIgcng9IjkiIHJ5PSIxMiIgdHJhbnNmb3JtPSJyb3RhdGUoNiA2NCAyNSkiLz48ZWxsaXBzZSBjeD0iODIiIGN5PSI0NCIgcng9IjkiIHJ5PSIxMiIgdHJhbnNmb3JtPSJyb3RhdGUoMjAgODIgNDQpIi8+PC9nPjwvc3ZnPgo=") center/contain no-repeat; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZyBmaWxsPSIjMDAwIj48cGF0aCBkPSJNNTMgNTAgQyA2OCA1MCwgODIgNjQsIDgwIDc3IEMgNzggODksIDY2IDg4LCA1NCA4NSBDIDQyIDg4LCAzMCA4OSwgMjggNzcgQyAyNiA2NCwgNDAgNTAsIDUzIDUwIFoiLz48ZWxsaXBzZSBjeD0iMjIiIGN5PSI0NCIgcng9IjkiIHJ5PSIxMiIgdHJhbnNmb3JtPSJyb3RhdGUoLTIwIDIyIDQ0KSIvPjxlbGxpcHNlIGN4PSI0MCIgY3k9IjI1IiByeD0iOSIgcnk9IjEyIiB0cmFuc2Zvcm09InJvdGF0ZSgtNiA0MCAyNSkiLz48ZWxsaXBzZSBjeD0iNjQiIGN5PSIyNSIgcng9IjkiIHJ5PSIxMiIgdHJhbnNmb3JtPSJyb3RhdGUoNiA2NCAyNSkiLz48ZWxsaXBzZSBjeD0iODIiIGN5PSI0NCIgcng9IjkiIHJ5PSIxMiIgdHJhbnNmb3JtPSJyb3RhdGUoMjAgODIgNDQpIi8+PC9nPjwvc3ZnPgo=") center/contain no-repeat; }
.huella::after { background: currentColor;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZyBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUwIDQ4IEMgNjUgNDgsIDc5IDYyLCA3NyA3NSBDIDc1IDg3LCA2MyA4NiwgNTEgODMgQyAzOSA4NiwgMjcgODcsIDI1IDc1IEMgMjMgNjIsIDM3IDQ4LCA1MCA0OCBaIi8+PGVsbGlwc2UgY3g9IjE5IiBjeT0iNDIiIHJ4PSI4LjUiIHJ5PSIxMS41IiB0cmFuc2Zvcm09InJvdGF0ZSgtMjAgMTkgNDIpIi8+PGVsbGlwc2UgY3g9IjM3IiBjeT0iMjMiIHJ4PSI4LjUiIHJ5PSIxMS41IiB0cmFuc2Zvcm09InJvdGF0ZSgtNiAzNyAyMykiLz48ZWxsaXBzZSBjeD0iNjIiIGN5PSIyMyIgcng9IjguNSIgcnk9IjExLjUiIHRyYW5zZm9ybT0icm90YXRlKDYgNjIgMjMpIi8+PGVsbGlwc2UgY3g9IjgwIiBjeT0iNDIiIHJ4PSI4LjUiIHJ5PSIxMS41IiB0cmFuc2Zvcm09InJvdGF0ZSgyMCA4MCA0MikiLz48L2c+PC9zdmc+Cg==") center/contain no-repeat; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZyBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUwIDQ4IEMgNjUgNDgsIDc5IDYyLCA3NyA3NSBDIDc1IDg3LCA2MyA4NiwgNTEgODMgQyAzOSA4NiwgMjcgODcsIDI1IDc1IEMgMjMgNjIsIDM3IDQ4LCA1MCA0OCBaIi8+PGVsbGlwc2UgY3g9IjE5IiBjeT0iNDIiIHJ4PSI4LjUiIHJ5PSIxMS41IiB0cmFuc2Zvcm09InJvdGF0ZSgtMjAgMTkgNDIpIi8+PGVsbGlwc2UgY3g9IjM3IiBjeT0iMjMiIHJ4PSI4LjUiIHJ5PSIxMS41IiB0cmFuc2Zvcm09InJvdGF0ZSgtNiAzNyAyMykiLz48ZWxsaXBzZSBjeD0iNjIiIGN5PSIyMyIgcng9IjguNSIgcnk9IjExLjUiIHRyYW5zZm9ybT0icm90YXRlKDYgNjIgMjMpIi8+PGVsbGlwc2UgY3g9IjgwIiBjeT0iNDIiIHJ4PSI4LjUiIHJ5PSIxMS41IiB0cmFuc2Zvcm09InJvdGF0ZSgyMCA4MCA0MikiLz48L2c+PC9zdmc+Cg==") center/contain no-repeat; }
/* firma sobre foto o video: en su etiqueta blanca */
.firma.etiqueta { background: var(--blanco); color: var(--tinta-papel); border: var(--borde) solid var(--linea);
  border-radius: 1.4em; box-shadow: var(--sombra); padding: .1em .45em .22em .3em; transform: rotate(-4deg); }

/* ── En web: los mismos nombres, a escala de pantalla ──
   Los tamaños se miden contra el ancho de la propia página (cqi), no de la ventana: así una página
   mostrada dentro de un marco de 390 px se ve como en un celular de verdad.
   El aire lateral (padding: var(--margen)) va en un HIJO de .sd-pagina, no en el mismo elemento. */
.sd-pagina {
  container-type: inline-size;
  --t-hook: clamp(40px, 9cqi, 84px);
  --t-titulo: clamp(32px, 6.4cqi, 60px);
  --t-sub: clamp(22px, 3.6cqi, 32px);
  --t-cuerpo: clamp(17px, 2.2cqi, 20px);
  --t-nota: clamp(28px, 4.4cqi, 40px);
  --t-chico: clamp(15px, 1.8cqi, 16px);
  --radio: calc(var(--radio-lamina) * .7);
  --borde: calc(var(--borde-lamina) * .6);
  /* una sombra dura (sin difuminar) se vuelve a declarar aquí, a la mitad, o en celular sale tosca */
  --sombra: 5px 5px 0 var(--linea);
  --margen: clamp(20px, 5cqi, 64px);
}
.sd-pagina .boton { border-width: 2px; }

.modo-vino .enfasis { background: #FFF8EC; color: #7B2333; }
/* dentro de una tarjeta blanca sobre el borgoña, la palabra clave vuelve a su bloque rojo tomate */
.modo-vino .tarjeta:not(.apoyo) .enfasis { background: var(--acento-papel); color: var(--sobre-acento-papel); }

/* Un emoji como imagen (herramientas/emojis.py): junto a una frase, del alto de la letra; .grande cuando va solo, como gesto.
   (La sumó la actualización 0.2.2: antes las piezas lo pedían y su sistema no lo traía.) */
.emoji { display: inline-block; height: 1.1em; width: auto; vertical-align: -0.18em; }
.emoji.grande { height: 150px; vertical-align: middle; }