/* Sitio público de la empresa — sobre base.css.
 * Hereda tokens (--pzf-*), tipografía Inter y componentes globales.
 * Es el sitio del contratista, no del sistema: fotos de campo grandes,
 * poco texto y el WhatsApp siempre a mano. */

body.pzf-public {
    background: #fff;
    /* el body de base.css es flex con overflow hidden — eso es para la app.
       En la landing queremos scroll normal. */
    display: block;
    overflow: visible;
    height: auto;
}
html:has(body.pzf-public) { height: auto; }

/* ============================================================
 * Navbar público
 * ============================================================ */
.pzf-public-nav {
    background: #fff;
    border-bottom: 1px solid var(--pzf-border);
    padding: .85rem 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--pzf-shadow-sm);
}
.pzf-public-nav .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    color: var(--pzf-text);
    letter-spacing: -.01em;
}
.pzf-public-nav .navbar-brand:hover { color: var(--pzf-primary-text); }
.pzf-public-nav .nav-link {
    color: var(--pzf-text-muted);
    font-weight: 500;
    padding: .4rem .85rem;
    border-radius: var(--pzf-radius-sm);
    transition: color .15s var(--pzf-ease), background .15s var(--pzf-ease);
}
.pzf-public-nav .nav-link:hover { color: var(--pzf-primary-text); background: var(--pzf-primary-soft); }

/* ============================================================
 * Hero con foto
 * El texto va sobre la imagen, así que hace falta un velo: sin él la
 * tipografía blanca se pierde contra el rastrojo claro de la foto.
 * ============================================================ */
.pzf-hero {
    position: relative;
    overflow: hidden;
    padding: 6rem 0 5rem;
    background: #0F2A18;
    color: #fff;
    isolation: isolate;
}
/* La foto va como background y no como <img> a propósito: un <img> oculto por
   CSS igual se descarga, y son 168 KB que el celular del dueño no tiene por qué
   pagar cuando ni siquiera la ve. Un background dentro de una media query que
   no matchea no se pide.
   Ojo: el resto del sitio (.pzf-cta-media, .pzf-auth-media) sigue con <img>. */
@media (min-width: 992px) {
    .pzf-hero-foto {
        background-image: url("../img/hero-cosecha.398c2048d2a5.jpg");
        background-size: cover;
        background-position: center 60%;
    }
}

/* El emblema encabeza el hero sólo en mobile, donde no hay foto que le compita
   (el markup lo oculta en desktop con .d-lg-none). */
.pzf-hero-emblema {
    display: block;
    width: min(240px, 66%);
    height: auto;
    margin: 0 0 1.25rem;
}
.pzf-hero-foto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg,
            rgba(12, 40, 22, .93) 0%,
            rgba(12, 40, 22, .82) 38%,
            rgba(12, 40, 22, .34) 68%,
            rgba(12, 40, 22, .18) 100%);
}

.pzf-hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .74rem;
    font-weight: 600;
    color: var(--pzf-gold);
    margin-bottom: .9rem;
}
.pzf-hero h1 {
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.03em;
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    color: #fff;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}
.pzf-hero h1 .pzf-hero-accent { color: var(--pzf-gold); }
.pzf-hero .lead {
    font-size: 1.12rem;
    color: rgba(255, 255, 255, .88);
    line-height: 1.6;
    max-width: 40rem;
}
.pzf-hero-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.pzf-hero-actions .btn-lg,
.pzf-cta-actions .btn-lg {
    padding: .85rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--pzf-radius);
}
.pzf-hero-actions .btn-gold { box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.pzf-hero-actions .btn-gold:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }

/* Bootstrap pinta btn-outline-light con borde a media opacidad; sobre foto
   necesita más presencia para no desaparecer. */
.pzf-hero .btn-outline-light,
.pzf-cta-section .btn-outline-light {
    border-color: rgba(255, 255, 255, .65);
    color: #fff;
    backdrop-filter: blur(2px);
}
.pzf-hero .btn-outline-light:hover,
.pzf-cta-section .btn-outline-light:hover {
    background: #fff;
    border-color: #fff;
    color: var(--pzf-primary);
}

.pzf-hero-trust {
    margin-top: 2.25rem;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, .82);
    font-size: .85rem;
}
.pzf-hero-trust span { display: inline-flex; align-items: center; gap: .4rem; }
.pzf-hero-trust i { color: var(--pzf-gold); }

/* ============================================================
 * Secciones genéricas
 * ============================================================ */
.pzf-section { padding: 5rem 0; }
.pzf-section.alt { background: var(--pzf-surface-2); }
.pzf-section-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .5rem;
    text-align: center;
    color: var(--pzf-text);
    text-wrap: balance;
}
.pzf-section-subtitle {
    color: var(--pzf-text-muted);
    text-align: center;
    margin-bottom: 3rem;
    font-size: 1.05rem;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
 * Tarjetas de servicio
 * ============================================================ */
.pzf-servicio {
    background: #fff;
    border: 1px solid var(--pzf-border);
    border-radius: var(--pzf-radius-lg);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s var(--pzf-ease-out), box-shadow .25s var(--pzf-ease-out), border-color .25s var(--pzf-ease);
}
.pzf-servicio:hover {
    transform: translateY(-4px);
    box-shadow: var(--pzf-shadow-lg);
    border-color: rgba(var(--pzf-primary-rgb), .3);
}
.pzf-servicio-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--pzf-surface-2);
}
.pzf-servicio-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--pzf-ease-out);
}
.pzf-servicio:hover .pzf-servicio-media img { transform: scale(1.04); }

.pzf-servicio-body {
    padding: 1.6rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1;
}
.pzf-servicio-head {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.pzf-servicio-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    background: var(--pzf-primary-soft);
    color: var(--pzf-primary-text);
}
.pzf-servicio h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pzf-text);
    margin: 0;
    letter-spacing: -.015em;
}
.pzf-servicio > .pzf-servicio-body > p {
    color: var(--pzf-text-muted);
    font-size: .93rem;
    line-height: 1.55;
    margin: 0;
}
.pzf-servicio .pzf-checklist { margin-top: auto; }
.pzf-servicio .pzf-checklist li { font-size: .88rem; padding: .4rem 0; }

/* ============================================================
 * Checklist (reutilizada en varias secciones)
 * ============================================================ */
.pzf-checklist {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}
.pzf-checklist li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem 0;
    color: var(--pzf-text);
    font-size: .95rem;
    line-height: 1.5;
}
.pzf-checklist li::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--pzf-success-rgb), .15);
    display: inline-flex;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2315A36B'%3e%3cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

/* ============================================================
 * Figuras (fotos dentro de secciones)
 * ============================================================ */
.pzf-figura {
    margin: 0;
    border-radius: var(--pzf-radius-lg);
    overflow: hidden;
    box-shadow: var(--pzf-shadow-lg);
    aspect-ratio: 16 / 10;
}
.pzf-figura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
 * Pasos numerados
 * La numeración acá sí es información: es el orden real del trabajo,
 * de la consulta al parte final.
 * ============================================================ */
.pzf-pasos {
    list-style: none;
    counter-reset: paso;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.75rem;
}
.pzf-pasos > li {
    position: relative;
    padding-top: .5rem;
}
.pzf-paso-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--pzf-primary);
    color: var(--pzf-on-color);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .85rem;
    font-variant-numeric: tabular-nums;
}
.pzf-pasos h3 {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--pzf-text);
    margin: 0 0 .4rem;
    letter-spacing: -.01em;
}
.pzf-pasos p {
    color: var(--pzf-text-muted);
    font-size: .9rem;
    line-height: 1.55;
    margin: 0;
}

/* ============================================================
 * Socios (los dos hermanos)
 * ============================================================ */
.pzf-socios {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pzf-border);
}
.pzf-socio {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.pzf-socio-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pzf-primary-soft);
    color: var(--pzf-primary-text);
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* ============================================================
 * Cierre con foto
 * ============================================================ */
.pzf-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #1B7A3E 0%, #166534 55%, #0F4A26 100%);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.pzf-cta-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.pzf-cta-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pzf-cta-foto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(12, 40, 22, .88) 0%, rgba(12, 40, 22, .78) 100%);
}
.pzf-cta-section > .container { position: relative; z-index: 1; }
.pzf-cta-section h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .75rem;
    text-wrap: balance;
}
.pzf-cta-section p {
    color: rgba(255, 255, 255, .88);
    font-size: 1.05rem;
    margin-bottom: 1.75rem;
}
.pzf-cta-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
}
.pzf-cta-section .btn-gold { box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }

/* ============================================================
 * Footer
 * ============================================================ */
.pzf-public-footer {
    background: var(--pzf-surface-2);
    border-top: 1px solid var(--pzf-border);
    padding: 3rem 0 1.5rem;
}
.pzf-public-footer hr {
    margin: 2rem 0 1rem;
    border-color: var(--pzf-border);
    opacity: 1;
}
.pzf-public-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--pzf-text);
    letter-spacing: -.01em;
}
.pzf-public-footer-brand:hover { color: var(--pzf-primary-text); }
.pzf-footer-emblema {
    height: 64px;
    width: auto;
    display: block;
}

/* Hero: el emblema ocupa la mitad derecha, que hasta ahora estaba vacía.
   Oculto en mobile a propósito — ahí el hero ya es alto y el CTA de WhatsApp
   tiene que quedar arriba del fold; la navbar ya muestra la marca. */
.pzf-public-footer a { color: var(--pzf-text-muted); text-decoration: none; }
.pzf-public-footer a:hover { color: var(--pzf-primary-text); }

.pzf-footer-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pzf-text);
    margin-bottom: .85rem;
}
.pzf-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    font-size: .9rem;
}

.pzf-creditos-toggle { cursor: pointer; }
.pzf-creditos {
    list-style: none;
    padding: 1rem 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .76rem;
    color: var(--pzf-text-muted);
}

/* ============================================================
 * Form contacto
 * ============================================================ */
.pzf-contacto-section { padding: 4rem 0; }
.pzf-contacto-card {
    background: #fff;
    border: 1px solid var(--pzf-border);
    border-radius: var(--pzf-radius-lg);
    padding: 2.25rem 2rem;
    box-shadow: var(--pzf-shadow);
}
.pzf-contacto-card h1 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .35rem;
}
.pzf-contacto-card .lead {
    color: var(--pzf-text-muted);
    font-size: .98rem;
    margin-bottom: 1.5rem;
}
.pzf-contacto-directo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .85rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.75rem;
    border-radius: var(--pzf-radius);
    background: var(--pzf-primary-soft);
    font-size: .92rem;
    color: var(--pzf-text);
}

.pzf-public .form-control {
    padding: .75rem .9rem;
    font-size: .95rem;
}

/* ============================================================
 * Mobile
 * ============================================================ */
@media (max-width: 991.98px) {
    /* Hero a pantalla completa: es lo primero que ve el dueño desde el campo y
       tiene que pegar. Emblema arriba, texto al pie, y la foto respirando en el
       medio. La foto es otra: `hero-cosecha` es apaisada (2.34:1) y en vertical
       queda una tajada sin escena; ésta es textura, así que el recorte le suma
       profundidad en vez de sacarle. */
    .pzf-hero {
        padding: 1.5rem 0 2rem;
        min-height: calc(100vh - 62px);
        min-height: calc(100svh - 62px);
        display: flex;
    }
    .pzf-hero-foto {
        background-image: url("../img/hero-mobile.50b7b7b217e6.jpg");
        background-size: cover;
        background-position: center;
    }
    /* Velo por las dos puntas: apenas arriba para que el anillo del emblema
       recorte, fuerte abajo para el texto blanco. El medio queda limpio, que es
       donde vive la foto. */
    .pzf-hero-foto::before {
        background: linear-gradient(180deg,
            rgba(12, 40, 22, .62) 0%,
            rgba(12, 40, 22, .18) 22%,
            rgba(12, 40, 22, .72) 50%,
            rgba(12, 40, 22, .96) 100%);
    }
    /* El eyebrow dorado no sobrevive acá: sobre la foto abierta da 1.71:1 contra
       los 4.5 que pide AA, y no hay velo que lo arregle sin ennegrecer justo la
       parte de la foto que da la sensación de campo. Se va: el emblema, que está
       tres centímetros más arriba, ya dice quiénes son. */
    .pzf-hero-eyebrow { display: none; }
    .pzf-hero > .container { display: flex; flex-direction: column; flex: 1; }
    .pzf-hero .row { flex: 1; }
    .pzf-hero .col-lg-7 { display: flex; flex-direction: column; }
    /* El margin-bottom:auto es lo que empuja todo lo demás al pie del hero. */
    .pzf-hero-emblema { width: min(200px, 55%); margin: 0 auto auto; }
    .pzf-hero .lead { font-size: 1.05rem; }
    .pzf-hero-actions { margin-top: 1.25rem; }
    .pzf-hero-trust { margin-top: 1.25rem; gap: .5rem 1rem; }
    .pzf-section { padding: 3.5rem 0; }
    .pzf-hero-actions .btn-lg,
    .pzf-cta-actions .btn-lg { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .pzf-servicio,
    .pzf-servicio-media img { transition: none; }
    .pzf-servicio:hover { transform: none; }
    .pzf-servicio:hover .pzf-servicio-media img { transform: none; }
}