/* ─────────────────────────────────────────────────────────────────────────────
   Sistema de diseño · Olga Robleto · «Mi cuaderno de imagen»
   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/dm-serif-display.css");
@import url("fonts/dm-sans.css");
@import url("fonts/dancing-script.css");

@import url("trazos.css");

:root {
  /* ── Color: cuatro, cada uno con su trabajo ── */
  --fondo:  #F6EEE6;   /* el papel: donde vive casi todo */
  --tinta:  #3A1520;   /* el texto y lo que pesa */
  --acento: #B8365F;   /* lo que llama: una cosa por pantalla */
  --apoyo:  #F5C9D5;   /* acompaña: fondos de tarjeta, pastillas, resaltador */
  --blanco: #FFFFFF;
  --sobre-acento: #FFFFFF;     /* la letra que va ENCIMA del acento (botones). La dice contraste.py: blanca o tinta */
  /* 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: var(--tinta);
  --acento-papel: var(--acento);
  --apoyo-papel: var(--apoyo);
  --sobre-acento-papel: var(--sobre-acento);

  /* ── Letras: una por trabajo ── */
  --f-titulo:  "DM Serif Display", Georgia, serif;
  --f-enfasis: "DM Serif Display", Georgia, serif;
  --f-cuerpo:  "DM Sans", system-ui, sans-serif;
  --f-mano:    "Dancing Script", cursive;

  --peso-titulo: 400;
  --f-pieza: var(--f-cuerpo);  /* la letra de pastillas y botones */
  --peso-pieza: 700;           /* si su letra de títulos trae un solo peso, aquí va ese mismo */
  --track-titulo: -0.01em;   /* qué tan apretado va el título */
  --track-cuerpo: -0.01em;
  --alto-titulo: 1;
  --alto-cuerpo: 1.5;
  --enfasis-escala: 1.04;     /* la palabra de énfasis, respecto al título */
  --enfasis-estilo: italic;

  /* ── Forma ── */
  --radio-lamina: 22px;      /* esquinas de tarjetas y botones (en web se achican solas) */
  --radio-pastilla: 999px;
  --borde-lamina: 0px;       /* grosor de línea, si su estilo la lleva (en web se afina sola) */
  --giro: 0deg;              /* cuánto se inclinan sus piezas (0 = todo derecho) */
  --sombra: none;           /* nada de sombras: es papel, no vidrio */
}

/* ── 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: 52px;
  --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: var(--apoyo); /* la palabra destacada: un color suyo que se lea sobre video */
  --subtitulo-clave-escala: 1.4;   /* cuánto más grande va la palabra destacada */
  --velo-color: #2B0F18;           /* el color de su sombra: el velo detrás del hook y la sombra de las letras sobre video.
                                      Va teñido de su color oscuro, nunca negro puro */
  --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: #2B0F18;
  --tinta: #F6EEE6;
  --acento: #F5C9D5;           /* el rosa-vino no se lee de noche: aquí el acento es el rosa claro */
  --sobre-acento: #2B0F18;
  --apoyo: color-mix(in srgb, #F6EEE6 16%, transparent);
  /* si su acento no se lee sobre el fondo oscuro, aquí se cambia por uno que sí (y su --sobre-acento) */
}

/* ── 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;
}
/* El resaltador rosa: solo en la frase clave de la pieza, una vez. Como un marcador pasado por debajo de la letra. */
.resaltado { background: linear-gradient(transparent 52%, color-mix(in srgb, var(--apoyo) 90%, transparent) 52%, color-mix(in srgb, var(--apoyo) 90%, transparent) 92%, transparent 92%); padding: 0 .08em; }
.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;
  font-weight: 500;
  display: inline-block;
}

/* ── Piezas ── */
.pastilla {
  display: inline-block;
  font-family: var(--f-pieza);
  font-weight: var(--peso-pieza);
  font-size: var(--t-chico);
  letter-spacing: 0;
  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); }


.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); object-fit: cover; display: block; }
/* Su foto va completa, de borde a borde, y las letras encima en el aire libre. Sin marco, sin polaroid, sin contorno. */
/* 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, lámina de adentro, página) 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 ──
   Aquí van las que salieron de su dirección (ej. papel cuadriculado, cinta, burbuja, sello, trazo).
   Cada una con un comentario de cuándo se usa. Aquí también van las reglas que hacen suyo el
   estilo y no caben en una variable: cómo se subraya el énfasis, una sombra dura, una textura.
   Un trazo a mano se dibuja como SVG y vive aquí como clase (fondo o máscara), no suelto en cada pieza. */

/* El cuaderno: papel cuadriculado para las láminas de solo texto (sin foto). Se usa cuando una lámina
   es una lista, un paso a paso o una idea que se explica; si hay foto, manda la foto. */
.cuaderno {
  background-color: var(--fondo);
  background-image:
    linear-gradient(color-mix(in srgb, var(--acento) 14%, transparent) 1.5px, transparent 1.5px),
    linear-gradient(90deg, color-mix(in srgb, var(--acento) 14%, transparent) 1.5px, transparent 1.5px);
  background-size: 54px 54px;
}
.modo-oscuro.cuaderno, .modo-oscuro .cuaderno {
  background-image:
    linear-gradient(color-mix(in srgb, var(--tinta) 9%, transparent) 1.5px, transparent 1.5px),
    linear-gradient(90deg, color-mix(in srgb, var(--tinta) 9%, transparent) 1.5px, transparent 1.5px);
}

/* La frase suya: una cita en serif, sin comillas gigantes. Va en el aire libre de la foto o sobre el cuaderno,
   con el resaltador solo en lo que marca la idea. */
.cita { font-family: var(--f-titulo); font-weight: 400; font-size: calc(var(--t-sub) * 1.15); line-height: 1.12; margin: 0; text-wrap: balance; }

/* La nota a mano al margen: Dancing Script, en el acento, derecha. Una por pieza, máximo. */
.nota-mano.acento { color: var(--acento); }

/* Tu logo: tu nombre en tu serif, a un solo color. Toma el color del texto donde esté.
   En chiquito (perfil, favicon) manda el monograma OR. Nunca con sombra, contorno ni efectos. */
.logo { font-family: var(--f-titulo); font-weight: var(--peso-titulo); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; font-size: 1.4em; }
.logo-simbolo { font-family: var(--f-titulo); font-weight: var(--peso-titulo); letter-spacing: -0.03em; line-height: 1; }

/* ── 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(26px, 4cqi, 36px);
  --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 */
  --margen: clamp(20px, 5cqi, 64px);
}

/* 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; }

/* ─────────────────────────────────────────────────────────────────────────────
   Lo nuevo de esta versión: sale de lo que SE VIO en tus 22 referencias.
   Tu paleta, tus letras, tu logo y tus trazos son los mismos que elegiste.
   ───────────────────────────────────────────────────────────────────────────── */

/* Su estilo por formato · CARRUSEL. De tus referencias de carrusel (01, 03, 07, 09, 10): la foto a pantalla completa,
   una sola idea por lámina, el texto centrado en el aire libre, sin bordes y con un velo suave. La letra va crema y la
   palabra de énfasis en tu rosa claro. Se usa en la lámina: <div class="lamina estilo-carrusel"><img class="foto-fondo"><div class="velo-carrusel"></div>… */
.velo-carrusel { position: absolute; inset: 0; background:
  linear-gradient(to bottom, color-mix(in srgb, var(--velo-color) 58%, transparent), color-mix(in srgb, var(--velo-color) 68%, transparent)); }
.lamina.estilo-carrusel { color: var(--fondo); }
.lamina.estilo-carrusel .enfasis { color: var(--apoyo); }
.lamina.estilo-carrusel .nota-mano, .lamina.estilo-carrusel .nota-mano.acento { color: var(--apoyo); }
.lamina.estilo-carrusel .resaltado { background: none; }

/* La pregunta: una sola pregunta o frase centrada, sola sobre la foto. De tu carrusel 09 (una pregunta por lámina,
   el recorte de la foto cambia en cada una). Ideal para guardar y para hacerla pensar. */
.pregunta { font-family: var(--f-titulo); font-weight: var(--peso-titulo); letter-spacing: var(--track-titulo); line-height: 1.1;
  font-size: calc(var(--t-titulo) * 1.1); text-align: center; text-wrap: balance; margin: 0; }

/* La caja: una barra sólida con el título, cuando la foto no deja aire libre. De tu carrusel 06 y de tu reel 09
   (barras sólidas con letra limpia, sin borde). Va de a una o dos, una sobre otra. */
.caja { display: inline-block; background: var(--tinta); color: var(--fondo); font-family: var(--f-titulo);
  font-weight: var(--peso-titulo); letter-spacing: var(--track-titulo); line-height: 1.05; padding: .3em .55em;
  border-radius: calc(var(--radio) * .55); transform: rotate(var(--giro)); }
.caja.clara { background: var(--fondo); color: var(--tinta); }
.caja.apoyo { background: var(--apoyo); color: var(--tinta-papel); }

/* La palabrota: una o dos palabras enormes que ocupan la lámina. De tu carrusel 08 y de tu reel 10 (letra gruesa y grande
   repartida por la imagen). Una palabra por lámina; nunca un párrafo. */
.palabrota { font-family: var(--f-titulo); font-weight: var(--peso-titulo); letter-spacing: calc(var(--track-titulo) * 2);
  line-height: .9; font-size: calc(var(--t-hook) * 2); margin: 0; text-wrap: balance; }

/* El círculo: rodea UNA palabra clave, una vez por pieza. De tu carrusel 10 (la palabra encerrada a mano). Línea limpia,
   sin temblor, en tu rosa vino (en rosa claro sobre foto). */
.encerrado { position: relative; display: inline-block; padding: 0 .28em; }
.encerrado::after { content: ""; position: absolute; inset: -.1em -.04em; border: .055em solid var(--acento); border-radius: 50%; }
.lamina.estilo-carrusel .encerrado::after, .modo-oscuro .encerrado::after { border-color: var(--apoyo); }

/* Antes y después apilados: dos fotos grandes, una sobre otra, con el año o la etapa en una pastilla. De tu carrusel 04.
   Entra cuando muestras un cambio de imagen real, con permiso de la persona. */
.apilado { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.apilado > div { position: relative; overflow: hidden; border-radius: var(--radio); background: var(--apoyo); }
.apilado img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apilado .cuando { position: absolute; right: .7em; top: .6em; }

/* Una línea a mano sobre el título: tu nota a mano, derecha, justo arriba de un título en serif. De tu carrusel 02
   (una línea a mano y debajo la letra gruesa). */
.nota-arriba { display: block; margin-bottom: .1em; }

/* Una cifra grande con su etiqueta: cuando hay un número real (clases, precio, personas). */
.cifra { font-family: var(--f-titulo); font-weight: var(--peso-titulo); letter-spacing: var(--track-titulo); line-height: .9;
  font-size: calc(var(--t-hook) * 1.6); color: var(--acento); margin: 0; }
.cifra-etiqueta { font-family: var(--f-enfasis); font-style: var(--enfasis-estilo); font-size: var(--t-sub); line-height: 1.1; margin: 0; }
/* Una lista con check: pasos o lo que incluye algo. */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; font-size: var(--t-cuerpo); }
.checks li { display: grid; grid-template-columns: 1.3em 1fr; gap: .5em; align-items: start; line-height: 1.25; }
.checks li::before { content: ""; width: .5em; height: .95em; margin: .05em 0 0 .3em; border: solid var(--acento);
  border-width: 0 .18em .18em 0; transform: rotate(40deg); }
/* El nombre de quien lo dijo, debajo de una cita (con su permiso). */
.cita .quien { display: block; margin-top: .8em; font-family: var(--f-pieza); font-weight: var(--peso-pieza); font-size: var(--t-chico); }