/* Plantuka — la hoja de estilo de la web. Sigue docs/design-system.md.
 *
 * Con una excepción deliberada: los tonos sobre los que va texto están más
 * oscuros que en la app. Los de la app no llegan al 4,5:1 que pide la WCAG AA
 * —el naranja de marca con texto blanco se queda en 2,29:1, que es ilegible
 * para mucha gente— y en una web pública eso es accesibilidad, no gusto.
 * Los tonos de fondo y de adorno se quedan como están: el aire de la marca es
 * el mismo, solo cambian los que tienen que leerse. */

/* Tipografías, servidas desde plantuka.com.
 *
 * Hasta el 2026-09-15 se pedían a Google Fonts, y cada visita le daba a Google
 * la IP de quien leía, sin que la política de privacidad lo dijera. Ahora los
 * ficheros están en /fonts/, descargados una vez con sus licencias (SIL Open
 * Font License 1.1, en /fonts/OFL-*.txt). La web ya no pide nada a terceros.
 *
 * Solo los subconjuntos latin y latin-ext: la web está en castellano. Rubik es
 * una fuente variable, así que un fichero cubre del 400 al 600. El número de
 * versión va en el nombre del fichero, y por eso nginx los cachea un año. */

/* Fredoka 600 normal, latin-ext */
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/fredoka-v17-normal-600-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fredoka 600 normal, latin */
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/fredoka-v17-normal-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lato 400 italic, latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/lato-v25-italic-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lato 400 italic, latin */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/lato-v25-italic-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lato 400 normal, latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/lato-v25-normal-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lato 400 normal, latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/lato-v25-normal-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lato 700 normal, latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/lato-v25-normal-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lato 700 normal, latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/lato-v25-normal-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Rubik 400-600 normal, latin-ext */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(/fonts/rubik-v31-normal-400-600-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Rubik 400-600 normal, latin */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(/fonts/rubik-v31-normal-400-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;
    --green: #4CAF50;
    --green-dark: #2E7D32;
    --green-deep: #1B5E20;
    --green-light: #81C784;
    --orange: #FF8F00;      /* marca, solo para fondos y adornos */
    --orange-text: #A85400; /* mismo tono, legible con texto blanco (5,34:1) */
    --orange-deep: #E65100;
    --yellow: #FFCA28;
    --ink: #2E3A2E;
    --ink-soft: #566856;
    --bg: #FAFAF8;   /* casi blanco, cálido y neutro */
    --tint: #F3F6F1; /* la banda verde, solo donde aporta */
    --surface: #FFFFFF;
    --border: #DCE8D8;
    --danger: #C62828;
    --danger-bg: #FDECEA;
    --warn: #8A4B00;
    --warn-bg: #FFF3E0;
    --mild: #6E5200;
    --mild-bg: #FFF8E1;
    --safe: #2E7D32;
    --safe-bg: #E8F5E9;
    /* Tres papeles, no tres caprichos:
     * - Fredoka es la marca. Se queda en el logotipo y en las etiquetas
     *   pequeñas. Puesta en todos los titulares suena a app infantil.
     * - Rubik lleva los títulos y la interfaz: mismo esqueleto geométrico que
     *   Fredoka y esquinas ligeramente redondeadas, así que es de la familia,
     *   pero sin la exageración.
     * - Lato para leer. */
    --display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
    --heading: 'Rubik', 'Segoe UI', system-ui, sans-serif;
    --body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    --radius: 20px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 19px;
    line-height: 1.7;
}
h1, h2, h3, h4 {
    font-family: var(--heading);
    line-height: 1.22;
    text-wrap: balance;
    font-weight: 500;
    letter-spacing: -0.015em;
}
h1, h2 { font-weight: 600; }
h1 { font-size: clamp(30px, 4.8vw, 44px); margin: 0 0 .4em; }
h2 { font-size: clamp(23px, 3vw, 30px); margin: 2.2em 0 .55em; }
h3 { font-size: 21px; margin: 1.9em 0 .4em; }
h4 { font-size: 17px; margin: 1.6em 0 .35em; }

/* Un párrafo pegado a su título no necesita separación extra, y el primer
 * elemento de una sección no necesita aire por arriba. */
h1 + *, h2 + *, h3 + *, h4 + * { margin-top: 0; }
.block > :first-child, .card > :first-child, figure > :first-child { margin-top: 0; }

p { margin: 0 0 1.15em; }
a { color: var(--green-dark); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 8px; }
img { max-width: 100%; height: auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px 14px; border-radius: 10px; z-index: 10; }

/* ── cabecera ───────────────────────────────────────────── */
.site-head { background: linear-gradient(135deg, #43A047, #2E7D32, #1B5E20); }
.bar {
    max-width: 1100px; margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--display); font-size: 23px; font-weight: 600;
    color: #fff; text-decoration: none; line-height: 1;
}
.brand img {
    /* Verde sobre verde no se ve. El cuadrado blanco es el mismo que lleva el
     * icono de la app, así que además reconoces la marca de la tienda. */
    width: 40px; height: 40px; display: block;
    background: #fff; border-radius: 12px; padding: 3px;
    object-fit: contain;
}
.bar nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.bar nav a { color: #fff; text-decoration: none; font-family: var(--heading); font-weight: 500; font-size: 15px; opacity: .92; }
.bar nav a:hover { opacity: 1; text-decoration: underline; }
.bar nav a.cta { background: var(--orange-text); padding: 8px 16px; border-radius: 14px; opacity: 1; font-weight: 600; }

/* En un móvil estrecho, seis enlaces y un botón no caben en una línea: con
 * `flex-wrap` se partían en dos filas y la cabecera se comía media pantalla
 * antes de que empezara el contenido.
 *
 * La solución no es un menú de hamburguesa: eso exige JavaScript, y aquí no
 * hay ninguno a propósito. El menú pasa a ser una tira que se desliza con el
 * dedo, con el botón de descarga siempre al final; el degradado del borde
 * derecho es lo que avisa de que hay más a la derecha. */
@media (max-width: 760px) {
    .bar { padding: 12px 0 10px; gap: 10px; flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
    .brand { padding: 0 16px; font-size: 21px; }
    .bar nav {
        margin-left: 0; flex-wrap: nowrap; gap: 16px;
        overflow-x: auto; scrollbar-width: none;
        padding: 2px 16px 4px;
        /* Que el primero y el último no queden pegados al borde al deslizar. */
        scroll-padding-inline: 16px;
        -webkit-overflow-scrolling: touch;
    }
    .bar nav::-webkit-scrollbar { display: none; }
    .bar nav a { white-space: nowrap; font-size: 16px; }
    .bar nav a.cta { padding: 6px 14px; }
}

/* ── estructura ─────────────────────────────────────────── */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
/* El contenido llega hasta donde llega la cabecera. Para que la línea no se
 * haga interminable a ese ancho, el texto crece: a 19 px caen menos letras por
 * renglón, que es lo que el ojo necesita para no perderse al volver. */
.narrow { max-width: 1100px; margin-inline: auto; }

/* Una columna de lectura estrecha es deliberada: pasadas las 75 letras por
 * línea el ojo pierde el renglón al volver. Lo que no puede ser es que quede
 * pegada a la izquierda con medio ancho vacío al lado, que es lo que la hace
 * parecer un fallo en vez de una decisión. */
section.block { padding: 44px 0; }
.crumbs { font-size: 14px; color: var(--ink-soft); padding: 18px 0 0; }
.crumbs a { color: var(--ink-soft); }

/* ── portada ────────────────────────────────────────────── */
.hero { background: var(--tint); border-bottom: 1px solid var(--border); padding: 60px 0 52px; }
.hero h1 { font-size: clamp(32px, 5.4vw, 50px); margin: 0 0 16px; }
.hero .lede { font-size: 22px; color: var(--ink-soft); max-width: 700px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.btn {
    display: inline-block; font-family: var(--heading); font-weight: 500; font-size: 17px;
    padding: 14px 26px; border-radius: 16px; text-decoration: none;
    background: var(--orange-text); color: #fff;
}
.btn.ghost { background: var(--surface); color: var(--green-dark); border: 2px solid var(--border); }

/* ── rejillas y tarjetas ────────────────────────────────── */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px; text-decoration: none; color: inherit; display: block;
}
a.card:hover { border-color: var(--green-light); }
.card h3 { margin: 0 0 4px; font-size: 19px; }
.card .sci { font-style: italic; color: var(--ink-soft); font-size: 14px; }
.card p { margin: 8px 0 0; font-size: 16px; color: var(--ink-soft); }

/* ── respuesta directa (AEO) ────────────────────────────── */
.answer {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 6px solid var(--green); border-radius: 8px var(--radius) var(--radius) 8px;
    padding: 24px 30px; margin: 0 0 30px; font-size: 21px;
}
.answer.danger { border-left-color: var(--danger); }
.answer.warn { border-left-color: var(--warn); }
.answer.safe { border-left-color: var(--safe); }
.answer p:last-child { margin-bottom: 0; }

/* ── aviso veterinario ──────────────────────────────────── */
.vet {
    background: var(--danger-bg); border: 1px solid #F3C7C3; border-radius: var(--radius);
    padding: 18px 22px; margin: 26px 0; font-size: 16px;
}
.vet strong { color: #8C1D18; }
.vet p { margin: 0; }

/* ── etiquetas ──────────────────────────────────────────── */
.tag {
    display: inline-block; font-family: var(--display); font-size: 13px; font-weight: 600;
    padding: 3px 12px; border-radius: 20px; margin: 0 6px 6px 0;
}
.tag.danger { background: var(--danger-bg); color: var(--danger); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.mild { background: var(--mild-bg); color: var(--mild); }
.tag.safe { background: var(--safe-bg); color: var(--safe); }
.tag.plain { background: var(--tint); color: var(--ink-soft); border: 1px solid var(--border); }

/* ── datos ──────────────────────────────────────────────── */
.facts { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; margin: 22px 0; }
.facts div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--bg); }
.facts div:last-child { border-bottom: 0; }
.facts dt, .facts .k { font-family: var(--heading); font-weight: 500; color: var(--ink-soft); font-size: 15px; }
@media (max-width: 560px) { .facts div { grid-template-columns: 1fr; gap: 2px; } }

.scroller { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin: 22px 0; }
table { border-collapse: collapse; width: 100%; font-size: 17px; }
/* El ancho mínimo es lo que obliga a la tabla a deslizarse dentro de su caja
 * en el móvil, y solo tiene sentido dentro de ella. Suelto, se lo aplicaba
 * también a la tabla del texto legal, que llega en bruto desde docs/ y sin
 * caja: a 390 px la página entera se iba de lado. */
.scroller table { min-width: 520px; }
th, td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--bg); vertical-align: top; }
thead th { font-family: var(--heading); font-weight: 500; font-size: 14px; color: var(--ink-soft); background: var(--tint); }
tbody tr:last-child td { border-bottom: 0; }

ul.clean { list-style: none; padding: 0; margin: 0 0 1em; }
ul.clean li { position: relative; padding-left: 22px; margin-bottom: 8px; }
ul.clean li::before { content: ""; position: absolute; left: 4px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.step { border-left: 3px solid var(--border); padding-left: 18px; margin-bottom: 20px; }
.step h3 { margin-bottom: 4px; font-size: 18px; }

/* ── llamada a la app ───────────────────────────────────── */
.appcta {
    background: linear-gradient(135deg, #E8F5E9, #F0F7EC);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px 28px; margin: 34px 0 0;
}
.appcta h2 { font-size: 22px; margin: 0 0 6px; }
.appcta p { color: var(--ink-soft); margin-bottom: 16px; }

/* ── fuente ─────────────────────────────────────────────── */
.source { font-size: 14px; color: var(--ink-soft); margin-top: 26px; }

/* ── pie ────────────────────────────────────────────────── */
.site-foot { background: var(--surface); border-top: 1px solid var(--border); margin-top: 56px; padding: 40px 20px 28px; }
/* 150 y no 200: con 1100 px de ancho y 26 de hueco, 200 solo daba sitio a
   cuatro columnas, y al añadir la de redes la quinta caía sola a otra fila. */
.site-foot .cols { max-width: 1100px; margin: 0 auto; display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.site-foot h2 { font-size: 14px; font-family: var(--display); font-weight: 600; color: var(--ink); margin: 0 0 10px; letter-spacing: .02em; }
.site-foot a { display: block; font-size: 15px; color: var(--ink-soft); text-decoration: none; margin-bottom: 6px; }
.site-foot a:hover { color: var(--green-dark); text-decoration: underline; }
.site-foot .small { font-size: 13px; color: var(--ink-soft); }
.updated { max-width: 1100px; margin: 28px auto 0; font-size: 13px; color: var(--ink-soft); border-top: 1px solid var(--border); padding-top: 16px; }

/* ── luna ───────────────────────────────────────────────── */
.moon-today { background: linear-gradient(135deg, #1A237E, #3949AB); color: #fff; border-radius: var(--radius); padding: 30px 32px; }
.moon-today h2 { color: #fff; margin: 0 0 6px; font-size: 26px; }
.moon-today .big { font-size: 56px; line-height: 1; }
.moon-today p { color: rgba(255,255,255,.9); margin-bottom: 0; }
.moon-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); margin-top: 22px; }
.moon-day { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px; text-align: center; font-size: 14px; }
.moon-day .d { font-family: var(--display); font-weight: 600; }
.moon-day .e { font-size: 24px; display: block; }
.moon-day .i { color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Las doce tarjetas de los meses. Antes eran cajas con el nombre del mes y el
 * año repetido doce veces: nada que mirar y ninguna razón para entrar. Ahora
 * llevan lo que se busca de un mes —sus dos lunas y cuántos días de siembra
 * trae— y el número va grande, que es lo que se lee de un vistazo. */
.moon-months { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.moon-month { padding: 18px 20px 14px; }
.moon-month h3 {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    margin: 0 0 10px; font-size: 20px;
}
.moon-month h3 span { font-size: 14px; font-weight: 400; color: var(--ink-soft); }
.moon-month dl { margin: 0; }
.moon-month dl > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--border);
}
.moon-month dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.moon-month dt { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.moon-month dd {
    margin: 0; font-family: var(--display); font-weight: 600; font-size: 19px;
    font-variant-numeric: tabular-nums; color: var(--ink);
}
a.moon-month:hover { border-color: var(--green-light); background: var(--surface); }

/* ── ilustraciones ──────────────────────────────────────── */
.hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.hero-grid img { width: 260px; height: auto; }
@media (max-width: 760px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-grid img { width: 180px; justify-self: center; order: -1; }
}
.appcta.with-art { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.appcta.with-art img { width: 140px; height: auto; }
@media (max-width: 620px) { .appcta.with-art { grid-template-columns: 1fr; } .appcta.with-art img { display: none; } }

/* ── filtro ─────────────────────────────────────────────── */
.filter { margin: 0 0 26px; max-width: 460px; }
.filter label { display: block; font-family: var(--heading); font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.filter input {
    width: 100%; font-family: var(--body); font-size: 17px;
    padding: 12px 16px; border-radius: 16px;
    border: 2px solid var(--border); background: var(--surface); color: var(--ink);
}
.filter input:focus { border-color: var(--green); outline: none; }
.filter-count { font-size: 14px; color: var(--ink-soft); margin: 8px 0 0; min-height: 1.2em; }

/* ── fotos de plantas ───────────────────────────────────── */
.plant-photo { margin: 0; }
.plant-photo img {
    display: block; width: 100%; height: auto;
    border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--surface); object-fit: cover;
}
/* Cuadradas siempre. Las fotos de Commons vienen como vienen, y una vertical
 * estira la columna hasta el doble y deja el texto de al lado flotando en
 * medio de un vacío. Con proporción fija, todas las fichas se parecen. */
.plant-photo:not(.thumb) img { aspect-ratio: 1 / 1; }
.plant-photo figcaption {
    font-size: 13px; color: var(--ink-soft); margin-top: 8px; line-height: 1.45;
}
.plant-photo figcaption a { color: var(--ink-soft); }
.plant-photo.thumb :is(img, .photo-placeholder) {
    aspect-ratio: 4 / 3;
    border-radius: 14px 14px 0 0;
    border: 0;
    margin: -20px -20px 14px;
    width: calc(100% + 40px);
    max-width: none; /* si no, el `img { max-width: 100% }` global lo recorta */
}

/* Identificar primero: en móvil la foto va antes que el texto. */
.id-block { display: grid; gap: 30px; grid-template-columns: 360px 1fr; align-items: start; margin-bottom: 30px; }
/* Sin foto no hay dos columnas que repartir: el texto se queda estrangulado
 * en 250 px al lado de un hueco vacío. */
.id-block:not(:has(figure)) { display: block; }
.id-block .answer { margin-bottom: 0; }
@media (max-width: 700px) { .id-block { grid-template-columns: 1fr; } }

.card .plant-photo { margin-bottom: 0; }
/* In place of a missing photo: the photo's own box, filled with the house
 * greens, so a card without one does not look broken. */
.photo-placeholder {
    display: block;
    background: linear-gradient(135deg, var(--tint), var(--safe-bg));
}

/* ── refrán destacado ───────────────────────────────────── */
.proverb {
    background: linear-gradient(135deg, #FFF3E0, #FFF8E1);
    border: 1px solid #F3E2BE; border-radius: var(--radius);
    padding: 30px 34px; margin: 0 0 30px;
}
.proverb .month {
    font-family: var(--display); font-size: 13px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: #8A6D1F; margin: 0 0 12px;
}
.proverb blockquote {
    margin: 0; font-family: var(--display); font-weight: 600;
    font-size: clamp(24px, 3.6vw, 34px); line-height: 1.25; color: #4A3B12;
    text-wrap: balance;
}
/* `meaning` y no `why`: la portada usa `.why` para una banda de página entera
 * —fondo blanco, 60 px de aire arriba y abajo—, y como el selector no lleva
 * contexto le caía también a este párrafo. Dentro de la tarjeta del refrán se
 * veía como un recuadro blanco vacío entre el refrán y su explicación. */
.proverb .meaning { margin: 14px 0 0; font-size: 17px; color: #6B5A2A; }
.proverb .where { margin: 10px 0 0; font-size: 14px; color: #8A7742; }

/* ════════════════════════════════════════════════════════════
   PORTADA
   Bandas alternas con ritmo propio: buscar, hoy, peligro, por
   qué, índice. Cada una tiene su forma; si todas fueran rejillas
   de tarjetas, ninguna destacaría.
   ════════════════════════════════════════════════════════════ */

.kicker {
    font-family: var(--display); font-size: 13px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--green-dark);
    margin: 0 0 12px;
}

/* ── 1. Buscar ─────────────────────────────────────────────── */
.opener { background: var(--surface); border-bottom: 1px solid var(--border); padding: 68px 0 60px; }
.opener-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.opener h1 { font-size: clamp(34px, 5vw, 52px); margin: 0 0 18px; letter-spacing: -.02em; }
.opener .lede { font-size: 21px; color: var(--ink-soft); max-width: 34em; margin-bottom: 30px; }
.opener-art { width: 260px; height: auto; }
@media (max-width: 900px) {
    .opener-grid { grid-template-columns: 1fr; gap: 24px; }
    .opener-art { width: 170px; justify-self: center; order: -1; }
}

.finder { display: block; position: relative; max-width: 620px; }
.finder input {
    width: 100%; font-family: var(--body); font-size: 21px;
    padding: 18px 22px 18px 54px; border-radius: 18px;
    border: 2px solid var(--border); background: var(--bg); color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566856' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 18px center; background-size: 22px;
}
.finder input:focus { border-color: var(--green); outline: none; background-color: var(--surface); }
.finder .results {
    position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0;
    list-style: none; margin: 0; padding: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 18px; box-shadow: 0 18px 40px rgba(34,48,31,.14);
    max-height: 380px; overflow-y: auto;
}
.finder .results a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 12px 16px; border-radius: 12px; text-decoration: none; color: var(--ink);
}
.finder .results a:hover, .finder .results a.on, .finder .results a:focus { background: var(--tint); outline: none; }
.finder .r-name { font-family: var(--heading); font-weight: 500; font-size: 18px; }
.finder .r-kind { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }

.shortcuts { margin: 20px 0 0; font-size: 17px; color: var(--ink-soft); }
.shortcuts a { white-space: nowrap; }

/* ── 2. Hoy, en el cielo de esta noche ─────────────────────── */
.today { background: var(--tint); border-bottom: 1px solid var(--border); padding: 46px 0; }
.today-grid { display: grid; grid-template-columns: 1.15fr 1fr 1.05fr; gap: 22px; }
@media (max-width: 900px) { .today-grid { grid-template-columns: 1fr; } }

/* Tres pastillas equilibradas por contenido: cada una lleva encabezado, un
 * renglón de contexto, tres datos y un enlace. Así miden lo mismo porque
 * dicen lo mismo, no porque el CSS las estire. */
.tn-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px 26px 22px;
}
.tn-card > a { margin-top: auto; padding-top: 18px; }
.tn-moon-top { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin-bottom: 16px; }
@media (max-width: 520px) { .tn-moon-top { grid-template-columns: 1fr; gap: 14px; } }

.tn-next { margin: 4px 0 0; }
.tn-next > div, .tn-sow dl > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.tn-next > div:last-child, .tn-sow dl > div:last-child { border-bottom: 0; }
.tn-next dt, .tn-sow dt {
    font-family: var(--heading); font-size: 12px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0;
    flex: 0 0 auto;
}
.tn-next dd, .tn-sow dd { margin: 0; font-size: 16px; color: var(--ink); }
/* Las fechas son cortas y alinean bien a la derecha; las listas de cultivos
 * se parten en dos líneas y ahí la derecha deja un borde roto. */
.tn-next dd { text-align: right; }
.tn-sow dl > div { display: block; }
.tn-sow dt { margin-bottom: 3px; }
.tn-where { font-size: 14px; color: var(--ink-soft); margin: 0; }

.tn-kicker {
    font-family: var(--display); font-size: 12.5px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--green-dark); margin: 0 0 10px;
}
.today h2 { font-size: 26px; margin: 0 0 4px; }
.tn-pct { color: var(--ink-soft); font-size: 15px; font-variant-numeric: tabular-nums; margin: 0 0 14px; }
.tn-text { color: var(--ink-soft); font-size: 17px; margin: 0 0 16px; }
.today a {
    font-family: var(--heading); font-weight: 500; font-size: 16px;
    color: var(--green-dark);
}

/* La tarjeta de la luna es una variación de sus dos vecinas, no un objeto
 * distinto: verde pálido y tinta oscura. En oscuro era la más pesada de la
 * fila y se llevaba la mirada antes de que nadie leyera nada. Aclarar el
 * fondo con el texto blanco no era una opción —a partir de ahí ni el blanco
 * puro llega al 4,5:1 de la WCAG AA—, así que se invierte: con tinta oscura,
 * cuanto más pálido el fondo, mejor se lee. Queda entre 5:1 y 10,7:1. */
.tn-moon {
    background: linear-gradient(155deg, #DBE7DC, #EAF1E7) !important;
    border-color: #C8DACB !important;
}
.tn-moon .tn-kicker { color: #3B6247; }
.tn-moon h2 { color: #1B3324; }
.tn-moon .tn-pct { color: #3F5A46; }
.tn-moon .tn-text { color: #33473A; }
.tn-moon .tn-next > div { border-bottom-color: rgba(27,51,36,.14); }
.tn-moon .tn-next dt { color: #3B6247; }
.tn-moon .tn-next dd { color: #22392A; }
.tn-moon > a { color: #2A6B3C; }
.tn-moon .moon-disc { filter: drop-shadow(0 8px 18px rgba(27,51,36,.20)); }

.tn-saying { background: linear-gradient(140deg, #FFF6E4, #FFFBF0) !important; border-color: #F0E2C4 !important; }
.tn-saying .tn-kicker { color: #8A6D1F; }
.tn-saying .tn-text, .tn-saying .tn-where { color: #6B5A2A; }
.tn-saying .tn-next > div { border-bottom-color: #EFE0C0; }
.tn-saying .tn-next dt { color: #8A7742; }
.tn-saying .tn-next dd { color: #5C4C1E; }
.tn-saying > a { color: #7A5B14; }
.tn-sow dl { margin: 0; }

.tn-saying blockquote {
    margin: 0 0 12px; font-family: var(--heading); font-weight: 500;
    font-size: 21px; line-height: 1.32; color: #4A3B12;
}

/* ── 3. Las que matan ──────────────────────────────────────── */
/* Las bandas de la portada llevan `-band` y no el nombre a secas. `.danger` y
 * `.why` sueltos también le caían a `<span class="tag danger">` y a
 * `<p class="why">`, que son modificadores y viven en otras páginas: la
 * etiqueta «Letal» de la tabla de plantas tóxicas salía como una cápsula rosa
 * de 130 px de alto, porque heredaba los 60 px de aire de la banda. */
.danger-band { padding: 60px 0; }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 28px; }
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; gap: 12px; } }
.section-head h2 { margin: 0; font-size: clamp(26px, 3.2vw, 34px); }
.section-note { font-size: 17px; color: var(--ink-soft); margin: 0; }

.danger-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 900px) { .danger-row { grid-template-columns: repeat(2, 1fr); } }
.danger-card {
    display: block; text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0; overflow: hidden;
}
.danger-card:hover { border-color: var(--danger); }
.danger-card .plant-photo.thumb :is(img, .photo-placeholder) { margin: 0; width: 100%; aspect-ratio: 1 / 1; border-radius: 0; }
.danger-body { padding: 16px 18px 18px; }
.danger-level {
    font-family: var(--heading); font-size: 12px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--danger);
    margin: 0 0 6px;
}
.danger-card h3 { margin: 0 0 2px; font-size: 20px; }
.danger-card .sci { display: block; margin: 0; font-size: 14px; font-style: italic; color: var(--ink-soft); }
.danger-more { margin-top: 26px; font-size: 17px; color: var(--ink-soft); }

/* ── 4. Por qué ────────────────────────────────────────────── */
.why-band { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 60px 0; }
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: center; }
.why-text { max-width: 40em; }
.why-text .first { font-size: 24px; line-height: 1.45; color: var(--ink); font-family: var(--heading); font-weight: 400; }
.why-text p { font-size: 19px; }

/* La columna de la derecha no es un adhesivo: es el sitio donde se actúa.
 * Con el icono solo, quedaba medio metro de blanco debajo. */
.why-aside {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    text-align: center;
    background: var(--tint); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 28px 24px 30px;
}
.why-aside img { width: 200px; height: auto; margin-bottom: 2px; }
.why-aside-line { font-size: 16px; color: var(--ink-soft); margin: 0 0 6px; }
.why-aside .btn { width: 100%; text-align: center; padding: 14px 20px; }
@media (max-width: 900px) {
    .why-grid { grid-template-columns: 1fr; gap: 32px; }
    .why-aside { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .why-aside img { width: 120px; }
    .why-aside .btn { width: auto; }
}

/* ── 5. Índice ─────────────────────────────────────────────── */
.index { padding: 54px 0 20px; }
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.index-list li { border-bottom: 1px solid var(--border); }
.index-list a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
    padding: 16px 4px; text-decoration: none; color: var(--ink);
}
.index-list a:hover { color: var(--green-dark); padding-left: 12px; transition: padding .15s ease; }
.index-label { font-family: var(--heading); font-weight: 500; font-size: 20px; }
.index-count { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 17px; }
.index-count small { font-size: 15px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ════════════════════════════════════════════════════════════
   FICHA DE TOXICIDAD
   Quien llega aquí a las once de la noche necesita dos cosas en
   este orden: ¿es grave? y ¿qué hago? Los datos de referencia
   vienen después, no antes.
   El tono lo marca la gravedad: la página de una planta letal no
   puede verse igual que la de una que da dolor de barriga.
   ════════════════════════════════════════════════════════════ */

.sheet { --tone: var(--green); --tone-soft: var(--safe-bg); --tone-ink: var(--safe); }
.sheet[data-tone="danger"] { --tone: var(--danger); --tone-soft: var(--danger-bg); --tone-ink: var(--danger); }
.sheet[data-tone="warn"]   { --tone: var(--warn);   --tone-soft: var(--warn-bg);   --tone-ink: var(--warn); }
.sheet[data-tone="mild"]   { --tone: var(--mild);   --tone-soft: var(--mild-bg);   --tone-ink: var(--mild); }
.sheet[data-tone="safe"]   { --tone: var(--safe);   --tone-soft: var(--safe-bg);   --tone-ink: var(--safe); }

.sheet-head { margin-bottom: 28px; }
.sheet-head h1 { margin: 0 0 8px; }
.sheet-sci { font-style: italic; color: var(--ink-soft); font-size: 18px; margin: 0; }

/* ── El veredicto ──────────────────────────────────────────── */
.verdict {
    display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px;
    align-items: start; padding: 28px 30px; margin-bottom: 32px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 8px solid var(--tone); border-radius: 10px var(--radius) var(--radius) 10px;
}
@media (max-width: 780px) { .verdict { grid-template-columns: 1fr; gap: 22px; padding: 22px; } }
.verdict-answer { font-size: 21px; line-height: 1.55; margin: 0 0 22px; }
.verdict-answer strong { color: var(--tone-ink); }

.mini-label {
    display: block; font-family: var(--heading); font-size: 12px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px;
}

.affects { margin: 22px 0 0; }
.affects ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.affects a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px 7px 10px; border-radius: 999px;
    background: var(--tint); border: 1px solid var(--border);
    text-decoration: none; color: var(--ink); font-size: 16px;
}
.affects a:hover { border-color: var(--tone); }
.a-emoji { font-size: 19px; line-height: 1; }
.parts { margin: 22px 0 0; font-size: 17px; }
.parts .mini-label { margin-bottom: 4px; }

/* ── La escala ─────────────────────────────────────────────── */
.severity ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; }
.severity li { display: flex; flex-direction: column; gap: 7px; }
.severity .s-bar { height: 7px; border-radius: 4px; background: var(--border); }
/* Marca dónde cae, no cuánto lleva: rellenar los peldaños anteriores diría
 * que una planta letal es además «no tóxica», que es justo lo contrario. */
.severity li[data-on="true"] .s-bar { background: var(--tone); height: 12px; margin-top: -5px; }
.severity .s-label {
    font-size: 12.5px; color: var(--ink-soft); font-family: var(--heading);
    letter-spacing: .01em; line-height: 1.2;
}
.severity li[data-on="true"] .s-label { color: var(--tone-ink); font-weight: 600; }
/* A 390 px las cinco palabras se pisan y «No tóxica» se parte en dos. Los
 * peldaños se quedan los cinco, que es lo que enseña dónde cae; de los nombres
 * sobreviven los dos extremos, que dicen de qué va la escala, y el que está
 * marcado, que es la respuesta. */
@media (max-width: 560px) {
    .severity .s-label { font-size: 11.5px; }
    .severity li:not([data-on="true"]):not(:first-child):not(:last-child) .s-label { display: none; }
}

/* ── Qué hacer ─────────────────────────────────────────────── */
.act {
    background: var(--tone-soft); border: 1px solid var(--tone);
    border-radius: var(--radius); padding: 28px 32px; margin-bottom: 36px;
}
.act h2 { margin: 0 0 12px; font-size: 26px; color: var(--tone-ink); }
.act-do { font-size: 21px; line-height: 1.5; margin: 0 0 16px; }
.act-vet { font-size: 17px; margin: 0; color: var(--ink); opacity: .88; }

.sheet section.block { padding-top: 0; }
.sheet .lead-p { font-size: 20px; }

/* ── La ficha de datos ─────────────────────────────────────── */
.datasheet { margin: 0; border-top: 1px solid var(--border); }
.datasheet > div {
    display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px;
    padding: 13px 2px; border-bottom: 1px solid var(--border);
}
@media (max-width: 620px) { .datasheet > div { grid-template-columns: 1fr; gap: 2px; } }
.datasheet dt { font-family: var(--heading); font-weight: 500; font-size: 16px; color: var(--ink-soft); margin: 0; }
.datasheet dd { margin: 0; font-size: 17px; }

.danger-row.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .danger-row.four { grid-template-columns: repeat(2, 1fr); } }
.danger-level[data-tone="warn"] { color: var(--warn); }
.danger-level[data-tone="mild"] { color: var(--mild); }
.danger-level[data-tone="safe"] { color: var(--safe); }

/* ── Detalles de hoja y flor ────────────────────────────────── */
.ref-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
@media (max-width: 860px) { .ref-grid { grid-template-columns: 1fr; gap: 28px; } }
.details { display: grid; gap: 12px; }
.details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 14px; }
/* Un pie con una URL larga ensanchaba su columna y descuadraba la rejilla. */
.details figcaption { overflow-wrap: anywhere; }
@media (max-width: 860px) { .details-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.details figure { margin: 0; }
.details img {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 16px; border: 1px solid var(--border);
}
.details figcaption { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }
.details figcaption b { font-family: var(--heading); font-weight: 500; color: var(--ink); }
.details figcaption a { color: var(--ink-soft); }

/* ════════════════════════════════════════════════════════════
   FICHA DE PLANTA
   Es la página que enlaza todo lo demás, así que lo primero es
   situarse: qué es, qué pide y qué le pasa a lo largo del año.
   ════════════════════════════════════════════════════════════ */

.plant-head { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: center; margin-bottom: 26px; }
/* Centrado y no arriba: con textos cortos, alinear por arriba deja el título
 * colgando sobre medio palmo de nada al lado de la foto. */
@media (max-width: 780px) { .plant-head { grid-template-columns: 1fr; gap: 22px; } }
.plant-head h1 { margin: 0 0 6px; }
.plant-sci { font-style: italic; color: var(--ink-soft); font-size: 18px; margin: 0 0 6px; }
.plant-alias { font-size: 16px; color: var(--ink-soft); margin: 0 0 16px; }
.plant-lede { font-size: 21px; line-height: 1.5; margin: 0; }
.warnlink { color: var(--danger); text-decoration-color: rgba(198,40,40,.4); }

/* Los datos de cabecera, en fila y no en tabla: se leen de un barrido. */
.facts-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0; list-style: none; margin: 0 0 8px; padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); overflow: hidden;
}
.facts-row li { padding: 16px 18px; border-left: 1px solid var(--border); }
.facts-row li:first-child { border-left: 0; }
@media (max-width: 700px) { .facts-row li { border-left: 0; border-top: 1px solid var(--border); } .facts-row li:first-child { border-top: 0; } }
.f-k {
    display: block; font-family: var(--heading); font-size: 12px; font-weight: 500;
    letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px;
}
.f-v { font-size: 17px; }

/* ── El año ────────────────────────────────────────────────── */
.year { margin: 4px 0 16px; }
.year-head, .year-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; }
.year-head { margin-bottom: 8px; }
.year-head ol, .year-track {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
    list-style: none; margin: 0; padding: 0;
}
.year-head li { text-align: center; font-family: var(--heading); font-size: 13px; color: var(--ink-soft); }
.year-head li[data-now="true"] { color: var(--green-dark); font-weight: 600; }
.year-head abbr { text-decoration: none; border: 0; }
.year-row { padding: 5px 0; }
.year-label { font-family: var(--heading); font-size: 15px; color: var(--ink-soft); }
.year-track li { height: 26px; border-radius: 6px; background: var(--tint); border: 1px solid var(--border); }
.year-track li[data-now="true"] { border-color: var(--ink-soft); }
.t-siembra li[data-on="true"] { background: #4CAF50; border-color: #3C9440; }
.t-flor li[data-on="true"] { background: #E8A33D; border-color: #C9862A; }
.t-poda li[data-on="true"] { background: #7E6BB5; border-color: #6A579F; }
.year-note { font-size: 17px; color: var(--ink-soft); }
@media (max-width: 620px) {
    .year-head, .year-row { grid-template-columns: 1fr; gap: 4px; }
    .year-label { font-size: 13px; }
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; }
.two-col h3 { margin-top: 0; font-size: 19px; }
@media (max-width: 780px) { .two-col { grid-template-columns: 1fr; gap: 8px; } }

.risk-line {
    padding: 16px 20px; border-radius: 14px; font-size: 18px;
    border: 1px solid var(--border); background: var(--surface);
}
.risk-line.is-toxic { border-color: var(--danger); background: var(--danger-bg); }
.risk-line.is-toxic strong { color: var(--danger); }
.risk-line.is-safe { border-color: #C3E0C6; background: var(--safe-bg); }
.risk-line.is-safe strong { color: var(--safe); }

/* ── Remedios, en pasos numerados ───────────────────────────── */
.remedies { list-style: none; counter-reset: remedio; margin: 0; padding: 0; display: grid; gap: 18px; }
.remedies > li {
    counter-increment: remedio; position: relative;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px 26px 22px 74px;
}
.remedies > li::before {
    content: counter(remedio);
    position: absolute; left: 24px; top: 22px;
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--green-dark); color: #fff;
    font-family: var(--heading); font-weight: 600; font-size: 16px;
}
@media (max-width: 620px) {
    .remedies > li { padding: 20px 20px 20px 20px; }
    .remedies > li::before { position: static; margin-bottom: 10px; }
}
.remedies h3 { margin: 0 0 10px; font-size: 21px; }
.remedy-meta { margin: 0 0 12px; display: grid; gap: 4px; }
.remedy-meta > div { display: flex; gap: 10px; flex-wrap: wrap; font-size: 16px; }
.remedy-meta dt {
    font-family: var(--heading); font-size: 12px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
    margin: 0; flex: 0 0 118px; padding-top: 4px;
}
.remedy-meta dd { margin: 0; color: var(--ink); flex: 1 1 200px; }
.remedies p { margin: 0 0 .7em; }
.remedy-note { font-size: 16px; color: var(--ink-soft); margin: 0; }
.plain-chip {
    display: inline-flex; padding: 7px 14px; border-radius: 999px;
    background: var(--tint); border: 1px solid var(--border); font-size: 16px;
}

/* ── Cabecera de sección, con mascota ───────────────────────── */
.sec-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) 260px;
    gap: 40px; align-items: center; margin-bottom: 30px;
}
@media (max-width: 780px) {
    .sec-hero { grid-template-columns: 1fr; gap: 18px; }
    .sec-hero img { height: 130px; order: -1; }
}
.sec-hero h1 { margin: 0 0 14px; }
/* Por la altura, no por el ancho: las diez mascotas comparten el alto del
 * lienzo (260) y no el ancho (de 191 a 332), así que escalarlas al ancho de
 * la columna las dejaba de tamaños distintos. Ver SectionHead.astro. */
.sec-hero img { height: 200px; width: auto; max-width: 100%; justify-self: center; }
.sec-hero .answer { margin-bottom: 0; }


/* ── Quién se come a la plaga ───────────────────────────────── */
.allies { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
@media (max-width: 780px) { .allies { grid-template-columns: 1fr; } }
.allies article {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 5px solid var(--green); border-radius: 6px var(--radius) var(--radius) 6px;
    padding: 20px 22px;
}
.ally-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 2px; }
.ally-head h3 { margin: 0; font-size: 20px; }
.ally-tag {
    font-family: var(--heading); font-size: 11.5px; font-weight: 500;
    letter-spacing: .07em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.av-atraer { background: var(--safe-bg); color: var(--safe); }
.av-comprar { background: var(--tint); color: var(--ink-soft); border: 1px solid var(--border); }
.av-ambas { background: var(--mild-bg); color: var(--mild); }
.ally-sci { font-style: italic; color: var(--ink-soft); font-size: 15px; margin: 0 0 10px; }
.allies p { font-size: 17px; margin: 0 0 .7em; }
.ally-how { background: var(--tint); border-radius: 12px; padding: 12px 16px; margin: 12px 0 0; font-size: 16px; }
.ally-how .mini-label { margin-bottom: 4px; }

/* Cuando la app todavía no se puede descargar. Es un aviso, no una alarma:
 * el tono ámbar del refranero y no el rojo de la toxicidad. */
.notyet {
    background: linear-gradient(140deg, #FFF6E4, #FFFBF0);
    border: 1px solid #F0E2C4; border-radius: var(--radius);
    padding: 24px 28px; margin: 0 0 26px;
}
.notyet h2 { margin: 0 0 8px; font-size: 21px; color: #6B5A2A; }
.notyet p { margin: 0 0 10px; color: #6B5A2A; }
.notyet p:last-child { margin-bottom: 0; }
.notyet .small { font-size: 15px; color: #8A7742; }

/* ── Los tres planes ───────────────────────────────────────── */
/* Tres tarjetas iguales no dejan elegir. La anual lleva bandera, borde verde
 * y el botón sólido; las otras dos, botón de contorno. Quien no quiera pensar
 * hace lo que le señalan, y resulta que es el que sale a cuenta. */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; align-items: start; }
@media (max-width: 780px) { .plans { grid-template-columns: 1fr; } }
.plan {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 6px;
}
.plan.best { border-color: var(--green); box-shadow: 0 6px 22px rgba(46,125,50,.10); }
.plan-flag {
    font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--green-dark); margin: 0;
}
.plan h3 { margin: 0; font-size: 20px; }
.plan-price {
    font-family: var(--display); font-size: 32px; color: var(--green-dark);
    margin: 2px 0 0; line-height: 1.1;
}
.plan-price span { font-size: 15px; font-family: var(--body); color: var(--ink-soft); }
.plan-note { margin: 0; font-size: 15px; color: var(--ink-soft); }
.plan .btn { margin-top: 14px; text-align: center; }
.plan-fine { font-size: 14px; color: var(--ink-soft); margin: 0 0 26px; }

/* ── El año de la siembra, de un vistazo ───────────────────── */
/* Tres filas, doce columnas y el número de cultivos dentro. El color no lleva
 * la información solo: el número está escrito, que es lo que hace que sirva
 * también sin distinguir verdes. */
.sow-year { margin: 0 0 28px; }
/* `fixed` y una anchura para la primera columna. Sin las dos cosas, el
 * navegador reparte el hueco sobrante en proporción a lo que hay dentro de
 * cada columna: «Interior» ocupa más que un «14», así que la columna de las
 * zonas se quedaba con 227 px y la rejilla salía encogida y pegada a la
 * derecha, descuadrada respecto al resto de la página. */
.sow-year table { table-layout: fixed; border-collapse: separate; border-spacing: 3px; width: 100%; font-size: 15px; }
.sow-year thead th:first-child { width: 72px; }
.sow-year th, .sow-year td { padding: 0; border: 0; }
.sow-year thead th {
    font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--ink-soft);
    text-align: center; padding-bottom: 4px; background: none;
}
.sow-year thead th[data-now="true"] { color: var(--green-dark); }
.sow-year thead abbr { text-decoration: none; border: 0; }
.sow-year tbody th {
    font-family: var(--heading); font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
    text-align: right; padding-right: 8px; white-space: nowrap;
}
.sow-year td a {
    display: block; text-align: center; padding: 9px 0; border-radius: 7px;
    font-family: var(--display); font-size: 14px; font-variant-numeric: tabular-nums;
    text-decoration: none; color: inherit;
}
.sow-year td[data-step="0"] a { background: var(--bg); color: var(--border); }
.sow-year td[data-step="1"] a { background: #E4F0E4; color: #3A5C45; }
.sow-year td[data-step="2"] a { background: #BEDCC1; color: #2A4A34; }
.sow-year td[data-step="3"] a { background: #7FBB88; color: #14301D; }
.sow-year td[data-step="4"] a { background: #3F8F52; color: #fff; }
.sow-year td a:hover { outline: 2px solid var(--green-dark); outline-offset: 1px; }
/* El mes de hoy, marcado en la columna entera y no solo en la cabecera. */
.sow-year td[data-now="true"] a { box-shadow: inset 0 0 0 2px var(--green-dark); }
.sow-year figcaption { margin-top: 12px; font-size: 14.5px; color: var(--ink-soft); }
@media (max-width: 560px) {
    .sow-year thead th:first-child { width: 52px; }
    .sow-year tbody th { font-size: 11px; padding-right: 5px; }
    .sow-year td a { font-size: 12.5px; padding: 7px 0; border-radius: 5px; }
    .sow-year table { border-spacing: 2px; }
}

/* Las doce tarjetas del mes, con el de hoy señalado. */
.sow-card .now-flag {
    font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--green-dark); background: var(--tint);
    border-radius: 20px; padding: 2px 9px; vertical-align: middle; margin-left: 6px;
}
.sow-card.now { border-color: var(--green); }
.sow-card .sow-count { margin: 2px 0 0; font-size: 14px; color: var(--ink-soft); }

/* Los grupos por gravedad de la lista por animal. El número va en su pastilla
 * y no entre paréntesis: se busca «cuántas hay de las que matan» y ese dato
 * tiene que verse antes de leer el título. */
.tox-group {
    display: flex; align-items: center; gap: 10px; margin: 38px 0 14px; font-size: 24px;
}
.tox-group:first-of-type { margin-top: 26px; }
.tox-group span {
    font-family: var(--display); font-size: 14px; font-weight: 600;
    background: var(--tint); color: var(--ink-soft);
    border-radius: 20px; padding: 2px 11px;
}

/* ── Los cultivos del mes ──────────────────────────────────── */
/* Una tarjeta por cultivo, con la foto y en qué zonas va. Antes eran tres
 * listas de etiquetas que se solapaban casi enteras y había que cruzarlas a
 * ojo para saber si lo tuyo entra en tu zona. */
.crops { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.crop { padding: 0 0 14px; overflow: hidden; }
.crop h3 { margin: 12px 16px 0; font-size: 18px; }
.crop-zones { margin: 8px 16px 0; display: flex; flex-wrap: wrap; gap: 5px; }
.crop-zones .zone {
    font-family: var(--heading); font-size: 12px; font-weight: 500;
    background: var(--tint); color: var(--green-dark);
    border-radius: 20px; padding: 3px 10px;
}
.crop-zones .zone.all { background: var(--green-dark); color: #fff; }
.crop .plant-photo.thumb { margin: 0; }
.crop .plant-photo.thumb :is(img, .photo-placeholder) { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; margin: 0; }
.crop-none { color: var(--ink-soft); margin: 18px 0 0; }

/* Ir al mes de al lado sin volver al índice. */
.month-nav {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--border);
    font-family: var(--heading); font-size: 16px;
}
.month-nav a { color: var(--green-dark); }

/* Avisos destacados de las páginas legales: que Plantuka aún no está disponible,
 * y el modelo de formulario de desistimiento. */
.legal .highlight { background: var(--tint); border-left: 4px solid var(--green-dark); padding: 12px 18px; border-radius: 6px; margin: 16px 0; }
.legal .highlight p { margin: 6px 0; }