/* ═══════════════════════════════════════════════════════════════════════════
 *  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; }
}



.how-page{--how-green:#006b2a;--how-deep:#073c20;--how-light:#eff8ef;--how-orange:#dc7b00;--how-ink:#11201b;--how-muted:#4f5e56;background:#fff;color:var(--how-ink);font:15px/1.45 Georgia,'Times New Roman',serif;min-height:100vh}.how-page *{box-sizing:border-box}.how-wrap{width:min(1340px,calc(100% - 64px));margin:auto}.how-nav{height:57px;padding:0 max(32px,calc((100vw - 1340px)/2));display:flex;align-items:center;gap:34px;background:#fff;box-shadow:0 1px 7px #102a1b1f;position:sticky;top:0;z-index:20;font-family:Arial,sans-serif}.how-brand img{display:block;width:150px;height:auto}.how-links{display:flex;align-items:center;justify-content:center;gap:40px;flex:1}.how-links a{color:#101510;font-size:13px;font-weight:700;text-decoration:none}.how-links a:hover{color:var(--how-green)}.how-account,.how-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;font:700 13px Arial,sans-serif;text-decoration:none;white-space:nowrap}.how-account{background:var(--how-green);color:#fff;padding:10px 16px}.how-menu-button{display:none;border:0;background:transparent;font-size:25px;color:var(--how-green)}
.how-hero{min-height:293px;background:linear-gradient(90deg,#ffffffe8 0%,#ffffffba 36%,#ffffff08 66%),url('/assets/how-it-works/hero-farmer.png') center/cover no-repeat;position:relative;display:flex;align-items:center}.how-hero-content{padding:30px 0 27px}.how-hero h1{margin:0;color:#073f20;font:700 42px/1.11 Arial,sans-serif;letter-spacing:-1.8px}.how-hero h1 em{color:#72a675;font-style:normal}.how-hero p{max-width:410px;margin:17px 0;font:16px/1.45 Arial,sans-serif}.how-actions{display:flex;gap:14px}.how-button{padding:12px 25px}.how-button--green{background:var(--how-green);color:#fff}.how-button--green:hover,.how-account:hover{background:#004a1f}.how-button--outline{border:1px solid var(--how-green);color:#075327;background:#fff9}.how-button--orange{background:var(--how-orange);color:#fff}.how-hero-badge,.how-circle{border:3px solid #fff;border-radius:50%;background:#ffffffed;box-shadow:0 2px 10px #0a442633;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:Arial,sans-serif}.how-hero-badge{position:absolute;right:max(5%,calc((100vw - 1340px)/2));bottom:16px;width:122px;height:122px;color:var(--how-green);font-size:10px}.how-hero-badge iconify-icon{font-size:26px;margin-bottom:6px}.how-hero-badge b,.how-circle b{font-size:10px}.how-hero-badge span,.how-circle span{font-size:9px;line-height:1.35}
.how-steps{padding:20px 0 27px;background:linear-gradient(130deg,#f5fcf8,#fffaf2)}.how-section-title{text-align:center;font-family:Arial,sans-serif}.how-section-title h2{margin:0;font-size:27px;letter-spacing:-.8px}.how-section-title p{margin:4px 0 20px;font-size:13px}.how-steps-list{margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;gap:42px}.how-steps-list li{display:flex;align-items:flex-start;gap:17px;position:relative;font-family:Arial,sans-serif}.how-steps-list li:not(:last-child):after{content:'›';position:absolute;right:-27px;top:13px;color:#adcaaa;font:38px/1 Arial}.how-step-icon{width:56px;height:56px;flex:0 0 56px;display:grid;place-items:center;border-radius:50%;background:#eaf5eb;color:var(--how-green);font-size:27px}.how-steps-list b{font-size:13px}.how-steps-list p{margin:7px 0 0;font-size:12px;line-height:1.4}
.how-audiences{padding:25px 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.how-audience{height:248px;position:relative;overflow:hidden;border:1px solid #e7ebe8;border-radius:10px;background-position:center;background-size:cover;font-family:Arial,sans-serif}.how-audience:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fffffff2 42%,#ffffff08 75%)}.how-audience--farmer{background-image:url('/assets/how-it-works/farmer-card.png')}.how-audience--buyer{background-image:url('/assets/how-it-works/buyer-card.png')}.how-audience-copy{position:relative;z-index:1;width:58%;padding:17px 27px}.how-audience h2{margin:0;color:#074526;font-size:22px}.how-audience--buyer h2{color:var(--how-orange)}.how-kicker{margin:3px 0 14px;font-size:12px}.how-kicker em{color:var(--how-orange);font-style:normal}.how-audience ul{margin:0 0 14px;padding:0;list-style:none;font-size:11px;line-height:1.5}.how-audience li{display:flex;gap:9px;margin:4px 0}.how-audience li:before{content:'●';color:#389458}.how-audience--buyer li:before{color:var(--how-orange)}.how-audience .how-button{padding:10px 16px;font-size:12px}.how-circle{position:absolute;z-index:2;right:28px;bottom:25px;width:96px;height:96px}.how-circle iconify-icon{font-size:22px;margin-bottom:5px}.how-circle--green{color:#147a3b}.how-circle--orange{color:var(--how-orange)}
.how-benefits{background:#fff;padding:0 0 33px}.how-benefits-grid{padding:14px 18px;display:grid;grid-template-columns:repeat(6,1fr);gap:17px;border:1px solid #e8ece9;border-radius:11px;background:#fff;font-family:Arial,sans-serif}.how-benefits-grid div{position:relative;padding-left:47px;min-height:48px}.how-benefits-grid iconify-icon{position:absolute;left:0;top:3px;color:var(--how-green);font-size:30px}.how-benefits-grid b{display:block;font-size:11px;color:#135639}.how-benefits-grid p{margin:4px 0 0;font-size:10px;color:var(--how-muted);line-height:1.35}.how-newsletter{padding:0 0 43px;background:linear-gradient(#fff,#f4faf5)}.how-newsletter-box{width:min(780px,calc(100% - 40px));margin:auto;padding:13px 20px;display:flex;align-items:center;gap:14px;border-radius:10px;background:#eff7f0;font-family:Arial,sans-serif}.how-newsletter-box>span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--how-green);font-size:24px}.how-newsletter-box b{font-size:14px;color:#075130}.how-newsletter-box p{margin:2px 0 0;font-size:10px}.how-newsletter form{margin-left:auto;display:flex;gap:8px}.how-newsletter input{width:225px;padding:10px 13px;border:1px solid #d6ddd7;border-radius:7px;background:#fff;font-size:12px}.how-newsletter button{border:0;border-radius:7px;padding:0 17px;background:var(--how-green);color:#fff;font-weight:700;font-size:12px}
@media(max-width:900px){.how-nav{padding:0 20px;gap:18px}.how-links{gap:18px}.how-audiences{grid-template-columns:1fr}.how-benefits-grid{grid-template-columns:repeat(3,1fr)}.how-steps-list{grid-template-columns:repeat(2,1fr)}.how-steps-list li:after{display:none}}@media(max-width:620px){.how-wrap{width:min(100% - 32px,1340px)}.how-nav{height:60px}.how-brand img{width:133px}.how-account{margin-left:auto;font-size:0;padding:9px}.how-account iconify-icon{font-size:18px}.how-menu-button{display:block}.how-links{display:none}.how-links.is-open{display:flex;position:absolute;top:60px;left:0;right:0;padding:18px 22px;flex-direction:column;align-items:flex-start;gap:15px;background:#fff;box-shadow:0 8px 18px #102a1b1f}.how-hero{min-height:430px;align-items:flex-start;background-position:62% center}.how-hero-content{padding-top:45px}.how-hero h1{font-size:35px}.how-hero p{font-size:15px;max-width:310px}.how-hero-badge{right:17px;bottom:19px;width:95px;height:95px}.how-steps-list{grid-template-columns:1fr;gap:18px}.how-audience{height:330px}.how-audience-copy{width:74%;padding:18px}.how-circle{right:15px;bottom:16px;width:82px;height:82px}.how-benefits-grid{grid-template-columns:1fr 1fr}.how-newsletter-box{flex-wrap:wrap}.how-newsletter form{width:100%;margin:0}.how-newsletter input{width:auto;flex:1}.how-newsletter button{height:39px}.how-actions{flex-direction:column;align-items:flex-start}}


/* ═══════════════════════════════════════════════════════════════════════════
   CONSOLIDACIÓN (25/08/2026): CABECERA REAL, CARRIL ÚNICO Y LO QUE FALTABA
   ═══════════════════════════════════════════════════════════════════════════

   Lo de arriba es la hoja original de la página, minificada. Esto es lo que se
   le añade al pasar a ser la de `/como-funciona`, y va aparte y sin minificar
   a propósito: mezclarlo con la línea de arriba lo dejaría imposible de leer.

   ── EL CARRIL, UNO SOLO ────────────────────────────────────────────

   La página traía su propia barra de navegación con `padding: 0 max(32px,
   calc((100vw - 1340px)/2))`, y ahí está el descentrado que se veía: `100vw`
   INCLUYE la barra de desplazamiento. En una ventana de 1920 con 15px de
   barra, ese cálculo da 290px por lado sobre un ancho útil de 1905 -- así que
   la barra medía 1920, quince más que la página, provocaba desplazamiento
   horizontal, y todo lo de dentro se centraba respecto a un ancho que no
   existe. Medido: 290px de aire a la izquierda y 275 a la derecha.

   Ahora la cabecera es la de `TPlataforma` --que se recoge con `.lp-ancho`--
   y `.how-wrap` se declara EXACTAMENTE igual: mismo tope, mismo relleno y
   `margin-inline:auto`. Sin `100vw` en ninguno de los dos, así que la barra de
   desplazamiento deja de contar y las dos cosas caen en la misma vertical.

   1320 y no los 1180 del resto de páginas de plataforma: esta apoya su
   argumento en fotos --la portada y las dos tarjetas de audiencia-- y
   estrecharlas era perder justo lo que la hace rápida de ver. */

.TComoFuncionaAgro .lp .lp-ancho,
.TComoFuncionaAgro .how-wrap{
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 24px;
}

/* Ya no es la página entera, sino el cuerpo entre la cabecera y el pie. */
.TComoFuncionaAgro .how-page{ min-height: 0; }

/* La barra propia se queda en la hoja pero sin marcado que la use: se
   conserva por si esta página vuelve a servirse suelta alguna vez. */
.TComoFuncionaAgro .how-nav{ display: none; }

/* La portada ya no tiene que compensar la barra que había encima. */
.TComoFuncionaAgro .how-hero{ min-height: 330px; }
.TComoFuncionaAgro .how-hero-badge{ right: max(24px, calc((100% - 1320px)/2 + 24px)); }

/* ── LOS BLOQUES NUEVOS ────────────────────────────────────────────
   Todos con los tokens que ya declara `.how-page` --`--how-green`,
   `--how-orange`, `--how-ink`, `--how-muted`-- y con su misma tipografía de
   bloque (Arial), que es lo que da la unidad de esta página. */

.TComoFuncionaAgro .how-detalle,
.TComoFuncionaAgro .how-subasta,
.TComoFuncionaAgro .how-dinero,
.TComoFuncionaAgro .how-faq{ padding: 34px 0; font-family: Arial, sans-serif; }

.TComoFuncionaAgro .how-detalle,
.TComoFuncionaAgro .how-faq{ background: linear-gradient(130deg, #f5fcf8, #fffaf2); }

/* ── Dos carriles de hitos ──────────────────────────────────────── */
.TComoFuncionaAgro .how-dos{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.TComoFuncionaAgro .how-carril{
    padding: 20px 24px;
    border: 1px solid #e7ebe8;
    border-radius: 10px;
    background: #fff;
}

.TComoFuncionaAgro .how-tag{
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 16px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--how-light);
    color: var(--how-green);
    font: 700 11px/1 Arial, sans-serif;
    letter-spacing: .4px;
}
.TComoFuncionaAgro .how-tag iconify-icon{ font-size: 14px; }
.TComoFuncionaAgro .how-tag--ambar{
    background: color-mix(in srgb, var(--how-orange) 9%, #fff);
    color: var(--how-orange);
}

/* El hito, con su punto en la columna de la izquierda y TODO el texto en la
   segunda: la regla de alineación del proyecto. El punto se dibuja con un
   pseudoelemento para no meter un `<span>` vacío en cada uno. */
.TComoFuncionaAgro .how-hito{ position: relative; padding-left: 20px; margin-bottom: 15px; }
.TComoFuncionaAgro .how-hito:last-child{ margin-bottom: 0; }
.TComoFuncionaAgro .how-hito::before{
    content: '';
    position: absolute; left: 0; top: 5px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--how-green);
}
.TComoFuncionaAgro .how-carril--ambar .how-hito::before{ background: var(--how-orange); }
.TComoFuncionaAgro .how-hito b{ display: block; font-size: 13px; color: var(--how-ink); }
.TComoFuncionaAgro .how-hito p{ margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--how-muted); }

/* ── Fichas de tres en fondo ───────────────────────────────────── */
.TComoFuncionaAgro .how-tres{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.TComoFuncionaAgro .how-ficha{
    padding: 20px 22px;
    border: 1px solid #e7ebe8;
    border-radius: 10px;
    background: #fff;
}
.TComoFuncionaAgro .how-ficha-ico{
    display: grid; place-items: center;
    width: 42px; height: 42px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--how-light);
    color: var(--how-green);
    font-size: 20px;
}
.TComoFuncionaAgro .how-ficha b{ display: block; margin-bottom: 5px; font-size: 14px; color: var(--how-ink); }
.TComoFuncionaAgro .how-ficha p{ margin: 0; font-size: 12px; line-height: 1.5; color: var(--how-muted); }

/* ── El dinero ─────────────────────────────────────────────────── */
.TComoFuncionaAgro .how-dinero-rejilla{ display: grid; grid-template-columns: 1fr 380px; gap: 30px; align-items: start; }
.TComoFuncionaAgro .how-dinero h2{ margin: 8px 0 16px; font-size: 24px; letter-spacing: -.5px; color: var(--how-ink); }
.TComoFuncionaAgro .how-dinero-lado{ display: grid; gap: 14px; }

.TComoFuncionaAgro .how-ticks{ margin: 0 0 20px; padding: 0; list-style: none; }
.TComoFuncionaAgro .how-ticks li{ display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; font-size: 12.5px; line-height: 1.5; color: var(--how-muted); }
.TComoFuncionaAgro .how-ticks iconify-icon{ flex: 0 0 auto; margin-top: 2px; font-size: 15px; color: var(--how-green); }
.TComoFuncionaAgro .how-ticks span{ flex: 1; min-width: 0; }

.TComoFuncionaAgro .how-nota{
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--how-light);
    font-size: 12px; line-height: 1.5; color: var(--how-muted);
}
.TComoFuncionaAgro .how-nota b{ display: block; margin-bottom: 4px; color: #135639; font-size: 13px; }

/* ── Preguntas ─────────────────────────────────────────────────── */
.TComoFuncionaAgro .how-faq-lista{ max-width: 800px; margin-inline: auto; }
.TComoFuncionaAgro .how-faq-lista details{
    margin-bottom: 10px;
    padding: 14px 18px;
    border: 1px solid #e7ebe8;
    border-radius: 10px;
    background: #fff;
}
.TComoFuncionaAgro .how-faq-lista summary{ cursor: pointer; font: 700 13.5px Arial, sans-serif; color: var(--how-ink); }
.TComoFuncionaAgro .how-faq-lista p{ margin: 9px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--how-muted); }

/* ── Cierre ────────────────────────────────────────────────────── */
.TComoFuncionaAgro .how-cierre{ padding: 0 0 43px; background: linear-gradient(#fff, #f4faf5); }
.TComoFuncionaAgro .how-cierre-caja{
    width: min(900px, calc(100% - 48px));
    margin-inline: auto;
    padding: 16px 22px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    border-radius: 10px;
    background: #eff7f0;
    font-family: Arial, sans-serif;
}
.TComoFuncionaAgro .how-cierre-caja > span{
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff; color: var(--how-green); font-size: 24px;
}
.TComoFuncionaAgro .how-cierre-caja b{ font-size: 14px; color: #075130; }
.TComoFuncionaAgro .how-cierre-caja p{ margin: 2px 0 0; font-size: 11.5px; color: var(--how-muted); }
.TComoFuncionaAgro .how-cierre-botones{ margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Pantallas estrechas ───────────────────────────────────────── */
@media (max-width: 900px){
    .TComoFuncionaAgro .how-dos,
    .TComoFuncionaAgro .how-dinero-rejilla{ grid-template-columns: 1fr; }
    .TComoFuncionaAgro .how-tres{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
    .TComoFuncionaAgro .how-tres{ grid-template-columns: 1fr; }
    .TComoFuncionaAgro .how-cierre-botones{ margin-left: 0; width: 100%; }
}

/* ── TRES COSAS QUE SALTARON AL PONERLE LA CABECERA DE VERDAD ──────

   1. LA PORTADA ARRANCABA PEGADA A LA CABECERA. Antes la barra propia era
      `sticky` y empujaba el contenido; la de `TPlataforma` va sobre la foto,
      así que el titular nacía debajo de ella. Se le devuelve el aire por
      arriba.

   2. LAS TARJETAS DE AUDIENCIA SE CORTABAN. Tenían `height: 248px` fija, y
      con el texto de verdad --cuatro líneas de ventaja en vez de cuatro
      palabras-- el botón se quedaba por debajo del recorte. `min-height` deja
      que crezcan; la rejilla las mantiene iguales entre sí.

   3. LOS TÍTULOS DE SECCIÓN SALÍAN A LA IZQUIERDA aunque `.how-section-title`
      declara `text-align:center`. Es la trampa de siempre en este proyecto: la
      hoja global del sitio le pone `text-align:left` a los encabezados, y
      heredar el centrado de la caja no basta -- hay que declararlo en el hijo.
      Y de paso su `padding:10px` metía cada titular 10px por dentro de su
      propio texto. */

/* Y EL `24px` DE LOS LADOS NO ES DECORATIVO: ES LA COLUMNA DE LA PÁGINA.
   `.how-wrap` mide 1320px y mete 24px de relleno a cada lado, así que TODO lo
   de esta página --los pasos, las tarjetas de audiencia, los títulos de
   sección-- arranca en 317. El hero es un `.how-wrap` más, pero este atajo
   escribía `padding: 62px 0 40px` en forma corta y con ello ponía los lados a
   CERO: el titular de la portada nacía en 293, veinticuatro píxeles a la
   izquierda de todo lo que va debajo. Eso era lo que se veía descentrado.
   Medido: 293 el hero contra 317 el resto; ahora los dos en 317. */
.TComoFuncionaAgro .how-hero-content{ padding: 62px 24px 40px; }

.TComoFuncionaAgro .how-audience{ height: auto; min-height: 248px; }

.TComoFuncionaAgro .how-section-title h2,
.TComoFuncionaAgro .how-section-title p{ text-align: center; }

.TComoFuncionaAgro .how-page h1,
.TComoFuncionaAgro .how-page h2,
.TComoFuncionaAgro .how-page h3{ padding-left: 0; padding-right: 0; }

/* ── EL TEXTO DE LOS BOTONES SE VOLVÍA ROSA ────────────────────────
 *
 * La hoja global del sitio tiene `a, .link, a:active, a:focus, a:visited,
 * a span { color:#910c88 }` (Tjquery/css/index.css:195). Un botón de esta
 * página es un `<a>`, así que EN CUANTO SE VISITA SU DESTINO --y «Soy
 * agricultor» lleva a /registro-vendedor, que se visita el primer día-- el
 * `a:visited` le gana a `.how-button--green{color:#fff}`: mismo peso de
 * clase para el segundo, pero el visitado va después en el orden de carga.
 *
 * NO SE VE CON `getComputedStyle`: por privacidad el navegador devuelve
 * SIEMPRE los valores de no-visitado. Solo se aprecia mirando la pantalla,
 * y por eso llegó como un fallo de usuario y no de una comprobación.
 *
 * Se declara el color de cada variante también en `:visited` --que es de lo
 * poco que `:visited` admite-- y se corta de paso el `a span`, que pinta
 * cualquier `<span>` DENTRO del botón aunque el enlace esté sin visitar:
 * ahí no hay herencia que valga, la regla casa con el span directamente. */

.TComoFuncionaAgro .how-button--green:visited,
.TComoFuncionaAgro .how-button--orange:visited,
.TComoFuncionaAgro .how-account:visited{ color: #fff; }

.TComoFuncionaAgro .how-button--outline:visited{ color: #075327; }

.TComoFuncionaAgro .how-links a:visited{ color: #101510; }

.TComoFuncionaAgro .how-button span,
.TComoFuncionaAgro .how-account span,
.TComoFuncionaAgro .how-links a span{ color: inherit; }


/* ── LA PORTADA: MISMA ALTURA QUE SUS DOS HERMANAS, Y LA CARA VISIBLE ──
 *
 * Eran 340px contra los 500 de «Para agricultores» y «Para compradores», y
 * eso tenía una consecuencia que no se ve midiendo la caja: la foto entra con
 * `cover` y `center`, así que TODO lo que sobra se recorta MITAD ARRIBA Y
 * MITAD ABAJO. A 340px de alto y 1905 de ancho, la imagen escala a 952 y se
 * comen 306px por arriba -- justo donde está la cara del agricultor. La
 * portada se veía «descentrada» porque le faltaba altura, no posición.
 *
 * Con `--lp-portada-alto` las tres miden lo mismo y el recorte de arriba baja
 * a la mitad. Y aun así el sombrero se quedaba fuera por poco, de ahí el
 * `12%` vertical: medido sobre el PNG (1774x887), la cabeza ocupa del 5,5%
 * al 36% de la altura, y con el centrado por defecto empieza por debajo.
 * `12%` la deja entera a 1496 y a 1905 de ancho, que son los dos que se han
 * comprobado. */
.TComoFuncionaAgro .how-hero{
    min-height: var(--lp-portada-alto, 500px);
    background-position: center, center 12%;
}



/* ══════════════════════════════════════════════════════════════════════
   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; }
}