:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f2f5f2;
    --text: #1c1e1c;
    --text-muted: #5f6b62;
    /* 17/10/2026: un punto más oscuro (antes #427e60) para que el verde chico sobre el gris claro pase 4,5:1 (Lighthouse). */
    --accent: #3b7457;
    --accent-light: #dceee6;
    --accent-contrast: #ffffff;
    --border: #dde1dc;
    --radius: 14px;
    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-head: "Bricolage Grotesque", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b100d;
        --surface: #161c18;
        --surface-alt: #10140f;
        --text: #eef2ef;
        --text-muted: #9caa9f;
        --accent: #82c9a6;
        --accent-light: #b5e3cc;
        --accent-contrast: #0b140f;
        --border: #283029;
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
    font-family: var(--font-head);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
    color: var(--text);
}

h1 { font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 500; }
h2 { font-size: 1.5rem; margin-top: 2.5rem; font-weight: 500; }

/* Header — translucent, content scrolls under it */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-head);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

.brand:hover { text-decoration: none; }
.brand__mark { color: var(--text); flex-shrink: 0; }
.brand__tld { color: var(--accent); }

.site-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.site-nav a {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.site-nav a:hover { color: var(--text); }

@media (max-width: 560px) {
    .site-header__inner {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .site-nav {
        gap: 16px;
        flex-basis: 100%;
    }
}

/* Hero */
.hero {
    padding: 88px 20px 40px;
    text-align: center;
}

.hero h1 { max-width: 720px; margin-left: auto; margin-right: auto; }

.hero__sub {
    color: var(--text-muted);
    max-width: 480px;
    margin: 18px auto 0;
    font-size: 1.15rem;
    line-height: 1.45;
}

/* Breadcrumb */
.breadcrumb {
    padding: 18px 20px 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span { margin: 0 6px; }

/* Category sections + grid */
.categoria { margin-bottom: 8px; padding-top: 8px; }
.categoria h2 { border-top: 1px solid var(--border); padding-top: 2.5rem; }
.categoria:first-child h2 { border-top: none; padding-top: 0; }

.receta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    margin: 20px 0 20px;
}

.receta-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--text);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.receta-card:hover {
    text-decoration: none;
    border-color: var(--text-muted);
    transform: translateY(-2px);
}

.receta-card__img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    background: var(--surface-alt);
}

.receta-card__body { padding: 16px 18px 18px; }
.receta-card__body h3 {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 1.15rem;
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}
.receta-card__body p { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 10px; line-height: 1.4; }
.receta-card__meta {
    color: var(--text-muted) !important;
    font-weight: 500;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Recipe page */
.receta__header { padding-top: 32px; }
.receta__categoria {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.76rem;
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 10px;
}

.receta h1 { max-width: 760px; }
.receta__desc { color: var(--text-muted); font-size: 1.15rem; max-width: 640px; line-height: 1.45; }

.receta__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 22px 0 28px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}

.receta__meta strong { font-weight: 600; color: var(--text); display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 2px; }

.receta__meta-tmx { font-weight: 600; color: var(--text); }
.receta__meta-tmx strong { color: var(--accent); }

.receta__img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--surface-alt);
    margin-bottom: 32px;
    border: 1px solid var(--border);
}

.receta__cuerpo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}

@media (min-width: 720px) {
    .receta__cuerpo { grid-template-columns: 300px 1fr; }
}

.ingredientes {
    background: var(--surface-alt);
    border-radius: var(--radius);
    padding: 22px 24px;
    align-self: start;
}

.ingredientes h2, .pasos h2 { margin-top: 0; font-size: 1.3rem; }

.ingredientes__lista, .pasos__lista { padding-left: 20px; margin: 0; }
.ingredientes__lista li { margin-bottom: 10px; line-height: 1.4; }
.pasos__lista li { margin-bottom: 16px; padding-left: 4px; line-height: 1.55; }

.receta__tip {
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--surface-alt);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.robot-box {
    margin: 40px 0 48px;
    padding: 28px 28px 30px;
    border-radius: var(--radius);
    background: var(--text);
    color: var(--bg);
}

.robot-box h2 { margin-top: 0; color: var(--bg); }
.robot-box__resumen { font-weight: 500; color: var(--accent-light); opacity: 0.9; margin: 0 0 12px; font-size: 0.95rem; }
.robot-box p:last-child { margin-bottom: 0; opacity: 0.92; line-height: 1.55; }

@media (prefers-color-scheme: dark) {
    .robot-box { background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); }
    .robot-box h2 { color: var(--text); }
}

.receta__enlace-guia {
    margin: -16px 0 40px;
    font-size: 0.92rem;
    color: var(--text-muted);
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--border);
    margin-top: 48px;
    padding: 28px 20px 48px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.site-footer__inner p { margin: 4px 0; }
.site-footer__legal { font-size: 0.78rem; }

/* Créditos de autoría: línea discreta, separada del resto por un filete fino. El link envuelve
   toda la frase (para que se lea "diseño y desarrollo web" / "posicionamiento SEO" como texto del
   enlace), pero visualmente solo se resalta el nombre. */
.site-footer__credits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}
.site-footer__credits a { color: var(--text-muted); transition: color 0.25s ease; }
.site-footer__credits .fc-name {
    color: var(--text);
    border-bottom: 1px solid var(--border);
    padding-bottom: 1px;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.site-footer__credits a:hover { color: var(--accent); }
.site-footer__credits a:hover .fc-name { color: var(--accent); border-color: var(--accent); }
@media (max-width: 600px) {
    .site-footer__credits { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

/* ---------------------------------------------------------------- */
/* Guías comparativas (Etapa 2) — mismo sistema de diseño que las   */
/* recetas: header/breadcrumb/receta-card se comparten agrupando    */
/* selectores; esto es contenido nuevo (tablas, callout, FAQ).      */
/* ---------------------------------------------------------------- */

.guia__header { padding-top: 32px; }
.guia__categoria {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.76rem;
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 10px;
}

.guia h1 { max-width: 780px; }
.guia__desc { color: var(--text-muted); font-size: 1.15rem; max-width: 680px; line-height: 1.45; }

.guia__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 22px 0 8px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.guia__cuerpo {
    max-width: 720px;
    margin: 36px 0 8px;
    font-size: 1.02rem;
    line-height: 1.65;
}

.guia__cuerpo h2 { margin-top: 2.6rem; font-size: 1.4rem; }
.guia__cuerpo h3 { margin-top: 1.8rem; font-size: 1.1rem; }
.guia__cuerpo p { margin: 0 0 1.1em; }
.guia__cuerpo ul, .guia__cuerpo ol { padding-left: 22px; margin: 0 0 1.3em; }
.guia__cuerpo li { margin-bottom: 8px; }
.guia__cuerpo strong { color: var(--text); }

.tabla-wrap {
    overflow-x: auto;
    margin: 0 0 1.6em;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabla th, .tabla td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabla th { background: var(--surface-alt); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.tabla tr:last-child td { border-bottom: none; }
.tabla td:first-child, .tabla th:first-child { white-space: normal; font-weight: 500; }

/* Callout oscuro reutilizado del robot-box de las recetas */
.callout,
.robot-box {
    margin: 32px 0 40px;
    padding: 26px 28px 28px;
    border-radius: var(--radius);
    background: var(--text);
    color: var(--bg);
}

.callout h2, .callout h3, .robot-box h2 { margin-top: 0; color: var(--bg); }
.callout__eyebrow, .robot-box__resumen { font-weight: 500; color: var(--accent-light); opacity: 0.9; margin: 0 0 12px; font-size: 0.95rem; }
.callout p:last-child, .robot-box p:last-child { margin-bottom: 0; opacity: 0.92; line-height: 1.55; }

@media (prefers-color-scheme: dark) {
    .callout, .robot-box { background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); }
    .callout h2, .callout h3, .robot-box h2 { color: var(--text); }
}

.guia__faq { max-width: 720px; margin: 8px 0 40px; }
.faq-item {
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
}
.faq-item summary {
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text);
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+"; display: inline-block; width: 18px; color: var(--accent); font-weight: 600; }
.faq-item[open] summary::before { content: "\2212"; }
.faq-item p { margin: 12px 0 0 18px; color: var(--text-muted); line-height: 1.55; }

.guia-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--text);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.guia-card:hover {
    text-decoration: none;
    border-color: var(--text-muted);
    transform: translateY(-2px);
}

.guia-card__body { padding: 20px 22px 22px; }
.guia-card__body h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.2rem; margin-bottom: 8px; }
.guia-card__body p { font-size: 0.92rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
.guia-card__meta {
    display: block;
    margin-top: 12px;
    color: var(--accent) !important;
    font-weight: 600;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.guias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
    margin: 24px 0 20px;
}

/* ---------------------------------------------------------------- */
/* Landing (Capa 3) — corta, precio claro, un solo botón             */
/* ---------------------------------------------------------------- */

.landing-hero { padding: 72px 20px 8px; text-align: center; }
.landing-hero h1 { max-width: 760px; margin: 0 auto; }
.landing-hero__sub {
    color: var(--text-muted);
    max-width: 560px;
    margin: 18px auto 0;
    font-size: 1.15rem;
    line-height: 1.45;
}

.landing-cta {
    text-align: center;
    margin: 8px 0 56px;
}

.boton-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 16px 34px;
    border-radius: 999px;
    text-decoration: none;
}

.boton-cta:hover { text-decoration: none; opacity: 0.92; }
.boton-cta svg { flex-shrink: 0; }

.landing-cta__nota { margin-top: 14px; font-size: 0.85rem; color: var(--text-muted); }

.landing-section { max-width: 720px; margin: 0 auto 48px; padding: 0 20px; }
.landing-section h2 { text-align: center; }

.trust-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.trust-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.98rem;
    line-height: 1.5;
}

.trust-list svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }

.landing-links { text-align: center; font-size: 0.92rem; color: var(--text-muted); }

/* ---------------------------------------------------------------- */
/* Tanda 1 del push de venta — bloque "Esta receta en Thermomix",   */
/* CTA reutilizable y ficha de la TM7 (el hero y las cajas de precio */
/* de la Tanda 1 se reemplazaron en la Tanda 1B, ver bloque final). */
/* ---------------------------------------------------------------- */

.site-nav__cta {
    background: var(--accent);
    color: var(--accent-contrast);
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.88rem;
}

.site-nav__cta:hover { text-decoration: none; opacity: 0.92; }

@media (max-width: 400px) {
    .site-nav { gap: 14px; }
    .site-nav a { font-size: 0.85rem; }
}

.boton-cta--secundario {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.boton-cta--secundario:hover { border-color: var(--text-muted); }

.boton-cta--claro {
    background: var(--bg);
    color: var(--text);
}

@media (prefers-color-scheme: dark) {
    .boton-cta--claro { background: var(--accent); color: var(--accent-contrast); }
}

.argumentos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 8px 20px 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

.argumentos__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.argumentos__item svg { color: var(--accent); flex-shrink: 0; }
.argumentos__item p { margin: 0; font-size: 0.95rem; }

@media (max-width: 720px) {
    .argumentos { grid-template-columns: 1fr; }
}

.bloque-vale {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    margin: 48px 0;
    padding: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
}

.bloque-vale h2 { margin-top: 0; }

.bloque-vale__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.76rem;
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 10px;
}

.bloque-vale__lista { padding-left: 20px; margin: 0; }
.bloque-vale__lista li { margin-bottom: 10px; line-height: 1.5; }

.bloque-vale__acciones {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.bloque-vale__figura {
    text-align: center;
    margin: 0;
}

@media (max-width: 820px) {
    .bloque-vale { grid-template-columns: 1fr; }
    .bloque-vale__figura { order: 2; max-width: 220px; margin: 0 auto; }
}

figcaption {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 10px;
}

.enlace-flecha {
    font-weight: 600;
}

.enlace-flecha::after {
    content: "\2192";
    margin-left: 6px;
}

.home-guias { margin: 56px 0 16px; }
.home-guias h2 { border-top: 1px solid var(--border); padding-top: 2.5rem; }
.home-guias__sub { color: var(--text-muted); }

.cta-bloque {
    text-align: center;
    padding: 44px 28px;
    margin: 56px auto 24px;
    max-width: 720px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.cta-bloque h2 { margin-top: 0; }
.cta-bloque p { max-width: 560px; margin: 0 auto 22px; color: var(--text-muted); }
.cta-bloque__nota { font-size: 0.85rem; color: var(--text-muted); margin-top: 14px; }
.cta-bloque--home { max-width: none; }

.robot-box__nota { font-size: 0.82rem; opacity: 0.75; margin: 10px 0 0; }

.robot-box__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: center;
    margin-top: 20px;
}

.robot-box__link {
    text-decoration: underline;
    font-size: 0.9rem;
    color: var(--bg);
}

@media (prefers-color-scheme: dark) {
    .robot-box__link { color: var(--accent); }
}

.relacionadas { margin: 8px 0 40px; }
.relacionadas h2 { font-size: 1.3rem; }

.hero__sub--izq { margin-left: 0; text-align: left; }

.landing-contras ul { padding-left: 20px; }
.landing-contras ul li { margin-bottom: 10px; line-height: 1.5; }

.pasos-demo {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 14px;
}

.pasos-demo li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.pasos-demo__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 600;
}

.ficha__hero {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
    padding-top: 32px;
}

@media (max-width: 820px) {
    .ficha__hero { grid-template-columns: 1fr; }
}

.ficha__figura { margin: 0; text-align: center; }

.ficha__foto {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.ficha__seccion {
    max-width: 860px;
    margin: 12px 0 8px;
}

.ficha__seccion-sub {
    color: var(--text-muted);
    max-width: 640px;
}

.lista-dos-columnas {
    columns: 2;
    column-gap: 32px;
    padding-left: 20px;
}

.lista-dos-columnas li {
    margin-bottom: 8px;
    break-inside: avoid;
}

@media (max-width: 600px) {
    .lista-dos-columnas { columns: 1; }
}

.specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.specs__item {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.specs__item dt {
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    margin: 0 0 4px;
}

.specs__item dd { margin: 0; }

@media (max-width: 600px) {
    .specs { grid-template-columns: 1fr; }
}

.modos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.modos__item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
}

.modos__item h3 { font-size: 1.05rem; margin: 0 0 8px; }
.modos__item p { font-size: 0.92rem; color: var(--text-muted); margin: 0 0 10px; }
.modos__item a { font-size: 0.88rem; font-weight: 600; }

.contras ul { padding-left: 20px; }
.contras ul li { margin-bottom: 10px; line-height: 1.5; }

.para-quien {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

@media (max-width: 720px) {
    .para-quien { grid-template-columns: 1fr; }
}

.para-quien__col {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
}

.para-quien__col h2 { margin-top: 0; font-size: 1.25rem; }
.para-quien__col ul { padding-left: 18px; }
.para-quien__col:first-child { border-color: var(--accent); }

/* ---------------------------------------------------------------- */
/* Tanda 1B — hero con foto y argumento de financiación en lugar   */
/* del precio (home, ficha TM7 y landing). Solo tokens existentes.  */
/* Reemplaza a .panel-tmx*, .ficha__precio* y .precio-card*.        */
/* ---------------------------------------------------------------- */

/* Hero de la home: texto a la izquierda, foto de producto a la derecha */
.hero-tmx {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 56px 20px 32px;
}

.hero-tmx__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.76rem;
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 14px;
}

.hero-tmx h1 { max-width: 560px; }

.hero-tmx__sub {
    color: var(--text-muted);
    font-size: 1.12rem;
    line-height: 1.5;
    max-width: 520px;
    margin: 18px 0 0;
}

/* Chips de financiación: borde fino, sin relleno de color */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    background: var(--surface);
}

.chip svg { color: var(--accent); flex-shrink: 0; }

.hero-tmx__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 26px;
}

.hero-tmx__nota {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 16px 0 0;
    max-width: 520px;
    line-height: 1.5;
}

/* La foto de producto va sobre un "escenario" gris muy claro, fijo en
   los dos modos: la máquina es negra y sobre el fondo oscuro desaparecería. */
.hero-tmx__figura {
    margin: 0;
    padding: 28px 28px 20px;
    border-radius: var(--radius);
    background: #edf0ed;
    text-align: center;
}

.hero-tmx__figura figcaption { margin-top: 14px; }

@media (max-width: 820px) {
    .hero-tmx {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 28px;
    }
    .hero-tmx__figura { order: -1; padding: 20px 20px 14px; }
}

/* Foto en el bloque "¿Vale la pena?" de la home (antes ilustración) */
.bloque-vale__foto {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    display: block;
}

/* Ficha TM7: caja "Cómo se paga" en lugar de la caja de precio */
.ficha__pago {
    margin: 22px 0 18px;
    padding: 18px 20px 16px;
    border: 1.5px solid var(--accent);
    border-radius: var(--radius);
}

.ficha__pago-titulo {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.76rem;
    color: var(--accent);
    font-weight: 600;
    margin: 0 0 10px;
}

.ficha__pago-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.ficha__pago-lista li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.45;
}

.ficha__pago-lista svg { color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.ficha__pago-lista strong { font-weight: 600; }

.ficha__pago-nota {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 12px 0 0;
}

.ficha__figura--producto {
    padding: 28px 28px 20px;
    border-radius: var(--radius);
    background: #edf0ed;
}

.ficha__figura--producto .ficha__foto { border: none; border-radius: 0; max-width: 460px; }

/* Landing: hero con foto de cocina y tarjetas por perfil (sin precio) */
.landing-hero--foto {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 44px;
    align-items: center;
    text-align: left;
    padding: 48px 20px 8px;
}

.landing-hero--foto h1 { margin: 0; max-width: 560px; }
.landing-hero--foto .landing-hero__sub { margin: 18px 0 0; max-width: 520px; }

.landing-hero__figura { margin: 0; }

.landing-hero__foto {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    display: block;
}

@media (max-width: 820px) {
    .landing-hero--foto { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
    .landing-hero__figura { order: -1; }
}

.landing-perfiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    max-width: 1040px;
    margin: 36px auto 0;
    padding: 0 20px;
}

.perfil-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 22px 20px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
}

.perfil-card--destacada {
    border: 1.5px solid var(--accent);
    background: var(--surface-alt);
}

.perfil-card__etiqueta {
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0 0 8px;
}

.perfil-card__perfil {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 6px;
}

.perfil-card__nombre {
    font-family: var(--font-head);
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.perfil-card__nota {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0 0 12px;
    flex: 1;
}

.perfil-card__link { font-size: 0.88rem; font-weight: 600; }

/* Corrección de un bug heredado de la Tanda 1: `.site-nav a` (0,1,1) le gana a
   `.site-nav__cta` (0,1,0) y el texto del botón del menú quedaba en gris sobre
   verde, casi invisible. Selector con la misma especificidad, declarado después. */
.site-nav a.site-nav__cta { color: var(--accent-contrast); }
.site-nav a.site-nav__cta:hover { color: var(--accent-contrast); }

.landing-perfiles + .landing-section { margin-top: 56px; }

/* --- Tanda 2 (21/09/2026): maridaje al pie de cada receta + tabla de la guía de ahorro --- */
.relacionadas__sub { color: var(--text-muted); margin: 0 0 4px; max-width: 560px; line-height: 1.5; }
.receta-grid--relacionadas { grid-template-columns: repeat(auto-fill, minmax(240px, 320px)); }
.tabla td small { display: block; font-size: 0.8rem; color: var(--text-muted); font-weight: 400; margin-top: 2px; }

/* Enlaces del pie (Tanda 7): "Sin gluten" no entra en una línea limpia del menú
   de la cabecera a 375px, así que queda solo acá, junto a un par de accesos más. */
.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 10px 0 0;
}

.site-footer__nav a { color: var(--text-muted); font-size: 0.85rem; }
.site-footer__nav a:hover { color: var(--text); }

/* ---------------------------------------------------------------- */
/* Tanda 7 (22/09/2026) — capa sin gluten. Mismo lenguaje visual que */
/* .robot-box/.callout (fondo claro, borde fino, radio compartido);  */
/* solo tokens existentes, sin colores nuevos.                        */
/* ---------------------------------------------------------------- */

.receta__cuerpo-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sg-box {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px 22px;
}

.sg-box h2 { margin-top: 0; font-size: 1.15rem; }

.sg-box__estado {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin: 0 0 10px;
}

.sg-box__estado svg { color: var(--accent); flex-shrink: 0; }

.sg-box__nota { margin: 0 0 12px; line-height: 1.5; }

.sg-box__regla {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* apta / apta_cuidado: borde izquierdo de acento, es la mejor noticia posible */
.sg-box--apta,
.sg-box--apta_cuidado {
    border-left: 3px solid var(--accent);
}

/* adaptable: un cambio de ingrediente, borde más grueso pero neutro */
.sg-box--adaptable {
    border-left: 4px solid var(--border);
}

/* propia: todavía no hay receta, tono atenuado */
.sg-box--propia { opacity: 0.9; }
.sg-box--propia .sg-box__estado svg { color: var(--text-muted); }
.sg-box--propia .sg-box__nota { color: var(--text-muted); }

/* Etiqueta chica en las tarjetas de receta (home, /recetas/, relacionadas, /sin-gluten/) */
.card__etiqueta {
    display: inline-block;
    margin: 2px 0 8px;
    padding: 3px 10px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Lista de las recetas sin gluten "en preparación": texto plano, sin link */
.sg-pendientes {
    padding-left: 20px;
    margin: 0 0 1.3em;
    columns: 2;
    column-gap: 32px;
}

.sg-pendientes li { margin-bottom: 8px; break-inside: avoid; }

@media (max-width: 600px) {
    .sg-pendientes { columns: 1; }
}

/* --- Tanda 8: guías sin gluten (aviso médico fijo y lista de fuentes). Sin colores nuevos. --- */
.guia__aviso {
    margin: 28px 0 32px;
    padding: 16px 20px;
    border-left: 3px solid var(--accent);
    background: var(--surface-alt);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 720px;
}
.guia__aviso strong { color: var(--text); }
.guia__fuentes { font-size: 0.86rem; color: var(--text-muted); }
.guia__fuentes li { margin-bottom: 6px; line-height: 1.5; }
.guia__fuentes a { word-break: break-word; }

/* --- Tanda 9: link a la receta sin gluten propia, dentro del sg-box. Sin colores nuevos. --- */
.sg-box__link {
    margin: 0 0 12px;
    line-height: 1.5;
    font-weight: 600;
}
.sg-box--propia .sg-box__link { color: var(--text); }

/* ---------------------------------------------------------------- */
/* Hero 2, opción B: la TM7 llega desarmada y se arma por piezas.   */
/* Una sola vez al cargar; después solo si la persona lo pide.      */
/* Capas: base, pantalla apagada (SVG), tapa, vaso, luz, cubilete.  */
/* ---------------------------------------------------------------- */

:root {
    /* Resortes (response/damping de Apple) pasados a linear(): _trabajo/resorte.py */
    /* armado: response .55 s, damping .82, se asienta con 1% de recorrido extra */
    --resorte-armado: linear(0, 0.0206, 0.0732, 0.1462, 0.2307, 0.32, 0.4092, 0.4949, 0.5747, 0.6473, 0.7121, 0.7688, 0.8176, 0.859, 0.8935, 0.922, 0.945, 0.9633, 0.9775, 0.9885, 0.9966, 1.0024, 1.0064, 1.009, 1.0104, 1.011, 1.011, 1.0106, 1.0099, 1.009, 1.008, 1.007, 1.0061, 1.0051, 1.0043, 1.0035, 1.0029, 1.0023, 1.0018, 1.0014, 1);
    /* desarme: response .42 s, damping 1, sin rebote */
    --resorte-desarme: linear(0, 0.0229, 0.0788, 0.1531, 0.236, 0.3206, 0.4028, 0.48, 0.5507, 0.6144, 0.6709, 0.7205, 0.7636, 0.8008, 0.8327, 0.86, 0.8831, 0.9026, 0.9191, 0.9329, 0.9444, 0.954, 0.9621, 0.9687, 0.9743, 0.9789, 0.9826, 0.9858, 0.9883, 0.9905, 0.9922, 0.9936, 0.9948, 0.9958, 0.9965, 0.9972, 0.9977, 0.9981, 0.9985, 0.9988, 1);
    --curva-salida: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Botón que envuelve la máquina: mismo tamaño que la foto de hoy, un poco más alto
   (lienzo 1120x1114 en vez de 1400x1275) para dejar aire arriba a las piezas. */
.armado {
    position: relative;
    display: block;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1120 / 1114;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* El escenario es claro en los dos modos: el foco usa el verde de marca del modo claro */
.armado:focus-visible { outline: 2px solid #3b7457; outline-offset: 8px; }

.armado__capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    --dur: 754ms;
    --curva: var(--resorte-armado);
    transition: transform var(--dur) var(--curva) var(--retraso, 0ms);
}

/* Cuánto sube cada pieza desarmada (en % del alto del lienzo) y en qué orden se mueve:
   al armarse baja primero el vaso, después la tapa, al final el cubilete; al desarmarse,
   al revés. La base no se mueve. */
.armado__vaso, .armado__luz { --sube: -4.12%; --retraso: 0ms; --retraso-des: 100ms; }
.armado__tapa { --sube: -8.17%; --retraso: 140ms; --retraso-des: 50ms; }
.armado__cubilete { --sube: -12.1%; --retraso: 260ms; --retraso-des: 0ms; }

/* Cuando termina de armarse, se "enciende": pantalla y luz verde del vaso */
.armado__pantalla {
    opacity: 0;
    transition: opacity 450ms var(--curva-salida) 950ms;
}
.armado__luz {
    transition: transform var(--dur) var(--curva) var(--retraso), opacity 450ms var(--curva-salida) 950ms;
}

/* Estado desarmado: al cargar (hasta que llegan las capas) y cuando se pide */
.hero-anima:not(.hero-armada) .armado__capa,
.armado[aria-pressed="true"] .armado__capa {
    transform: translateY(var(--sube, 0));
    --dur: 617ms;
    --curva: var(--resorte-desarme);
    --retraso: var(--retraso-des, 0ms);
}
.hero-anima:not(.hero-armada) .armado__pantalla,
.armado[aria-pressed="true"] .armado__pantalla {
    opacity: 1;
    transition: opacity 180ms ease-out;
}
.hero-anima:not(.hero-armada) .armado__luz,
.armado[aria-pressed="true"] .armado__luz {
    opacity: 0;
    transition: transform var(--dur) var(--curva) var(--retraso), opacity 180ms ease-out;
}
/* Hasta que carga la base, la pantalla apagada no se dibuja sola en el escenario */
.hero-anima:not(.hero-armada) .armado:not(.con-base) .armado__pantalla { visibility: hidden; }

/* En celular la figura va arriba del texto: se compensa el lienzo más alto (menos margen
   arriba, máquina 5% más chica que hoy) para que el título quede a la misma altura que hoy. */
@media (max-width: 820px) {
    .hero-tmx__figura:has(.armado) { padding-top: 10px; }
    .armado { max-width: 280px; }
}

/* Movimiento reducido: la máquina ya armada y quieta. Si se pide ver las piezas, se
   separan sin desplazamiento animado; solo la pantalla hace un fundido corto. */
@media (prefers-reduced-motion: reduce) {
    .armado__capa { transition: opacity 200ms ease !important; }
}

/* ---- Menú semanal (01/10/2026): lista de compras con casillas y tablas que pueden partir línea ---- */
.menu-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.menu-check input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); }
.menu-check input:checked + span { color: var(--text-muted); text-decoration: line-through; }
.tabla--menu th, .tabla--menu td { white-space: normal; padding: 10px 12px; }
.tabla--menu small { color: var(--text-muted); }
/* La tabla de los siete días pasa a una ficha por día en pantallas angostas, en vez de scroll horizontal. */
@media (max-width: 640px) {
    .tabla--dias thead { display: none; }
    .tabla--dias, .tabla--dias tbody, .tabla--dias tr, .tabla--dias td { display: block; width: 100%; }
    .tabla--dias tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
    .tabla--dias tr:last-child { border-bottom: none; }
    .tabla--dias td { border: 0; padding: 3px 16px; }
    .tabla--dias td::before { content: attr(data-label); display: block; font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
    .tabla--dias td:first-child::before { display: none; }
}

/* ================================================================ */
/* Portada con el formato de Cookidoo (16/10/2026): pestañas en el   */
/* encabezado, carrusel grande arriba y filas que se deslizan.       */
/* ================================================================ */

/* Encabezado: la marca al centro y WhatsApp a la derecha (en celular, marca a la izquierda). */
.site-header__wa { display: inline-flex; align-items: center; gap: 7px; }
.site-header__wa svg { width: 17px; height: 17px; }

@media (min-width: 720px) {
    .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; padding: 14px 20px; }
    .site-header__inner .brand { grid-column: 2; }
}

/* Pestañas: no son fijas (la barra de la marca sí), para no ocupar media pantalla en celular. */
.pestanas { border-bottom: 1px solid var(--border); }
.pestanas__lista {
    display: flex;
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
}
.pestanas__lista::-webkit-scrollbar { display: none; }
/* Centradas cuando entran; alineadas a la izquierda y deslizables cuando no. */
.pestanas__lista > :first-child { margin-left: auto; }
.pestanas__lista > :last-child { margin-right: auto; }
.pestanas a {
    flex: none;
    padding: 14px 2px 11px;
    border-bottom: 3px solid transparent;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
}
.pestanas a:hover { text-decoration: none; color: var(--accent); }
.pestanas a[aria-current="page"], .pestanas a.es-seccion { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 719px) {
    .pestanas__lista { gap: 22px; }
    .pestanas a { font-size: 0.95rem; padding: 12px 2px 9px; }
}

/* Contenedor de la portada: más ancho que el resto del sitio, como Cookidoo. --margen alinea el
   comienzo de cada fila con el contenido y deja que las tarjetas sigan hasta el borde derecho. */
.home {
    --ancho: 1280px;
    --margen: max(20px, calc((100% - var(--ancho)) / 2 + 20px));
    padding-bottom: 8px;
}
.home__ancho { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

/* ---- Carrusel de arriba ---- */
.destacadas { --grande: 48%; --gap: 20px; max-width: var(--ancho); margin: 24px auto 0; padding: 0 20px; }
.destacadas__visor { overflow: hidden; border-radius: 14px; }
.destacadas__pista { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--gap); }
.destacada {
    position: relative;
    flex: 0 0 auto;
    height: clamp(360px, 36vw, 500px);
    overflow: hidden;
    border-radius: 14px;
    background: var(--surface-alt);
}
.destacada__marco { position: absolute; inset: 0; display: block; color: #fff; }
.destacada__marco:hover { text-decoration: none; }
.destacada__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destacada__marco::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.74) 0%, rgb(0 0 0 / 0.38) 40%, rgb(0 0 0 / 0) 66%);
    transition: opacity 400ms var(--curva-salida);
}
/* La foto de la TM7 tiene zonas claras detrás del texto: el degradé sube más y es más oscuro. */
.destacada--tmx .destacada__marco::after {
    background: linear-gradient(to top, rgb(0 0 0 / 0.82) 0%, rgb(0 0 0 / 0.55) 48%, rgb(0 0 0 / 0.12) 78%, rgb(0 0 0 / 0) 100%);
}
.destacada__texto {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 28px 32px;
}
.destacada__eyebrow {
    margin: 0 0 8px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.86);
}
.destacada__titulo {
    max-width: 20ch;
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(1.45rem, 2.3vw, 2.15rem);
    font-weight: 500;
    line-height: 1.12;
}
.destacada__titulo a { color: inherit; }
.destacada__titulo a:hover { text-decoration: none; }
.destacada__meta { margin: 0; font-size: 0.92rem; color: rgb(255 255 255 / 0.88); }
.destacada__acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 16px; }
.destacada__boton { padding: 11px 24px; font-size: 0.95rem; }
.destacada__secundario { color: #fff; font-weight: 600; }
.destacada__secundario::after { content: "\2192"; margin-left: 6px; }
.destacada__credito {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 1;
    margin: 0;
    font-size: 0.7rem;
    color: rgb(255 255 255 / 0.85);
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}

.destacadas__controles { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.destacadas__puntos { display: flex; align-items: center; }
/* El botón es de 20 px para que se pueda tocar; el punto que se ve es el ::after. */
.destacadas__punto {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.destacadas__punto::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--border);
    transition: width 300ms var(--curva-salida), background-color 300ms;
}
.destacadas__punto:hover::after { background: var(--text-muted); }
.destacadas__punto[aria-current="true"] { width: 34px; }
.destacadas__punto[aria-current="true"]::after { width: 24px; background: var(--accent); }
.destacadas__flecha {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}
.destacadas__flecha:hover { border-color: var(--accent); color: var(--accent); }

/* Pantalla ancha: la activa se agranda y la pista corre (el corrimiento lo pone el script). */
@media (min-width: 720px) {
    .destacadas__pista {
        transform: translateX(var(--corrimiento, 0px));
        transition: transform 650ms var(--curva-salida);
        touch-action: pan-y;
    }
    .destacada {
        flex-basis: calc((100% - var(--grande) - 2 * var(--gap)) / 2);
        transition: flex-basis 650ms var(--curva-salida);
    }
    .destacada.is-activa { flex-basis: var(--grande); }
    .destacada:not(.is-activa) { cursor: pointer; }
    .destacada:not(.is-activa) .destacada__marco::after { opacity: 0; }
    .destacada:not(.is-activa) .destacada__texto,
    .destacada:not(.is-activa) .destacada__credito {
        opacity: 0;
        visibility: hidden;
        transition: opacity 150ms, visibility 0s 150ms;
    }
    .destacada.is-activa .destacada__texto,
    .destacada.is-activa .destacada__credito { transition: opacity 350ms 420ms; }
}

/* Celular: pista nativa con scroll-snap; todas las diapositivas muestran su texto. */
@media (max-width: 719px) {
    .destacadas { padding: 0; margin-top: 14px; }
    .destacadas__visor { border-radius: 0; }
    .destacadas__pista {
        position: relative;
        gap: 12px;
        padding: 0 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 20px;
        scrollbar-width: none;
    }
    .destacadas__pista::-webkit-scrollbar { display: none; }
    .destacada { flex-basis: 86%; height: auto; aspect-ratio: 4 / 5; scroll-snap-align: start; }
    .destacada__texto { padding: 20px; }
    .destacada__titulo { font-size: 1.4rem; }
    .destacada__acciones { margin-top: 12px; }
}

/* ---- Filas ---- */
.fila { margin-top: 52px; }
.fila__cabeza {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--ancho);
    margin: 0 auto 16px;
    padding: 0 20px;
}
.fila__cabeza h2 { margin: 0; }
.fila__bajada { margin: 4px 0 0; font-size: 0.92rem; color: var(--text-muted); }
.fila__acciones { display: flex; align-items: center; gap: 8px; flex: none; }
.fila__ver { margin-right: 6px; font-size: 0.92rem; font-weight: 600; white-space: nowrap; }
.fila__flecha {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}
.fila__flecha:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.fila__flecha:disabled { opacity: 0.35; cursor: default; }
.fila__pista {
    list-style: none;
    margin: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--col, 300px);
    gap: 20px;
    padding: 2px var(--margen) 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--margen);
    scrollbar-width: none;
}
.fila__pista::-webkit-scrollbar { display: none; }
.fila__pista > li { min-width: 0; scroll-snap-align: start; }
.fila--grande { --col: 300px; }
.fila--chica { --col: 220px; }
.fila--mosaico { --col: 290px; }
.fila--guias { --col: 320px; }
.fila--guias .guia-card { height: 100%; }
/* Algunas guías traen una bajada de 300 caracteres: recortada a 4 líneas, las tarjetas quedan parejas. */
.fila--guias .guia-card__body p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}

/* Tarjeta con el título en blanco sobre la foto: todas las de la portada y las de /buscar/
   (desde el 17/10/2026, para que quede homogéneo con el carrusel). */
.mosaico__col { display: flex; flex-direction: column; gap: 16px; }
.sobre {
    position: relative;
    display: block;
    height: 175px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--surface-alt);
    color: #fff;
}
.sobre--alta { height: 305px; }
.sobre--categoria { height: auto; aspect-ratio: 6 / 5; }
.sobre:hover { text-decoration: none; }
.sobre img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--curva-salida);
}
.sobre:hover img { transform: scale(1.04); }
.sobre::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.25) 38%, rgb(0 0 0 / 0) 60%);
}
.sobre__titulo {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 1;
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}
.sobre__titulo span { display: block; margin-top: 3px; font-family: var(--font-body); font-size: 0.84rem; font-weight: 400; opacity: 0.9; }
.sobre--categoria .sobre__titulo { font-size: 1.15rem; }

/* Las de fila llevan título y minutos: el degradé sube un poco más para que se lean las dos líneas. */
.sobre--fila { height: auto; aspect-ratio: 6 / 5; }
.fila--chica .sobre--fila { aspect-ratio: 12 / 13; }
.sobre--fila::after {
    background: linear-gradient(to top, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.32) 42%, rgb(0 0 0 / 0) 66%);
}
.sobre__texto { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; }
.sobre__texto .sobre__titulo {
    position: static;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sobre__meta { margin: 4px 0 0; font-size: 0.82rem; color: rgb(255 255 255 / 0.88); }

@media (max-width: 719px) {
    .fila { margin-top: 38px; }
    .fila__cabeza h2 { font-size: 1.3rem; }
    .fila__pista { gap: 12px; }
    .fila--grande { --col: 70vw; }
    .fila--chica { --col: 44vw; }
    .fila--mosaico { --col: 62vw; }
    .fila--guias { --col: 80vw; }
    .mosaico__col { gap: 12px; }
    .sobre { height: 130px; }
    .sobre--alta { height: 220px; }
    .sobre--categoria, .sobre--fila { height: auto; }
    /* Las tarjetas angostas (fila chica y grilla de /buscar/) van más altas para que el texto no tape la foto. */
    .fila--chica .sobre--fila { aspect-ratio: 4 / 5; }
    .sobre__texto { left: 12px; right: 12px; bottom: 11px; }
    .fila--chica .sobre__titulo { font-size: 0.92rem; }
    .fila--chica .sobre__meta { font-size: 0.76rem; }
}
/* Las flechas son para mouse: con el dedo se desliza directo. */
@media (max-width: 719px), (hover: none) {
    .fila__flecha { display: none; }
}

/* ---- Banda del menú semanal y bloque "¿Vale la pena?" dentro de la portada ---- */
.banda-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 40px;
    margin-top: 56px;
    padding: 32px 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
}
.banda-menu h2 { margin: 0 0 6px; }
.banda-menu p { margin: 0; max-width: 62ch; color: var(--text-muted); }
.banda-menu .banda-menu__eyebrow {
    margin: 0 0 10px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}
.home .bloque-vale { margin: 56px 0 0; align-items: center; }
.bloque-vale .hero-tmx__figura { max-width: none; }
@media (max-width: 820px) {
    .bloque-vale .hero-tmx__figura { max-width: 340px; width: 100%; margin: 0 auto; }
}
@media (max-width: 719px) {
    .banda-menu { padding: 24px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .destacadas__pista, .destacada, .destacada__texto, .destacada__credito, .destacadas__punto::after, .sobre img { transition: none !important; }
    .sobre:hover img { transform: none; }
}

/* ---- Buscador y botones "¿Qué tenés ganas hoy?" (17/10/2026) ---- */
.visualmente-oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Lupa del encabezado, al lado de WhatsApp */
.site-header__acciones { display: flex; align-items: center; gap: 6px; }
.site-header__buscar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: var(--text);
}
.site-header__buscar:hover { background: var(--surface-alt); color: var(--accent); }
@media (min-width: 720px) {
    .site-header__acciones { grid-column: 3; justify-self: end; }
}

.buscador {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 20px rgb(0 0 0 / 0.05);
}
.buscador:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.buscador svg { flex: none; margin-left: 12px; color: var(--text-muted); }
.buscador__campo {
    flex: 1;
    min-width: 0;
    padding: 10px 4px;
    border: 0;
    outline: none;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 1rem;
}
.buscador__campo::placeholder { color: var(--text-muted); opacity: 1; }
.buscador__boton {
    flex: none;
    padding: 11px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.buscador__boton:hover { opacity: 0.92; }
.home__buscador { margin-top: 22px; }
.home__buscador + .destacadas { margin-top: 20px; }

.ganas { margin-top: 40px; }
.ganas h2 { margin: 0 0 14px; }
.ganas__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
}
.chip:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.chip[aria-current="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }

/* Página /buscar/ */
.busqueda { padding-top: 28px; }
.busqueda__titulo { margin: 0 0 18px; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.busqueda .ganas__chips { margin-top: 16px; }
.busqueda__estado { margin: 24px 0 4px; font-size: 0.95rem; color: var(--text-muted); }
.busqueda__nota { margin: 0; font-size: 0.88rem; color: var(--text-muted); }
.busqueda__grilla { margin-top: 16px; }
.busqueda__barra { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px; }
.busqueda__barra .busqueda__estado { margin: 0; }
.busqueda__barra .vista { margin: 0; }
.busqueda__vacio {
    margin: 24px 0;
    padding: 28px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    text-align: center;
    color: var(--text-muted);
}
.busqueda__vacio p { margin: 0; }

@media (max-width: 719px) {
    .site-header__buscar { width: 36px; height: 36px; }
    .home__buscador { margin-top: 16px; }
    .buscador svg { margin-left: 8px; }
    .buscador__boton { padding: 10px 18px; }
    .ganas { margin-top: 32px; }
    .ganas h2 { font-size: 1.3rem; }
    /* En celular los botones van en una sola fila que se desliza, hasta el borde. */
    .ganas__chips { flex-wrap: nowrap; margin: 0 -20px; padding: 0 20px 4px; overflow-x: auto; scrollbar-width: none; }
    .ganas__chips::-webkit-scrollbar { display: none; }
}

/* ---- Selector "Fotos / Con descripción" de las grillas de recetas (17/10/2026) ---- */
.vista {
    display: inline-flex;
    gap: 2px;
    margin: 18px 0 4px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
}
.vista[hidden] { display: none; }
.vista__boton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}
.vista__boton:hover { color: var(--text); }
.vista__boton[aria-pressed="true"] { background: var(--accent); color: var(--accent-contrast); }
.vista__boton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* La primera categoría después del selector no lleva la raya de arriba. */
.vista + .categoria h2 { border-top: none; padding-top: 0; margin-top: 1.8rem; }

/* El título de la tarjeta es h3 en /recetas/ y h2 en /buscar/: mismo aspecto. */
.receta-card__body h2 {
    margin: 0 0 6px;
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.receta-card__body h3 { margin-top: 0; }
/* El plato dibujado solo se ve en el formato "Fotos", en las recetas sin foto. */
.receta-card__plato { display: none; }

/* Formato "Fotos": título y minutos en blanco sobre la foto, como la portada. */
[data-vista="fotos"] .receta-grid--vista { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
[data-vista="fotos"] .receta-grid--vista .receta-card {
    position: relative;
    aspect-ratio: 6 / 5;
    border: 0;
    border-radius: 10px;
    background: #26302a;
    color: #fff;
}
[data-vista="fotos"] .receta-grid--vista .receta-card:hover { transform: none; }
[data-vista="fotos"] .receta-grid--vista .receta-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform 500ms var(--curva-salida);
}
[data-vista="fotos"] .receta-grid--vista .receta-card:hover .receta-card__img { transform: scale(1.04); }
[data-vista="fotos"] .receta-grid--vista .receta-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.32) 42%, rgb(0 0 0 / 0) 66%);
}
[data-vista="fotos"] .receta-grid--vista .receta-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 0 16px 14px;
}
[data-vista="fotos"] .receta-grid--vista .receta-card__body h2,
[data-vista="fotos"] .receta-grid--vista .receta-card__body h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}
[data-vista="fotos"] .receta-grid--vista .receta-card__desc { display: none; }
[data-vista="fotos"] .receta-grid--vista .card__etiqueta {
    margin: 6px 0 0;
    padding: 2px 8px;
    border-color: rgb(255 255 255 / 0.7);
    color: #fff;
    font-size: 0.66rem;
}
[data-vista="fotos"] .receta-grid--vista .receta-card__meta {
    margin: 4px 0 0;
    color: rgb(255 255 255 / 0.88) !important;
    font-size: 0.82rem !important;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
/* Sin foto: en vez de la tarjeta ilustrada (trae el título escrito), fondo oscuro y un plato. */
[data-vista="fotos"] .receta-grid--vista .receta-card--sin-foto .receta-card__img { display: none; }
[data-vista="fotos"] .receta-grid--vista .receta-card__plato {
    display: block;
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(255 255 255 / 0.35);
}

@media (max-width: 719px) {
    [data-vista="fotos"] .receta-grid--vista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    [data-vista="fotos"] .receta-grid--vista .receta-card { aspect-ratio: 4 / 5; }
    [data-vista="fotos"] .receta-grid--vista .receta-card__body { padding: 0 12px 11px; }
    [data-vista="fotos"] .receta-grid--vista .receta-card__body h2,
    [data-vista="fotos"] .receta-grid--vista .receta-card__body h3 { font-size: 0.92rem; }
    [data-vista="fotos"] .receta-grid--vista .receta-card__meta { font-size: 0.76rem !important; }
    [data-vista="fotos"] .receta-grid--vista .receta-card__plato { top: 32%; }
    /* En la tarjeta angosta la etiqueta de sin gluten tapa la foto: queda en "Con descripción". */
    [data-vista="fotos"] .receta-grid--vista .card__etiqueta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    [data-vista="fotos"] .receta-grid--vista .receta-card__img { transition: none; }
    [data-vista="fotos"] .receta-grid--vista .receta-card:hover .receta-card__img { transform: none; }
}

/* Enlaces dentro de un texto: subrayados, para que no se distingan solo por el color (Lighthouse, 17/10/2026). */
main p a:not([class]), main li a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }