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



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