/* El Día Grande — almanaque de lluvia para bodas
   Dirección: editorial · papel cálido · tinta de tormenta · acento de arcilla.
   Una sola apariencia (clara), deliberada. */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('/assets/fonts/Fraunces-variable.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/InstrumentSans-variable.woff2') format('woff2'); }

:root {
  --papel: #FAF7F0;
  --papel-2: #F1EBDD;
  --papel-3: #E9E1CF;
  --tinta: #1F2433;
  --tinta-2: #454C5F;
  --tinta-3: #5E6578;
  --linea: #DDD5C4;
  --tormenta: #2E5A8A;
  --tormenta-2: #1F4468;
  --tormenta-claro: #D6E2EF;
  --tormenta-tinte: #EEF3F8;
  --arcilla: #A8532F;
  --arcilla-2: #8E4325;
  --arcilla-claro: #F3DED2;
  --salvia: #3F7A5C;
  --salvia-claro: #DCEBE1;
  --ambar: #9A6A12;
  --ambar-claro: #F6E7C2;

  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Instrument Sans', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --t-xs: clamp(.78rem, .74rem + .2vw, .86rem);
  --t-s: clamp(.9rem, .86rem + .2vw, .98rem);
  --t-base: clamp(1.02rem, .98rem + .25vw, 1.12rem);
  --t-l: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --t-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
  --t-h1: clamp(2.3rem, 1.4rem + 4.6vw, 4.6rem);
  --t-cifra: clamp(4.4rem, 2rem + 14vw, 9.5rem);

  --ancho: 1080px;
  --medida: 64ch;
  --lat: clamp(1.1rem, 4vw, 2.5rem);
  --e-1: .5rem; --e-2: 1rem; --e-3: 1.75rem; --e-4: 3rem; --e-5: clamp(3.5rem, 8vw, 6.5rem);
  --radio: 6px;
  --salida: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--sans); font-size: var(--t-base); line-height: 1.55;
  font-feature-settings: 'ss01', 'cv11';
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--tormenta); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--tormenta-2); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -.01em; margin: 0; }
h1 { font-size: var(--t-h1); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'WONK' 1; text-wrap: balance; }
h2 { font-size: var(--t-xl); font-variation-settings: 'opsz' 72, 'SOFT' 30; text-wrap: balance; }
h3 { font-size: var(--t-l); font-variation-settings: 'opsz' 36; }
p { margin: 0 0 var(--e-2); max-width: var(--medida); }
strong { font-weight: 600; }
small, .peq { font-size: var(--t-s); color: var(--tinta-3); }
:focus-visible { outline: 2px solid var(--arcilla); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--arcilla-claro); }

.contenedor { width: min(100% - 2 * var(--lat), var(--ancho)); margin-inline: auto; }
.ojal { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tormenta); margin: 0 0 var(--e-2); }
.ojal::before { content: ''; display: inline-block; width: 1.6rem; height: 1px; background: currentColor;
  vertical-align: middle; margin-right: .6rem; }

/* — cabecera — */
.cab { padding: var(--e-2) 0; border-bottom: 1px solid var(--linea); }
.cab .contenedor { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; }
.marca { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--tinta); text-decoration: none;
  font-variation-settings: 'opsz' 20, 'SOFT' 40, 'WONK' 1; }
.marca em { font-style: italic; color: var(--tormenta); }
.cab nav { display: flex; gap: clamp(.8rem, 3vw, 1.6rem); font-size: var(--t-s); }
.cab nav a { color: var(--tinta-2); text-decoration: none; }
.cab nav a:hover { color: var(--tormenta); }

/* — portada — */
.portada { padding: var(--e-5) 0 var(--e-4); position: relative; overflow: hidden; }
.portada .contenedor { display: grid; gap: var(--e-3); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 820px) { .portada .contenedor { grid-template-columns: 7fr 5fr; } }
.portada h1 { margin-bottom: var(--e-2); }
.portada .entradilla { font-size: var(--t-l); color: var(--tinta-2); line-height: 1.4; max-width: 34ch; text-wrap: pretty; }
.lluvia { display: none; }
@media (min-width: 820px) {
  .lluvia { display: block; justify-self: end; width: 100%; max-width: 360px; color: var(--tormenta); opacity: .55; }
}
@media (prefers-reduced-motion: no-preference) {
  .lluvia line { animation: caer 6s linear infinite; }
  .lluvia line:nth-child(3n) { animation-duration: 8s; }
  .lluvia line:nth-child(5n) { animation-duration: 5s; animation-delay: -2s; }
  @keyframes caer { from { transform: translateY(-40px); } to { transform: translateY(40px); } }
}

/* — el formulario — */
.calc { padding: 0 0 var(--e-5); }
.calc form { display: grid; gap: var(--e-3); max-width: 720px; }
.paso { display: grid; gap: .6rem; }
.paso > label, .paso > .etq { font-family: var(--serif); font-size: var(--t-l); font-weight: 600;
  font-variation-settings: 'opsz' 24; }
.paso > label .n, .paso > .etq .n { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em;
  color: var(--tormenta); margin-right: .6rem; vertical-align: middle; }
.campo { font: inherit; font-size: var(--t-base); color: var(--tinta); background: var(--papel); border: 1px solid var(--linea);
  border-bottom: 2px solid var(--tinta); border-radius: var(--radio) var(--radio) 0 0; padding: .8rem .9rem; width: 100%;
  min-height: 3.1rem; transition: border-color .2s var(--salida), background .2s var(--salida); }
.campo:hover { background: #fff; }
.campo:focus { outline: none; border-bottom-color: var(--arcilla); background: #fff; }
select.campo { appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M1 1l7 7 7-7' fill='none' stroke='%231F2433' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 1rem center; }
input[type=date].campo { min-width: 0; }
.segmentos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.segmentos label { position: relative; cursor: pointer; padding: .8rem .9rem; text-align: left; line-height: 1.3;
  transition: background .2s var(--salida), color .2s var(--salida); }
.segmentos label + label { border-left: 1px solid var(--linea); }
.segmentos input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmentos label:has(input:checked) { background: var(--tinta); color: var(--papel); }
.segmentos label:has(input:focus-visible) { outline: 2px solid var(--arcilla); outline-offset: -3px; }
.segmentos b { display: block; font-weight: 600; }
.segmentos small { display: block; color: inherit; opacity: .78; font-size: var(--t-xs); }
.boton { font: inherit; font-weight: 600; font-size: var(--t-base); color: var(--papel); background: var(--arcilla);
  border: 0; border-radius: var(--radio); padding: .95rem 1.4rem; cursor: pointer; justify-self: start;
  transition: transform .25s var(--salida), background .2s var(--salida); }
.boton:hover { background: var(--arcilla-2); transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton.secundario { background: transparent; color: var(--tinta); border: 1px solid var(--tinta); }
.boton.secundario:hover { background: var(--papel-2); }
.boton.fantasma { background: transparent; color: var(--tormenta); padding-inline: .2rem; }
.boton.fantasma:hover { background: transparent; color: var(--tormenta-2); transform: none; text-decoration: underline; }

/* — el resultado — */
.resultado { background: var(--papel-2); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  padding: var(--e-4) 0 var(--e-5); }
.resultado[hidden] { display: none; }
.resultado .contenedor { display: grid; gap: var(--e-4); }
@media (min-width: 900px) { .resultado .contenedor { grid-template-columns: 5fr 7fr; column-gap: var(--e-5); } }
.veredicto { display: grid; gap: var(--e-2); align-content: start; }
.cifra { font-family: var(--serif); font-size: var(--t-cifra); font-weight: 600; line-height: .9; letter-spacing: -.03em;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; color: var(--tinta); margin: 0; }
.cifra sup { font-size: .35em; font-weight: 400; vertical-align: .9em; margin-left: .05em; letter-spacing: 0; }
.cifra-sub { font-size: var(--t-l); color: var(--tinta-2); margin: 0; max-width: 24ch; text-wrap: balance; line-height: 1.3; }
.nivel { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: var(--t-s);
  padding: .3rem .7rem .3rem .5rem; border-radius: 999px; background: var(--papel); border: 1px solid var(--linea); justify-self: start; }
.nivel::before { content: ''; width: .7rem; height: .7rem; border-radius: 50%; background: var(--tinta-3); }
.nivel[data-nivel="muy bajo"]::before, .nivel[data-nivel="bajo"]::before { background: var(--salvia); }
.nivel[data-nivel="moderado"]::before { background: var(--ambar); }
.nivel[data-nivel="alto"]::before, .nivel[data-nivel="muy alto"]::before { background: var(--arcilla); }
.frase { font-size: var(--t-base); max-width: 40ch; text-wrap: pretty; }
.datos-clave { list-style: none; margin: var(--e-1) 0 0; padding: 0; display: grid; gap: .55rem; font-size: var(--t-s); }
.datos-clave li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: baseline; padding-bottom: .55rem; border-bottom: 1px dashed var(--linea); }
.datos-clave b { font-family: var(--serif); font-size: 1.25em; font-weight: 600; font-variation-settings: 'opsz' 20; min-width: 3.2ch; }

.grafico { display: grid; gap: var(--e-2); align-content: start; }
.grafico h3 { font-size: var(--t-base); font-family: var(--sans); font-weight: 600; color: var(--tinta-2); }
.grafico figure { margin: 0; position: relative; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--sans); }
.grafico .eje { fill: var(--tinta-3); font-size: 11px; }
.grafico .rejilla { stroke: var(--linea); stroke-width: 1; }
.grafico .area { fill: var(--tormenta); opacity: .10; }
.grafico .linea { fill: none; stroke: var(--tormenta); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .marca-fecha { stroke: var(--arcilla); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico .punto { fill: var(--arcilla); stroke: var(--papel-2); stroke-width: 2.5; }
.grafico .punto-txt { fill: var(--tinta); font-size: 12px; font-weight: 600; }
.tooltip { position: absolute; pointer-events: none; background: var(--tinta); color: var(--papel); font-size: var(--t-xs);
  padding: .35rem .55rem; border-radius: 4px; transform: translate(-50%, -120%); white-space: nowrap; opacity: 0;
  transition: opacity .15s; }
.tooltip.visible { opacity: 1; }
.leyenda-nota { font-size: var(--t-xs); color: var(--tinta-3); margin: 0; }
details.tabla { font-size: var(--t-s); }
details.tabla summary { cursor: pointer; color: var(--tormenta); font-weight: 500; }
.tabla-scroll { overflow-x: auto; margin: var(--e-2) 0; -webkit-overflow-scrolling: touch; }
.tabla-scroll table { margin: 0; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-s); margin: var(--e-2) 0; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { table { font-size: var(--t-xs); } th, td { padding: .4rem .35rem; } }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-weight: 600; color: var(--tinta-2); font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; }
td.num, th.num { text-align: right; }
tr.actual td { background: var(--arcilla-claro); }
.sabados { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; margin: .4rem 0 0; padding: 0; list-style: none; }
.sabados li { display: grid; gap: .25rem; text-align: center; font-size: var(--t-xs); color: var(--tinta-3); }
.sabados .barra { height: 44px; display: flex; align-items: flex-end; }
.sabados .barra i { display: block; width: 100%; background: var(--tormenta); border-radius: 3px 3px 0 0; min-height: 2px; }
.sabados b { color: var(--tinta); font-weight: 600; }

.acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; margin-top: var(--e-2); }

/* — aviso / captura — */
.aviso { border: 1px solid var(--tinta); border-radius: var(--radio); padding: var(--e-3); background: var(--papel); display: grid; gap: var(--e-2);
  grid-column: 1 / -1; max-width: 720px; }
.aviso h3 { font-variation-settings: 'opsz' 30, 'SOFT' 50; }
.aviso form { display: grid; gap: .9rem; }
.aviso .fila { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .aviso .fila { grid-template-columns: 1fr auto; align-items: end; } }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-s); color: var(--tinta-2); cursor: pointer; }
.check input { margin: .25rem 0 0; accent-color: var(--arcilla); width: 1.05rem; height: 1.05rem; flex: none; }
.aviso .ok { display: none; color: var(--salvia); font-weight: 600; }
.aviso[data-estado="ok"] form { display: none; }
.aviso[data-estado="ok"] .ok { display: block; }
.aviso .error { color: var(--arcilla); font-size: var(--t-s); display: none; }
.aviso[data-estado="error"] .error { display: block; }

/* — secciones de texto — */
.seccion { padding: var(--e-5) 0; }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.seccion.tinte { background: var(--tormenta-tinte); }
.dos { display: grid; gap: var(--e-3); }
@media (min-width: 820px) { .dos { grid-template-columns: 4fr 8fr; column-gap: var(--e-5); } .dos h2 { position: sticky; top: 1rem; } }
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: auto 1fr; gap: var(--e-2); align-items: baseline; }
.pasos li::before { content: counter(paso, decimal-leading-zero); font-family: var(--serif); font-size: var(--t-xl); color: var(--tormenta);
  font-variation-settings: 'opsz' 40, 'SOFT' 80; font-weight: 400; line-height: 1; }
.pasos p { margin: 0; }
.faq { display: grid; gap: 0; }
.faq details { border-top: 1px solid var(--linea); padding: .2rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; font-family: var(--serif); font-size: var(--t-l); font-weight: 600; padding: .9rem 2rem .9rem 0; position: relative;
  list-style: none; font-variation-settings: 'opsz' 24; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: .2rem; top: .8rem; font-family: var(--sans); font-weight: 400; color: var(--tormenta);
  transition: transform .3s var(--salida); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p, .faq details > ul { color: var(--tinta-2); padding-bottom: .8rem; }

.provincias { columns: 2; column-gap: var(--e-3); list-style: none; padding: 0; margin: 0; font-size: var(--t-s); }
@media (min-width: 640px) { .provincias { columns: 3; } }
@media (min-width: 900px) { .provincias { columns: 4; } }
.provincias li { break-inside: avoid; padding: .3rem 0; border-bottom: 1px dashed var(--linea); display: flex; justify-content: space-between; gap: .5rem; }
.provincias a { text-decoration: none; color: var(--tinta); }
.provincias a:hover { color: var(--tormenta); text-decoration: underline; }
.provincias span { color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* — páginas de provincia y mes — */
.migas { font-size: var(--t-xs); color: var(--tinta-3); margin: var(--e-2) 0 0; }
.migas a { color: var(--tinta-3); }
.migas span::before { content: ' / '; }
.articulo { padding: var(--e-4) 0 var(--e-5); }
.articulo header { max-width: 760px; margin-bottom: var(--e-4); }
.articulo header h1 { margin: var(--e-2) 0; }
.respuesta { font-size: var(--t-l); line-height: 1.4; color: var(--tinta); max-width: 40em; text-wrap: pretty;
  border-left: 3px solid var(--arcilla); padding-left: var(--e-2); margin: var(--e-3) 0; }
.respuesta b { color: var(--arcilla); font-family: var(--serif); font-variation-settings: 'opsz' 30; }
.articulo section { margin: var(--e-5) 0 0; }
.articulo section h2 { margin-bottom: var(--e-2); }
.meses-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.meses-grid a { display: grid; gap: .15rem; padding: .8rem .9rem; border: 1px solid var(--linea); border-radius: var(--radio); text-decoration: none; color: var(--tinta);
  background: var(--papel); transition: border-color .2s, transform .25s var(--salida); }
.meses-grid a:hover { border-color: var(--tormenta); transform: translateY(-2px); }
.meses-grid a.actual { border-color: var(--arcilla); background: var(--arcilla-claro); }
.meses-grid b { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; font-variation-settings: 'opsz' 24; }
.meses-grid small { color: var(--tinta-3); }
.comparativa { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e-2); margin: var(--e-2) 0; }
.comparativa div { padding: var(--e-2) 0; border-top: 2px solid var(--tinta); }
.comparativa b { display: block; font-family: var(--serif); font-size: var(--t-xl); font-weight: 600; line-height: 1; font-variation-settings: 'opsz' 40, 'SOFT' 50; }
.comparativa span { font-size: var(--t-s); color: var(--tinta-3); }
.ancla-nav { display: flex; justify-content: space-between; gap: var(--e-2); font-size: var(--t-s); margin-top: var(--e-4); padding-top: var(--e-2); border-top: 1px solid var(--linea); }
.ranking ol { list-style: none; padding: 0; margin: 0; counter-reset: r; display: grid; gap: .3rem; }
.ranking li { counter-increment: r; display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--linea); }
.ranking li::before { content: counter(r); font-family: var(--serif); color: var(--tinta-3); font-variation-settings: 'opsz' 20; }
.ranking li .b { height: 8px; background: var(--tormenta); border-radius: 2px; max-width: 220px; justify-self: end; grid-column: 3; display: none; }
.ranking li span { font-variant-numeric: tabular-nums; color: var(--tinta-2); }

/* — pie — */
.pie { border-top: 1px solid var(--linea); padding: var(--e-4) 0; font-size: var(--t-s); color: var(--tinta-3); }
.pie .contenedor { display: grid; gap: var(--e-2); }
@media (min-width: 640px) { .pie .contenedor { grid-template-columns: 1fr auto; } }
.pie a { color: var(--tinta-2); }
.pie p { margin: 0; }

/* — revelado — */
@media (prefers-reduced-motion: no-preference) {
  .revela > * { opacity: 0; transform: translateY(14px); animation: subir .7s var(--salida) forwards; }
  .revela > *:nth-child(2) { animation-delay: .08s; }
  .revela > *:nth-child(3) { animation-delay: .16s; }
  .revela > *:nth-child(4) { animation-delay: .24s; }
  .revela > *:nth-child(5) { animation-delay: .32s; }
  @keyframes subir { to { opacity: 1; transform: none; } }
}
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- correcciones de accesibilidad (auditoría 10-sep-2026) ---------- */

/* SC 1.4.11: el cambio de estado del foco daba 2,90:1. Un anillo propio sí llega. */
.campo:focus-visible, .segmentos input:focus-visible + *, .check input:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--arcilla); border-radius: 3px; }

/* SC 2.5.8: objetivos táctiles por debajo de 24 px en móvil. */
@media (max-width: 860px) {
  .cab nav a, .migas a, .provincias a, .meses-grid a, .meses-tira a, .ranking a, .pie a {
    min-height: 24px; display: inline-flex; align-items: center; }
}

/* El scroll suave también es movimiento. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Casilla de consentimiento: obligatoria y visible como tal. */
.check.consiento { align-items: flex-start; }
.check.consiento .obl { color: var(--arcilla-2); font-weight: 700; }