/* ══════════════════════════════════════════════════════════════════════
   LAS PÁGINAS DE LA EMPRESA — lo que comparten
   ══════════════════════════════════════════════════════════════════════

   `/quienes-somos` y `/contacto`. Las dos van con `layout('flush')` --la
   cabecera y el pie del sitio, el cuerpo a sangre-- y comparten el héroe con
   foto, los botones, el rótulo de sección y el antetítulo. Esta hoja viaja con
   las dos (`CompanyPagesController::page()` añade este módulo); lo específico
   de cada una está en la suya.

   Raíz `.cp`. Los tonos son los de `/comprar` (`TLandingBuyer.css`, `--lpb-*`),
   que es la otra página a sangre con la cabecera del sitio: la misma web, no
   otra paleta. Muestreados de la maqueta dan los mismos verdes con el ruido de
   una imagen generada.

   ── CANDIDATOS A LA HOJA COMÚN DEL ÁREA PÚBLICA ──────────────────────

   `.cp-btn` es `.lpb-btn` con otro nombre, y `.cp-heroe` es `.lpb-heroe` con
   la foto como variable. Se extraen juntos cuando el área pública tenga su
   hoja, no antes (ver CLAUDE.md, «Área de cliente: la hoja común está
   PENDIENTE»). */

.cp{
    --cp-verde:        #1e7a3c;
    --cp-verde-vivo:   #3fb95e;
    --cp-verde-oscuro: #15582b;
    --cp-verde-claro:  #eef6ec;
    --cp-tinta:        #16261a;
    --cp-texto:        #3f4a43;
    --cp-suave:        #5d6f62;
    --cp-borde:        #e1e8e2;
    --cp-crema:        #f7f9f5;
    --cp-arena:        #f8f3e6;   /* la tarjeta del comprador profesional */
    --cp-noche:        #173e2c;   /* la tarjeta de ubicación */
    --cp-radio:        12px;

    background: #fdfcf8;
    color: var(--cp-tinta);
    font-size: 15px;
    line-height: 1.6;
}

.cp *{ box-sizing: border-box; }
.cp img{ max-width: 100%; display: block; }

/* LOS ENLACES DEL SITIO LLEVAN BORDE INFERIOR --y otro en `:visited`-- desde
   la hoja global. Aquí ninguno lo quiere. */
.cp a,
.cp a:visited{ border: 0; text-decoration: none; }

/* EL CARRIL DEL SITIO: el contenido arranca en la misma vertical que el logo
   de la cabecera. Mismo patrón y mismo respaldo que `.lpb-ancho`. */
.cp .cp-ancho{
    max-width: var(--site-carril, 1200px);
    margin-left: var(--site-carril-izq, auto);
    margin-right: auto;
    padding: 0 16px;
}

/* ── LOS BOTONES ──────────────────────────────────────────────────────
   `:visited` declarado en cada variante: la hoja global pinta de otro color
   cualquier enlace visitado, y `getComputedStyle` no lo delata. */
.cp .cp-btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px;
    border: 1.5px solid transparent; border-radius: 8px;
    font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
    white-space: nowrap; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.cp .cp-btn iconify-icon{ font-size: 17px; }
.cp .cp-btn span{ color: inherit; }   /* `a span{color:…}` de la hoja global */

.cp .cp-btn--verde,
.cp .cp-btn--verde:visited{ background: var(--cp-verde); border-color: var(--cp-verde); color: #fff; }
.cp .cp-btn--verde:hover{ background: var(--cp-verde-oscuro); border-color: var(--cp-verde-oscuro); color: #fff; }

.cp .cp-btn--linea,
.cp .cp-btn--linea:visited{ background: #fff; border-color: var(--cp-verde); color: var(--cp-verde); }
.cp .cp-btn--linea:hover{ background: var(--cp-verde-claro); color: var(--cp-verde-oscuro); }

/* Sobre foto o fondo oscuro: el blanco macizo y el de línea blanca. */
.cp .cp-btn--blanco,
.cp .cp-btn--blanco:visited{ background: #fff; border-color: #fff; color: var(--cp-tinta); }
.cp .cp-btn--blanco:hover{ background: var(--cp-crema); color: var(--cp-tinta); }
.cp .cp-btn--linea-blanca,
.cp .cp-btn--linea-blanca:visited{ background: transparent; border-color: rgba(255,255,255,.75); color: #fff; }
.cp .cp-btn--linea-blanca:hover{ background: rgba(255,255,255,.1); color: #fff; }

/* FOCO VISIBLE (WCAG 2.1 AA): la hoja global lo quita de los enlaces. */
.cp a:focus-visible,
.cp button:focus-visible,
.cp input:focus-visible,
.cp select:focus-visible,
.cp textarea:focus-visible{ outline: 3px solid var(--cp-verde-vivo); outline-offset: 2px; }

/* ── EL ANTETÍTULO Y EL RÓTULO DE SECCIÓN ─────────────────────────────
   Rótulo en tinta con la palabra destacada en verde (`<em>`), como la
   maqueta: «Nuestra historia», «Nuestros valores». */
.cp .cp-antetitulo{
    display: block; margin: 0 0 8px;
    font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    color: var(--cp-verde);
}
.cp .cp-rotulo{
    margin: 0 0 16px;
    font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.18; letter-spacing: -.6px;
    color: var(--cp-tinta); text-align: left;
}
.cp .cp-rotulo em{ font-style: normal; color: var(--cp-verde); }

.cp .cp-seccion{ padding: 56px 0; }
.cp .cp-seccion--crema{ background: var(--cp-crema); border-top: 1px solid var(--cp-borde); border-bottom: 1px solid var(--cp-borde); }

/* ── SIN DATOS TODAVÍA ────────────────────────────────────────────────
   El mismo estado vacío de `/para-tu-negocio` (`.cn-sin-opiniones`): icono en
   su círculo, rótulo y mensaje en un recuadro discontinuo. Una sección sin
   datos se enseña así, nunca con datos inventados. */
.cp .cp-vacio{
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 4px; padding: 34px 20px 30px;
    background: var(--cp-crema);
    border: 1px dashed #d3e7cf; border-radius: var(--cp-radio);
}
.cp .cp-vacio-icono{
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: 6px;
    border-radius: 50%; background: #fff; border: 1px solid #d3e7cf;
}
.cp .cp-vacio-icono iconify-icon{ font-size: 24px; color: var(--cp-verde); }
.cp .cp-vacio b{ font-size: 15px; font-weight: 800; color: var(--cp-tinta); }
.cp .cp-vacio p{ margin: 2px 0 0; max-width: 460px; font-size: 13px; line-height: 1.5; color: var(--cp-suave); text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════
   EL HÉROE
   ═══════════════════════════════════════════════════════════════════════

   La foto la pone cada página con `--cp-heroe-foto` en su propia hoja: el
   marcado y el velo son los mismos. El velo cae por la IZQUIERDA, donde va el
   texto, y deja limpia la figura de la derecha. */
.cp .cp-heroe{
    position: relative;
    display: flex; align-items: center;
    min-height: 500px;
    padding: 64px 0;

    background-color: #0c2416;
    background-image:
        linear-gradient(95deg,
            rgba(8,28,16,.86) 0%,
            rgba(8,28,16,.72) 32%,
            rgba(8,28,16,.28) 58%,
            rgba(8,28,16,0)   78%),
        var(--cp-heroe-foto, none);
    background-size: auto, cover;
    background-position: center, center right;
    background-repeat: no-repeat;
}

.cp .cp-heroe-txt{ position: relative; z-index: 1; width: 100%; }
.cp .cp-heroe-txt > *{ max-width: 600px; }

.cp .cp-heroe h1{
    margin: 0 0 10px;
    font-size: clamp(38px, 5vw, 62px); font-weight: 800; line-height: 1.04; letter-spacing: -1.6px;
    color: #fff; text-align: left;
}
.cp .cp-heroe-sub{
    margin: 0 0 18px;
    font-size: clamp(20px, 2.3vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.4px;
    color: #fff;   /* `p{color:#000}` de la hoja global */
}
.cp .cp-heroe-lead{
    margin: 0;
    font-size: 16.5px; line-height: 1.6;
    color: rgba(255,255,255,.92);
}

@media (max-width: 720px){
    .cp .cp-heroe{
        min-height: 0; padding: 48px 0 44px;
        background-image:
            linear-gradient(180deg, rgba(8,28,16,.86) 0%, rgba(8,28,16,.78) 100%),
            var(--cp-heroe-foto, none);
    }
    .cp .cp-seccion{ padding: 40px 0; }
}



/* ══════════════════════════════════════════════════════════════════════
   QUIÉNES SOMOS — /quienes-somos
   ══════════════════════════════════════════════════════════════════════

   Solo lo de esta página. El héroe, los botones, el rótulo de sección y los
   tokens `--cp-*` vienen de `TCompanyPage.css`. */

.cp-about{ --cp-heroe-foto: url('/assets/empresa/quienes-somos.jpg'); }
/* Encuadre alto: las caras están en el tercio de arriba de la foto y con el
   centro se cortaban las cabezas. */
.cp-about .cp-heroe{ background-position: center, center 18%; }

.cp-about .cp-about-lead{
    max-width: 640px; margin: -4px 0 28px;
    font-size: 16px; line-height: 1.6; color: var(--cp-texto);
}

/* ── NUESTRA HISTORIA ─────────────────────────────────────────────── */
.cp-about .cp-about-historia{
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px; align-items: center;
}
.cp-about .cp-about-historia-txt p{
    margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--cp-texto);
}
.cp-about .cp-about-historia-txt .cp-btn{ margin-top: 10px; }
.cp-about .cp-about-historia-foto{
    margin: 0; overflow: hidden; border-radius: var(--cp-radio);
    box-shadow: 0 10px 30px rgba(16, 38, 24, .14);
}
.cp-about .cp-about-historia-foto img{ width: 100%; height: 340px; object-fit: cover; object-position: 30% center; }

/* ── LOS TRES PILARES DE LA MISIÓN ────────────────────────────────────
   Tres tarjetas blancas sobre la franja crema. Icono en su columna y TODO el
   texto en la segunda: título y explicación arrancan en la misma vertical. */
.cp-about .cp-about-pilares{
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
    margin: 0; padding: 0; list-style: none;
}
.cp-about .cp-about-pilares li{
    display: flex; gap: 14px; align-items: flex-start;
    padding: 22px;
    background: #fff; border: 1px solid var(--cp-borde); border-radius: var(--cp-radio);
}
.cp-about .cp-about-pilares li > iconify-icon{
    flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 10px; background: var(--cp-verde-claro); color: var(--cp-verde); font-size: 22px;
}
.cp-about .cp-about-pilares li > div{ flex: 1; min-width: 0; }
.cp-about .cp-about-pilares h3{ margin: 2px 0 6px; font-size: 16px; font-weight: 800; color: var(--cp-tinta); }
.cp-about .cp-about-pilares p{ margin: 0; font-size: 14px; line-height: 1.6; color: var(--cp-texto); }

/* ── VENTAJAS PARA CADA PARTE ─────────────────────────────────────── */
.cp-about .cp-about-ventajas{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cp-about .cp-about-lado{
    padding: 22px 24px;
    background: #fff; border: 1px solid var(--cp-borde); border-radius: var(--cp-radio);
}
.cp-about .cp-about-lado-cab{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cp-about .cp-about-lado-cab iconify-icon{
    flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
    border-radius: 10px; background: var(--cp-verde-claro); color: var(--cp-verde); font-size: 22px;
}
.cp-about .cp-about-lado-cab h3{ margin: 0; font-size: 18px; font-weight: 800; color: var(--cp-tinta); }

.cp-about .cp-about-lado ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.cp-about .cp-about-lado li{ display: flex; gap: 10px; align-items: flex-start; }
.cp-about .cp-about-lado li > iconify-icon{ flex: 0 0 auto; font-size: 18px; color: var(--cp-verde); margin-top: 2px; }
.cp-about .cp-about-lado li > div{ flex: 1; min-width: 0; }
.cp-about .cp-about-lado li b{ display: block; font-size: 14.5px; color: var(--cp-tinta); }
.cp-about .cp-about-lado li span{ display: block; font-size: 13.5px; line-height: 1.55; color: var(--cp-suave); }

/* ── NUESTROS VALORES ─────────────────────────────────────────────── */
.cp-about .cp-about-valores-sec{ padding-top: 0; }
.cp-about .cp-about-valores{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cp-about .cp-about-valor{
    padding: 20px;
    background: var(--cp-crema); border: 1px solid var(--cp-borde); border-radius: var(--cp-radio);
}
.cp-about .cp-about-valor iconify-icon{ font-size: 30px; color: var(--cp-verde); }
.cp-about .cp-about-valor h3{ margin: 12px 0 6px; font-size: 15px; font-weight: 800; color: var(--cp-tinta); }
.cp-about .cp-about-valor p{ margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--cp-suave); }

/* ── NUESTRA ESENCIA ──────────────────────────────────────────────────
   La foto a sangre y el velo oscuro por la DERECHA, donde va el texto: al
   revés que el héroe, como en la maqueta. */
.cp-about .cp-about-esencia{
    padding: 64px 0;
    background-color: #10231a;
    background-image:
        linear-gradient(270deg, rgba(10,24,16,.94) 0%, rgba(10,24,16,.86) 42%, rgba(10,24,16,.2) 70%, rgba(10,24,16,0) 100%),
        url('/assets/landing/cta.jpg');
    background-size: auto, cover;
    background-position: center, left center;
    background-repeat: no-repeat;
}
.cp-about .cp-about-esencia-fila{ display: flex; justify-content: flex-end; }
.cp-about .cp-about-esencia-txt{ max-width: 520px; }
.cp-about .cp-about-esencia .cp-antetitulo{ color: #fff; }
.cp-about .cp-about-esencia h2{
    margin: 0 0 14px;
    font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.12; letter-spacing: -.8px;
    color: #fff; text-align: left;
}
.cp-about .cp-about-esencia h2 em{ font-style: normal; color: var(--cp-verde-vivo); }
.cp-about .cp-about-esencia p{ margin: 0; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.88); }

/* ── LAS CIFRAS ───────────────────────────────────────────────────────
   Icono en su columna y el texto en la segunda: la cifra y su rótulo
   arrancan en la misma vertical. */
.cp-about .cp-about-cifras{ padding: 28px 0; background: #fff; border-bottom: 1px solid var(--cp-borde); }
.cp-about .cp-about-cifras ul{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;
    margin-top: 0; margin-bottom: 0; list-style: none;
}
.cp-about .cp-about-cifras li{ display: flex; gap: 12px; align-items: flex-start; }
.cp-about .cp-about-cifras li > iconify-icon{ flex: 0 0 auto; font-size: 30px; color: var(--cp-verde); }
.cp-about .cp-about-cifras li > div{ flex: 1; min-width: 0; }
.cp-about .cp-about-cifras b{ display: block; font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--cp-tinta); }
.cp-about .cp-about-cifras small{ display: block; font-size: 13px; color: var(--cp-suave); }

/* ── CUANDO NO CABE ───────────────────────────────────────────────── */
@media (max-width: 1000px){
    .cp-about .cp-about-valores{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
    .cp-about .cp-about-historia,
    .cp-about .cp-about-ventajas{ grid-template-columns: 1fr; gap: 26px; }
    .cp-about .cp-about-historia-foto img{ height: 240px; }
    .cp-about .cp-about-pilares{ grid-template-columns: 1fr; }
    .cp-about .cp-about-esencia{
        background-image:
            linear-gradient(180deg, rgba(10,24,16,.84) 0%, rgba(10,24,16,.9) 100%),
            url('/assets/landing/cta.jpg');
    }
}
@media (max-width: 520px){
    .cp-about .cp-about-valores{ grid-template-columns: 1fr; }
}



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