/* Odonto Fácil by dra_iswmi.
   Layout: revista de estudio pensada primero para el celular. Palabras gigantes condensadas con la foto real encima,
   cinta que corre, materias que se deslizan y tiñen la sección, y un laboratorio de práctica.
   El diseño es claro (neutro piedra y pasteles), elegido a propósito: ella no quiere nada oscuro, pero el 29/10 pidió
   que el claro fuera un poco más oscuro y neutro. El "modo noche" es opcional
   (botón de abajo a la derecha) para estudiar de noche sin que la luz moleste; la página siempre abre de día.
   Los esquemas dibujados se quedan con sus colores claros también de noche, para que se lean igual que en el libro. */

/* Letras servidas desde el mismo sitio (la CSP no deja cargar Google Fonts). Solo el subconjunto latino,
   que cubre todo el español. Archivo y Nunito son variables: un archivo cubre todos los pesos que se usan. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-variable-latin.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/nunito-variable-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/dm-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/dm-mono-500-latin.woff2") format("woff2"); }

:root, :root[data-tema="noche"] :is(.esquema-svg, .card-img) {
  color-scheme: light;
  /* Fondo neutro (piedra clara) y tarjetas grises muy suaves: pedido del 29/10, el beige blanco encandilaba */
  --crema: #e7e4de;
  --papel: #f4f2ee;
  --tinta: #1f2547;
  --suave: #565970;
  --linea: #d3cdc3;
  /* menta-t y durazno-t, un poco más oscuros que en el artifact (#1d7562 y #a3461f) para llegar a contraste AA (4,5:1) en las etiquetas */
  --menta: #c9ecdf;    --menta-t: #1a6b5a;
  --lavanda: #e2d9fb;  --lavanda-t: #5a43a6;
  --durazno: #fbd5bf;  --durazno-t: #9a421d;
  --mante: #fbe9a6;    --mante-t: #765600;
  --rosa: #f7cdd8;     --rosa-t: #a6324e;
  --cielo: #d0e3f6;    --cielo-t: #235b96;
  --display: "Archivo", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --radio: 24px;
  --fondo-oscuro: #1f2547;
}
:root[data-tema="noche"] {
  color-scheme: dark;
  --crema: #14172a;
  --papel: #1f2340;
  --tinta: #ece8f6;
  --suave: #a9acc8;
  --linea: #353b60;
  --menta: #1c3a34;    --menta-t: #7fdcc0;
  --lavanda: #2a2550;  --lavanda-t: #c3b4ff;
  --durazno: #43291d;  --durazno-t: #f4ab86;
  --mante: #3a3217;    --mante-t: #f1d36c;
  --rosa: #42202c;     --rosa-t: #f59ab2;
  --cielo: #1b2e47;    --cielo-t: #8fc1f2;
  --fondo-oscuro: #0d0f1d;
}
/* Lo que de día es azul marino de fondo (cinta, pie, reverso de tarjetas) de noche va más oscuro todavía. */
:root[data-tema="noche"] :is(.cinta, footer) { background: var(--fondo-oscuro); color: var(--tinta); }
:root[data-tema="noche"] :is(.cinta-in b, footer a, footer .gigante) { color: var(--mante-t); }
:root[data-tema="noche"] .cara.atras { background: #2b3160; color: var(--tinta); }
:root[data-tema="noche"] .tab[aria-selected="true"] span { color: var(--papel); opacity: 0.8; }
:root[data-tema="noche"] .sello { background: var(--fondo-oscuro); color: var(--mante-t); }
:root[data-tema="noche"] .boca .d.ok .forma { fill: #2f7a64; }
:root[data-tema="noche"] tbody tr:nth-child(odd) td { background: rgba(241,211,108,0.07); }
:root[data-tema="noche"] .hero-foto { mix-blend-mode: normal; }
/* Fotos y esquemas un poco atenuados para que no encandilen de noche. */
:root[data-tema="noche"] :is(img, .esquema-svg, .card-img svg) { filter: brightness(0.88); }
:root[data-tema="noche"] .card-img:has(svg) { background: var(--crema); }
:root[data-tema="noche"] :is(.card, .materia, .panel) { box-shadow: 0 8px 24px rgba(0,0,0,0.35); }

/* Idioma (🌐) y modo noche (🌙): íconos en la barra de arriba, para que no tapen nada al bajar (pedido del 29/10/2026). */
.herramientas { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.icono-btn { width: 40px; height: 40px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--linea); background: var(--papel); color: var(--tinta); cursor: pointer; }
.icono-btn:hover, .icono-btn[aria-expanded="true"] { border-color: var(--tinta); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tema-btn .sol, :root[data-tema="noche"] .tema-btn .luna { display: none; }
:root[data-tema="noche"] .tema-btn .sol { display: block; color: var(--mante-t); }
.tema-btn .luna { color: var(--lavanda-t); }
/* Menú de idioma (y de modo noche en el celular): la lista se abre hacia abajo desde la barra. */
.idioma { position: relative; }
.idioma-btn svg { color: var(--cielo-t); }
.idioma-menu { position: absolute; right: 0; top: 50px; width: min(270px, calc(100vw - 24px)); display: grid; gap: 2px; padding: 8px; border-radius: 20px;
  border: 2px solid var(--linea); background: var(--papel); box-shadow: 0 14px 36px rgba(31,37,71,0.22); }
.idioma-menu :is(button, a) { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: none; color: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.idioma-menu a[aria-current="true"] { background: var(--menta); color: var(--menta-t); }
.banderas { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.bandera { width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(31,37,71,0.14); flex-shrink: 0; }
.idioma-btn .banderas { gap: 3px; margin-left: 2px; }
.idioma-btn .bandera { width: 18px; height: 12px; }
.idioma-menu :is(button, a):hover, .idioma-menu :is(button, a):focus-visible { background: var(--crema); }
/* En el celular no caben dos íconos: uno solo de ajustes abre "Modo noche" + la lista de idiomas. */
.idioma-btn .ajustes, .idioma-menu .menu-tema, .menu-titulo { display: none; }
.menu-titulo { margin: 8px 12px 2px; color: var(--suave); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.interruptor { position: relative; width: 40px; height: 24px; border-radius: 99px; background: var(--linea); flex-shrink: 0; transition: background .2s; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--papel); transition: transform .2s; }
.menu-tema[aria-pressed="true"] .interruptor { background: var(--lavanda-t); }
.menu-tema[aria-pressed="true"] .interruptor::after { transform: translateX(16px); }
* { box-sizing: border-box; }
html { background: var(--crema); scroll-behavior: smooth; }
body { margin: 0; background: var(--crema); color: var(--tinta); font-family: var(--body); font-size: 17px; line-height: 1.55; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--crema); }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.1; }
a { color: var(--cielo-t); }
button { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--lavanda-t); outline-offset: 3px; border-radius: 10px; }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.ancho { max-width: 1120px; margin: 0 auto; }
.mono { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; }
.gigante {
  font-family: var(--display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  line-height: 0.84; letter-spacing: -0.005em; margin: 0;
  font-size: min(var(--max, 5rem), calc((min(100vw, 1120px) - 32px) / (var(--n) * 0.56) * var(--escala, 0.6)));
  white-space: nowrap;
}
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 20; background: var(--tinta); color: var(--papel); padding: 10px 16px; border-radius: 999px; }
.saltar:focus { left: 12px; }

/* Barra */
.barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6; background: color-mix(in srgb, var(--crema) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.barra-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; }
.marca { display: grid; text-decoration: none; color: var(--tinta); line-height: 1; }
.marca b { font-family: var(--display); font-stretch: 68%; font-weight: 900; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
.marca span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--rosa-t); text-transform: uppercase; margin-top: 3px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { text-decoration: none; color: var(--tinta); font-weight: 800; font-size: 0.88rem; padding: 8px 10px; border-radius: 999px; min-height: 40px; display: inline-flex; align-items: center; }
.nav a.fuerte { background: var(--tinta); color: var(--papel); }
.nav a.ir-inicio { gap: 4px; background: var(--mante); }
/* En el celular no caben 4 botones: "Acerca" queda en el pie de página. */
@media (max-width: 430px) {
  .nav { gap: 2px; }
  .nav a { padding: 8px 8px; font-size: 0.82rem; }
  .nav a.solo-grande { display: none; }
  .marca b { font-size: 1.05rem; }
}
/* Celular: "Inicio" queda solo con la casita y un solo ícono de ajustes (idioma + modo noche), así cabe en una línea. */
@media (max-width: 430px) {
  .tema-btn, .idioma-btn .globo, .txt-inicio { display: none; }
  .idioma-btn .ajustes, .idioma-menu .menu-tema { display: flex; }
  .menu-titulo { display: block; }
  .barra-in { gap: 6px; }
  .nav a.ir-inicio { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 374px) {
  .barra-in.gutter { padding-left: 10px; padding-right: 10px; }
  .barra-in { gap: 4px; }
  .nav { gap: 1px; }
  .nav a { padding: 8px 6px; font-size: 0.78rem; }
  .nav a.ir-inicio, .icono-btn { width: 36px; height: 36px; min-height: 36px; }
  .marca b { font-size: 0.92rem; }
}
@media (max-width: 350px) {
  .nav a { padding: 8px 5px; font-size: 0.74rem; }
  .marca b { font-size: 0.84rem; }
  .marca span { font-size: 0.6rem; }
  .materias-sec .carrusel-ctrl { gap: 8px; }
  .carrusel-ctrl .puntos-nav button { width: 20px; }
}

/* Portada */
.hero { background: var(--mante); overflow: hidden; position: relative; }
.hero-in { position: relative; padding-block: 18px 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hero .gigante { --n: 6; --max: 9rem; --escala: 0.8; position: relative; z-index: 1; color: var(--tinta); }
.hero .letra { display: inline-block; }
.hero-foto { position: relative; z-index: 2; justify-self: end; width: min(88%, 520px); margin: calc(-0.5 * min(9rem, calc((min(100vw, 1120px) - 32px) / 4.2))) -6% 0 0; mix-blend-mode: multiply; transform: rotate(-7deg); pointer-events: none; }
.hero-foto img { width: 100%; display: block; }
.sello { position: absolute; z-index: 3; right: 10%; top: -6%; width: 92px; height: 92px; border-radius: 50%; background: var(--tinta); color: var(--mante); display: grid; place-items: center; text-align: center; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; }
.hero-sub { display: grid; gap: 12px; max-width: 580px; position: relative; z-index: 3; }
.hero-sub h1 { font-family: var(--display); font-stretch: 72%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem, 5.5vw, 2.2rem); line-height: 1; }
.hero-sub p { margin: 0; font-size: 1.04rem; max-width: 48ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; border: 0; border-radius: 999px; padding: 6px 8px 6px 20px; background: var(--tinta); color: var(--papel); font-weight: 800; text-decoration: none; cursor: pointer; }
.btn i { width: 36px; height: 36px; border-radius: 50%; background: var(--mante); color: var(--tinta); display: grid; place-items: center; font-style: normal; transition: transform .25s ease; }
.btn:hover i { transform: rotate(-45deg); }
.btn.claro { background: var(--papel); color: var(--tinta); padding: 6px 20px; border: 2px solid var(--linea); }
.hero-pie { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: relative; z-index: 3; }

/* Cinta */
.cinta { background: var(--tinta); color: var(--crema); overflow: hidden; white-space: nowrap; padding-block: 12px; }
.cinta-in { display: inline-flex; gap: 28px; font-family: var(--display); font-stretch: 70%; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; }
.cinta-in b { color: var(--mante); font-weight: 800; }

/* Secciones */
.sec { padding-block: 40px 30px; }
.sec-cab { display: grid; gap: 8px; margin-bottom: 18px; }
.sec-cab .gigante { --max: 4rem; --escala: 0.55; color: var(--tinta); }
.sec-cab p { margin: 0; color: var(--suave); max-width: 56ch; }

/* Materias */
.materias-sec { background: var(--fondo, var(--menta)); transition: background-color .5s ease; }
.materias { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(16px, env(safe-area-inset-left, 0px)) 18px; scrollbar-width: none; }
.materias::-webkit-scrollbar { display: none; }
.materia { scroll-snap-align: center; flex: 0 0 min(76vw, 300px); border: 0; padding: 18px; border-radius: 30px; background: var(--papel); text-align: left; cursor: pointer; display: grid; gap: 10px; align-content: start; box-shadow: 0 10px 30px rgba(31,37,71,0.10); transition: transform .25s ease; }
.materia:hover { transform: translateY(-4px); }
.materia[aria-pressed="true"] { outline: 4px solid var(--tinta); outline-offset: -4px; }
.materia .num { display: flex; justify-content: space-between; color: var(--suave); }
.materia .circ { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--c); max-width: 100%; }
.materia .circ img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.materia:hover .circ img { transform: scale(1.08); }
.materia h3 { font-family: var(--display); font-stretch: 68%; font-weight: 900; text-transform: uppercase; font-size: 1.5rem; line-height: 0.95; }
.materia small { font-weight: 800; color: var(--ct); }
.materias { position: relative; cursor: grab; scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.materias .materia { scroll-snap-align: start; }
.materias.arrastrando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.materias.arrastrando .materia { pointer-events: none; }
.carrusel-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; padding-bottom: 6px; }
.flecha { width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; background: var(--tinta); color: var(--papel); font-size: 1.3rem; font-weight: 800; cursor: pointer; display: grid; place-items: center; transition: transform .2s ease; }
.flecha:hover { transform: scale(1.08); }
.puntos-nav { display: flex; align-items: center; gap: 2px; }
.puntos-nav button { width: 24px; height: 32px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.puntos-nav button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta); opacity: 0.25; transition: opacity .3s, width .3s; }
.puntos-nav button.on::before { opacity: 1; width: 20px; border-radius: 6px; }

/* Apuntes */
.filtros { display: grid; gap: 10px; margin-bottom: 16px; }
.buscar { width: 100%; max-width: 520px; padding: 14px 18px; border-radius: 999px; border: 2px solid var(--linea); background: var(--papel); color: var(--tinta); font: inherit; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 44px; border: 2px solid var(--linea); background: var(--papel); border-radius: 999px; padding: 8px 16px; font-weight: 800; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.card { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--tinta); background: var(--papel); border-radius: var(--radio); overflow: hidden; min-width: 0; box-shadow: 0 8px 24px rgba(31,37,71,0.08); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(31,37,71,0.14); }
.card-img { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: var(--c); max-width: 100%; display: grid; place-items: center; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.card-img svg { width: 86%; height: 86%; }
.card:hover .card-img img { transform: scale(1.06); }
.card-img .real { position: absolute; right: 10px; top: 10px; background: var(--papel); border-radius: 999px; padding: 4px 10px; }
.card-txt { padding: 14px 16px 18px; display: grid; gap: 8px; align-content: start; }
.card .corto { font-family: var(--display); font-stretch: 66%; font-weight: 900; font-size: 1.6rem; line-height: 0.85; text-transform: uppercase; color: var(--ct); }
.card h3 { font-size: 1.08rem; font-weight: 800; }
.card p { margin: 0; color: var(--suave); font-size: 0.97rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 0.78rem; font-weight: 800; padding: 4px 11px; border-radius: 999px; }
/* "Nuevo": más pequeña que las otras, solo borde fino y un puntito, para que se note sin gritar */
.tag.nuevo { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; background: transparent; color: var(--rosa-t); box-shadow: inset 0 0 0 1.5px var(--rosa-t); }
.tag.nuevo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vacio { color: var(--suave); background: var(--papel); border-radius: var(--radio); padding: 18px; }
.contador { color: var(--suave); font-weight: 700; margin: 0 0 12px; }

/* Práctica */
.practica-sec { background: var(--lavanda); }
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-bottom: 16px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: grid; gap: 2px; text-align: left; min-height: 56px; border: 0; border-radius: 18px; padding: 10px 16px; background: var(--papel); cursor: pointer; font-weight: 800; }
.tab span { font-family: var(--mono); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); }
.tab[aria-selected="true"] { background: var(--tinta); color: var(--papel); }
.tab[aria-selected="true"] span { color: var(--mante); }
.panel { background: var(--papel); border-radius: 30px; padding: 18px; display: grid; gap: 14px; min-width: 0; box-shadow: 0 10px 30px rgba(31,37,71,0.10); }
.fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.seg { display: inline-flex; flex-wrap: wrap; background: var(--crema); border-radius: 22px; padding: 4px; gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 8px 14px; min-height: 40px; font-weight: 800; cursor: pointer; font-size: 0.92rem; }
.seg button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.marcador { display: flex; flex-wrap: wrap; gap: 6px 14px; font-variant-numeric: tabular-nums; color: var(--suave); font-weight: 800; font-size: 0.92rem; }
.marcador b { color: var(--tinta); }
.consigna { font-family: var(--display); font-stretch: 72%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.3rem, 5vw, 1.9rem); line-height: 0.95; min-height: 1.9em; display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; margin: 0; }
.consigna mark { background: var(--mante); color: var(--tinta); padding: 0 10px; border-radius: 12px; }
.fdi-zona { display: grid; gap: 14px; }
.svg-caja { overflow-x: auto; display: grid; justify-items: center; }
.boca { width: 100%; max-width: 440px; height: auto; display: block; touch-action: manipulation; }
.boca .d { cursor: pointer; }
.boca .d .forma { stroke: var(--tinta); stroke-width: 1.2; transition: fill .2s; }
.boca .d .surco { stroke: var(--tinta); stroke-opacity: 0.45; stroke-width: 1; fill: none; stroke-linecap: round; }
.boca .d:hover .forma, .boca .d:focus-visible .forma { stroke-width: 2.4; }
.boca .d:focus { outline: none; }
.boca .d.sel .forma { fill: var(--rosa); stroke: var(--rosa-t); stroke-width: 2.6; }
.boca .d.ok .forma { fill: #9fe0c9; stroke: var(--menta-t); stroke-width: 2.6; }
.boca .d.mal .forma, .boca .d.mal .surco { animation: sacudir .4s; }
.boca .d.mal .forma { fill: var(--rosa); stroke: var(--rosa-t); }
.boca .d.pista .forma { fill: var(--mante); stroke: var(--mante-t); stroke-width: 2.6; }
.boca .n { font-family: var(--mono); font-size: 10.5px; fill: var(--suave); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.boca .ref { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; fill: var(--suave); text-transform: uppercase; }
.boca .cuad { pointer-events: none; }
.boca .cuad circle { fill: var(--tinta); fill-opacity: 0.08; stroke: var(--tinta); stroke-opacity: 0.25; stroke-width: 1.5; }
.boca .cuad text { font-family: var(--display); font-stretch: 70%; font-weight: 900; font-size: 26px; fill: var(--tinta); fill-opacity: 0.45; text-anchor: middle; dominant-baseline: central; }
.boca .media { stroke: var(--suave); stroke-dasharray: 3 5; stroke-width: 1; }
.boca.sin-num .n { display: none; }
@keyframes sacudir { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.ficha-diente { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; background: var(--crema); border-radius: 22px; padding: 14px 16px; min-width: 0; }
.ficha-diente .grande { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 3.4rem; line-height: 0.8; grid-row: span 3; font-variant-numeric: tabular-nums; color: var(--tinta); }
.ficha-diente .grande .q { color: var(--rosa-t); }
.ficha-diente b { font-size: 1.12rem; }
.ficha-diente > span:not(.grande) { color: var(--suave); font-size: 0.95rem; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 0.85rem; font-weight: 700; color: var(--suave); }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--tinta); vertical-align: -1px; margin-right: 5px; }
.opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opcion { min-height: 54px; border: 2px solid var(--linea); background: var(--papel); border-radius: 18px; padding: 10px 14px; font-weight: 800; cursor: pointer; text-align: left; transition: transform .15s ease, background .2s; }
.opcion:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--tinta); }
.opcion.num { font-family: var(--display); font-stretch: 65%; font-weight: 900; font-size: 2rem; text-align: center; }
.opcion.bien { background: var(--menta); border-color: var(--menta-t); }
.opcion.malo { background: var(--rosa); border-color: var(--rosa-t); }
.opcion:disabled { cursor: default; }
.lista-op { grid-template-columns: 1fr; }
.barra-prog { height: 8px; border-radius: 99px; background: var(--crema); overflow: hidden; }
.barra-prog i { display: block; height: 100%; background: var(--tinta); border-radius: 99px; transition: width .35s ease; }
.explica { background: var(--crema); border-radius: 18px; padding: 12px 14px; margin: 0; }
.explica b { color: var(--menta-t); }
.explica.no b { color: var(--rosa-t); }
.resultado { display: grid; gap: 10px; justify-items: start; }
.resultado .gigante { --n: 5; --max: 4rem; --escala: 0.6; }
.tarjeta { perspective: 1200px; border: 0; background: none; padding: 0; cursor: pointer; width: 100%; max-width: 520px; justify-self: center; }
.tarjeta-in { position: relative; display: grid; min-height: 230px; transition: transform .6s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.tarjeta.volteada .tarjeta-in { transform: rotateY(180deg); }
.cara { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 26px; padding: 22px; display: grid; align-content: space-between; gap: 12px; text-align: left; }
.cara.frente { background: var(--mante); }
.cara.atras { background: var(--tinta); color: var(--papel); transform: rotateY(180deg); font-size: 1.08rem; }
.cara .termino { font-family: var(--display); font-stretch: 66%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 0.9; overflow-wrap: anywhere; }
.cara .mono { opacity: 0.75; }
.orden-slots { display: grid; gap: 8px; counter-reset: paso; }
.slot { min-height: 50px; border: 2px dashed var(--linea); border-radius: 16px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-weight: 800; }
.slot::before { counter-increment: paso; content: counter(paso); font-family: var(--display); font-stretch: 65%; font-weight: 900; font-size: 1.6rem; width: 26px; color: var(--suave); }
.slot.lleno { border-style: solid; border-color: var(--menta-t); background: var(--menta); animation: entra .35s ease; }
@keyframes entra { from { transform: scale(0.94); } to { transform: scale(1); } }
.piezas { display: flex; flex-wrap: wrap; gap: 8px; }
.pieza { border: 0; background: var(--lavanda); border-radius: 999px; padding: 10px 16px; min-height: 46px; font-weight: 800; cursor: pointer; }
.pieza.mal { animation: sacudir .4s; background: var(--rosa); }
.sin-js { margin: 0; }

/* Simulacro */
.panel { scroll-margin-top: 76px; }
.sim-reglas { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--suave); }
.sim-reglas b { color: var(--tinta); }
.sim-reloj { margin-left: auto; font-family: var(--mono); font-size: 1rem; color: var(--tinta); background: var(--crema); border-radius: 999px; padding: 2px 12px; }
.sim-reloj.poco { background: var(--rosa); color: var(--rosa-t); }
.sim-mapa { display: flex; flex-wrap: wrap; gap: 5px; }
.sim-mapa button { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--linea); background: var(--papel); font-weight: 800; font-size: 0.8rem; cursor: pointer; padding: 0; }
.sim-mapa button.hecha { background: var(--lavanda); border-color: var(--lavanda); }
.sim-mapa button.actual { border-color: var(--tinta); }
.opcion.elegida { background: var(--lavanda); border-color: var(--lavanda-t); }
.sim-enlace { justify-self: start; border: 0; background: none; padding: 6px 0; color: var(--suave); font-weight: 700; text-decoration: underline; cursor: pointer; }
.btn:disabled { opacity: 0.4; cursor: default; }
.sim-materias { display: grid; gap: 10px; }
.sim-fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-weight: 700; font-size: 0.92rem; }
.sim-barra { height: 14px; border-radius: 99px; overflow: hidden; }
.sim-barra i { display: block; height: 100%; border-radius: 99px; }
.sim-errores summary { cursor: pointer; font-weight: 800; padding: 6px 0; }
.sim-error { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--linea); font-size: 0.95rem; }
.sim-error .tuya { color: var(--rosa-t); font-weight: 700; }
.sim-error .buena { color: var(--menta-t); font-weight: 800; }
.sim-avisame { justify-self: start; border: 0; background: none; padding: 4px 0; text-align: left; color: var(--suave); font-size: 0.92rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.sim-avisame b { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.sim-historial { display: grid; gap: 8px; }
.sim-historial div { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-chip { background: var(--crema); border-radius: 999px; padding: 5px 12px; font-size: 0.85rem; color: var(--suave); }
.sim-chip b { color: var(--tinta); }

/* App instalable y ventana emergente */
.app-sec { padding-block: 28px 36px; }
.app-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; background: var(--papel); border: 2px solid var(--linea); border-radius: 30px; padding: 18px; }
.app-icono { display: block; }
.app-card h2 { font-family: var(--display); font-stretch: 70%; font-weight: 900; text-transform: uppercase; font-size: 1.45rem; }
.app-card p { margin: 4px 0 0; color: var(--suave); font-size: 0.95rem; }
.app-card .btn { grid-column: 1 / -1; justify-self: start; }
.instalar-pie { border: 2px solid var(--mante); background: none; color: var(--mante); border-radius: 999px; padding: 10px 16px; font-weight: 800; cursor: pointer; }
:root[data-tema="noche"] .instalar-pie { border-color: var(--mante-t); color: var(--mante-t); }
.dialogo { border: 0; border-radius: 28px; padding: 22px; width: min(92vw, 460px); max-height: 88vh; background: var(--papel); color: var(--tinta); box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.dialogo::backdrop { background: rgba(20,23,42,0.55); }
.dialogo h2 { font-family: var(--display); font-stretch: 70%; font-weight: 900; text-transform: uppercase; font-size: 1.6rem; margin-bottom: 10px; }
.dialogo p { margin: 10px 0; }
.guia { margin: 0; padding-left: 22px; display: grid; gap: 12px; font-size: 1.02rem; }
.nota-img { width: 100%; max-height: 52vh; object-fit: contain; border-radius: 16px; display: block; background: var(--crema); }
@media (min-width: 720px) { .app-card { grid-template-columns: auto minmax(0, 1fr) auto; } .app-card .btn { grid-column: auto; } }

/* Ficha del apunte */
.ficha-hero { background: var(--c); overflow: hidden; position: relative; }
.ficha-hero-in { padding-block: 16px 22px; display: grid; gap: 12px; position: relative; }
.ficha-hero .gigante { --max: 4.5rem; --escala: 0.6; color: var(--tinta); position: relative; z-index: 1; }
.ficha-hero h1 { font-size: clamp(1.35rem, 5vw, 2rem); font-weight: 800; font-family: var(--body); max-width: 30ch; }
.migas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 800; font-size: 0.9rem; }
.migas a { color: var(--tinta); }
.ficha { display: grid; gap: 16px; padding-block: 18px 30px; }
.col { display: grid; gap: 16px; min-width: 0; align-content: start; }
.caja { border-radius: var(--radio); padding: 18px 18px 20px; background: var(--papel); min-width: 0; }
.caja h2 { font-family: var(--display); font-stretch: 72%; font-weight: 900; text-transform: uppercase; font-size: 1.25rem; margin-bottom: 12px; }
.frase { background: var(--mante); font-size: 1.15rem; font-weight: 700; }
.frase mark { background: var(--papel); color: var(--tinta); padding: 0 5px; border-radius: 6px; }
.puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.puntos li { display: grid; grid-template-columns: 12px 1fr; gap: 12px; align-items: start; }
.puntos li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; margin-top: 7px; background: var(--ct); }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: p; }
.pasos li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; }
.pasos li::before { counter-increment: p; content: counter(p); width: 38px; height: 38px; border-radius: 50%; background: var(--c); color: var(--tinta); display: grid; place-items: center; font-family: var(--display); font-stretch: 70%; font-weight: 900; font-size: 1.3rem; }
.foto { margin: 0; border-radius: var(--radio); overflow: hidden; background: var(--papel); }
.foto img { width: 100%; display: block; max-height: 520px; object-fit: contain; background: var(--papel); }
.foto figcaption { padding: 14px 16px 16px; display: grid; gap: 8px; }
.foto .ley { display: flex; flex-wrap: wrap; gap: 6px; }
.foto .ley span { background: var(--crema); border-radius: 999px; padding: 3px 10px; font-size: 0.86rem; font-weight: 700; }
.foto .ley b { font-family: var(--display); font-stretch: 70%; }
.esquema-svg { margin: 0; border-radius: var(--radio); background: var(--papel); padding: 14px; }
.esquema-svg svg { width: 100%; height: auto; display: block; }
.esquema-svg figcaption { color: var(--suave); font-size: 0.88rem; text-align: center; margin-top: 6px; }
.credito { color: var(--suave); font-size: 0.8rem; }
.credito a { color: inherit; }
.esquema img { width: 100%; display: block; border-radius: 16px; }
.esquema figcaption { color: var(--suave); font-size: 0.88rem; margin-top: 8px; text-align: center; }
/* Marca de agua (pedido de ella: el material es gratis y no quiere que lo revendan). Va solo sobre fotos y esquemas,
   que es lo que se copia con una captura; el texto del apunte queda limpio. Muy suave para no estorbar al estudiar. */
.foto, .esquema-svg, .caja.esquema { position: relative; }
.foto::after, .esquema-svg::after, .caja.esquema::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='270' height='160'%3E%3Ctext x='135' y='88' text-anchor='middle' transform='rotate(-22 135 80)' font-family='Nunito,Arial,sans-serif' font-weight='800' font-size='17' fill='%231f2547' fill-opacity='0.11'%3E%40dra_iswmi %C2%B7 Odonto F%C3%A1cil%3C/text%3E%3C/svg%3E");
  background-size: 270px 160px;
}
.foto::before, .esquema-svg::before, .caja.esquema::before {
  content: "@dra_iswmi · Odonto Fácil"; position: absolute; z-index: 1; top: 10px; right: 10px; pointer-events: none;
  font: 800 0.72rem/1 var(--body); letter-spacing: 0.02em; color: #fff; background: rgba(31,37,71,0.55); padding: 5px 10px; border-radius: 999px;
}
/* Si imprimen o guardan el apunte en PDF, cada hoja sale con la marca de agua y el aviso abajo. */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tema-btn, .idioma { display: none !important; }
  #contenido::before {
    content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260'%3E%3Ctext x='210' y='140' text-anchor='middle' transform='rotate(-28 210 130)' font-family='Nunito,Arial,sans-serif' font-weight='800' font-size='26' fill='%231f2547' fill-opacity='0.09'%3E%40dra_iswmi %C2%B7 Odonto F%C3%A1cil%3C/text%3E%3C/svg%3E");
    background-size: 420px 260px;
  }
  #contenido::after {
    content: "Apunte de Odonto Fácil by @dra_iswmi · draiswmi.com · Material gratuito, prohibida su venta";
    position: fixed; bottom: 0; left: 0; right: 0; text-align: center; font: 700 9pt var(--body); color: #5c5f7d;
  }
}
.terminos { display: grid; gap: 10px; }
.termino-c { background: var(--lavanda); border-radius: 16px; padding: 12px 14px; }
.termino-c b { font-family: var(--display); font-stretch: 72%; font-weight: 900; text-transform: uppercase; font-size: 1.15rem; display: block; color: var(--lavanda-t); }
.examen { background: var(--menta); }
.examen .preg { font-weight: 800; font-size: 1.08rem; margin: 0; }
.revelar { margin-top: 12px; min-height: 44px; border: 0; border-radius: 999px; padding: 10px 18px; background: var(--menta-t); color: var(--papel); font-weight: 800; cursor: pointer; }
/* "Ver respuesta" es un <details>: funciona aunque JavaScript esté apagado. */
summary.revelar { display: inline-flex; align-items: center; list-style: none; }
summary.revelar::-webkit-details-marker { display: none; }
summary.revelar:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.respuesta:not([open]) .ocultar, .respuesta[open] .ver { display: none; }
.resp { margin: 12px 0 0; background: var(--papel); border-radius: 14px; padding: 12px 14px; }
.tabla { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); font-weight: 500; }
tbody tr:nth-child(odd) td { background: rgba(251,233,166,0.35); }
.fuentes { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--suave); font-size: 0.93rem; }
.fuentes a { overflow-wrap: anywhere; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.video { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: var(--rosa); color: var(--rosa-t); font-weight: 800; text-decoration: none; }
.vecinos { display: grid; gap: 12px; padding-bottom: 36px; }
.vecinos .grid { margin-top: 4px; }
.pasar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* Acerca */
.texto { max-width: 70ch; display: grid; gap: 14px; padding-block: 10px 40px; }
.texto h2 { font-family: var(--display); font-stretch: 72%; font-weight: 900; text-transform: uppercase; font-size: 1.4rem; margin-top: 10px; }
.texto p, .texto li { margin: 0; }
.texto ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.aviso { background: var(--rosa); border-radius: var(--radio); padding: 16px 18px; }

footer { background: var(--tinta); color: var(--crema); padding-block: 34px 90px; /* abajo deja lugar al botón de modo noche */ }
footer .ancho { display: grid; gap: 16px; }
footer a { color: var(--mante); }
footer .gigante { --n: 11; --max: 3.5rem; --escala: 0.6; color: var(--mante); }
.creditos { display: grid; gap: 6px; font-size: 0.84rem; opacity: 0.85; margin: 0; padding: 0; list-style: none; }
footer details summary { cursor: pointer; font-weight: 800; }

@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .fdi-zona { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .lista-op { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { padding: 26px; }
  .hero-sub { margin-top: 40px; }
  .sello { width: 120px; height: 120px; font-size: 0.7rem; }
}
@media (min-width: 900px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .hero-in > .mono, .hero .gigante, .hero-pie { grid-column: 1 / -1; }
  .hero-sub { grid-column: 1; grid-row: 3; margin-top: 0; }
  .hero-foto { grid-column: 2; grid-row: 3; margin: -40px 0 0; }
}
@media (min-width: 1000px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .materias { justify-content: safe center; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .letra { animation: subir .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 55ms); }
  .hero-foto { animation: flotar-in 1s cubic-bezier(.2,.8,.2,1) .25s both; }
  .hero-foto img { animation: flotar 6s ease-in-out 1.3s infinite; }
  .sello { animation: girar 18s linear infinite; }
  .cinta-in { animation: correr 40s linear infinite; }
  @supports (animation-timeline: view()) {
    .rv { animation: aparecer linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@keyframes subir { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flotar-in { from { transform: translateY(40px) rotate(-18deg); opacity: 0; } to { transform: rotate(-7deg); opacity: 1; } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes girar { to { rotate: 360deg; } }
@keyframes correr { to { transform: translateX(-50%); } }
@keyframes aparecer { from { transform: translateY(28px); opacity: 0.2; } to { transform: none; opacity: 1; } }

/* ---------- Clases que reemplazan los style="..." (la CSP del servidor no permite estilos en línea) ---------- */
/* Utilidades: llevan !important porque antes eran estilos en línea, que ganan a cualquier otra regla. */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.minh-0 { min-height: 0 !important; }
.jc-center { justify-content: center !important; }
.va-icono { vertical-align: -4px; }
.select-420 { max-width: 420px !important; padding: 12px 16px !important; }
.select-460 { max-width: 460px !important; padding: 12px 16px !important; }
.fdi-lado { display: grid; gap: 12px; align-content: start; min-width: 0; }
.color-mante { color: var(--mante) !important; }
.esconder { display: none !important; }
.vecinos-titulo { background: none !important; padding: 0 !important; font-family: var(--display) !important; font-stretch: 72% !important;
  font-weight: 900 !important; text-transform: uppercase !important; font-size: 1.3rem !important; }
.error-main { padding-block: 60px; display: grid; gap: 16px; }

/* Color de cada materia: --c es el pastel y --ct el tono oscuro para texto. */
.c-menta { --c: var(--menta); } .ct-menta { --ct: var(--menta-t); }
.c-lavanda { --c: var(--lavanda); } .ct-lavanda { --ct: var(--lavanda-t); }
.c-durazno { --c: var(--durazno); } .ct-durazno { --ct: var(--durazno-t); }
.c-mante { --c: var(--mante); } .ct-mante { --ct: var(--mante-t); }
.c-rosa { --c: var(--rosa); } .ct-rosa { --ct: var(--rosa-t); }
.c-cielo { --c: var(--cielo); } .ct-cielo { --ct: var(--cielo-t); }
/* Fondo de la sección de materias según la materia activa del carrusel. */
.fondo-menta { --fondo: var(--menta); } .fondo-lavanda { --fondo: var(--lavanda); } .fondo-durazno { --fondo: var(--durazno); }
.fondo-mante { --fondo: var(--mante); } .fondo-rosa { --fondo: var(--rosa); } .fondo-cielo { --fondo: var(--cielo); }
/* Etiquetas de materia y de nivel. */
.tag.t-menta { background: var(--menta); color: var(--menta-t); } .tag.t-lavanda { background: var(--lavanda); color: var(--lavanda-t); }
.tag.t-durazno { background: var(--durazno); color: var(--durazno-t); } .tag.t-mante { background: var(--mante); color: var(--mante-t); }
.tag.t-rosa { background: var(--rosa); color: var(--rosa-t); } .tag.t-cielo { background: var(--cielo); color: var(--cielo-t); }
.tag.t-papel { background: var(--papel); color: var(--tinta); }
/* Muestras de color (leyenda del odontograma y barras del simulacro). */
.bg-menta { background: var(--menta) !important; } .bg-lavanda { background: var(--lavanda) !important; }
.bg-durazno { background: var(--durazno) !important; } .bg-mante { background: var(--mante) !important; }
.bg-rosa { background: var(--rosa) !important; } .bg-cielo { background: var(--cielo) !important; }
.bgt-menta { background: var(--menta-t) !important; } .bgt-lavanda { background: var(--lavanda-t) !important; }
.bgt-durazno { background: var(--durazno-t) !important; } .bgt-mante { background: var(--mante-t) !important; }
.bgt-rosa { background: var(--rosa-t) !important; } .bgt-cielo { background: var(--cielo-t) !important; }
/* Odontograma: color de cada tipo de diente y el punto del canino. */
.boca .tipo-inc { fill: var(--menta); } .boca .tipo-can { fill: var(--mante); }
.boca .tipo-pre { fill: var(--lavanda); } .boca .tipo-mol { fill: var(--durazno); }
.boca .punto-canino { fill: var(--tinta) !important; fill-opacity: .45 !important; }
/* Retraso de la animación de cada letra de "ODONTO". */
.letra.i-0 { --i: 0; } .letra.i-1 { --i: 1; } .letra.i-2 { --i: 2; } .letra.i-3 { --i: 3; } .letra.i-4 { --i: 4; } .letra.i-5 { --i: 5; }

/* ---------- Formulario de contacto ---------- */
.contacto-sec { padding-block: 28px 44px; }
.contacto { display: grid; gap: 14px; max-width: 560px; }
.contacto .campo { display: grid; gap: 6px; }
.contacto .campo label { color: var(--tinta); }
.contacto textarea.buscar { border-radius: 22px; resize: vertical; min-height: 140px; }
.contacto .buscar[aria-invalid="true"] { border-color: var(--rosa-t); }
.contacto .btn { justify-self: start; }
.contacto-nota { margin: 0; font-size: 0.9rem; color: var(--suave); }
.contacto-estado { margin: 0; font-weight: 700; }
.contacto-estado:empty { display: none; }
.contacto-estado.ok { background: var(--menta); color: var(--menta-t); border-radius: 18px; padding: 12px 14px; }
.contacto-estado.error { background: var(--rosa); color: var(--rosa-t); border-radius: 18px; padding: 12px 14px; }
/* Campo trampa para bots: fuera de la pantalla, invisible para personas y lectores de pantalla. */
.trampa { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Tamaño de las letras gigantes según su cantidad de letras (antes style="--n:…"). Generado por construir.mjs. */
.gigante.n-3 { --n: 3 !important; }
.gigante.n-4 { --n: 4 !important; }
.gigante.n-5 { --n: 5 !important; }
.gigante.n-6 { --n: 6 !important; }
.gigante.n-7 { --n: 7 !important; }
.gigante.n-8 { --n: 8 !important; }
.gigante.n-9 { --n: 9 !important; }
.gigante.n-10 { --n: 10 !important; }
.gigante.n-11 { --n: 11 !important; }
.gigante.n-12 { --n: 12 !important; }
.gigante.n-13 { --n: 13 !important; }
.gigante.n-14 { --n: 14 !important; }
.gigante.n-15 { --n: 15 !important; }
.gigante.n-16 { --n: 16 !important; }
.gigante.n-17 { --n: 17 !important; }
.gigante.n-18 { --n: 18 !important; }
.gigante.n-19 { --n: 19 !important; }
.gigante.n-20 { --n: 20 !important; }
.gigante.n-21 { --n: 21 !important; }
.gigante.n-22 { --n: 22 !important; }
.gigante.n-23 { --n: 23 !important; }
.gigante.n-24 { --n: 24 !important; }
.gigante.n-25 { --n: 25 !important; }
.gigante.n-26 { --n: 26 !important; }
.gigante.n-27 { --n: 27 !important; }
.gigante.n-28 { --n: 28 !important; }
.gigante.n-29 { --n: 29 !important; }
.gigante.n-30 { --n: 30 !important; }