/* Ductus · landing «Pizarra y trazo». El tablero es el mundo: la página no tiene modo claro. */

@font-face { font-family: "Shantell Sans"; src: url(fuentes/shantell.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(fuentes/atkinson.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(fuentes/atkinson-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* tablero */
  --tablero: #1D3830;
  --tablero-2: #23443A;     /* zonas con un poco más de luz */
  --tablero-3: #162C25;     /* zonas hundidas */
  --polvo: rgba(241, 239, 230, .06);
  /* tizas */
  --tiza: #F1EFE6;
  --tiza-2: #C5D1CA;
  --tiza-3: #9FB2A8;
  --tiza-linea: rgba(241, 239, 230, .22);
  --amarilla: #F4D35E;      /* acción */
  --amarilla-hover: #FFE07A;
  --rosada: #F5A6B8;        /* el trazo: números, flechas, orden */
  --celeste: #A9D4EE;       /* la voz del agente */
  --sobre-amarilla: #1A2620;
  /* madera del marco */
  --madera: #7A4E2D;
  --madera-2: #8A5A35;
  /* hojas pegadas al tablero */
  --papel: #FBFAF5;
  --papel-2: #F2F0E8;
  --papel-tinta: #1B1F1D;
  --papel-tinta-2: #4F5753;
  --papel-linea: #E2E0D6;
  --cinta: rgba(236, 226, 186, .82);
  /* dentro de las hojas: el portal del Agente Agro, con sus colores */
  --agro: #2D6A3E;
  --agro-hover: #24572F;
  --agro-suave: #E5EFE7;
  --atencion: #865700;
  --atencion-suave: #FBF0D9;
  --riesgo: #A3402B;
  --riesgo-suave: #F8E6E1;

  --letra-tiza: "Shantell Sans", "Comic Neue", system-ui, sans-serif;
  --letra: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 1200px;
  --sombra-hoja: 0 1px 1px rgba(0,0,0,.18), 0 14px 26px -12px rgba(0,0,0,.55);
  --curva: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; scrollbar-color: var(--tiza-3) var(--tablero-3); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--tiza); font: 400 18px/1.6 var(--letra);
  background-color: var(--tablero);
  /* borrones de tiza: el tablero nunca está del todo limpio */
  background-image:
    radial-gradient(60% 40% at 18% 12%, var(--polvo), transparent 70%),
    radial-gradient(45% 35% at 85% 38%, rgba(241,239,230,.045), transparent 70%),
    radial-gradient(55% 40% at 30% 72%, rgba(241,239,230,.04), transparent 70%);
  background-attachment: fixed;
  caret-color: var(--amarilla);
}
::selection { background: var(--amarilla); color: var(--sobre-amarilla); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--tablero-3); }
::-webkit-scrollbar-thumb { background: var(--tiza-3); border-radius: 6px; border: 3px solid var(--tablero-3); }
:focus-visible { outline: 2.5px dashed var(--amarilla); outline-offset: 3px; border-radius: 4px; }
a { color: var(--tiza); text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--amarilla); }
img, svg { display: block; }
.contenedor { width: min(var(--ancho), 100% - 48px); margin-inline: auto; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--amarilla); color: var(--sobre-amarilla); padding: 10px 14px; border-radius: 6px; font-weight: 700; }
.saltar:focus { top: 12px; }

h1, h2, h3, h4, h5 { font-family: var(--letra-tiza); font-weight: 600; letter-spacing: -.015em; text-wrap: balance; margin: 0; color: var(--tiza); }
h1 { font-size: clamp(44px, 6.2vw, 82px); line-height: 1.02; letter-spacing: -.025em; }
h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; margin-bottom: 18px; }
h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.18; }
p { margin: 0; text-wrap: pretty; }
.bajada { font-size: clamp(18px, 1.5vw, 20px); color: var(--tiza-2); max-width: 62ch; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .88em; }

/* El subrayado de tiza: se traza de izquierda a derecha, como un trazo. */
.subraya { background: linear-gradient(transparent 80%, rgba(244,211,94,.6) 80%, rgba(244,211,94,.6) 93%, transparent 93%) no-repeat 0 0 / 100% 100%; padding-inline: .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: no-preference) {
  .js .subraya { background-size: 0% 100%; transition: background-size .9s var(--curva) .25s; }
  .js .subraya.visible { background-size: 100% 100%; }
}

/* ---------------------------------------------------------------- botones */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 700 17px/1 var(--letra-tiza); padding: 15px 22px; border-radius: 7px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .2s, color .2s, transform .2s var(--curva); }
.btn svg { width: 20px; height: 20px; }
.btn.primario { background: var(--amarilla); color: var(--sobre-amarilla); }
.btn.primario:hover { background: var(--amarilla-hover); color: var(--sobre-amarilla); transform: translateY(-1px); }
.btn.secundario { color: var(--tiza); border-color: var(--tiza-linea); background: rgba(241,239,230,.03); }
.btn.secundario:hover { border-color: var(--tiza); color: var(--tiza); }
.btn.chico { font-size: 15px; padding: 11px 16px; }
.btn-tiza { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1.5px solid var(--tiza-linea); color: var(--tiza); border-radius: 7px; padding: 9px 14px; font: 500 15px/1 var(--letra-tiza); cursor: pointer; }
.btn-tiza svg { width: 18px; height: 18px; }
.btn-tiza:hover { border-color: var(--tiza); }

/* etiquetas de estado: escritas en tiza de color, nunca como pastilla rellena */
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.2 var(--letra-tiza); padding: 4px 10px; border: 1.5px solid currentColor; border-radius: 6px; vertical-align: middle; white-space: nowrap; }
.etiqueta.hoy { color: var(--amarilla); }
.etiqueta.construye { color: var(--celeste); border-style: dashed; }
.etiqueta.despues { color: var(--tiza-3); border-style: dotted; }

/* ---------------------------------------------------------------- barra */
.barra { position: sticky; top: 0; z-index: 30; background: rgba(29,56,48,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1.5px solid var(--tiza-linea); }
.barra .contenedor { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 8px; font: 700 28px/1 var(--letra-tiza); letter-spacing: -.01em; color: var(--tiza); text-decoration: none; }
.marca em { font-style: normal; color: var(--amarilla); }
.marca:hover { color: var(--tiza); }
.marca-d { width: 30px; height: 30px; fill: none; stroke: var(--tiza); stroke-width: 4; stroke-linecap: round; }
.marca-d path:last-child { stroke: var(--rosada); }
.barra nav { display: flex; gap: 26px; margin-left: auto; font: 500 16px/1 var(--letra-tiza); }
.barra nav a { color: var(--tiza-2); text-decoration: none; padding: 8px 0; }
.barra nav a:hover { color: var(--tiza); text-decoration: underline wavy var(--amarilla); text-underline-offset: 7px; text-decoration-thickness: 1.5px; }
.lado { display: flex; align-items: center; gap: 10px; }
.icono-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; border: 1.5px solid var(--tiza-linea); background: none; color: var(--tiza); cursor: pointer; list-style: none; }
.icono-btn::-webkit-details-marker { display: none; }
.icono-btn svg { width: 22px; height: 22px; }
.menu-movil { display: none; position: relative; }
.hoja-menu { position: absolute; right: 0; top: 54px; background: var(--tablero-2); border: 1.5px solid var(--tiza-linea); border-radius: 10px; padding: 8px; display: grid; min-width: 250px; box-shadow: 0 18px 30px -12px rgba(0,0,0,.6); }
.hoja-menu a { padding: 12px 14px; color: var(--tiza); text-decoration: none; font: 500 17px/1.2 var(--letra-tiza); border-radius: 6px; }
.hoja-menu a:hover { background: rgba(241,239,230,.06); }
.hoja-menu a:last-child { color: var(--amarilla); }

/* ---------------------------------------------------------------- portada */
.portada { position: relative; padding: 56px 0 84px; }
.portada .contenedor { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px 48px; align-items: center; }
.portada-texto h1 { margin-bottom: 22px; }
.portada .bajada { margin-bottom: 32px; max-width: 46ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 14px; }
.trazo { margin: 0; }
.trazo .lienzo { max-width: 440px; }
.trazo .lienzo > svg { width: 100%; height: auto; overflow: visible; }
.trazo .t { fill: none; stroke: var(--tiza); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; filter: url(#tiza); }
.trazo .flecha { fill: none; stroke: var(--rosada); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.trazo .num { fill: var(--rosada); font: 700 30px var(--letra-tiza); }
.trazo figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; margin-top: 10px; font: 500 19px/1.3 var(--letra-tiza); color: var(--amarilla); }
.trazo figcaption b { color: var(--rosada); margin-right: 4px; }
.franja { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 28px; padding-top: 20px; border-top: 1.5px dashed var(--tiza-linea); font: 400 16px/1.4 var(--letra-tiza); color: var(--tiza-2); }
.franja b { color: var(--amarilla); margin-right: 14px; font-weight: 600; }
.franja span:not(:last-child)::after { content: "·"; margin: 0 12px; color: var(--tiza-3); }
.repisa { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(var(--madera-2), var(--madera)); box-shadow: 0 -2px 8px rgba(0,0,0,.35); }
.repisa i { position: absolute; bottom: 12px; height: 9px; border-radius: 3px; }
.repisa i:nth-child(1) { left: 9%; width: 48px; background: var(--tiza); }
.repisa i:nth-child(2) { left: calc(9% + 58px); width: 34px; background: var(--amarilla); }
.repisa i:nth-child(3) { left: calc(9% + 102px); width: 26px; background: var(--rosada); }

/* ---------------------------------------------------------------- secciones */
section { padding: 104px 0; }
.revelar { transition: opacity .7s var(--curva), transform .7s var(--curva); }
@media (prefers-reduced-motion: no-preference) {
  .js .revelar:not(.visible) { opacity: 0; transform: translateY(14px); }
}

.problema .contenedor { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.preguntas-p { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.preguntas-p li { display: grid; gap: 4px; padding-left: 26px; position: relative; }
.preguntas-p li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border: 2px solid var(--rosada); border-radius: 50%; }
.preguntas-p b { font: 600 22px/1.25 var(--letra-tiza); }
.preguntas-p span { color: var(--tiza-2); }

/* ---------------------------------------------------------------- la semana */
.semana { background: var(--tablero-2); border-block: 1.5px solid var(--tiza-linea); }
.semana-cab { max-width: 820px; margin-bottom: 56px; }
.semana-cab .etiqueta { margin-left: 6px; }
.semana-cuerpo { display: grid; grid-template-columns: 170px 1fr; gap: 48px; align-items: start; }
.dias { position: sticky; top: 108px; list-style: none; margin: 0; padding: 0 0 0 26px; display: grid; gap: 4px; }
/* el trazo de la semana: una línea de tiza que baja de lunes a viernes */
.dias::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--tiza-linea); }
.dias::after { content: ""; position: absolute; left: 7px; top: 14px; width: 3px; border-radius: 2px; background: var(--rosada); height: var(--avance, 0%); transition: height .5s var(--curva); }
.dias a { position: relative; display: grid; gap: 0; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--tiza-3); }
.dias a::before { content: ""; position: absolute; left: -25px; top: 16px; width: 13px; height: 13px; border-radius: 50%; background: var(--tablero-2); border: 2.5px solid var(--tiza-3); z-index: 1; transition: background-color .3s, border-color .3s; }
.dias a b { font: 700 20px/1.2 var(--letra-tiza); }
.dias a span { font-size: 15px; }
.dias a:hover { color: var(--tiza); }
.dias a[aria-current="true"] { color: var(--tiza); background: rgba(241,239,230,.05); }
.dias a[aria-current="true"]::before { background: var(--rosada); border-color: var(--rosada); }
.dias a[aria-current="true"] b { color: var(--amarilla); }
.dias-cuerpo { display: grid; gap: 0; }
.dia { display: grid; grid-template-columns: .95fr 1.05fr; gap: 40px; padding: 48px 0; border-top: 1.5px dashed var(--tiza-linea); align-items: start; }
.dia:first-child { border-top: 0; padding-top: 0; }
.dia .hora { font: 600 16px/1 var(--letra-tiza); color: var(--rosada); margin-bottom: 12px; }
.dia h3 { margin-bottom: 14px; }
.dia .texto > p { color: var(--tiza-2); }
.dia .texto ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--tiza-2); font-size: 16.5px; }
.dia .texto li { padding-left: 22px; position: relative; }
.dia .texto li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 10px; height: 2.5px; border-radius: 2px; background: var(--tiza-3); }
.dia .texto b { color: var(--tiza); }
.frase { margin-top: 18px !important; font: 600 21px/1.35 var(--letra-tiza); color: var(--tiza) !important; }
.siguiente-dia { display: none; }

/* ---------------------------------------------------------------- hojas pegadas al tablero (demos) */
.hoja { position: relative; background: var(--papel); color: var(--papel-tinta); border-radius: 3px; padding: 20px 22px 22px; box-shadow: var(--sombra-hoja); font-size: 16px; line-height: 1.5; }
.hoja::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 24px; margin-left: -48px; background: var(--cinta); transform: rotate(-2.5deg); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.dia:nth-child(odd) .hoja { transform: rotate(.5deg); }
.dia:nth-child(even) .hoja { transform: rotate(-.45deg); }
.hoja ::selection { background: #CFE3D4; color: var(--papel-tinta); }
.hoja :focus-visible { outline-color: var(--agro); }
.hoja a { color: var(--agro); }
.h-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--papel-linea); font-size: 14.5px; color: var(--papel-tinta-2); }
.h-cab b { color: var(--papel-tinta); }
.simulado { font-size: 12.5px; color: var(--papel-tinta-2); border: 1px dashed #A9ADA7; border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
.h-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px/1 var(--letra); padding: 11px 15px; border-radius: 6px; border: 1.5px solid #C9CCC5; background: #fff; color: var(--papel-tinta); cursor: pointer; transition: background-color .15s, border-color .15s; }
.h-boton:hover { border-color: var(--papel-tinta-2); }
.h-boton.lleno { background: var(--agro); border-color: var(--agro); color: #fff; }
.h-boton.lleno:hover { background: var(--agro-hover); }
.h-boton:disabled { opacity: .65; cursor: default; }
.h-boton svg { width: 18px; height: 18px; }
.h-boton.grande { font-size: 17px; padding: 15px 18px; }

/* lunes */
.diapo { background: var(--papel-2); border-radius: 6px; padding: 16px; }
.diapo .cinta { font-size: 13px; color: var(--agro); font-weight: 700; margin-bottom: 4px; }
.diapo h4 { font: 700 20px/1.25 var(--letra); color: var(--papel-tinta); margin-bottom: 12px; letter-spacing: 0; }
.punto { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--papel-linea); font-size: 15px; }
.punto.mas p b { color: var(--riesgo); }
.no-entendi { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #C9CCC5; background: #fff; border-radius: 999px; padding: 7px 12px; font: 700 13.5px/1 var(--letra); color: var(--papel-tinta); cursor: pointer; white-space: nowrap; }
.no-entendi[aria-pressed="true"] { background: var(--riesgo-suave); border-color: var(--riesgo); color: var(--riesgo); }
.no-entendi .cuenta { min-width: 22px; padding: 3px 6px; border-radius: 999px; background: var(--papel-2); text-align: center; }
.no-entendi.salto .cuenta { animation: salto .35s var(--curva); }
@keyframes salto { 40% { transform: scale(1.35); } }
.vista-profe { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: 14.5px; color: var(--papel-tinta-2); }
.vista-profe svg { flex: none; margin-top: 3px; color: var(--agro); }
.vista-profe b { color: var(--papel-tinta); }

/* martes */
.tarjeta-b { border: 1px solid var(--papel-linea); border-radius: 8px; padding: 16px; background: #fff; }
.estado { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--agro-suave); color: var(--agro); }
.estado.atn { background: var(--atencion-suave); color: var(--atencion); }
.quien { font-weight: 700; margin-top: 10px; }
.por-que { font-size: 14.5px; color: var(--papel-tinta-2); }
.mensaje { margin: 12px 0 14px; padding: 12px 14px; background: var(--papel-2); border-radius: 6px; font-size: 15px; }
.mensaje[contenteditable="true"] { background: #fff; outline: 2px solid var(--agro); }
.botones { display: flex; flex-wrap: wrap; gap: 8px; }
.archivada { padding: 22px 16px; text-align: center; font-weight: 700; border: 1px dashed #B9BCB5; border-radius: 8px; }
.bitacora { margin-top: 12px; font-size: 14px; color: var(--papel-tinta-2); min-height: 1.5em; }
.bitacora b { color: var(--agro); }

/* miércoles */
.chat { display: grid; gap: 10px; }
.burbuja { max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: 15px; }
.burbuja.yo { justify-self: end; background: var(--agro); color: #fff; border-bottom-right-radius: 4px; }
.burbuja.agente { background: var(--papel-2); border-bottom-left-radius: 4px; }
@media (prefers-reduced-motion: no-preference) { .burbuja.nueva { animation: entra .4s var(--curva); } }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.aviso-profe { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 14px; color: var(--papel-tinta-2); }
.aviso-profe svg { color: var(--agro); flex: none; }

/* jueves */
.rubrica { display: grid; gap: 0; }
.criterio { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 12px 0; border-top: 1px solid var(--papel-linea); }
.criterio:first-child { border-top: 0; padding-top: 0; }
.criterio b { font-size: 15.5px; }
.criterio small { grid-column: 1; font-size: 14px; color: var(--papel-tinta-2); }
.ajuste { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 6px; }
.ajuste button { width: 34px; height: 34px; border-radius: 6px; border: 1.5px solid #C9CCC5; background: #fff; font: 700 18px/1 var(--letra); color: var(--papel-tinta); cursor: pointer; }
.ajuste button:hover { border-color: var(--papel-tinta-2); }
.ajuste output { min-width: 42px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.criterio.editado output { color: var(--atencion); }
.total { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--papel-tinta); }
.total span { font-size: 14.5px; color: var(--papel-tinta-2); }
.total output { font: 700 30px/1 var(--letra); font-variant-numeric: tabular-nums; margin-right: auto; }

/* viernes */
.conmuta { display: inline-flex; border: 1.5px solid #C9CCC5; border-radius: 8px; padding: 3px; gap: 2px; }
.conmuta button { border: 0; background: none; padding: 7px 11px; border-radius: 6px; font: 700 14px/1 var(--letra); color: var(--papel-tinta-2); cursor: pointer; }
.conmuta button[aria-pressed="true"] { background: var(--agro); color: #fff; }
.reporte h5 { font: 700 19px/1.3 var(--letra); color: var(--papel-tinta); letter-spacing: 0; }
.reporte .meta { font-size: 14px; color: var(--papel-tinta-2); margin: 2px 0 12px; }
.reporte dl { margin: 0; display: grid; gap: 10px; }
.reporte dt { font-weight: 700; font-size: 15px; }
.reporte dd { margin: 0; font-size: 15px; color: var(--papel-tinta-2); }
.borrador { margin-top: 14px; font-size: 13.5px; color: var(--atencion); font-weight: 700; }

.ademas { margin-top: 24px; padding-top: 40px; border-top: 1.5px dashed var(--tiza-linea); }
.ademas h4 { font-size: 24px; margin-bottom: 16px; }
.tiza-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font: 400 17px/1.4 var(--letra-tiza); color: var(--tiza-2); }
.tiza-lista li { position: relative; padding-left: 18px; }
.tiza-lista li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--rosada); }

/* ---------------------------------------------------------------- quién decide */
.confianza .bajada { margin-bottom: 48px; }
/* la escalera, dibujada con tiza: cada nivel un peldaño más arriba */
.escalera { list-style: none; margin: 0 0 72px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; }
.peldano { padding: 22px 24px 26px; border-top: 3px solid var(--tiza); border-left: 3px solid var(--tiza); border-top-left-radius: 4px; }
.peldano:nth-child(1) { margin-top: 112px; }
.peldano:nth-child(2) { margin-top: 56px; }
.peldano:nth-child(3) { border-right: 0; }
.peldano .n { display: block; font: 700 17px/1 var(--letra-tiza); color: var(--rosada); margin-bottom: 6px; }
.peldano .quien { display: block; font: 600 15px/1.3 var(--letra-tiza); color: var(--amarilla); margin-bottom: 10px; }
.peldano h3 { margin-bottom: 8px; }
.peldano p { color: var(--tiza-2); font-size: 16.5px; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.condiciones h3, .datos h3 { margin-bottom: 20px; }
.condiciones ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.condiciones li { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; }
.condiciones svg { width: 28px; height: 28px; color: var(--amarilla); grid-row: span 2; }
.condiciones b { font: 600 19px/1.3 var(--letra-tiza); }
.condiciones span { color: var(--tiza-2); font-size: 16.5px; }
.datos dl { margin: 0; display: grid; gap: 14px; }
.datos dl div { padding-bottom: 14px; border-bottom: 1.5px dashed var(--tiza-linea); }
.datos dt { font: 600 19px/1.3 var(--letra-tiza); color: var(--tiza); }
.datos dd { margin: 2px 0 0; color: var(--tiza-2); font-size: 16.5px; }

/* ---------------------------------------------------------------- cómo empezar */
.como { background: var(--tablero-3); }
.como .bajada { margin-bottom: 48px; }
.como .bajada .etiqueta { margin-left: 6px; }
.como-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
/* los pasos, en el orden del trazo: número rosado y flecha al siguiente */
.pasos { list-style: none; margin: 0 0 40px; padding: 0; counter-reset: paso; display: grid; gap: 30px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; position: relative; }
.pasos li::before { content: counter(paso); grid-row: span 2; width: 44px; height: 44px; border: 2.5px solid var(--rosada); border-radius: 50%; display: grid; place-items: center; font: 700 22px/1 var(--letra-tiza); color: var(--rosada); }
.pasos li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 52px; bottom: -26px; width: 2.5px; background: repeating-linear-gradient(var(--rosada) 0 6px, transparent 6px 11px); }
.pasos b { font: 600 21px/1.3 var(--letra-tiza); }
.pasos span { color: var(--tiza-2); font-size: 16.5px; }
.recibe h3 { margin-bottom: 14px; }
.honesta { margin-top: 32px; padding: 18px 20px; border: 1.5px dashed var(--celeste); border-radius: 8px; color: var(--tiza-2); font-size: 16.5px; }
.honesta b { color: var(--celeste); }
.constructor { transform: rotate(.4deg); }
.constructor label { display: block; font: 700 22px/1.2 var(--letra); margin-bottom: 12px; }
.constructor form { display: flex; gap: 8px; }
.campo-texto, .formulario input, .formulario select, .formulario textarea { width: 100%; font: 400 16px/1.4 var(--letra); color: var(--papel-tinta); background: #fff; border: 1.5px solid #C9CCC5; border-radius: 6px; padding: 12px 14px; caret-color: var(--agro); }
.campo-texto:focus, .formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 2px solid var(--agro); outline-offset: 1px; border-color: var(--agro); }
::placeholder { color: #6B706B; }
.ficha { margin-top: 16px; min-height: 290px; }
.ficha .esperando { display: flex; gap: 10px; align-items: center; color: var(--papel-tinta-2); font-size: 15px; padding: 18px 0; }
.puntos { display: inline-flex; gap: 4px; }
.puntos span { width: 6px; height: 6px; border-radius: 50%; background: var(--agro); animation: punto 1s infinite; }
.puntos span:nth-child(2) { animation-delay: .15s; } .puntos span:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 50% { opacity: .25; } }
.ficha .cab { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--papel-linea); }
.ficha .av { width: 40px; height: 40px; border-radius: 10px; background: var(--agro-suave); color: var(--agro); display: grid; place-items: center; }
.ficha .av svg { width: 20px; height: 20px; }
.ficha .cab b { display: block; font-size: 17px; }
.ficha .cab small { color: var(--papel-tinta-2); font-size: 14px; }
.ficha dl { margin: 0; }
.ficha dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--papel-linea); font-size: 14.5px; }
@media (prefers-reduced-motion: no-preference) { .js .ficha dl > div { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s var(--curva); } .js .ficha dl > div.ver { opacity: 1; transform: none; } }
.ficha dt { font-weight: 700; color: var(--papel-tinta-2); }
.ficha dd { margin: 0; }
.ficha .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha .chips span { background: var(--agro-suave); color: var(--agro); border-radius: 999px; padding: 3px 9px; font-size: 13px; font-weight: 700; }
.constructor .nota { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 13.5px; color: var(--papel-tinta-2); }

/* ---------------------------------------------------------------- para quién / hoy */
.quien-hoy .contenedor { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.para-quien { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.para-quien li { display: grid; gap: 2px; padding-bottom: 16px; border-bottom: 1.5px dashed var(--tiza-linea); }
.para-quien b { font: 600 20px/1.3 var(--letra-tiza); }
.para-quien span { color: var(--tiza-2); font-size: 16.5px; }
.estado-ruta { display: grid; gap: 22px; }
.estado-ruta p { margin-top: 10px; color: var(--tiza-2); font-size: 16.5px; }

/* ---------------------------------------------------------------- preguntas */
.preguntas { padding-top: 24px; }
.faq { max-width: 860px; display: grid; gap: 0; }
.faq details { border-top: 1.5px dashed var(--tiza-linea); }
.faq details:last-child { border-bottom: 1.5px dashed var(--tiza-linea); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font: 600 21px/1.3 var(--letra-tiza); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -10px; border-right: 2.5px solid var(--rosada); border-bottom: 2.5px solid var(--rosada); transform: rotate(45deg); transition: transform .3s var(--curva); }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.faq summary:hover { color: var(--amarilla); }
.faq details p { padding: 0 0 22px; color: var(--tiza-2); max-width: 68ch; }

/* ---------------------------------------------------------------- cierre */
.cierre { background: var(--tablero-2); border-top: 1.5px solid var(--tiza-linea); }
.cierre .contenedor { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.cierre .bajada { margin-bottom: 36px; }
.ficha-pdf { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; padding: 18px; border: 1.5px solid var(--tiza-linea); border-radius: 10px; text-decoration: none; color: var(--tiza); transition: border-color .2s; }
.ficha-pdf:hover { border-color: var(--amarilla); color: var(--tiza); }
.mini-hoja { width: 64px; height: 84px; background: var(--papel); border-radius: 2px; padding: 12px 9px; display: grid; gap: 6px; align-content: start; transform: rotate(-3deg); box-shadow: var(--sombra-hoja); }
.mini-hoja i { height: 3px; background: #CFD3CC; border-radius: 2px; }
.mini-hoja i:first-child { height: 8px; background: var(--tablero); width: 70%; }
.ficha-pdf > span:last-child { display: grid; gap: 4px; }
.ficha-pdf b { font: 600 20px/1.25 var(--letra-tiza); }
.ficha-pdf > span > span { color: var(--tiza-2); font-size: 15.5px; }
.descargar { display: inline-flex !important; align-items: center; gap: 8px; color: var(--amarilla) !important; font: 600 16px/1 var(--letra-tiza) !important; margin-top: 6px; }
.descargar svg { width: 18px; height: 18px; }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; transform: rotate(-.35deg); padding: 28px; }
.formulario .ancho { grid-column: 1 / -1; }
.campo label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.campo label small { font-weight: 400; color: var(--papel-tinta-2); }
.formulario textarea { min-height: 110px; resize: vertical; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.autoriza { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--papel-tinta-2); }
.autoriza input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--agro); flex: none; }
.estado-form { min-height: 1.4em; font-size: 15px; font-weight: 700; }
.estado-form.error { color: var(--riesgo); }
.estado-form.ok { color: var(--agro); }

/* ---------------------------------------------------------------- pie: el marco de madera */
.pie { background: linear-gradient(var(--madera-2), var(--madera) 30%, #6A4326); color: #F6EBDD; padding: 44px 0 52px; border-top: 4px solid #5A381F; }
.pie .contenedor { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-end; }
.pie .marca { color: #FFF7EA; margin-bottom: 10px; }
.pie .marca-d { stroke: #FFF7EA; }
.pie p { max-width: 60ch; font-size: 15.5px; color: #F6EBDD; }
.pie nav { display: flex; gap: 22px; flex-wrap: wrap; font: 500 16px/1 var(--letra-tiza); }
.pie nav a { color: #FFF7EA; }
.pie nav a:hover { color: var(--amarilla); }

/* ---------------------------------------------------------------- tabletas */
@media (max-width: 1080px) {
  .barra nav { display: none; }
  .menu-movil { display: block; }
  .lado { margin-left: auto; }
}
@media (max-width: 960px) {
  .portada .contenedor, .problema .contenedor, .como-cuerpo, .quien-hoy .contenedor, .cierre .contenedor, .dos-col { grid-template-columns: 1fr; }
  .trazo .lienzo { max-width: 340px; }
  .dia { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------------------------------------------------------------- celular: la semana por pestañas */
@media (max-width: 860px) {
  .semana-cuerpo { grid-template-columns: 1fr; gap: 20px; }
  .dias { top: 68px; z-index: 5; display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; padding: 10px 0; margin-inline: -24px; padding-inline: 24px; background: var(--tablero-2); border-bottom: 1.5px dashed var(--tiza-linea); }
  .dias::before, .dias::after { display: none; }
  .dias a { padding: 8px 12px; border: 1.5px solid transparent; flex: none; }
  .dias a::before { display: none; }
  .dias a span { display: none; }
  .dias a[aria-current="true"] { border-color: var(--rosada); background: none; }
  .js .semana.pestanas .dia { display: none; border-top: 0; padding-top: 12px; }
  .js .semana.pestanas .dia.activo { display: grid; }
  .js .semana.pestanas .siguiente-dia { display: inline-flex; justify-self: start; }
  .escalera { grid-template-columns: 1fr; align-items: stretch; gap: 0; }
  .peldano, .peldano:nth-child(1), .peldano:nth-child(2) { margin-top: 0; }
  .peldano:nth-child(1) { margin-left: 0; margin-right: 22%; }
  .peldano:nth-child(2) { margin-left: 11%; margin-right: 11%; }
  .peldano:nth-child(3) { margin-left: 22%; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .contenedor { width: min(var(--ancho), 100% - 32px); }
  .dias { margin-inline: -16px; padding-inline: 16px; }
  section { padding: 64px 0; }
  .portada { padding: 32px 0 64px; }
  .barra .btn.chico { padding: 10px 12px; font-size: 14px; }
  .marca { font-size: 25px; }
  .acciones .btn { width: 100%; justify-content: center; }
  .trazo .lienzo { max-width: 260px; }
  .trazo figcaption { font-size: 17px; }
  .franja { font-size: 15px; }
  .franja span:not(:last-child)::after { margin: 0 8px; }
  .dia .texto ul { display: none; }
  .hoja { padding: 16px 14px 18px; }
  .dia:nth-child(odd) .hoja, .dia:nth-child(even) .hoja, .constructor, .formulario { transform: none; }
  .punto { grid-template-columns: 1fr; gap: 8px; }
  .no-entendi { justify-self: start; }
  .condiciones span, .para-quien span { display: none; }
  .peldano { padding: 18px 16px 20px; }
  .peldano p { font-size: 15.5px; }
  .formulario { grid-template-columns: 1fr; padding: 20px 16px; }
  .constructor form { flex-direction: column; }
  .ficha dl > div { grid-template-columns: 1fr; gap: 2px; }
  .sin-movil { display: none; }
}
.barra .contenedor > .lado:nth-child(2) { margin-left: auto; }
/* El constructor y el formulario son de Ductus, no del portal del Agro: van en el verde del tablero. */
.constructor, .formulario { --agro: var(--tablero); --agro-hover: #10241E; --agro-suave: #E3ECE7; }
.barra .btn.chico { white-space: nowrap; }
@media (max-width: 640px) {
  .barra .btn.chico { font-size: 13.5px; padding: 10px 11px; }
  .barra .contenedor { gap: 10px; }
  .trazo .lienzo { max-width: 220px; }
}

/* La anotación «AI native»: la nota que el profesor escribe al lado del tablero */
.trazo { position: relative; }
.lienzo { position: relative; margin: 0 auto; }
.anota { position: absolute; top: 50%; left: -128px; width: 172px; margin: 0; transform: rotate(-4deg); text-align: right; font: 400 15px/1.3 var(--letra-tiza); color: var(--tiza-2); }
.anota b { display: block; font: 700 22px/1.1 var(--letra-tiza); color: var(--rosada); letter-spacing: .01em; }
.anota svg { position: absolute; right: -50px; top: 4px; width: 52px; height: 36px; fill: none; stroke: var(--rosada); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1180px) and (min-width: 961px) { .trazo .lienzo { max-width: 390px; } }
@media (max-width: 1180px) { .anota { left: -74px; width: 132px; font-size: 13.5px; } .anota b { font-size: 20px; } .anota svg { right: -42px; width: 44px; } }
@media (max-width: 960px) { .anota { position: static; left: auto; transform: rotate(-2deg); width: auto; text-align: center; margin: 0 auto 10px; } .anota svg { display: none; } }

/* Movimiento reducido: también quedan quietos el salto del contador de «No entendí», los puntos de espera, la línea
   rosada de la semana, la flecha de las preguntas y el levantarse de los botones (solo cambian de color).
   Va al final para ganarle a las reglas de arriba, que tienen la misma especificidad. */
@media (prefers-reduced-motion: reduce) {
  .no-entendi.salto .cuenta, .puntos span { animation: none; }
  .dias::after, .faq summary::after { transition: none; }
  .btn { transition: background-color .2s, color .2s; }
}