/* ═══════════════════════════════════════════════════════════════════════════
 *  LANDING
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * A SANGRE. Cada franja ocupa todo el ancho del body --la cabecera, el héroe,
 * la banda de cifras, la llamada final y el pie-- y lo único que se recoge en
 * una medida legible es el CONTENIDO, con `.lp-ancho`. Va con `layout('full')`,
 * que es el modo sin cabecera, sin pie y sin relleno.
 *
 * ── LOS TONOS SALEN MEDIDOS DE LA MAQUETA ───────────────────────────
 *
 * Muestreados de `landpage.png` con PIL, que es la regla del proyecto: el verde
 * de los botones es #236e30, el del texto destacado #2a7a38 y el pie #122f18.
 *
 * ── Y NO HEREDA NADA DE LA TIENDA ───────────────────────────────────
 *
 * Es una página de marketing, no el escaparate: trae sus propios tokens y no da
 * por hecho ninguna hoja del sitio. Lo único que comparte es la familia de
 * iconos, Lucide, como todo el proyecto.
 */

.lp{
    --lp-verde:        #236e30;
    --lp-verde-vivo:   #2a7a38;
    --lp-verde-oscuro: #16491f;
    --lp-verde-claro:  #eef6ec;
    --lp-verde-borde:  #d3e7cf;

    --lp-tinta:  #16211a;
    --lp-texto:  #3f4a43;
    --lp-suave:  #6b7a70;
    --lp-tenue:  #93a399;

    --lp-papel:  #ffffff;
    --lp-crema:  #f6f9f4;
    --lp-borde:  #e6ebe6;

    --lp-pie:    #122f18;   /* el verde oscuro, que sigue usándose de acento */
    --lp-pie-fondo: #faf8f2; /* el fondo del pie, claro desde el 25/08/2026 */

    --lp-radio:  16px;

    /* LA ALTURA DE LAS PORTADAS INTERIORES, UNA SOLA PARA LAS TRES.
       «Cómo funciona», «Para agricultores» y «Para compradores» son el mismo
       tipo de página y se visitan seguidas --las tres cuelgan de la misma
       barra--, así que una portada de 340px y otra de 510 se nota al saltar
       de una a otra aunque cada una, sola, parezca bien. Aquí y no en cada
       hoja para que cambiarla sea un número, no tres.

       La portada de la PORTADA (`--lp-heroe`, 640px) no entra: esa es la
       primera pantalla del sitio y le toca ser más alta. */
    --lp-portada-alto: 500px;

    container-type: inline-size;

    background: var(--lp-papel);
    color: var(--lp-texto);
    font-size: 15px;
    line-height: 1.6;
}

.lp *{ box-sizing: border-box; }

/* La regla global `.TComponentES6 button{height:25px}` aplasta cualquier botón
   con icono: aquí el alto lo pone cada uno. */
.lp button{ height: auto; cursor: pointer; font-family: inherit; }

.lp img{ max-width: 100%; display: block; }

/* LOS ENLACES NO LLEVAN BORDE, Y HAY QUE DECIRLO.
 *
 * El sitio tiene una regla global sobre `a` --y otra sobre `a:visited`-- que
 * pinta un borde inferior: en el pie salía una raya bajo cada icono social y
 * bajo cada enlace de los legales, y en las tarjetas de categoría una línea
 * suelta en cuanto se visitaban. `getComputedStyle` no lo delata a simple
 * vista porque el color es casi el del fondo.
 *
 * EL `:hover` NO TOCA EL BORDE. Lo quitaba con `border: 0` y, con tres clases
 * y un tipo, le ganaba al borde propio de cualquier enlace-tarjeta o entrada
 * de índice: al pasar el ratón perdía su píxel, la caja encogía y la rejilla
 * o las columnas se recolocaban -- el texto «saltaba». Ninguna regla global
 * pone borde en `a:hover`, así que no había nada que quitar ahí; el reposo ya
 * lo limpian las dos primeras. */
.lp a,
.lp a:visited{ border: 0; text-decoration: none; }
.lp a:not(.lp-btn):hover{ text-decoration: none; }

/* Y EL COLOR DEL TEXTO DE LOS BOTONES, QUE TAMBIÉN LO PISA `:visited`.
 *
 * Un botón es un `<a>`, así que en cuanto se visita su destino el `a:visited`
 * global le cambia el color y «Soy comprador» sale en MORADO dentro de un
 * botón blanco. Se declara el color de cada variante también en `:visited`,
 * que es lo único que gana ahí -- en ese estado el navegador solo deja aplicar
 * colores, y el que se aplica es el último que casa.
 *
 * Y NO SE VE CON `getComputedStyle`: por privacidad devuelve siempre los
 * valores del enlace SIN visitar. Hay que mirarlo en pantalla. */
.lp .lp-btn-verde:visited{ color: #fff; }
.lp .lp-btn-blanco:visited{ color: var(--lp-tinta); }
.lp .lp-btn-linea:visited{ color: var(--lp-tinta); }

/* Y EL COLOR DEL BORDE, APARTE.
 *
 * El `border:0` de arriba mata el borde que pone la hoja global, pero una
 * tarjeta que declara el SUYO --una tarjeta-enlace, como las de la guía del
 * agricultor-- se lo encuentra pintado de morado en cuanto se visita: en
 * `:visited` el navegador solo deja aplicar colores, y el que gana es el del
 * `a:visited` global.
 *
 * Y NO SE VE CON `getComputedStyle`: por privacidad, el navegador devuelve
 * siempre los valores del enlace SIN visitar. Hay que mirarlo en pantalla. */
.lp a:visited{ border-color: inherit; }


/* EL CONTENIDO SE RECOGE, LA FRANJA NO. Es la única medida de página que hay
   en toda la hoja: todo lo demás va de borde a borde. */
.lp .lp-ancho{
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

/* ── BOTONES ─────────────────────────────────────────────────────────── */

.lp .lp-btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 11px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.lp .lp-btn iconify-icon{ font-size: 17px; }

.lp .lp-btn-grande{ padding: 14px 26px; font-size: 15px; }

.lp .lp-btn-verde{ background: var(--lp-verde); color: #fff; }
.lp .lp-btn-verde:hover{ background: var(--lp-verde-oscuro); color: #fff; }

.lp .lp-btn-blanco{ background: #fff; color: var(--lp-tinta); border-color: #fff; }
.lp .lp-btn-blanco:hover{ background: #f2f5f1; }

/* «Iniciar sesión»: blanco con borde, como en la maqueta. */
.lp .lp-btn-linea{ background: #fff; color: var(--lp-tinta); border-color: var(--lp-borde); }
.lp .lp-btn-linea:hover{ background: var(--lp-crema); }

/* ── TODO `<header>` DE AQUÍ DENTRO EMPIEZA LIMPIO ───────────────────
 *
 * `base.php` declara `header{ position:sticky; top:-92px; z-index:1000;
 * width:100%; background:#fff }` para la cabecera de la tienda, y esa regla la
 * coge CUALQUIER `<header>`. En esta página hay varios --la barra de arriba y
 * el título de cada sección-- y el efecto era que los TÍTULOS DE SECCIÓN se
 * quedaban pegados arriba con `z-index:1000`, o sea POR ENCIMA de la barra:
 * medido, «Un proceso simple, transparente y seguro para todos» pintándose
 * sobre el menú. No era un problema de z-index de la barra, era que el título
 * se había convertido en otra cabecera pegajosa.
 *
 * Se limpian todos y luego la barra declara lo suyo, que gana por clase. */
.lp header{
    position: static;
    top: auto; left: auto; right: auto;
    z-index: auto;
    width: auto;
    background: transparent;
    clear: none;
}

/* ── CABECERA ────────────────────────────────────────────────────────
 *
 * DE EXTREMO A EXTREMO DEL BODY (decisión del usuario): el logo pegado al
 * borde izquierdo y los botones al derecho, sin ninguna caja que los recoja.
 * Flota sobre la foto del héroe y se vuelve sólida al bajar. */
.lp .lp-cab{
    position: fixed;
    top: 0; left: 0; right: 0;

    /* POR ENCIMA DE TODO LO DE LA PÁGINA, y con sitio de sobra por debajo: la
       tarjeta de categorías va en 5 y el texto del héroe en 2. No hace falta
       llegar a 1000 --eso es lo que usa la cabecera de la tienda, que aquí no
       existe-- pero sí quedar claramente arriba. */
    z-index: 900;

    display: flex; align-items: center; gap: 28px;
    padding: 16px 32px;

    background: transparent;
    transition: background .2s, box-shadow .2s, padding .2s;
}

/* PEGADA, Y QUE SE NOTE. El .10 de antes era invisible sobre el blanco de la
   página --medido en pantalla: no se distinguía de la cabecera sin pegar-- y
   entonces el contenido parecía pasar POR ENCIMA de la barra en vez de por
   debajo. Con dos sombras, una corta y pegada para dibujar el borde y otra
   larga y suave para levantarla, la barra se separa de la página sin ensuciar
   el fondo. */
.lp .lp-cab.pegada{
    background: rgba(255,255,255,.97);
    box-shadow: 0 1px 0 rgba(20, 38, 26, .07),
                0 6px 24px rgba(20, 38, 26, .13);
    padding-block: 11px;
}

/* EL LOGO ES UNA IMAGEN, y se mide por el ALTO: el ancho lo pone su
   proporción. Con un `width` fijo, un logo que cambie de proporción --y este ya
   ha cambiado una vez-- saldría estirado. */
.lp .lp-marca{
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--lp-tinta);
    text-decoration: none;
    font-size: 19px; font-weight: 800; letter-spacing: -.3px;
}
.lp .lp-marca img{ height: 40px; width: auto; }

/* En el pie el fondo es verde oscuro y el logotipo lleva el «Agro» en verde
   oscuro también: ahí no se leería. Se usa la versión de icono + texto en
   blanco, que es la misma marca dicha de otra forma. */
.lp .lp-marca-ico{ display: flex; font-size: 24px; color: var(--lp-verde); }
.lp .lp-marca b em{ color: var(--lp-verde); font-style: normal; }

/* OJO: ESTO ES UN `<nav>`, Y EL SITIO YA TIENE REGLAS PARA `nav`.
 *
 * `base.php` declara `nav{ background-color:#FFF; z-index:1 }` para la barra de
 * categorías de la tienda, y esa regla la coge CUALQUIER `<nav>` de cualquier
 * componente. Aquí el efecto era una BARRA BLANCA de 897px atravesando la
 * cabecera --medido: `backgroundColor: rgb(255,255,255)` sobre un elemento al
 * que nadie le había puesto fondo-- que tapaba la foto y se comía los enlaces.
 *
 * Se anula. Es el mismo tropiezo que el `<header>` del alta de cliente: antes de
 * usar una etiqueta con nombre --`header`, `nav`, `main`, `footer`, `section`--
 * hay que mirar si `base.php` le tiene una regla global. */
.lp .lp-menu{
    flex: 1;
    display: flex; align-items: center; gap: 26px;

    background: transparent;
    background-color: transparent;
    z-index: auto;
}

/* EL TEXTO DE LA CABECERA ES OSCURO DESDE EL PRINCIPIO, como en la maqueta.
   La foto del héroe entra por la derecha y su mitad izquierda está velada en
   blanco, así que un menú en blanco sería invisible justo donde vive. */
.lp .lp-menu a{
    color: var(--lp-texto);
    text-decoration: none;
    font-size: 14px; font-weight: 600;
}
.lp .lp-menu a:hover{ color: var(--lp-verde); }

.lp .lp-cab-acciones{ display: flex; align-items: center; gap: 10px; }

/* ══ EL MENÚ DE CUENTA EN ESTA CABECERA (26/09/2026) ═══════════════════
 *
 * `TAccountMenu` --el carrito, los avisos y el avatar-- es el MISMO componente
 * que la cabecera de la tienda. Aquí solo se le dice de qué color va.
 *
 * Y se le dice SIN TOCAR SU HOJA: el componente declara sus colores como
 * `var(--sh-verde, #16a34a)`, o sea «el verde de la cabecera de la tienda, y si
 * no existe, este». Aquí no existe --esta página tiene su propia paleta-- así
 * que caía en el de respaldo, que es OTRO verde: #16a34a al lado de #236e30 no
 * se lee como un tono distinto, se lee como un componente traído de otro sitio.
 *
 * Declarando las variables de la tienda sobre este nodo, el componente las
 * encuentra y se viste solo. Es lo que hace que un componente compartido no
 * necesite una segunda hoja por cada sitio donde se use.
 */
.lp .lp-cab .TAccountMenu{
    --sh-verde:       var(--lp-verde);
    --sh-verde-hondo: var(--lp-verde-oscuro);
    --sh-verde-suave: var(--lp-verde-claro);
    --sh-verde-linea: var(--lp-verde-borde);

    --sh-tinta:       var(--lp-tinta);
    --sh-tinta-suave: var(--lp-suave);
    --sh-linea:       var(--lp-borde);

    /* EL ARO DE LAS PASTILLAS DE NÚMERO. En la tienda es el crema de su franja;
       aquí la barra es TRANSPARENTE sobre la foto del héroe y blanca al bajar
       (`.pegada`), así que el blanco vale para los dos: sobre la foto el aro
       separa la pastilla del icono, y sobre el blanco no se ve. */
    --sh-fondo: #fff;
}

/* Un poco de aire antes de los botones de alta, que son la conversión de estas
   páginas: pegados a la cesta parecían parte del mismo grupo. */
.lp .lp-cab .TAccountMenu{ margin-right: 4px; }

/*
 * EL DISPARADOR LLEVA SU PÍLDORA BLANCA SIEMPRE, Y AQUÍ SÍ HACE FALTA.
 *
 * En la tienda el fondo solo aparece al pasar por encima, porque debajo hay una
 * franja crema lisa. Esta barra es TRANSPARENTE SOBRE LA FOTO del héroe, y el
 * rótulo «MI CUENTA» va a 10,5 px en `--lp-suave` (#6b7a70): sobre un cielo
 * claro se lee mal y sobre una foto oscura no se lee. No es una preferencia,
 * es el contraste de la WCAG, y una foto de fondo no tiene un valor fijo contra
 * el que medirlo -- así que el fondo lo pone la píldora.
 *
 * Blanca con borde, que es exactamente `.lp-btn-linea`, el botón de al lado: la
 * esquina de esta cabecera ya tiene esa forma y no hace falta inventar otra.
 * La campana y la cesta se quedan desnudas a propósito -- son iconos en verde
 * oscuro, del mismo peso que los rótulos del menú que tienen al lado, y tres
 * píldoras seguidas convierten la barra en una botonera.
 */
.lp .lp-cab .TAccountMenu .am-disparo{
    background: var(--lp-papel);
    border-color: var(--lp-borde);
}

.lp .lp-cab .TAccountMenu .am-disparo:hover,
.lp .lp-cab .TAccountMenu[data-abierto="1"] .am-disparo{
    background: var(--lp-crema);
    border-color: var(--lp-verde-borde);
}

/* ── EL ☰, CENTRADO DE VERDAD ────────────────────────────────────────
 *
 * El BOTÓN ya estaba centrado en la cabecera --su centro y el de la barra
 * caían los dos en 38--, pero el ICONO de dentro no: medido a 820, el botón
 * iba de 26 a 51 y el icono de 42 a 62, o sea **13,5 px por debajo del centro
 * y sobresaliendo del botón por abajo**.
 *
 * El motivo es que el botón era `display: block` y el icono `inline-block`:
 * la caja de línea la manda entonces el `line-height` heredado --32px, con
 * 13 px de contenido en el botón-- y el icono se alinea por su base, no por
 * su centro. Un `align-items: center` en el padre no hacía nada porque el
 * padre no era flex.
 *
 * Se resuelve haciendo flex el propio botón. Y de paso la caja pasa a 40×40,
 * la misma que la campana y la cesta de al lado: así los cuatro comparten
 * centro y tamaño de pulsación, en vez de tener uno de 37×25 en medio. */
.lp .lp-hamburguesa{
    display: none;                  /* se enciende en el `@media` de abajo */
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    padding: 0;
    line-height: 1;
    border: 0; background: transparent;
    color: var(--lp-tinta); font-size: 26px;
}

/* ── HÉROE ───────────────────────────────────────────────────────────
 *
 * La foto va de fondo y no como `<img>`: así el degradado que hace legible el
 * texto es una capa más de la misma declaración y no un `::before` que haya que
 * apilar. El velo es por la IZQUIERDA, que es donde está el texto; la figura
 * queda limpia a la derecha, como en la maqueta. */
.lp .lp-heroe{
    position: relative;
    display: flex; align-items: center;
    min-height: 640px;
    padding: 120px 0 190px;

    background-image:
        linear-gradient(100deg,
            rgba(255,255,255,.92) 0%,
            rgba(255,255,255,.78) 26%,
            rgba(255,255,255,.30) 48%,
            rgba(255,255,255,0)   66%),
        url('/assets/landing/hero.jpg');
    background-size: auto, cover;
    background-position: center, center right;
    background-repeat: no-repeat, no-repeat;
}

.lp .lp-heroe-txt{ position: relative; z-index: 2; }

.lp .lp-heroe h1{
    margin: 0 0 18px;
    font-size: clamp(30px, 4.1cqw, 52px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -1.2px;
    color: var(--lp-tinta);
}
.lp .lp-heroe h1 em{ color: var(--lp-verde-vivo); font-style: normal; }

.lp .lp-heroe-sub{
    margin: 0 0 28px;
    max-width: 480px;
    font-size: clamp(14px, 1.25cqw, 17px);
    color: var(--lp-texto);
}

.lp .lp-heroe-botones{ display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

/* La prueba social: caras y una línea. Icono en su columna y el texto en la
   segunda, para que las dos líneas arranquen en la misma vertical. */
.lp .lp-prueba{ display: flex; align-items: center; gap: 12px; }

.lp .lp-caras{ display: flex; flex: 0 0 auto; }
.lp .lp-caras i{
    width: 32px; height: 32px;
    margin-left: -10px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--lp-verde-claro);
    color: var(--lp-verde);
    font-size: 15px;
}
.lp .lp-caras i:first-child{ margin-left: 0; }

.lp .lp-prueba small{
    flex: 1; min-width: 0;
    font-size: 12.5px; color: var(--lp-texto); line-height: 1.4;
}

/* ── CATEGORÍAS ──────────────────────────────────────────────────────
 *
 * La tarjeta PISA la unión entre el héroe y la franja de abajo, como en la
 * maqueta: por eso el margen negativo y el `z-index`. */
.lp .lp-cats-zona{ position: relative; z-index: 5; margin-top: -110px; }

.lp .lp-cats{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    background: #fff;
    border: 1px solid var(--lp-borde);
    border-radius: 20px;
    box-shadow: 0 16px 44px rgba(20, 38, 26, .10);
    overflow: hidden;
}

.lp .lp-cat{
    display: flex; align-items: center; gap: 12px;
    padding: 18px 16px;
    border-right: 1px solid var(--lp-borde);
    text-decoration: none;
    color: inherit;
}
.lp .lp-cat:last-child{ border-right: 0; }
.lp .lp-cat:hover{ background: var(--lp-crema); }

.lp .lp-cat-foto{
    flex: 0 0 auto;
    width: 54px; height: 54px;
    border-radius: 12px;
    object-fit: contain;
}

.lp .lp-cat-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp .lp-cat-txt b{ font-size: 13.5px; font-weight: 700; color: var(--lp-tinta); }
.lp .lp-cat-txt small{ font-size: 11.5px; color: var(--lp-suave); }

/* «Ver todas» es la última celda, con su flecha en círculo. */
.lp .lp-cat--todas{ justify-content: center; text-align: center; }
.lp .lp-cat--todas span{
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--lp-borde);
    color: var(--lp-verde);
}

/* ── LAS DOS CARAS ───────────────────────────────────────────────── */

.lp .lp-dual{
    position: relative;
    padding: 70px 0 0;

    background-image:
        linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.90) 60%, rgba(255,255,255,.96) 100%),
        url('/assets/landing/franja-dual.jpg');
    background-size: auto, cover;
    background-position: center, center;
}

/* LAS DOS CAJAS DE LOS LADOS.
 *
 * Asoman por los bordes y se quedan DETRÁS del contenido (`z-index:0` contra el
 * `1` de la rejilla): son atrezo, y taparlo sería justo al revés. `pointer-
 * events:none` para que no se coman un clic del texto que tienen al lado. */
.lp .lp-caja{
    position: absolute;
    bottom: 96px;
    z-index: 0;
    width: clamp(140px, 18cqw, 260px);
    pointer-events: none;
    filter: drop-shadow(0 14px 26px rgba(20, 38, 26, .18));
}
.lp .lp-caja--izq{ left: -28px; }
.lp .lp-caja--der{ right: -28px; }

.lp .lp-dual-rejilla{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr minmax(220px, 300px) 1fr;
    gap: 40px;
    align-items: center;
}

.lp .lp-etiqueta{
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--lp-verde-claro);
    border: 1px solid var(--lp-verde-borde);
    color: var(--lp-verde-oscuro);
    font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
}

.lp .lp-dual-col h2{
    margin: 0 0 20px;
    font-size: clamp(22px, 2.4cqw, 30px);
    font-weight: 800; line-height: 1.2; letter-spacing: -.6px;
    color: var(--lp-tinta);
}

/* Icono en su columna y el texto en la segunda: todas las líneas arrancan en
   la misma vertical aunque una ocupe dos renglones. */
.lp .lp-ticks{ list-style: none; margin: 0 0 26px; padding: 0; }
.lp .lp-ticks li{
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 11px;
    font-size: 14px; color: var(--lp-texto);
}
.lp .lp-ticks iconify-icon{ flex: 0 0 auto; margin-top: 2px; font-size: 17px; color: var(--lp-verde); }

.lp .lp-movil img{ width: 100%; filter: drop-shadow(0 22px 44px rgba(20, 38, 26, .22)); }

/* ── CIFRAS ──────────────────────────────────────────────────────────
 *
 * Banda oscura sobre la foto, dentro del ancho de página: en la maqueta no
 * llega a los bordes, se apoya sobre la franja de arriba. */
.lp .lp-cifras{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;

    margin-top: 60px;
    border-radius: 18px 18px 0 0;
    overflow: hidden;

    background-image:
        linear-gradient(rgba(14, 34, 17, .82), rgba(14, 34, 17, .82)),
        url('/assets/landing/cifras.jpg');
    background-size: cover;
    background-position: center;
}

.lp .lp-cifra{
    display: flex; align-items: center; gap: 13px;
    padding: 26px 22px;
    border-right: 1px solid rgba(255,255,255,.14);
}
.lp .lp-cifra:last-child{ border-right: 0; }

.lp .lp-cifra > span{
    flex: 0 0 auto;
    color: #9fdcab;
    font-size: 26px;
    display: flex;
}
.lp .lp-cifra > div{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp .lp-cifra b{ font-size: 24px; font-weight: 800; color: #fff; line-height: 1.1; }
.lp .lp-cifra small{ font-size: 12px; color: rgba(255,255,255,.78); }

/* ── SECCIONES CON TÍTULO ────────────────────────────────────────── */

.lp .lp-seccion{ padding: 74px 0; background: #fff; }
.lp .lp-seccion--clara{ background: var(--lp-crema); }

/* EL CENTRADO SE DECLARA EN CADA TÍTULO, NO SOLO EN SU CAJA.
 *
 * Una hoja global del sitio pone `text-align:left` a los encabezados --medido:
 * `.lp-titulo` en `center` y su `<h2>` en `left`-- así que heredarlo no basta y
 * el título salía pegado a la izquierda con la hojita centrada debajo. Se dice
 * en cada uno. */
.lp .lp-titulo{ text-align: center; margin-bottom: 44px; }
.lp .lp-titulo h2,
.lp .lp-titulo p{ text-align: center; }
.lp .lp-titulo h2{
    margin: 0 0 12px;
    font-size: clamp(24px, 2.8cqw, 34px);
    font-weight: 800; letter-spacing: -.7px;
    color: var(--lp-tinta);
}

/* La hojita con sus dos rayas, como en la maqueta. Las rayas son
   pseudoelementos porque son decoración: no tienen que leerse. */
.lp .lp-hoja{
    display: flex; align-items: center; justify-content: center; gap: 12px;
    color: var(--lp-verde);
    font-size: 16px;
}
.lp .lp-hoja::before,
.lp .lp-hoja::after{
    content: ''; width: 54px; height: 1px; background: var(--lp-borde);
}

.lp .lp-titulo p{ margin: 12px 0 0; font-size: 14px; color: var(--lp-suave); }

/* ── CÓMO FUNCIONA ──────────────────────────────────────────────── */

.lp .lp-pasos{
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: stretch; gap: 10px;
}

.lp .lp-pasos li{
    flex: 1; min-width: 0;
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 34px 18px 24px;
    text-align: center;
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    background: #fff;
}

.lp .lp-paso-num{
    position: absolute;
    top: -15px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--lp-verde);
    color: #fff;
    font-size: 13px; font-weight: 800;
}

/* LAS ILUSTRACIONES DE LA MAQUETA, y no un icono en un círculo.
 *
 * Vienen recortadas del PNG que las trae las cuatro juntas, sin el número
 * --ese lo dibuja la tarjeta, y así se puede reordenar o traducir sin volver a
 * exportar la imagen--. Alto fijo para que las cuatro tarjetas midan lo mismo
 * aunque los recortes no tengan la misma proporción. */
.lp .lp-paso-ilus{
    display: flex; align-items: flex-end; justify-content: center;
    width: 100%; height: 108px;
    margin-bottom: 16px;
}
.lp .lp-paso-ilus img{ max-height: 100%; width: auto; object-fit: contain; }

.lp .lp-paso-ico{
    width: 74px; height: 74px;
    margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--lp-verde-claro);
    border: 1px solid var(--lp-verde-borde);
    color: var(--lp-verde);
    font-size: 32px;
}

.lp .lp-pasos b,
.lp .lp-pasos small{ text-align: center; }
.lp .lp-pasos b{ font-size: 15px; font-weight: 700; color: var(--lp-tinta); margin-bottom: 6px; }
.lp .lp-pasos small{ font-size: 12.5px; color: var(--lp-suave); line-height: 1.5; }

.lp .lp-flecha{
    display: flex; align-items: center;
    color: var(--lp-tenue);
    font-size: 18px;
}

/* ── SIN COMENTARIOS TODAVÍA ───────────────────────────────────────
   La zona de testimonios SE QUEDA, vacía, hasta que haya valoraciones de
   compras reales (28/09/2026): las citas que había eran texto de maqueta con
   nombres inventados, y publicarlas como opiniones reales está prohibido.
   Mismo dibujo que `.cn-sin-opiniones` de `/para-tu-negocio` --icono en su
   círculo, rótulo y mensaje en un recuadro discontinuo--, con los tokens de
   esta hoja. Candidato a la hoja común del área pública. */
.lp .lp-sin-opiniones{
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 4px; padding: 34px 20px 30px;
    background: var(--lp-crema);
    border: 1px dashed var(--lp-verde-borde);
    border-radius: var(--lp-radio);
}
.lp .lp-sin-icono{
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 6px;
    border-radius: 50%; background: #fff; border: 1px solid var(--lp-verde-borde);
}
.lp .lp-sin-icono iconify-icon{ font-size: 24px; color: var(--lp-verde); }
.lp .lp-sin-opiniones b{ font-size: 15px; font-weight: 800; color: var(--lp-tinta); }
.lp .lp-sin-opiniones p{ margin: 2px 0 0; max-width: 460px; font-size: 13px; line-height: 1.5; color: var(--lp-suave); text-align: center; }

/* ── TESTIMONIOS ────────────────────────────────────────────────── */

.lp .lp-testimonios{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.lp .lp-testi{
    margin: 0;
    padding: 24px;
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    background: #fff;
}

.lp .lp-testi blockquote{
    margin: 0 0 18px;
    font-size: 14px; color: var(--lp-texto); line-height: 1.6;
}

.lp .lp-testi figcaption{ display: flex; align-items: center; gap: 12px; }

.lp .lp-avatar{
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--lp-verde-claro);
    border: 1px solid var(--lp-verde-borde);
    color: var(--lp-verde-oscuro);
    font-size: 13px; font-weight: 800;
}

.lp .lp-testi figcaption > div{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp .lp-testi figcaption b{ font-size: 13.5px; color: var(--lp-tinta); }
.lp .lp-testi figcaption small{ font-size: 11.5px; color: var(--lp-suave); line-height: 1.35; }

/* ── LLAMADA FINAL ──────────────────────────────────────────────── */

.lp .lp-cta{
    padding: 40px 0;
    background-image:
        linear-gradient(rgba(14, 34, 17, .30), rgba(14, 34, 17, .30)),
        url('/assets/landing/cta.jpg');
    background-size: cover;
    background-position: center;
}

.lp .lp-cta-tarjeta{
    position: relative;
    max-width: 620px;
    margin-inline: auto;
    padding: 44px 32px 34px;
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 20px 50px rgba(20, 38, 26, .18);
    text-align: center;
}

.lp .lp-cta-hoja{
    position: absolute;
    top: -26px; left: 50%; transform: translateX(-50%);
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px rgba(20, 38, 26, .14);
    color: var(--lp-verde);
    font-size: 24px;
}

.lp .lp-cta-tarjeta h2,
.lp .lp-cta-tarjeta p{ text-align: center; }
.lp .lp-cta-tarjeta h2{
    margin: 0 0 8px;
    font-size: clamp(20px, 2.4cqw, 28px);
    font-weight: 800; letter-spacing: -.6px;
    color: var(--lp-tinta);
}
.lp .lp-cta-tarjeta p{ margin: 0 0 24px; font-size: 14px; color: var(--lp-suave); }

.lp .lp-cta-botones{ display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.lp .lp-cta-botones .lp-btn-blanco{ border-color: var(--lp-borde); }

/* ── GARANTÍAS ──────────────────────────────────────────────────── */

/* Se fueron a `TPlataforma/css/TGarantias.css`, colgadas de `.ac-garantias`:
   la franja la pinta ahora `base.php` para todo el sitio y aquí solo existía
   dentro de un `.lp`. Mismo camino que hizo el pie a `TPie.css`. */

/* ── PIE ────────────────────────────────────────────────────────── */

/* EL PIE, CLARO (25/08/2026).
 *
 * Era una franja de verde oscuro a sangre, y ocupando el final de todas las
 * páginas se comía el remate: la página terminaba en un bloque pesado y el
 * logo, que ahí abajo tenía que ir en verde claro para leerse, salía en un
 * tono que no es el de la marca.
 *
 * Ahora es crema con tinta verde, así que la marca se escribe con SUS colores
 * --los mismos que en la cabecera-- y la página acaba donde acaba el
 * contenido, sin un telón oscuro detrás.
 *
 * La raya de arriba hace el trabajo que hacía el contraste: separa el pie de
 * la última sección sin necesidad de cambiar de peso. */
/* EL `<nav>` DEL MENÚ, LIMPIO. `base.php` declara `nav{background:#FFF;
   border-bottom:1px solid #bbb; z-index:1}` para la barra de categorías, y eso
   le dibujaba un rectángulo blanco con raya gris al menú del landing. */
.lp .lp-menu{ background: transparent; border: 0; z-index: auto; }

/* ── ESTRECHO ───────────────────────────────────────────────────── */

@container (max-width: 1020px){

    .lp .lp-menu{ display: none; }
    .lp .lp-menu.abierto{
        display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
        position: absolute;
        top: 100%; left: 0; right: 0;
        padding: 18px 32px 22px;
        background: #fff;
        box-shadow: 0 12px 26px rgba(20, 38, 26, .12);
    }
    .lp .lp-menu.abierto a{ color: var(--lp-texto); }

    /* ── DESPLEGADO, EN COLUMNA (24/09/2026) ───────────────────────────
       Desde que la barra sale del gestor de zonas, los enlaces cuelgan de
       `ul.nav-zona-lista`, que es un `display:flex` en FILA con 26px entre
       entradas: el panel abierto los ponía de lado, «Productos» y «Precios»
       quedaban fuera de la pantalla y se leían a trozos. Aquí, uno debajo de
       otro y a la izquierda, con una zona de toque de 44px --es un dedo, no un
       ratón--. */
    .lp .lp-menu.abierto .nav-zona-lista{
        flex-direction: column; align-items: stretch; gap: 0;
        width: 100%;
    }
    .lp .lp-menu.abierto .nav-zona-item > a{
        display: flex; align-items: center;
        min-height: 44px;
        font-size: 16px;
        color: var(--lp-texto);
    }
    /* El `<span>` del rótulo trae `font: 12px` de la hoja global (el shorthand
       `font:` fija el tamaño y no lo hereda del `<a>`): sin esto, 16px puestos
       en el enlace no llegaban al texto. */
    .lp .lp-menu.abierto .nav-zona-item > a > span{ font: inherit; }
    .lp .lp-menu.abierto .nav-zona-item + .nav-zona-item{ border-top: 1px solid var(--lp-borde); }

    /* `inline-flex` Y NO `block`: es lo que centra el icono dentro del botón.
       Ver la nota de la regla de arriba. */
    .lp .lp-hamburguesa{ display: inline-flex; order: 3; }
    .lp .lp-cab-acciones{ margin-left: auto; }

    /* El móvil se va: en una columna, el texto de las dos caras es lo que hay
       que leer, y la foto del teléfono lo empujaría fuera de la pantalla. */
    .lp .lp-dual-rejilla{ grid-template-columns: 1fr; gap: 44px; }
    .lp .lp-movil{ display: none; }

    /* Las cajas de los lados se van con el móvil: en una columna se meterían
       debajo del texto. */
    .lp .lp-caja{ display: none; }

    .lp .lp-pasos{ flex-wrap: wrap; }
    .lp .lp-pasos li{ flex: 1 1 240px; }
    .lp .lp-flecha{ display: none; }

}

@container (max-width: 620px){
    .lp .lp-heroe{ min-height: 0; padding: 104px 0 150px; }
    .lp .lp-cab{ padding-inline: 18px; }
    .lp .lp-ancho{ padding-inline: 18px; }

    /* LA HAMBURGUESA SE SALÍA DE LA PANTALLA (14/09/2026). A 400 px no caben el
       logo, dos botones y el menú con 28 px entre cada uno: medido, el botón del
       menú acababa en x=466, así que en el móvil las páginas de plataforma no
       tenían menú. Se juntan las piezas y «Iniciar sesión» se va: sigue dentro
       del alta y del propio menú. */
    .lp .lp-cab{ gap: 10px; }
    .lp .lp-cab-acciones{ gap: 6px; }
    .lp .lp-cab-acciones .lp-btn-linea{ display: none; }
    .lp .lp-cab-acciones .lp-btn{ padding-inline: 12px; }
    .lp .lp-marca img{ max-width: 128px; height: auto; }
    .lp .lp-cat{ border-right: 0; border-bottom: 1px solid var(--lp-borde); }
}

/* ════════════════════════════════════════════════════════════════════════
   LA NAVEGACIÓN, DESDE EL GESTOR DE ZONAS  (25/08/2026)
   ════════════════════════════════════════════════════════════════════════

   La barra, las cuatro columnas del pie y la línea de legales las pinta ahora
   `NavigationRender`, que envuelve los enlaces en `<nav><ul><li>`. La hoja de
   siempre apuntaba a `.lp-menu a` --el enlace colgando directo del `nav`-- así
   que aquí se hace el puente: mismo aspecto, marcado nuevo.

   No se han tocado las reglas de arriba: siguen sirviendo a cualquier bloque
   que se escriba a mano. */

.lp .nav-zona-lista{
    display: flex;
    align-items: center;
    gap: 26px;

    margin: 0;
    padding: 0;
    list-style: none;
}

/* EL `<nav>` GLOBAL TRAE FONDO BLANCO Y BORDE --`base.php` los declara para la
   barra de categorías de la tienda-- y cualquier `<nav>` de cualquier pantalla
   los hereda: sobre la foto de la portada era un rectángulo blanco, y sobre el
   verde del pie, una raya gris. Es la misma nota que ya estaba escrita para
   `.lp-menu` y `.lp-social`; ahora alcanza también a las zonas. */
.lp .nav-zona{ background: transparent; border: 0; z-index: auto; }
.lp .nav-zona-item{ position: static; background: transparent; }

/* ── LA BARRA DE ARRIBA ─────────────────────────────────────────────── */
.lp .lp-menu .nav-zona-item > a{
    color: var(--lp-texto);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
/* AL PASAR EL RATÓN, EL MISMO SUBRAYADO QUE LLEVA LA ENTRADA ACTIVA.
 *
 * Solo cambiaba el color, y un verde sobre gris oscuro es un cambio que hay que
 * mirar para verlo: la barra no respondía al ratón. El subrayado sí se ve de
 * refilón, que es justo lo que tiene que hacer un hover.
 *
 * MISMO GROSOR Y MISMA SEPARACIÓN que el activo (`text-underline-offset: 6px`,
 * más abajo). No es por simetría: con medidas distintas, la raya salta de sitio
 * al pasar de una entrada a otra si una de ellas es la activa.
 *
 * Y sí, mientras el ratón está encima hay DOS entradas subrayadas --la activa y
 * la señalada--. Es correcto: una dice dónde estás y la otra dónde vas a ir, y
 * la segunda desaparece al retirar el ratón. Quitarle el subrayado al hover
 * para «no confundir» es quedarse sin señal por miedo a tener dos. */
.lp .lp-menu a:hover,
.lp .lp-menu .nav-zona-item > a:hover{
    color: var(--lp-verde);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--lp-verde);
}

/* El color se declara TAMBIÉN en el `<span>` de dentro: la hoja global pinta
   de morado lo visitado, y en `:visited` el navegador no deja cambiar el color
   desde cualquier regla. Se viste el hijo, que no tiene esa restricción. */
.lp .lp-menu .nav-zona-item > a > span{ color: var(--lp-texto); }
.lp .lp-menu .nav-zona-item > a:hover > span{ color: var(--lp-verde); }

/* ── LAS COLUMNAS DEL PIE ───────────────────────────────────────────── */
.lp .nav-zona-col{ display: flex; flex-direction: column; gap: 9px; }

/* EL TÍTULO DE COLUMNA. Con el pie claro va en tinta, no en blanco: era el
   resto de cuando el pie era verde oscuro y, al cambiar el fondo, dejaba los
   cinco rótulos en blanco sobre crema -- ilegibles y sin dar error. */
.lp .nav-zona-titulo{
    color: var(--lp-tinta);
    font-size: 13px;
    margin-bottom: 3px;
}

.lp .nav-zona--columna .nav-zona-lista{
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.lp .nav-zona-col .nav-zona-item > a > span{ color: var(--lp-texto); font-size: 12.5px; }
.lp .nav-zona-col .nav-zona-item > a:hover > span{ color: var(--lp-verde); }
.lp .nav-zona-col .nav-zona-item > a{ text-decoration: none; }

/* ── LA LÍNEA DE LEGALES ────────────────────────────────────────────── */
.lp .lp-legal .nav-zona-lista{ gap: 16px; }
.lp .lp-legal .nav-zona-item > a > span{ color: var(--lp-suave); font-size: 11.5px; }
.lp .lp-legal .nav-zona-item > a:hover{ text-decoration: underline; }
.lp .lp-legal .nav-zona-item > a:hover > span{ color: var(--lp-verde); }

/* El pie ya no vive aquí: su hoja es `TPlataforma/css/TPie.css`, que carga
   `base.php` para todo el sitio. Se sacó de aquí porque colgaba de `.lp` y por
   eso solo existía en el landing. */


/* ══ EL BOTÓN DE VOLVER ARRIBA ═════════════════════════════════════
 *
 * Va en el `body` y se coloca por JS encima del badge de soporte, que no mide
 * siempre lo mismo. Aquí solo su aspecto y su aparición.
 *
 * `z-index` POR DEBAJO DEL CHAT (9000): si empatara, el botón se pondría
 * delante de una conversación abierta al pasar el ratón, y lo que se está
 * leyendo manda sobre un atajo de navegación. */
.pg-arriba{
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 8900;

    width: 42px; height: 42px;          /* el global `button{height:25px}` */
    display: grid; place-items: center;

    border: 1px solid var(--lp-verde-borde, #d3e7cf);
    border-radius: 50%;
    background: #fff;
    color: var(--lp-verde, #236e30);
    font-size: 19px;
    cursor: pointer;

    box-shadow: 0 6px 20px rgba(16, 50, 24, .18);

    /* ESCONDIDO DE VERDAD MIENTRAS NO TOCA: `visibility` además de la opacidad
       y el desplazamiento, porque un botón a opacidad 0 sigue recibiendo el
       clic -- y este está justo encima del chat de soporte. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s, transform .18s, visibility .18s, bottom .18s;
}

.pg-arriba.es-visible{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pg-arriba:hover{
    background: var(--lp-verde-claro, #eef6ec);
    border-color: var(--lp-verde, #236e30);
}

/* Quien pide no animarse, no se anima: el botón aparece y desaparece sin
   transición, pero sigue apareciendo. */
@media (prefers-reduced-motion: reduce){
    .pg-arriba{ transition: none; transform: none; }
    .pg-arriba.es-visible{ transform: none; }
}


/* ── LA ENTRADA DEL MENÚ EN LA QUE SE ESTÁ ──────────────────────────
 *
 * Subrayada, y con el subrayado SEPARADO del texto --`text-underline-offset`--
 * porque a ras de las letras se confunde con el subrayado del hover y con las
 * colas de la «g» y la «p», que en «Para agricultores» son tres.
 *
 * El color también cambia: el subrayado solo lo ve quien lo busca, y esta marca
 * tiene que leerse de un vistazo al entrar en la página.
 *
 * SE DECLARA PARA LAS DOS FORMAS de la barra --el enlace suelto de siempre y el
 * que envuelve el gestor de zonas en `<li>`-- porque conviven: es la misma nota
 * que ya está escrita unas líneas más arriba. */
.lp .lp-menu a.es-activo,
.lp .lp-menu .nav-zona-item > a.es-activo{
    color: var(--lp-verde);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--lp-verde);
}

/* Y al pasar por encima de la que ya está activa, no cambia nada: parpadear
   sobre la página en la que ya estás no informa de nada. */
.lp .lp-menu a.es-activo:hover,
.lp .lp-menu .nav-zona-item > a.es-activo:hover{ color: var(--lp-verde); }

/* El `a:visited` global pinta de magenta lo ya visitado, y la entrada activa es
   por definición una página visitada. */
.lp .lp-menu a.es-activo:visited,
.lp .lp-menu .nav-zona-item > a.es-activo:visited{ color: var(--lp-verde); }



/* ═══════════════════════════════════════════════════════════════════════════
 *  EL PIE DEL SITIO   ·   uno solo, para todas las páginas
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ── POR QUÉ SALE DE `TLanding.css` ─────────────────────────────────
 *
 * El pie bueno --el de la portada-- vivía dentro de la hoja del landing y
 * colgaba de `.lp`, así que solo existía donde había un landing. El resto del
 * sitio arrastraba OTRO pie (`www_oneway/footer.php`), y la tienda no tenía
 * ninguno. Tres pies para un sitio son tres sitios donde cambiar un enlace
 * legal, y ya se veía: el de la portada llevaba las columnas del gestor de
 * zonas y el otro no.
 *
 * Aquí está el único, autocontenido: declara sus propias variables y no
 * depende de que alguien haya cargado la hoja del landing. Lo pinta `base.php`
 * para toda la web.
 *
 * ── SE COLGABA DE `.lp` Y AHORA DE `.ac-pie` ───────────────────────
 *
 * `pie.php` envuelve el pie en `.ac-pie`, así que las páginas de plataforma
 * --que ya viven dentro de un `.lp`-- siguen viéndose igual y el resto lo
 * hereda sin tener que envolverse en nada.
 *
 * ── Y CON `@media`, NO CON `@container` ────────────────────────────
 *
 * La hoja del landing usa consultas de contenedor porque su raíz declara un
 * `container-type`. Fuera de ahí no hay contenedor que consultar y esas reglas
 * NO SE APLICAN NUNCA -- sin error, y en un pie no se nota hasta que alguien
 * abre el sitio en un móvil.
 */

.ac-pie{
    --acp-verde:      #2f7d3f;
    --acp-tinta:      #16241a;
    --acp-texto:      #3f4a43;
    --acp-suave:      #6b7a70;
    --acp-borde:      #e6ebe6;
    --acp-crema:      #f6f9f4;
    --acp-verde-borde:#bcdcc4;
    --acp-fondo:      #faf8f2;
}

.ac-pie .lp-pie{
    padding: 46px 0 0;
    background: var(--acp-fondo);
    color: var(--acp-texto);
    border-top: 1px solid var(--acp-borde);
}

/* La única medida de página del pie. Se declara aquí y no se hereda del
   landing: fuera de él, `.lp-ancho` no existe. */
.ac-pie .lp-ancho{
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

.ac-pie .lp-pie-rejilla{
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 34px;
}

/* ── LA MARCA ───────────────────────────────────────────────────── */

.ac-pie .lp-marca{
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--acp-tinta);
    text-decoration: none;
    font-size: 19px; font-weight: 800; letter-spacing: -.3px;
    margin-bottom: 12px;
}
.ac-pie .lp-marca img{ height: 40px; width: auto; }

/* El `<b>` se lo llevaba la regla global `b,strong{color:#000}`, y el color no
   se hereda cuando alguien lo declara por debajo: hay que decirlo aquí. */
.ac-pie .lp-pie-marca .lp-marca b{ color: var(--acp-tinta); font-size: 19px; letter-spacing: -.2px; }
.ac-pie .lp-pie-marca .lp-marca b em{ color: var(--acp-verde); font-style: normal; }
.ac-pie .lp-pie-marca .lp-marca-ico{ display: flex; color: var(--acp-verde); font-size: 26px; }

.ac-pie .lp-pie-marca p{
    margin: 0 0 16px;
    font-size: 12.5px; line-height: 1.55;
    max-width: 260px; color: var(--acp-suave);
}

/* ── LOS DOS `<nav>` ────────────────────────────────────────────────
   `base.php` declara `nav{ background:#FFF; border-bottom:1px solid #bbb;
   z-index:1 }` para la barra de categorías, y eso dibujaba un rectángulo
   blanco con una raya gris debajo de los iconos sociales y de los legales.
   Medido, no supuesto. */
.ac-pie nav{ background: transparent; border: 0; z-index: auto; padding: 0; }

/* Y SUS ENLACES NO SON LOS DEL MENÚ. `base.php` declara además
   `nav a{ font: bold 15px Arial; color:#808080; padding:8px }` para la barra de
   categorías: sin desdecirlo, los enlaces del pie salen en Arial gris con ocho
   píxeles de relleno cada uno, y las columnas se separan como si fueran
   botones. */
.ac-pie nav a{ font: inherit; padding: 0; color: inherit; }

.ac-pie .lp-social{ display: flex; gap: 10px; }
.ac-pie .lp-social a{
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--acp-borde);
    color: var(--acp-verde);
    font-size: 15px;
    text-decoration: none;
}
.ac-pie .lp-social a:hover{ background: var(--acp-crema); border-color: var(--acp-verde-borde); }

/* ── LAS COLUMNAS ───────────────────────────────────────────────── */

/* ── EL TITULO DE LA COLUMNA ESTA FUERA DE LA COLUMNA ───────────────
 *
 * El gestor de zonas monta
 * `div.nav-zona-col > b.nav-zona-titulo + nav.lp-pie-col > ul > li > a > span`,
 * o sea que el rotulo **es hermano** del `<nav>`, no hijo. Vestirlo con
 * `.lp-pie-col b` --que es lo que parecia natural-- no aplicaba a nada: el
 * titulo se quedaba con la letra heredada y, sobre todo, PEGADO a su primer
 * enlace, mientras entre enlaces si habia 9px. Se leia como si «Plataforma» y
 * «Como funciona» fueran la misma cosa.
 *
 * Quien manda la separacion es el contenedor `.nav-zona-col`, y el titulo
 * necesita MAS aire que el que hay entre items: si tiene el mismo, deja de
 * parecer un titulo. */
.ac-pie .nav-zona-col{ display: flex; flex-direction: column; }
.ac-pie .nav-zona-titulo{
    display: block;
    color: var(--acp-tinta);
    font-size: 13px; font-weight: 700;
    margin-bottom: 14px;
}

.ac-pie .lp-pie-col{ display: flex; flex-direction: column; gap: 9px; }
/* EL COLOR VA TAMBIÉN AL `<span>` DE DENTRO, Y NO ES UN DETALLE.
   El gestor de zonas envuelve cada rótulo en un `<span>`, y la regla global es
   `a, .link, a:active, a:focus, a:visited, a span { color:#910c88 }` -- con
   `a span` dentro. Vestir solo el `<a>` deja el enlace del color correcto y el
   texto que se lee, magenta: el color lo pone el hijo, que es quien pinta. Es
   la misma trampa de la cabecera. */
.ac-pie .lp-pie-col a,
.ac-pie .lp-pie-col a span{ color: var(--acp-texto); font-size: 12.5px; text-decoration: none; font-weight: 400; }
.ac-pie .lp-pie-col a:hover,
.ac-pie .lp-pie-col a:hover span{ color: var(--acp-verde); text-decoration: underline; }
.ac-pie .lp-pie-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ac-pie .lp-pie-col li{ margin: 0; padding: 0; }

/* ── LA LÍNEA DE LEGALES ────────────────────────────────────────── */

.ac-pie .lp-pie-legal{
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding-block: 16px;
    border-top: 1px solid var(--acp-borde);
    font-size: 11.5px;
    color: var(--acp-suave);
}
.ac-pie .lp-pie-legal nav{ display: flex; gap: 20px; flex-wrap: wrap; }
.ac-pie .lp-pie-legal ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.ac-pie .lp-pie-legal li{ margin: 0; padding: 0; }
.ac-pie .lp-pie-legal a,
.ac-pie .lp-pie-legal a span{ color: var(--acp-suave); text-decoration: none; font-weight: 400; font-size: 11.5px; }
.ac-pie .lp-pie-legal a:hover,
.ac-pie .lp-pie-legal a:hover span{ color: var(--acp-verde); text-decoration: underline; }

/* ── LO YA VISITADO ─────────────────────────────────────────────────
   La regla global `a:visited{ color:#910c88; border:0 !important }` pinta de
   magenta los enlaces del pie --que es justo lo que se visita-- y deja el
   `border-color` en `currentColor`. Se dice aquí, como en las tarjetas. */
/* CON EL COLOR LITERAL, NO CON `var()`: el navegador no resuelve variables
   dentro de una regla `:visited` --limita a propósito lo que ahí se puede
   cambiar, para que una página no pueda deducir tu historial-- y la regla se
   queda sin efecto, sin error y sin aviso. Son los valores de `--acp-texto` y
   `--acp-suave`. */
.ac-pie a:visited,
.ac-pie a:visited span{ color: inherit; border-color: inherit; }
.ac-pie .lp-pie-col a:visited,
.ac-pie .lp-pie-col a:visited span{ color: #3f4a43; }
.ac-pie .lp-pie-legal a:visited,
.ac-pie .lp-pie-legal a:visited span{ color: #6b7a70; }
.ac-pie .lp-pie-marca .lp-marca:visited b{ color: #16241a; }

/* ── ESTRECHO ───────────────────────────────────────────────────── */

@media (max-width: 1020px){
    .ac-pie .lp-pie-rejilla{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px){
    .ac-pie .lp-ancho{ padding-inline: 18px; }
    .ac-pie .lp-pie-rejilla{ grid-template-columns: 1fr; }
}


/**
 * ═══════════════════════════════════════════════════════════════════════════
 *  EL DOCUMENTO LEGAL — la hoja común de TODOS los textos legales
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Condiciones de uso, privacidad, cookies, condiciones de venta, devoluciones,
 * Compra protegida, reglas, valoraciones, pagos, vendedores, aviso legal y las
 * condiciones particulares de cada vendedor se pintan con el mismo armazón
 * (`LegalLayout/abrir.php` + `cerrar.php`) y esta hoja. Nació en
 * `TReturnTerms.css` (14/09/2026) y se generalizó al llegar el resto: doce copias
 * de la misma hoja son doce sitios donde arreglar el mismo descuadre.
 *
 * La raíz es `.lp.lg`: la página de plataforma (`.lp`) marcada como documento.
 *
 * Tokens, botones y cabecera del sitio salen de `TLanding.css`. Aquí, dos
 * bloques con dos reglas distintas:
 *
 *   · LA PANTALLA (`.lp.lg .lg-cab`, `.lg-rejilla`, `.lg-indice`…):
 *     cabecera del documento, índice pegajoso y cierre.
 *   · EL DOCUMENTO (`.lg-doc …`): SIN la raíz del componente delante, porque
 *     `slImprimir` copia ese nodo a un iframe donde `.lp.lg` no existe y
 *     recoge las reglas que mencionan `.lg-`. Colgado de la raíz, el papel
 *     saldría sin un solo estilo.
 *
 * Tipografía de texto largo: 15,5 px, interlineado 1,75 y una columna de ~72
 * caracteres, que es lo que se lee sin cansar. Nada por debajo de 10 px.
 */

.lp.lg .lp-ancho{ max-width: 1320px; }

.lp.lg h1,
.lp.lg h2{ padding-left: 0; padding-right: 0; }

.lp.lg a:focus-visible,
.lp.lg button:focus-visible{
    outline: 3px solid var(--lp-verde-vivo);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ══ CABECERA DEL DOCUMENTO ════════════════════════════════════════ */
.lp.lg .lg-cab{
    padding: 118px 0 34px;
    background: linear-gradient(180deg, var(--lp-verde-claro), #fff);
    border-bottom: 1px solid var(--lp-borde);
}

.lp.lg .lg-migas{
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-bottom: 18px;
    font-size: 13px; color: var(--lp-suave);
}
.lp.lg .lg-migas a{ color: var(--lp-verde-oscuro); font-weight: 600; text-decoration: none; }
.lp.lg .lg-migas a:hover{ text-decoration: underline; }
.lp.lg .lg-migas iconify-icon{ font-size: 14px; color: var(--lp-tenue); }

/* Icono en su columna y todo el texto en la segunda. */
.lp.lg .lg-cab-fila{ display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.lp.lg .lg-cab-texto{ flex: 1 1 520px; min-width: 0; }
.lp.lg .lg-cab-ico{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--lp-verde); color: #fff;
}
.lp.lg .lg-cab-ico iconify-icon{ font-size: 28px; }

.lp.lg .lg-cab h1{
    margin: 0 0 10px;
    font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.15; letter-spacing: -.8px;
    color: var(--lp-tinta); text-align: left;
}
.lp.lg .lg-cab-texto > p{ max-width: 760px; margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--lp-texto); text-align: left; }

.lp.lg .lg-cab-datos{ display: flex; flex-wrap: wrap; gap: 8px; }
.lp.lg .lg-cab-datos span{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--lp-borde); border-radius: 999px;
    background: #fff;
    font-size: 12.5px; color: var(--lp-texto);
}
.lp.lg .lg-cab-datos iconify-icon{ font-size: 14px; color: var(--lp-verde); }

.lp.lg .lg-cab-botones{ display: flex; flex-wrap: wrap; gap: 10px; align-self: center; }
.lp.lg .lg-btn iconify-icon{ font-size: 17px; }

/* ══ CUERPO: índice pegajoso + documento ═══════════════════════════ */
.lp.lg .lg-cuerpo{ padding: 40px 0 60px; background: #fff; }

.lp.lg .lg-rejilla{
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.lp.lg .lg-indice{
    position: sticky; top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 18px 16px;
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    background: var(--lp-crema);
}
.lp.lg .lg-indice-rot{
    margin: 0 0 10px;
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--lp-suave);
}
.lp.lg .lg-indice ol{ margin: 0; padding: 0; list-style: none; }
.lp.lg .lg-indice li + li{ margin-top: 2px; }
.lp.lg .lg-indice a{
    display: flex; gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13px; line-height: 1.4;
    color: var(--lp-texto); text-decoration: none;
}
.lp.lg .lg-indice a:visited{ color: var(--lp-texto); }
.lp.lg .lg-indice a span{ flex: 0 0 22px; font-weight: 700; color: var(--lp-verde-oscuro); }
.lp.lg .lg-indice a:hover,
.lp.lg .lg-indice a.es-actual{ background: #fff; color: var(--lp-tinta); }
.lp.lg .lg-indice a.es-actual{ box-shadow: inset 3px 0 0 var(--lp-verde); font-weight: 600; }

/* ══ EL DOCUMENTO (también en papel) ═══════════════════════════════ */
.lg-doc{
    max-width: 780px;
    font-size: 15.5px; line-height: 1.75;
    color: #2c3530;
}
.lg-doc p{ margin: 0 0 12px; font-size: 15.5px; line-height: 1.75; color: #2c3530; text-align: left; }
.lg-doc b{ color: #16211a; }
.lg-doc a{ color: #16491f; text-decoration: underline; text-underline-offset: 2px; }
.lg-doc a:visited{ color: #16491f; }
.lg-doc i{ font-style: italic; }

.lg-doc .lg-doc-cab{
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px;
    margin-bottom: 22px; padding-bottom: 12px;
    border-bottom: 2px solid #16211a;
}
.lg-doc .lg-doc-cab p{ margin: 0; font-size: 12.5px; line-height: 1.5; color: #56645b; }
.lg-doc .lg-doc-marca{ font-weight: 700; letter-spacing: .02em; }

.lg-doc .lg-aviso{
    margin: 0 0 30px;
    padding: 14px 18px;
    border-left: 4px solid #236e30;
    background: #eef6ec;
    font-size: 14.5px; line-height: 1.7; color: #2c3530;
}

.lg-doc .lg-clausula{ padding-top: 8px; margin-bottom: 30px; scroll-margin-top: 90px; }
.lg-doc .lg-clausula + .lg-clausula{ border-top: 1px solid #e6ebe6; padding-top: 26px; }

.lg-doc h2{
    display: flex; gap: 10px; align-items: baseline;
    margin: 0 0 14px; padding: 0;
    font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -.3px;
    color: #16211a; text-align: left;
    background: none; border: 0;
}
.lg-doc h2 span{ flex: 0 0 auto; color: #236e30; font-variant-numeric: tabular-nums; }

.lg-doc .lg-lista{ margin: 4px 0 14px; padding-left: 26px; }
.lg-doc .lg-lista li{ margin-bottom: 6px; font-size: 15.5px; line-height: 1.7; color: #2c3530; }

.lg-doc .lg-definiciones{ margin: 6px 0 0; }
.lg-doc .lg-definiciones dt{ margin-top: 12px; font-weight: 800; color: #16211a; font-size: 15.5px; }
.lg-doc .lg-definiciones dd{ margin: 2px 0 0; padding-left: 16px; border-left: 2px solid #d3e7cf; font-size: 15px; line-height: 1.7; color: #2c3530; }

.lg-doc .lg-tabla{
    width: 100%;
    margin: 6px 0 16px;
    border-collapse: collapse;
    font-size: 14.5px;
}
.lg-doc .lg-tabla th,
.lg-doc .lg-tabla td{
    padding: 10px 12px;
    border: 1px solid #dfe6df;
    text-align: left; vertical-align: top;
    line-height: 1.55; color: #2c3530;
    background: #fff;
}
.lg-doc .lg-tabla th{ background: #f6f9f4; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #16211a; }

.lg-doc .lg-doc-pie{
    margin-top: 36px; padding-top: 14px;
    border-top: 2px solid #16211a;
}
.lg-doc .lg-doc-pie p{ margin: 0 0 4px; font-size: 12.5px; line-height: 1.5; color: #56645b; }

/* EN PAPEL: sin sombras ni fondos que se coman la tinta, y sin partir una
   cláusula por el título. */
@media print{
    .lg-doc{ max-width: none; font-size: 11pt; }
    .lg-doc p, .lg-doc .lg-lista li, .lg-doc .lg-definiciones dd{ font-size: 11pt; line-height: 1.5; }
    .lg-doc h2{ font-size: 14pt; page-break-after: avoid; break-after: avoid; }
    .lg-doc .lg-tabla{ page-break-inside: avoid; break-inside: avoid; }
    .lg-doc .lg-aviso{ background: none; }
    .lg-doc a{ color: #000; }
}

/* ══ CIERRE ════════════════════════════════════════════════════════ */
.lp.lg .lg-cierre{ padding: 0 0 60px; background: #fff; }
.lp.lg .lg-cierre-caja{
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
    padding: 24px 28px;
    border-radius: var(--lp-radio);
    background: var(--lp-verde-oscuro);
}
.lp.lg .lg-cierre-txt{ display: flex; align-items: flex-start; gap: 14px; }
.lp.lg .lg-cierre-txt > div{ flex: 1; min-width: 0; }
.lp.lg .lg-cierre-txt .lg-cab-ico{ width: 46px; height: 46px; background: rgba(255,255,255,.12); }
.lp.lg .lg-cierre-txt b{ display: block; font-size: 17px; color: #fff; }
.lp.lg .lg-cierre-txt p{ margin: 3px 0 0; font-size: 13.5px; color: #d6e8d3; }
.lp.lg .lg-cierre-botones{ display: flex; flex-wrap: wrap; gap: 10px; }

/* ══ ESTRECHO: el índice pasa arriba y deja de ser pegajoso ════════ */
@media (max-width: 980px){
    .lp.lg .lg-rejilla{ grid-template-columns: 1fr; gap: 24px; }
    .lp.lg .lg-indice{ position: static; max-height: none; }
    .lp.lg .lg-cab{ padding-top: 96px; }
}

/* ══ DOS HERENCIAS QUE NO LLEGAN ═══════════════════════════════════
   · Una regla global con el atajo `font:` fija los `span` a 12 px: el número
     de la cláusula salía diminuto al lado de su título. Se dice el tamaño.
   · El sitio quita las viñetas a las listas: las letras a), b), c) de los
     supuestos --que es por lo que se citan-- desaparecían. */
.lg-doc h2 span{ font-size: 21px; font-weight: 800; line-height: 1.3; }
.lg-doc ol.lg-lista{ list-style: lower-alpha outside; }
.lg-doc ol.lg-lista{ padding-left: 30px; }
.lg-doc ol.lg-lista > li{ display: list-item; list-style: lower-alpha outside; padding-left: 4px; }
.lg-doc ol.lg-lista li::marker{ font-weight: 700; color: #236e30; }
.lp.lg .lg-indice a span{ font-size: 13px; }
@media print{ .lg-doc h2 span{ font-size: 14pt; } }

/* ══ LO ESENCIAL (nivel 1) ═════════════════════════════════════════
   Entre la cabecera y el documento. Tarjetas planas, icono en su columna y
   todo el texto en la segunda. */
.lp.lg .lg-esencial{ padding: 28px 0 6px; background: #fff; }
.lp.lg .lg-esencial-cab{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
.lp.lg .lg-esencial-cab b{ font-size: 18px; font-weight: 800; color: var(--lp-tinta); }
.lp.lg .lg-esencial-cab small{ font-size: 13px; color: var(--lp-suave); }
.lp.lg .lg-esencial-rejilla{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.lp.lg .lg-esencial-item{
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--lp-borde);
    border-radius: 14px;
    background: var(--lp-crema);
}
.lp.lg .lg-esencial-item > div{ flex: 1; min-width: 0; }
.lp.lg .lg-esencial-ico{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--lp-verde-claro); color: var(--lp-verde);
}
.lp.lg .lg-esencial-ico iconify-icon{ font-size: 19px; width: 19px; height: 19px; }
.lp.lg .lg-esencial-item b{ display: block; margin-bottom: 3px; font-size: 14px; color: var(--lp-tinta); }
.lp.lg .lg-esencial-item p{ margin: 0; font-size: 13px; line-height: 1.55; color: var(--lp-texto); text-align: left; }
.lp.lg .lg-esencial-item p b{ display: inline; margin: 0; font-size: inherit; }
.lp.lg .lg-esencial-item p a{ color: var(--lp-verde-oscuro); font-weight: 600; }

/* ══ LAS PIEZAS DEL DOCUMENTO QUE AÑADEN LOS DEMÁS TEXTOS ══════════ */
.lg-doc h3{ margin: 18px 0 8px; padding: 0; font-size: 16.5px; font-weight: 800; color: #16211a; text-align: left; background: none; border: 0; }
.lg-doc ul.lg-lista-puntos{ margin: 4px 0 14px; padding-left: 22px; }
.lg-doc ul.lg-lista-puntos > li{ display: list-item; list-style: disc outside; margin-bottom: 6px; font-size: 15.5px; line-height: 1.7; color: #2c3530; }
.lg-doc .lg-nota{ margin: 6px 0 16px; padding: 10px 14px; border-radius: 8px; background: #f6f9f4; border: 1px solid #dfe6df; font-size: 14px; line-height: 1.65; color: #2c3530; }
.lg-doc .lg-vacio{ font-style: italic; color: #56645b; }

/* ══ LOS DEMÁS TEXTOS LEGALES ══════════════════════════════════════ */
.lp.lg .lg-relacionados{ padding: 10px 0 60px; background: #fff; }
.lp.lg .lg-relacionados-tit{ margin: 0 0 14px; font-size: 20px; font-weight: 800; color: var(--lp-tinta); text-align: left; }
.lp.lg .lg-relacionados-rejilla{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}
.lp.lg .lg-relacionados-grupo{ padding: 16px; border: 1px solid var(--lp-borde); border-radius: var(--lp-radio); background: var(--lp-crema); }
.lp.lg .lg-relacionados-grupo ul{ margin: 0; padding: 0; list-style: none; }
.lp.lg .lg-relacionados-grupo li > a,
.lp.lg .lg-relacionados-grupo li > a:visited{
    display: flex; align-items: center; gap: 9px;
    padding: 7px 8px; border-radius: 8px;
    font-size: 13.5px; color: var(--lp-texto); text-decoration: none;
}
/* `color: inherit`, EXPLÍCITO: sin él, la regla histórica de todo el sitio
   `a, a:visited, a span { color: #910c88; }` (Tjquery/css/index.css) le gana
   al color de `.lg-relacionados-grupo li > a` de aquí arriba -- lo heredado
   pierde siempre contra cualquier regla que apunte al propio `<span>`, por
   poco específica que sea. Es el mismo motivo por el que `.lg-indice a span`
   (más arriba en este fichero) ya fija su color a mano: aquí faltaba. */
.lp.lg .lg-relacionados-grupo li > a > span{ flex: 1; min-width: 0; font-size: 13.5px; color: inherit; }
.lp.lg .lg-relacionados-grupo li > a:hover{ background: #fff; color: var(--lp-tinta); text-decoration: underline; }
.lp.lg .lg-relacionados-grupo li.es-actual > a{ background: #fff; font-weight: 700; color: var(--lp-tinta); box-shadow: inset 3px 0 0 var(--lp-verde); }
.lp.lg .lg-relacionados-grupo iconify-icon{ flex: 0 0 auto; font-size: 16px; width: 16px; height: 16px; color: var(--lp-verde); }

/* ══ CAMBIOS DE ESTA VERSIÓN ═══════════════════════════════════════
   Dentro de `.lg-doc`, debajo del aviso de prevalencia: se imprime con el
   documento. Icono en su columna y todo el texto en la segunda. */
.lg-doc .lg-cambios{
    display: flex; align-items: flex-start; gap: 12px;
    margin: 0 0 30px;
    padding: 16px 18px;
    border: 1px solid #dfe6df;
    border-radius: 12px;
    background: #fff;
}
.lg-doc .lg-cambios.es-proxima{ border-color: #e7c98a; background: #fffaf0; }
.lg-doc .lg-cambios-ico{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: #eef6ec; color: #236e30;
}
.lg-doc .lg-cambios.es-proxima .lg-cambios-ico{ background: #fdf0d5; color: #8a5a00; }
.lg-doc .lg-cambios-ico iconify-icon{ font-size: 18px; width: 18px; height: 18px; }
.lg-doc .lg-cambios-txt{ flex: 1; min-width: 0; }
.lg-doc h2.lg-cambios-tit{ display: block; margin: 0 0 2px; font-size: 16px; letter-spacing: 0; }
.lg-doc .lg-cambios-txt p{ margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.lg-doc .lg-cambios-txt p.lg-cambios-meta{ font-size: 12.5px; color: #56645b; }
.lg-doc .lg-cambios-txt p.lg-cambios-aviso{ color: #6b4700; }
.lg-doc .lg-cambios-lista{ margin: 0 0 8px; padding-left: 20px; }
.lg-doc .lg-cambios-lista > li{ display: list-item; list-style: disc outside; margin-bottom: 4px; font-size: 14.5px; line-height: 1.6; color: #2c3530; }
.lg-doc .lg-cambios-txt p.lg-cambios-nota{ margin: 0; font-size: 13px; color: #56645b; }
@media print{
    .lg-doc .lg-cambios, .lg-doc .lg-cambios.es-proxima{ background: none; }
    .lg-doc .lg-cambios-txt p.lg-cambios-nota:last-child{ display: none; }
}


/**
 * ═══════════════════════════════════════════════════════════════════════════
 *  LAS PIEZAS COMUNES DE LAS PÁGINAS DE PLATAFORMA
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Cómo funciona, Precios, Para agricultores, Para compradores y Ayuda comparten
 * cabecera, pie y estas piezas. Todo lo demás --secciones, títulos, etiquetas,
 * botones, ticks, tarjetas duales y testimonios-- ya lo trae `TLanding.css`,
 * que es la hoja de la portada: estas páginas son la misma web, no otra.
 *
 * Prefijo `pg-`. Salen de la maqueta `tmp-maquetas/landing-paginas.php`, donde
 * se llamaban `mq-`.
 *
 * ── POR QUÉ UNA HOJA COMPARTIDA Y NO UNA POR PÁGINA ────────────────
 *
 * Porque son las mismas piezas: la tarjeta con icono, la tabla de tarifas, el
 * acordeón de preguntas, la tarjeta de artículo y el formulario. Cinco copias
 * son cinco sitios donde arreglar el mismo descuadre, y es exactamente lo que
 * el proyecto ya tiene apuntado como deuda en el área de cliente.
 */

/* ── REJILLAS DE TARJETAS ──────────────────────────────────────── */
.pg-rejilla{ display: grid; gap: 20px; }
.pg-rejilla--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-rejilla--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-rejilla--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px){ .pg-rejilla{ grid-template-columns: 1fr !important; } }

.pg-tarjeta{
    padding: 22px;
    background: #fff;
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
}
.pg-tarjeta h3{ margin: 12px 0 8px; font-size: 16px; color: var(--lp-tinta); }
.pg-tarjeta p{ margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--lp-texto); }
.pg-tarjeta-ico{
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--lp-verde-claro); color: var(--lp-verde);
}
.pg-tarjeta-ico iconify-icon{ font-size: 21px; }

/* ── LA TARIFA ─────────────────────────────────────────────────── */
.pg-tarifa{ width: 100%; border-collapse: collapse; background: #fff;
    border: 1px solid var(--lp-borde); border-radius: var(--lp-radio); overflow: hidden; }
.pg-tarifa th, .pg-tarifa td{ padding: 14px 16px; text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--lp-borde); }
.pg-tarifa th{ background: var(--lp-crema); color: var(--lp-tinta); font-size: 12px; letter-spacing: .3px; text-transform: uppercase; }
.pg-tarifa td b{ color: var(--lp-verde-oscuro); }
.pg-tarifa tr:last-child td{ border-bottom: 0; }

.pg-niveles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
@media (max-width: 900px){ .pg-niveles{ grid-template-columns: repeat(2, 1fr); } }
.pg-nivel{ padding: 18px; border: 1px solid var(--lp-borde); border-radius: 14px; background: #fff; text-align: center; }
.pg-nivel b{ display: block; font-size: 14px; color: var(--lp-tinta); }
.pg-nivel .pg-tope{ display: block; margin: 8px 0 2px; font-size: 25px; font-weight: 800; color: var(--lp-verde); }
.pg-nivel small{ color: var(--lp-suave); font-size: 12px; }

/* ── PREGUNTAS ─────────────────────────────────────────────────── */
.pg-faq{ max-width: 780px; margin: 0 auto; }
.pg-faq details{
    padding: 16px 18px; margin-bottom: 10px;
    background: #fff; border: 1px solid var(--lp-borde); border-radius: 12px;
}
.pg-faq summary{ cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--lp-tinta); }
.pg-faq p{ margin: 10px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--lp-texto); }

/* ── ARTÍCULOS Y AYUDA ─────────────────────────────────────────── */
.pg-articulo{ border: 1px solid var(--lp-borde); border-radius: var(--lp-radio); overflow: hidden; background: #fff; }
.pg-articulo .pg-foto{ height: 140px; background: linear-gradient(120deg, #dbeadb, #eef6ec); display: grid; place-items: center; color: var(--lp-tenue); font-size: 12px; }
.pg-articulo-txt{ padding: 16px 18px; }
.pg-articulo-txt small{ color: var(--lp-verde); font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.pg-articulo-txt h3{ margin: 7px 0 6px; font-size: 15px; color: var(--lp-tinta); }
.pg-articulo-txt p{ margin: 0; font-size: 13px; line-height: 1.55; color: var(--lp-texto); }

.pg-buscador-ayuda{
    max-width: 620px; margin: 0 auto 34px;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; background: #fff;
    border: 1px solid var(--lp-borde); border-radius: 999px;
}
.pg-buscador-ayuda input{ flex: 1; border: 0; outline: 0; font: 14px system-ui, sans-serif; }
.pg-buscador-ayuda iconify-icon{ font-size: 19px; color: var(--lp-verde); }

/* ── FORMULARIO ────────────────────────────────────────────────── */
.pg-form{ display: grid; gap: 14px; }
.pg-form-fila{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px){ .pg-form-fila{ grid-template-columns: 1fr; } }
.pg-campo label{ display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--lp-texto); }
.pg-campo input, .pg-campo textarea, .pg-campo select{
    width: 100%; box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid var(--lp-borde); border-radius: 10px;
    font: 14px system-ui, sans-serif; color: var(--lp-tinta); background: #fff;
}
.pg-campo textarea{ min-height: 130px; resize: vertical; }

/* ── PASOS EN DOS CARRILES ─────────────────────────────────────── */
.pg-carril{ position: relative; padding-left: 30px; }
.pg-carril::before{
    content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px;
    width: 2px; background: var(--lp-verde-borde);
}
.pg-hito{ position: relative; margin-bottom: 24px; }
.pg-hito::before{
    content: ''; position: absolute; left: -25px; top: 4px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--lp-verde); box-shadow: 0 0 0 4px var(--lp-verde-claro);
}
.pg-hito b{ display: block; font-size: 15px; color: var(--lp-tinta); margin-bottom: 5px; }
.pg-hito p{ margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--lp-texto); }

.pg-nota{
    margin-top: 26px; padding: 16px 18px;
    background: var(--lp-verde-claro); border: 1px solid var(--lp-verde-borde);
    border-radius: 12px;
    font-size: 13.5px; line-height: 1.6; color: var(--lp-verde-oscuro);
}
.pg-nota b{ color: var(--lp-verde-oscuro); }

/* Cabecera de página interior: como el héroe del landing pero sin foto. */
.pg-cab{
    padding: 66px 0 54px;
    background: linear-gradient(180deg, var(--lp-verde-claro), #fff);
    border-bottom: 1px solid var(--lp-borde);
    text-align: center;
}
/* EL CENTRADO SE DECLARA EN CADA HIJO, NO SOLO EN LA CAJA.
 *
 * Una hoja global del sitio pone `text-align:left` a encabezados y párrafos, y
 * heredarlo de `.pg-cab` no basta: medido, la caja salía en `center` y su `h1` y
 * su `p` en `left`. Es la misma nota que ya lleva `.lp-titulo` en la hoja de la
 * portada, y por el mismo motivo. */
.pg-cab h1{ margin: 0 0 14px; font-size: 40px; line-height: 1.14; color: var(--lp-tinta); text-align: center; }
.pg-cab h1 em{ color: var(--lp-verde); font-style: normal; }
.pg-cab p{ max-width: 640px; margin: 0 auto; font-size: 16px; line-height: 1.6; color: var(--lp-texto); text-align: center; }

/* ── LA LISTA DE VENTAJAS, EN COLUMNAS ────────────────────────────────
 *
 * Cada línea son tres cosas: el tick, el titular en negrita y la explicación.
 * Como texto corrido las tres fluyen juntas y cada fila rompe por donde le toca:
 * «Precio real de mercado.» se partía en dos líneas mientras la de al lado
 * cabía en una, y las explicaciones arrancaban cada una en una vertical
 * distinta. Se leía como una tabla mal montada.
 *
 * ── DOS COLUMNAS Y NO TRES, Y ESTÁ MEDIDO ────────────────────────
 *
 * La tentación es poner el titular en una columna y la explicación en otra. No
 * cabe: esta lista vive en la mitad izquierda de `.lp-dual-rejilla`, que en una
 * ventana de 1920px mide **376px** -- probado, con tres columnas quedaban 224px
 * para el titular y 106px para la explicación, o sea seis palabras por línea.
 *
 * Así que las columnas son las del proyecto: **el tick en la suya y TODO el
 * texto en la segunda**, con el titular encima de su explicación. Las dos
 * líneas arrancan en la misma vertical y las cinco filas son iguales, que es lo
 * que se venía a arreglar.
 */
.lp .pg-ticks-cols li{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 2px 10px;

    margin-bottom: 15px;
}

/* El icono ocupa la primera columna y las DOS filas: sin esto se lleva una fila
   para él solo y el titular baja a la segunda. */
.lp .pg-ticks-cols li iconify-icon{ grid-row: 1 / span 2; margin-top: 3px; }

.lp .pg-ticks-cols li b{ grid-column: 2; color: var(--lp-tinta); line-height: 1.4; }
.lp .pg-ticks-cols li span{ grid-column: 2; color: var(--lp-suave); line-height: 1.5; }

/*
 * Y CUANDO SÍ HAY SITIO, las dos en la misma línea: el titular en su columna y
 * la explicación al lado. Se activa por el ANCHO DE LA LISTA --no por el de la
 * ventana-- porque lo que decide aquí es el contenedor, y en esta página el
 * contenedor mide lo mismo con 1280 que con 1920.
 */
@supports (container-type: inline-size){

    .lp .pg-ticks-cols{ container-type: inline-size; }

    @container (min-width: 560px){
        .lp .pg-ticks-cols li{ grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr); }
        .lp .pg-ticks-cols li iconify-icon{ grid-row: auto; }
        .lp .pg-ticks-cols li b{ grid-column: 2; }
        .lp .pg-ticks-cols li span{ grid-column: 3; }
    }
}

/* ── LA MEDALLA DE CADA NIVEL ─────────────────────────────────────────
 *
 * Las piezas de verdad: `/assets/sellers/{code}.png`, con su cinta y su
 * relieve. No se dibuja ningún icono en su lugar --serían dos sellos distintos
 * contando lo mismo-- y por eso aquí no hay ni discos ni colores de fondo: el
 * arte ya los trae.
 *
 * SE MIDE POR EL ALTO. Las cuatro medallas son más altas que anchas y cada una
 * mide un poco distinto (279-297px de ancho por 360 de alto), así que fijar el
 * ancho las dejaría a alturas diferentes en la misma fila. */
.lp .pg-medalla{
    display: block;
    margin: 0 auto 12px;
}

.lp .pg-medalla img{
    height: 78px;
    width: auto;
    margin: 0 auto;
    display: block;
}


/* ═══════════════════════════════════════════════════════════════════════════
 *  LA FRANJA DE GARANTÍAS   ·   una sola, encima del pie de todas las páginas
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ── POR QUÉ SALE DE `TLanding.css` ─────────────────────────────────
 *
 * Colgaba de `.lp`, así que solo existía en la portada: las cuatro promesas
 * que hacen que alguien se atreva a pagar --dinero protegido, comisiones a la
 * vista, soporte y logística-- no se leían en la ficha ni en la cesta, que es
 * donde se decide. Es el mismo camino que hizo el pie hacia `TPie.css`.
 *
 * Aquí está la única, autocontenida: declara sus propias variables y no depende
 * de que alguien haya cargado la hoja del landing. La pinta `base.php`.
 *
 * ── Y CON `@media`, NO CON `@container` ────────────────────────────
 *
 * Igual que en el pie: la hoja del landing usa consultas de contenedor porque
 * su raíz declara un `container-type`. Fuera de ahí no hay contenedor que
 * consultar y esas reglas NO SE APLICAN NUNCA, sin error.
 */

.ac-garantias{
    /* ── AIRE ENCIMA, EN TODAS LAS PÁGINAS ───────────────────────────
       La franja se pegaba al contenido: el papel blanco de una ficha de la
       cuenta --o el último bloque de cualquier página-- terminaba y sin un
       píxel de separación empezaba la franja, que se leía como parte del mismo
       bloque. Va en la franja y no en cada página porque la pinta `base.php`
       debajo de TODO: así el hueco es el mismo en la ficha, en la cesta y en la
       portada. Ajustarlo es tocar esta sola propiedad. */
    margin-top: 40px;

    --acg-verde:       #2f7d3f;
    --acg-verde-claro: #eaf4ec;
    --acg-tinta:       #16241a;
    --acg-suave:       #6b7a70;
    --acg-borde:       #e6ebe6;
}

.ac-garantias .lp-garantias{
    padding: 26px 0;
    background: #fff;
    border-top: 1px solid var(--acg-borde);
}

/* La única medida de página de la franja, la MISMA que la del pie: van pegadas
   una encima de otra y con dos carriles distintos el corte se ve. Se declara
   aquí y no se hereda del landing: fuera de él, `.lp-ancho` no existe. */
.ac-garantias .lp-ancho{
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

.ac-garantias .lp-garantias-rejilla{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

/* LAS DOS COLUMNAS DE SIEMPRE: el icono en la suya y TODO el texto en la otra,
   para que el titular y su línea de debajo arranquen en la misma vertical. */
.ac-garantias .lp-garantias-rejilla > div{
    display: flex;
    align-items: center;
    gap: 11px;
}

.ac-garantias .lp-garantias-rejilla span{
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--acg-verde-claro);
    color: var(--acg-verde);
    font-size: 17px;
}

/* El tamaño se le dice AL ICONO, no a su caja: `iconify-icon` no hereda el
   `font-size` del padre y todos saldrían al defecto de 20px. */
.ac-garantias .lp-garantias-rejilla span iconify-icon{ font-size: 17px; }

.ac-garantias .lp-garantias-rejilla > div > div{
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
}

/* El color se dice aquí porque la regla global `b,strong{color:#000}` se lo
   lleva, y el color no se hereda cuando alguien lo declara por debajo. */
.ac-garantias .lp-garantias-rejilla b{ font-size: 12.5px; color: var(--acg-tinta); }
.ac-garantias .lp-garantias-rejilla small{ font-size: 11.5px; color: var(--acg-suave); }

@media (max-width: 620px){
    .ac-garantias .lp-garantias{ padding: 20px 0; }
    .ac-garantias .lp-garantias-rejilla{ gap: 14px; }
}



/**
 * ═══════════════════════════════════════════════════════════════════════════
 *  LOS SELLOS DEL AGRICULTOR — lo que solo existe en esta página
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Los tokens, las secciones, los títulos, las etiquetas, los botones y los
 * ticks salen de `TLanding.css`; las tarjetas y la rejilla dual, de ahí
 * también. Aquí solo lo propio, con prefijo `se-` y colgando de `.lp` para
 * ganarle a la hoja global del sitio sin `!important`.
 */

/* ══ EL ANCHO ══════════════════════════════════════════════════════
   1320, el mismo que «Cómo funciona», «Para agricultores» y «Para
   compradores»: las cuatro cuelgan de la misma barra y se visitan seguidas.
   Con 1180 aquí, el titular saltaría al cambiar de página. */
.TSellos .lp .lp-ancho{ max-width: 1320px; }

/* Los títulos, sin la sangría que les mete la hoja global con su
   `h1,h2{ padding:10px }`: esos 10px meten cada titular por dentro de su
   propio texto y descuadran todo lo que va debajo. */
.TSellos .lp h1,
.TSellos .lp h2,
.TSellos .lp h3{ padding-left: 0; padding-right: 0; }

/* ══ PORTADA ═══════════════════════════════════════════════════════
   La misma altura que sus tres hermanas (`--lp-portada-alto`) y la foto de la
   portada, que es la que sale en el resto de páginas de plataforma. */
.TSellos .lp .se-heroe{
    min-height: var(--lp-portada-alto, 500px);
    padding: 62px 0 66px;

    background-image:
        linear-gradient(100deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.90) 32%,
            rgba(255,255,255,.42) 56%,
            rgba(255,255,255,0)   76%),
        url('/assets/landing/hero.jpg');
    background-size: auto, cover;
    background-position: center, center right;
}

.TSellos .se-heroe-ticks{ margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 26px; }

/* ══ LAS CUATRO VENTAJAS ═══════════════════════════════════════════ */

.TSellos .se-ventajas{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 30px;
    margin-top: 26px;
}

/* Icono en su columna y TODO el texto en la segunda, que es la regla de
   alineación del proyecto: así el titular y su explicación arrancan en la
   misma vertical sin compensar nada a ojo. */
.TSellos .se-ventaja{ display: flex; align-items: flex-start; gap: 13px; }
.TSellos .se-ventaja > div{ flex: 1; min-width: 0; }

.TSellos .se-ventaja-ico{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--lp-verde-claro);
    color: var(--lp-verde);
    font-size: 20px;
}
.TSellos .se-ventaja b{ display: block; font-size: 14.5px; color: var(--lp-tinta); margin-bottom: 4px; }
.TSellos .se-ventaja small{ display: block; font-size: 12.5px; line-height: 1.6; color: var(--lp-texto); }
.TSellos .se-ventaja small b{ display: inline; font-size: inherit; color: var(--lp-tinta); }

/* ══ LA ESCALERA ═══════════════════════════════════════════════════ */

.TSellos .se-intro{
    max-width: 620px;
    margin: 6px 0 26px;
    font-size: 13.5px; line-height: 1.65; color: var(--lp-texto);
}

.TSellos .se-niveles{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.TSellos .se-nivel{
    display: flex;
    flex-direction: column;
    padding: 18px;
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    background: #fff;
}

/* El borde del metal, que es lo que hace la escalera visible de un vistazo. */
.TSellos .se-nivel--bronce  { border-top: 3px solid #c07a3e; }
.TSellos .se-nivel--plata   { border-top: 3px solid #9aa7b0; }
.TSellos .se-nivel--oro     { border-top: 3px solid #d9a520; }
.TSellos .se-nivel--diamante{ border-top: 3px solid #4bb3d4; }

.TSellos .se-nivel header{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.TSellos .se-nivel header > div{ flex: 1; min-width: 0; }

/* `aspect-ratio` y no `height: 100%`: el porcentaje no se resuelve contra una
   caja sin altura definida y la escarapela sale deformada. Es la misma trampa
   que dejó los avatares del chat en un óvalo. */
.TSellos .se-nivel header img{
    flex: 0 0 auto;
    display: block;
    width: 52px; aspect-ratio: 1; height: auto;
    object-fit: contain;
}
.TSellos .se-nivel header b{ display: block; font-size: 15px; color: var(--lp-tinta); }
.TSellos .se-nivel header small{ display: block; font-size: 11.5px; line-height: 1.45; color: var(--lp-suave); }

.TSellos .se-nivel-rot{
    margin: 14px 0 8px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--lp-suave);
}
.TSellos .se-nivel-rot:first-of-type{ margin-top: 0; }

.TSellos .se-nivel .lp-ticks li{ font-size: 12.5px; line-height: 1.5; }

.TSellos .se-pide{ margin: 0; padding: 0; list-style: none; }
.TSellos .se-pide li{
    padding: 6px 0;
    border-top: 1px dashed var(--lp-borde);
    font-size: 12px; line-height: 1.45; color: var(--lp-texto);
}
.TSellos .se-pide li:first-child{ border-top: 0; padding-top: 0; }

/* ══ LO QUE PAGAS ══════════════════════════════════════════════════ */

/* El tope, dentro de la tarjeta del nivel: una línea con su cifra a la derecha,
   separada del resto por su propio fondo. Es el dato por el que se sube de
   nivel, así que no puede leerse como una viñeta más de la lista. */
.TSellos .se-tope{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--lp-crema);
}
.TSellos .se-tope span{ font-size: 11px; color: var(--lp-suave); }
.TSellos .se-tope b{
    font-size: 15px; color: var(--lp-tinta);
    font-variant-numeric: tabular-nums;
}

/* LAS TRES PIEZAS DE LA TARIFA, UNA DEBAJO DE OTRA (13/10/2026): las dos
   tablas del sitio (`TDataTable`) y la caja de lo que cuesta cobrar. Lado a
   lado, la de niveles --cinco columnas-- pasaba a tarjetas en un escritorio. */
.TSellos .se-tarifa{
    display: flex; flex-direction: column;
    gap: 22px;
    margin-top: 20px;
}
.TSellos .se-bloque{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.TSellos .se-bloque > .se-nivel-rot{ margin: 0; }

/* El aviso del lanzamiento: el icono en su columna y el texto en la segunda. */
.TSellos .se-aviso{
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 16px; padding: 12px 14px;
    border-radius: 10px; background: var(--lp-verde-claro);
    border: 1px solid var(--lp-verde-borde);
}
.TSellos .se-aviso > iconify-icon{ flex: 0 0 auto; font-size: 18px; margin-top: 1px; color: var(--lp-verde); }
.TSellos .se-aviso > div{ flex: 1; min-width: 0; }
.TSellos .se-aviso b{ display: block; font-size: 13px; color: var(--lp-tinta); }
.TSellos .se-aviso small{ display: block; font-size: 12px; line-height: 1.5; color: var(--lp-texto); }

/* El descuento, en verde: es lo que se gana, y en una tabla de costes conviene
   que la única cifra a favor se distinga de las que se pagan. */
.TSellos .se-niveles-tabla .se-desc .tdt-valor{ color: var(--lp-verde); font-weight: 700; }
/* La medalla, entera y sin recortar (la miniatura de la tabla es cuadrada). */
.TSellos .se-niveles-tabla .tdt-tabla .tdt-dato > img.tdt-foto{ object-fit: contain; border-radius: 0; }

.TSellos .se-tarifa-caja{
    padding: 20px 22px;
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    background: #fff;
}
.TSellos .se-tarifa-caja .se-nivel-rot{ margin-top: 0; }

.TSellos .se-tramos{ margin: 0; padding: 0; list-style: none; }
.TSellos .se-tramos li{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--lp-borde);
}
.TSellos .se-tramos li:last-child{ border-bottom: 0; }

.TSellos .se-tramos span{ font-size: 12.5px; color: var(--lp-texto); }

/* LA CIFRA, ALINEADA A LA DERECHA -- Y NO SE ALINEABA SOLA.
   El `<b>` es un elemento de flex y su ancho lo marcaba el `<em>` de debajo,
   que es más largo («acumulado 1.125 €»); la cifra, al ser texto en línea, se
   quedaba pegada al principio de esa caja. Resultado medido: los cuatro
   importes terminaban en 674, 661, 665 y 716 -- cuatro verticales distintas en
   una columna de números.

   `tabular-nums` además iguala el ancho de los dígitos: sin eso, un 1 ocupa
   menos que un 7 y «1.000 €» y «750 €» siguen sin cuadrar aunque el borde
   derecho coincida. */
.TSellos .se-tramos b{
    font-size: 15px;
    color: var(--lp-tinta);
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.TSellos .se-tramos b em{
    display: block;
    font-size: 11px; font-style: normal; font-weight: 400;
    color: var(--lp-verde);
    text-align: right;
}

/* El «acumulado» y el «desde», en pequeño y debajo de su dato: son la letra
   que hace legible la cifra de al lado, no un dato más de la lista. */
.TSellos .se-tramos span em,
.TSellos .se-tramos b em{
    display: block;
    font-size: 10.5px; font-style: normal; font-weight: 400;
    color: var(--lp-suave);
}
.TSellos .se-tramos b em{ text-align: right; }

/* ── EL EJEMPLO ─────────────────────────────────────────────────── */

.TSellos .se-ejemplo{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 18px;
    padding: 18px 20px;
    border: 1px dashed var(--lp-verde-borde);
    border-radius: var(--lp-radio);
    background: var(--lp-crema);
}
.TSellos .se-ejemplo > div{ flex: 1; min-width: 0; }

.TSellos .se-ejemplo-ico{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 11px;
    background: #fff;
    color: var(--lp-verde);
    font-size: 18px;
}
.TSellos .se-ejemplo b{ display: block; font-size: 14px; color: var(--lp-tinta); margin-bottom: 3px; }
.TSellos .se-ejemplo p{ margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--lp-texto); }

.TSellos .se-tarifa-pie{
    display: block;
    margin-top: 12px;
    font-size: 11.5px; line-height: 1.55; color: var(--lp-suave);
}

/* ══ CÓMO SE CALCULA ═══════════════════════════════════════════════ */

/* `.lp-dual-rejilla` es de TRES pistas --lleva texto a los dos lados en la
   portada-- y aquí solo hay dos bloques: sin esto, el segundo caía en la pista
   estrecha del medio y dejaba un tercio de la fila vacío. */
.TSellos .se-calculo{ grid-template-columns: 1fr 1fr; align-items: start; }

.TSellos .se-nota{
    margin: 14px 0 0;
    padding: 12px 14px;
    border-left: 3px solid var(--lp-verde-borde);
    background: var(--lp-crema);
    border-radius: 0 10px 10px 0;
    font-size: 12.5px; line-height: 1.6; color: var(--lp-texto);
}
.TSellos .se-nota--suelta{ margin-top: 18px; }

.TSellos .se-pesos{ margin: 0; padding: 0; list-style: none; }
.TSellos .se-pesos li{
    display: grid;
    grid-template-columns: 1fr 120px 42px;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--lp-borde);
}
.TSellos .se-pesos li:last-child{ border-bottom: 0; }
.TSellos .se-peso-txt{ font-size: 12.5px; color: var(--lp-texto); }

.TSellos .se-peso-barra{
    height: 7px;
    border-radius: 999px;
    background: var(--lp-verde-claro);
    overflow: hidden;
}
.TSellos .se-peso-barra i{ display: block; height: 100%; background: var(--lp-verde); }
.TSellos .se-pesos b{
    font-size: 12.5px; color: var(--lp-tinta);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ══ LA TABLA DE UMBRALES ══════════════════════════════════════════
   La tabla del sitio (`TDataTable`): sin `min-width` ni caja con scroll; en
   el móvil, una tarjeta por criterio. */

/* ══ LOS OTROS TRES ════════════════════════════════════════════════ */

.TSellos .se-otros{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.TSellos .se-otro{
    padding: 20px 18px;
    border: 1px solid var(--lp-borde);
    border-radius: var(--lp-radio);
    background: #fff;
    text-align: center;
}
.TSellos .se-otro img{
    display: block;
    width: 66px; aspect-ratio: 1; height: auto;
    margin: 0 auto 12px;
    object-fit: contain;
}
.TSellos .se-otro b{ display: block; font-size: 14.5px; color: var(--lp-tinta); }
.TSellos .se-otro-que{ margin: 4px 0 10px; font-size: 12.5px; color: var(--lp-verde); font-weight: 600; }
.TSellos .se-otro-como{ margin: 0 0 12px; font-size: 12px; line-height: 1.6; color: var(--lp-texto); }
.TSellos .se-otro small{
    display: block;
    font-size: 11.5px; line-height: 1.5; color: var(--lp-suave);
}

/* ══ LO QUE NO SE COMPRA ═══════════════════════════════════════════ */

.TSellos .se-honesto{
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 26px 28px;
    border: 1px solid var(--lp-verde-borde);
    border-radius: var(--lp-radio);
    background: #fff;
}
.TSellos .se-honesto > div{ flex: 1; min-width: 0; }

.TSellos .se-honesto-ico{
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--lp-verde-claro);
    color: var(--lp-verde);
    font-size: 22px;
}
.TSellos .se-honesto h2{ margin: 0 0 10px; }
.TSellos .se-honesto p{ margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: var(--lp-texto); }
.TSellos .se-honesto-botones{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ══ CIERRE ════════════════════════════════════════════════════════ */

.TSellos .se-cierre{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border-radius: var(--lp-radio);
    background: var(--lp-pie);
}
.TSellos .se-cierre h2{ margin: 0 0 4px; color: #fff; font-size: 21px; }
.TSellos .se-cierre p{ margin: 0; font-size: 13px; color: rgba(255,255,255,.82); }

/* El texto del botón, declarado también para visitado: la hoja global pinta
   `a:visited` de magenta y este enlace lleva a una página que se visita. */
.TSellos .se-cierre .lp-btn-verde{ background: #fff; color: var(--lp-pie); }
.TSellos .se-cierre .lp-btn-verde:visited{ color: var(--lp-pie); }
.TSellos .se-cierre .lp-btn-verde:hover{ background: #f2f6ef; }

/* ══ PANTALLA ESTRECHA ═════════════════════════════════════════════ */

@container (max-width: 1080px){
    .TSellos .se-niveles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .TSellos .se-otros{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (max-width: 860px){
    .TSellos .se-ventajas{ grid-template-columns: minmax(0, 1fr); }
    .TSellos .se-calculo{ grid-template-columns: minmax(0, 1fr); }
    .TSellos .se-otros{ grid-template-columns: minmax(0, 1fr); }
    .TSellos .se-honesto{ flex-direction: column; }
    .TSellos .se-cierre{ flex-direction: column; align-items: flex-start; }
}

@container (max-width: 560px){
    .TSellos .se-niveles{ grid-template-columns: minmax(0, 1fr); }
    .TSellos .se-pesos li{ grid-template-columns: 1fr 60px 42px; }
}


.TSellos .se-tarifa-pie b{ color: var(--lp-tinta); font-weight: 700; }





/* ══════════════════════════════════════════════════════════════════════
   TContentReportForm — «Denunciar contenido»

   Esta hoja VIAJA CON TODA PÁGINA (pageComponents), y por eso el botón se
   define aquí: lo ponen la ficha de producto, el perfil del vendedor y cada
   valoración, y así los tres se ven igual sin que ninguno lo redefina.

   ── DISCRETO, PERO ACCESIBLE ─────────────────────────────────────────
   Es una opción que casi nadie usa y que no puede competir con «Añadir a la
   cesta»: texto pequeño, sin fondo ni borde. Pero el gris cumple AA
   (#556259 sobre blanco, 6,3:1) y el foco se ve.

   ── LA CLASE DOBLADA ─────────────────────────────────────────────────
   `.TComponentES6 button` impone display:flex y 25px de alto a todo botón
   dentro de un componente, y la hoja de la ficha arrastra reglas globales
   sobre `button`: con `button.crf-boton.crf-boton` se gana sin depender del
   orden de carga.

   Candidato a la hoja común del área pública cuando se extraiga.
   ══════════════════════════════════════════════════════════════════════ */

button.crf-boton.crf-boton{
    display: inline-flex; align-items: center; gap: 5px;
    height: auto; min-height: 0; width: auto;
    margin: 0; padding: 4px 2px;
    background: none; border: 0; border-radius: 4px; box-shadow: none;
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3;
    color: #556259; cursor: pointer;
    text-decoration: none;
}
button.crf-boton.crf-boton:hover{ color: #9b1c14; text-decoration: underline; }
button.crf-boton.crf-boton:focus-visible{ outline: 2px solid #04713a; outline-offset: 2px; }
button.crf-boton.crf-boton iconify-icon{ font-size: 13px; flex: 0 0 auto; }

/* La fila que lo coloca al final de un bloque, alineado a la derecha. */
.crf-fila{ display: flex; justify-content: flex-end; margin-top: 10px; }

/* La variante de la página /denunciar-contenido: aquí SÍ es la acción principal. */
button.crf-boton.crf-boton--principal{
    padding: 10px 18px; border-radius: 8px;
    background: #04713a; color: #fff; font-size: 14px;
}
button.crf-boton.crf-boton--principal:hover{ background: #005c2d; color: #fff; text-decoration: none; }
button.crf-boton.crf-boton--principal iconify-icon{ font-size: 16px; }

/* ── LA PÁGINA ───────────────────────────────────────────────────────── */

.crf [hidden]{ display: none !important; }

.crf .crf-pagina{
    max-width: 880px; margin: 34px auto; padding: 0 16px;
    color: #16211a; font-size: 14px;
}

.crf .crf-cab{ display: flex; gap: 14px; align-items: flex-start; margin-bottom: 26px; }
.crf .crf-cab-ico{
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #eef6ee; color: #04713a;
}
.crf .crf-cab-ico iconify-icon{ font-size: 24px; }
.crf .crf-cab-txt{ flex: 1; min-width: 0; }
.crf .crf-cab-txt h1{ margin: 0 0 6px; font-size: 24px; line-height: 1.25; }
.crf .crf-cab-txt p{ margin: 0; color: #4a564e; line-height: 1.5; font-size: 14px; }

.crf .crf-pasos{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.crf .crf-paso{
    display: flex; gap: 10px; align-items: flex-start;
    padding: 14px; border: 1px solid #e3e9e4; border-radius: 12px; background: #fff;
}
.crf .crf-paso-ico{ flex: 0 0 auto; color: #04713a; }
.crf .crf-paso-ico iconify-icon{ font-size: 20px; }
.crf .crf-paso > div{ flex: 1; min-width: 0; }
.crf .crf-paso b{ display: block; margin-bottom: 4px; font-size: 14px; }
.crf .crf-paso small{ display: block; color: #4a564e; font-size: 13px; line-height: 1.45; }

.crf .crf-accion{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.crf .crf-accion small{ color: #4a564e; font-size: 12px; }
.crf .crf-accion a{ color: #04713a; }

/* ── EL FORMULARIO ──────────────────────────────────────────────────────
   `rows` no pinta nada: una regla global le fija 22px a todo textarea y la de
   los controles un min-height de 60px. La altura se pide por clase. */
.crf-explicacion textarea,
textarea.crf-explicacion{ min-height: 120px !important; height: 120px !important; }

p.crf-nota{
    margin: 4px 0 0; padding: 9px 11px; border-radius: 8px;
    background: #f3f6f4; color: #3f4a43; font-size: 12.5px; line-height: 1.45;
}

/* ── EL ACUSE ───────────────────────────────────────────────────────── */

.crf-acuse{ max-width: 520px; padding: 4px 2px; color: #16211a; font-size: 14px; }
.crf-acuse .crf-acuse-fila{ display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.crf-acuse .crf-acuse-ico{ flex: 0 0 auto; color: #04713a; }
.crf-acuse .crf-acuse-ico iconify-icon{ font-size: 26px; }
.crf-acuse .crf-acuse-txt{ flex: 1; min-width: 0; }
.crf-acuse .crf-acuse-txt b{ display: block; font-size: 16px; margin-bottom: 3px; }
.crf-acuse .crf-acuse-txt small{ display: block; font-size: 13px; color: #4a564e; }
.crf-acuse p{ margin: 0 0 10px; line-height: 1.5; font-size: 14px; }
.crf-acuse .crf-acuse-pie{ display: flex; justify-content: flex-end; margin-top: 14px; }



/* ═══════════════════════════════════════════════════════════════════════════
 *  RECUPERAR LA CONTRASEÑA — la ficha dentro de la ventana
 *
 *  Copia la ficha de la pantalla (`TRegisterQuick`, `.rqk-solo-form`): el
 *  logotipo a 44 px, el título de 26 px, el campo de 11 px de radio con el
 *  verde de foco y el botón verde a todo lo ancho. CANDIDATO A LA HOJA COMÚN
 *  del área pública, junto con aquella: hoy son dos copias de los mismos
 *  valores (tokens `--rq-*` allí, `--fgp-*` aquí).
 * ═══════════════════════════════════════════════════════════════════════════ */

.fgp{
    --fgp-verde:        #2d6a2f;
    --fgp-verde-vivo:   #3f8f43;
    --fgp-verde-oscuro: #14532d;
    --fgp-verde-borde:  #dbe8d6;
    --fgp-verde-caja:   #f5faf3;
    --fgp-texto: #14261a;
    --fgp-suave: #5b6b60;
    --fgp-tenue: #93a399;

    padding: 18px 28px 26px;
    color: var(--fgp-texto);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

.fgp .fgp-marca{ display: block; height: 44px; width: auto; margin: 0 0 22px; }

.fgp .fgp-titulo{
    margin: 0 0 5px;
    font-size: 26px; font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.2;
    color: #07090d;
}

.fgp .fgp-sub{ margin: 0 0 14px; font-size: 13px; color: var(--fgp-suave); }

/* `!important` COMO EN `.rqk-campo`: una regla global del sitio pone los
   `label` en fila con `!important`, y sin esto el rótulo y el campo salían
   uno al lado del otro y el campo a media anchura (medido: 225 de 400 px). */
.fgp .fgp-campo{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px;
    margin: 0 0 14px;
}

.fgp .fgp-rotulo{ align-self: stretch; font-size: 12px; font-weight: 600; }

.fgp .fgp-con-ico{ position: relative; display: block; width: 100%; }
.fgp .fgp-con-ico > iconify-icon{
    position: absolute; left: 13px; top: 50%;
    transform: translateY(-50%);
    font-size: 15px; color: var(--fgp-tenue);
    pointer-events: none;
}

.fgp .fgp-con-ico input{
    width: 100%;
    box-sizing: border-box;
    height: auto;
    padding: 12px 14px 12px 38px;
    border: 1px solid #dbe4dd;
    border-radius: 11px;
    background: #fff;
    font-size: 13px; font-family: inherit;
    color: var(--fgp-texto);
}
.fgp .fgp-con-ico input::placeholder{ color: var(--fgp-tenue); }
.fgp .fgp-con-ico input:focus{
    outline: none;
    border-color: var(--fgp-verde-vivo);
    box-shadow: 0 0 0 3px rgba(63,143,67,.12);
}

.fgp .fgp-error{ display: none; font-size: 11px; color: #b91c1c; font-style: normal; }
.fgp .fgp-campo.mal input{ border-color: #f87171; background: #fef2f2; }
.fgp .fgp-campo.mal .fgp-error{ display: block; }

/* EL BOTÓN, EL DE LA FICHA (`.rqk-btn-crear`). `height:auto` porque la regla
   global `.TComponentES6 button{height:25px}` lo aplastaría. */
.fgp .fgp-btn{
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%;
    height: auto;
    padding: 13px;
    border: 0;
    border-radius: 11px;
    background: var(--fgp-verde);
    color: #fff;
    font-size: 14.5px; font-weight: 700; font-family: inherit;
    cursor: pointer;
}
.fgp .fgp-btn:hover{ background: var(--fgp-verde-oscuro); }
.fgp .fgp-btn:focus-visible{ outline: 3px solid rgba(63,143,67,.35); outline-offset: 2px; }
.fgp .fgp-btn:disabled{ opacity: .7; cursor: default; }
.fgp .fgp-btn iconify-icon{ font-size: 17px; }

/* EL AVISO: la misma caja verde que el de la pantalla (`.rqk-olv-hecho`). */
.fgp .fgp-hecho{
    display: none;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid var(--fgp-verde-borde);
    background: var(--fgp-verde-caja);
    color: #2f5136;
    font-size: 12.5px; line-height: 1.5;
}
.fgp .fgp-hecho.on{ display: flex; }
.fgp .fgp-hecho > iconify-icon{ flex: 0 0 auto; font-size: 18px; color: var(--fgp-verde-vivo); }
.fgp .fgp-hecho > div{ flex: 1; min-width: 0; }

.fgp .fgp-ya{ margin: 14px 0 0; text-align: center; font-size: 12.5px; }
.fgp .fgp-ya a{ color: var(--fgp-verde); font-weight: 700; text-decoration: underline; }

/* LA VENTANA, CON LAS ESQUINAS DE LA TARJETA de la pantalla (`--rq-radio`,
   30 px; algo menos aquí porque la ventana es más pequeña). Va por la
   `hostClass` que pone `open()`: el overlay vive fuera del árbol de `.fgp`. */
.TOverlayWin.fgp-ventana{ border-radius: 24px; overflow: hidden; }

@media (max-width: 600px){
    .fgp{ padding: 14px 18px 22px; }
    .fgp .fgp-marca{ height: 32px; }
    .fgp .fgp-titulo{ font-size: 22px; }
}