/* =========================================================================
   SOCIEPAL, S.P.R. de R.L. — Hoja de estilos
   Paleta de marca (permanente):
   verde oscuro #3E5923 + verde medio #677346 + verde claro #A4AF93.
   Tipografía: Inria Serif (light 300 para texto, bold 700 para títulos).

   Sistema visual: un solo lenguaje de formas (radios limpios), una escala de
   sombras, una escala de espaciado y un solo estilo de borde para tarjetas.
   ========================================================================= */

:root {
    /* Paleta de marca (permanente) */
    --verde-noche:        #2A3C18;
    --verde-oscuro:       #3E5923;
    --verde:              #677346;
    --verde-claro:        #A4AF93;
    --verde-claro-suave:  #CDD3C3;
    --crema:              #F6F7F5;
    --crema-oscuro:       #E9ECE4;
    --blanco:             #FFFFFF;
    --tinta:              #2E431A;
    --tinta-suave:        #55613C;

    /* Tipografía (permanente) */
    --fuente-titulos: "Inria Serif", Georgia, "Times New Roman", serif;
    --fuente-texto:   "Inria Serif", Georgia, "Times New Roman", serif;
    --peso-texto:   300;
    --peso-titulos: 700;

    /* Radios: un solo lenguaje de formas */
    --r-chico:    10px;
    --r-medio:    16px;
    --r-grande:   24px;
    --r-pastilla: 999px;

    /* Bordes */
    --borde:        1px solid rgba(103, 115, 70, 0.22);
    --borde-fuerte: 2px solid rgba(103, 115, 70, 0.55);
    --borde-claro:  1px solid rgba(246, 247, 245, 0.22);

    /* Sombras */
    --sombra-chica: 0 1px 3px rgba(46, 67, 26, 0.06), 0 4px 12px rgba(46, 67, 26, 0.05);
    --sombra:       0 6px 18px rgba(46, 67, 26, 0.08), 0 16px 36px rgba(46, 67, 26, 0.07);

    /* Espaciado */
    --esp-seccion:   clamp(4rem, 7vw, 6rem);
    --esp-bloque:    clamp(2rem, 4vw, 3rem);
    --esp-rejilla:   1.3rem;
    --ancho-lectura: 64ch;

    --transicion: 0.25s ease;
}

/* ------------------------- Base ------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

body {
    font-family: var(--fuente-texto);
    font-weight: var(--peso-texto);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--tinta);
    background-color: var(--crema);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); color: var(--verde-oscuro); line-height: 1.15; }
h4 { font-family: var(--fuente-titulos); font-weight: var(--peso-titulos); font-size: 1.02rem; line-height: 1.3; }
h2 { letter-spacing: -0.01em; }

p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.hero__titulo { text-wrap: normal; } /* lleva <br> propio */

a { color: var(--verde-oscuro); transition: color var(--transicion); }
a:hover, a:focus-visible { color: var(--verde-noche); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--verde-claro);
    outline-offset: 3px;
    border-radius: 6px;
}
/* Sobre fondos claros el aro de foco necesita un verde oscuro para verse */
.seccion a:focus-visible, .seccion button:focus-visible, .seccion summary:focus-visible,
.header a:focus-visible, .header button:focus-visible {
    outline-color: var(--verde-oscuro);
}
/* ...y vuelve a ser claro dentro de las secciones de fondo oscuro */
.hero a:focus-visible, .pagina-hero a:focus-visible,
.cta a:focus-visible, .proceso a:focus-visible {
    outline-color: var(--crema);
}

.contenedor {
    width: min(1120px, 92%);
    margin-inline: auto;
}

/* ------------------------- Encabezados de sección ------------------------- */
.seccion {
    position: relative;
    padding: var(--esp-seccion) 0;
}
/* Espacio extra solo si la sección termina en una onda divisora */
.seccion:has(> .onda),
.cta:has(> .onda) { padding-bottom: calc(var(--esp-seccion) + 2.5rem); }

.seccion__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--verde-oscuro);
}

.seccion__etiqueta::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--verde);
    flex-shrink: 0;
}

.seccion__titulo {
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    font-weight: 700;
    margin: 0.5rem 0 0.9rem;
    max-width: 26ch;
}

.seccion__bajada {
    color: var(--tinta-suave);
    max-width: 58ch;
    font-size: 1.02rem;
}

.seccion__encabezado { max-width: 640px; margin: 0 auto var(--esp-bloque); text-align: center; }
.seccion__encabezado .seccion__titulo { max-width: none; }
.seccion__encabezado .seccion__etiqueta { justify-content: center; }
.seccion__encabezado .seccion__bajada { margin-inline: auto; }

.seccion__etiqueta--claro { color: var(--verde-claro-suave); }
.seccion__etiqueta--claro::before { background: var(--verde-claro); }
.seccion__titulo--claro { color: var(--crema); }
.seccion__bajada--clara { color: rgba(246, 247, 245, 0.86); }

/* Párrafos de cuerpo dentro de secciones: medida de lectura cómoda */
.nosotros__texto p, .contacto__info > p { max-width: var(--ancho-lectura); }

/* ------------------------- Botones ------------------------- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    font-family: var(--fuente-texto);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    padding: 0.85rem 1.9rem;
    border: 2px solid transparent;
    border-radius: var(--r-pastilla);
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: transform var(--transicion), background-color var(--transicion),
                color var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.boton--principal {
    background: var(--verde-oscuro);
    color: var(--crema);
    box-shadow: 0 4px 14px rgba(46, 67, 26, 0.2);
}
.boton--principal:hover, .boton--principal:focus-visible {
    background: var(--verde-noche);
    color: var(--blanco);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(46, 67, 26, 0.26);
}
.boton--principal:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(46, 67, 26, 0.22); }

.boton--fantasma {
    background: rgba(246, 247, 245, 0.06);
    color: var(--crema);
    border-color: rgba(246, 247, 245, 0.6);
    backdrop-filter: blur(2px);
}
.boton--fantasma:hover, .boton--fantasma:focus-visible {
    background: rgba(246, 247, 245, 0.16);
    border-color: var(--crema);
    color: var(--blanco);
    transform: translateY(-2px);
}

.boton--linea {
    background: transparent;
    color: var(--verde-oscuro);
    border-color: var(--verde-oscuro);
}
.boton--linea:hover, .boton--linea:focus-visible {
    background: var(--verde-oscuro);
    color: var(--crema);
    transform: translateY(-2px);
}

.boton--completo { width: 100%; }
.boton--chico { min-height: 42px; padding: 0.55rem 1.25rem; font-size: 0.92rem; margin-top: 1rem; }

/* ------------------------- Ondas divisoras ------------------------- */
.onda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    line-height: 0;
    pointer-events: none;
}
.onda svg { width: 100%; height: 56px; display: block; }
.onda--crema svg path  { fill: var(--crema); }
.onda--blanco svg path { fill: var(--blanco); }
.onda--bosque svg path { fill: var(--verde-noche); }
.onda--footer {
    position: relative;
    bottom: auto;
    transform: scaleY(-1);
    margin-bottom: -1px;
}
.onda--footer svg path { fill: var(--crema); }

@media (min-width: 768px) {
    .onda svg { height: 80px; }
}

/* Enlace para saltar la navegación: invisible hasta que recibe el foco */
.salto-contenido {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 200;
    transform: translate(-50%, -130%);
    background: var(--verde-oscuro);
    color: var(--crema);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 0.7rem 1.3rem;
    border-radius: 0 0 var(--r-medio) var(--r-medio);
    transition: transform var(--transicion);
}
.salto-contenido:focus {
    transform: translate(-50%, 0);
    color: var(--crema);
    outline: 3px solid var(--verde-claro);
    outline-offset: 2px;
}

/* ------------------------- Header ------------------------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(246, 247, 245, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(103, 115, 70, 0.18);
    transition: box-shadow var(--transicion), background-color var(--transicion);
}
.header.desplazado {
    background: rgba(246, 247, 245, 0.97);
    box-shadow: var(--sombra-chica);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
}

.header__marca {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    line-height: 1;
}
.header__logo {
    display: block;
    height: 42px;
    width: auto;
    max-width: none;
    flex-shrink: 0;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    /* El PNG deja espacio transparente arriba para las pencas de nopal, así que
       las letras "SPL" quedan más abajo que el centro del recuadro: se sube un
       poco la imagen para que esas letras centren con la palabra "SOCIEPAL". */
    transform: translateY(-5px);
}
.header__nombre {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--verde-oscuro);
    letter-spacing: 0.06em;
    line-height: 1;
}

.header__hamburguesa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: 2px solid rgba(103, 115, 70, 0.4);
    border-radius: var(--r-medio);
    cursor: pointer;
    transition: border-color var(--transicion), background-color var(--transicion);
}
.header__hamburguesa:hover { border-color: var(--verde); background: rgba(103, 115, 70, 0.08); }
.header__hamburguesa span {
    display: block;
    height: 2.5px;
    width: 100%;
    border-radius: 3px;
    background: var(--verde-oscuro);
    transition: transform var(--transicion), opacity var(--transicion);
}
.header__hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.header__hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--crema);
    border-bottom: 1px solid rgba(103, 115, 70, 0.18);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.35s ease, visibility 0.35s ease;
}
.nav.abierto {
    visibility: visible;
    max-height: min(75vh, 560px);
    overflow-y: auto;
    box-shadow: var(--sombra);
}

.nav__lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 4% 1.2rem;
}
.nav__lista a {
    display: block;
    padding: 0.7rem 0.85rem;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    color: var(--tinta);
    border-radius: var(--r-chico);
    transition: background-color var(--transicion), color var(--transicion);
}
.nav__lista a:hover, .nav__lista a:focus-visible {
    background: var(--crema-oscuro);
    color: var(--verde-oscuro);
}
.nav__cta {
    background: var(--verde-oscuro);
    color: var(--crema) !important;
    text-align: center;
    border-radius: var(--r-pastilla) !important;
}
.nav__cta:hover, .nav__cta:focus-visible { background: var(--verde-noche) !important; }

@media (min-width: 900px) {
    .header__hamburguesa { display: none; }
    .nav {
        visibility: visible;
        position: static;
        max-height: none;
        overflow: visible;
        background: transparent;
        border: none;
    }
    .nav.abierto { box-shadow: none; overflow: visible; }
    .nav__lista {
        flex-direction: row;
        align-items: center;
        gap: 0.15rem;
        padding: 0;
    }
    .nav__lista a { padding: 0.5rem 0.85rem; font-size: 0.94rem; }
    .nav__cta { padding: 0.55rem 1.4rem !important; margin-left: 0.6rem; }
}

/* ------------------------- Hero (portada) ------------------------- */
.hero {
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    padding: clamp(6.5rem, 12vw, 8.5rem) 0 clamp(4.5rem, 9vw, 7rem);
}
@supports (min-height: 86dvh) {
    .hero { min-height: 86dvh; }
}

/* Velo: oscuro del lado del texto y abierto del lado de la ilustración */
.hero__velo {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg,
            rgba(42, 60, 24, 0.93) 0%,
            rgba(42, 60, 24, 0.80) 38%,
            rgba(46, 67, 26, 0.48) 100%),
        linear-gradient(0deg,
            rgba(42, 60, 24, 0.55) 0%,
            rgba(42, 60, 24, 0.00) 55%);
}

.hero__contenido {
    position: relative;
    z-index: 1;
    max-width: 50rem;
}
.hero__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(42, 60, 24, 0.42);
    border: 1px solid rgba(246, 247, 245, 0.55);
    color: var(--crema);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.76rem;
    padding: 0.42rem 1.05rem;
    border-radius: var(--r-pastilla);
    margin-bottom: 1.5rem;
    backdrop-filter: blur(2px);
}
.hero__etiqueta .nopal-deco { width: 20px; height: 20px; color: var(--verde-claro); flex-shrink: 0; }

.hero__titulo {
    font-size: clamp(2rem, 4.6vw, 3.15rem);
    font-weight: 700;
    color: var(--blanco);
    line-height: 1.08;
    margin-bottom: 1.1rem;
    text-shadow: 0 2px 18px rgba(26, 38, 14, 0.35);
}
.hero__titulo em {
    font-style: italic;
    color: var(--verde-claro-suave);
}
.hero__texto {
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    color: rgba(246, 247, 245, 0.94);
    max-width: 44ch;
    margin-bottom: 2rem;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ------------------------- Tarjetas: base común ------------------------- */
.tarjeta,
.panel,
.valor-card,
.servicio-ficha,
.cifra,
.motivos,
.preguntas .faq,
.contacto__formulario,
.contacto-cierre__datos {
    background: var(--blanco);
    border: var(--borde);
    border-radius: var(--r-grande);
    box-shadow: var(--sombra-chica);
}

/* ------------------------- Nosotros ------------------------- */
.nosotros { background: var(--crema); }

.nosotros__grid {
    display: grid;
    gap: var(--esp-bloque);
    align-items: center;
}

.nosotros__imagenes {
    position: relative;
    padding-bottom: 3rem;
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
}
.nosotros__foto {
    width: 100%;
    box-shadow: var(--sombra);
}
.nosotros__foto-mini {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 44%;
    border: 6px solid var(--crema);
    box-shadow: var(--sombra);
}

@media (min-width: 900px) {
    .nosotros__grid { grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
    .nosotros__imagenes { max-width: none; margin-inline: 0; }
    .nosotros__foto-mini { right: -3%; }
}

/* ------------------------- Servicios (portada) ------------------------- */
.servicios { background: var(--blanco); }

.servicios__grid {
    display: grid;
    gap: var(--esp-rejilla);
    grid-template-columns: 1fr;
}

.tarjeta {
    background: var(--crema);
    padding: 1.7rem 1.6rem;
    transition: transform var(--transicion), box-shadow var(--transicion),
                background-color var(--transicion), border-color var(--transicion);
}
.tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra);
    background: var(--blanco);
    border-color: rgba(103, 115, 70, 0.4);
}
.tarjeta__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    color: var(--verde-oscuro);
    background: rgba(103, 115, 70, 0.14);
    border-radius: 50%;
    margin-bottom: 1.1rem;
}
.tarjeta__icono svg { width: 32px; height: 32px; }
.tarjeta__titulo { font-size: 1.2rem; margin-bottom: 0.45rem; }
.tarjeta__texto { color: var(--tinta-suave); font-size: 0.97rem; }

@media (min-width: 768px) {
    .servicios__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .servicios__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------- Proceso (fondo oscuro) ------------------------- */
.proceso {
    background: var(--verde-noche);
    background-image: radial-gradient(circle at 12% 18%, rgba(103, 115, 70, 0.3), transparent 46%),
                      radial-gradient(circle at 88% 82%, rgba(164, 175, 147, 0.18), transparent 46%);
}

.proceso__linea {
    list-style: none;
    display: grid;
    gap: 2rem;
    position: relative;
    padding-left: 1.6rem;
}
/* Línea vertical en móvil */
.proceso__linea::before {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 1.2rem;
    bottom: 1.2rem;
    border-left: 2px dashed rgba(164, 175, 147, 0.5);
}

.proceso__paso { position: relative; }
.proceso__numero {
    position: absolute;
    left: -2.35rem;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--verde-noche);
    background: var(--verde-claro);
    border: 3px solid var(--verde-noche);
    border-radius: 50%;
}
.proceso__nombre { color: var(--crema); font-size: 1.15rem; margin: 0.2rem 0 0.35rem; padding-left: 0.6rem; }
.proceso__texto { color: rgba(246, 247, 245, 0.9); font-size: 0.95rem; padding-left: 0.6rem; }

/* Línea de tiempo HORIZONTAL en escritorio */
@media (min-width: 1024px) {
    .proceso__linea {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.4rem;
        padding-left: 0;
        padding-top: 3.6rem;
        text-align: center;
    }
    .proceso__linea::before {
        left: 10%;
        right: 10%;
        top: 1.2rem;
        bottom: auto;
        border-left: none;
        border-top: 2px dashed rgba(164, 175, 147, 0.5);
    }
    .proceso__numero {
        left: 50%;
        top: -3.6rem;
        transform: translateX(-50%);
        width: 2.6rem;
        height: 2.6rem;
    }
    .proceso__nombre, .proceso__texto { padding-left: 0; }
    .proceso__texto { max-width: 22ch; margin-inline: auto; }
}

/* ------------------------- Compromiso / cifras ------------------------- */
.compromiso { background: var(--crema); }

.cifras__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-rejilla);
    margin-bottom: var(--esp-bloque);
}
.cifra {
    text-align: center;
    padding: 1.5rem 0.9rem;
}
.cifra__numero {
    display: block;
    font-family: var(--fuente-titulos);
    font-size: clamp(1.9rem, 4.2vw, 2.7rem);
    font-weight: 700;
    color: var(--verde-oscuro);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.cifra__texto { font-size: 0.9rem; color: var(--tinta-suave); display: block; margin-top: 0.3rem; }

@media (min-width: 768px) {
    .cifras__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------- Galería ------------------------- */
.galeria {
    display: grid;
    gap: var(--esp-rejilla);
    grid-template-columns: 1fr;
}
.galeria--con-aire { margin-top: var(--esp-bloque); }
.galeria__foto {
    width: 100%;
    box-shadow: var(--sombra-chica);
    transition: transform var(--transicion), box-shadow var(--transicion);
}
.galeria__foto:hover { transform: translateY(-3px); box-shadow: var(--sombra); }

/* Recorte suave y uniforme para todas las ilustraciones */
.blob-1, .blob-2, .blob-3 { border-radius: var(--r-grande); }

@media (min-width: 768px) {
    .galeria { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------- CTA ------------------------- */
.cta {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: var(--esp-seccion) 0 calc(var(--esp-seccion) + 2rem);
    text-align: center;
}
.cta__velo {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(42, 60, 24, 0.9), rgba(62, 89, 35, 0.78)),
        linear-gradient(0deg, rgba(42, 60, 24, 0.4) 0%, rgba(42, 60, 24, 0) 60%);
}
.cta__contenido { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.cta__titulo {
    font-size: clamp(1.7rem, 3.8vw, 2.5rem);
    color: var(--blanco);
    margin-bottom: 0.9rem;
    text-shadow: 0 2px 16px rgba(26, 38, 14, 0.3);
}
.cta__texto { color: rgba(246, 247, 245, 0.96); margin-bottom: 1.8rem; font-size: 1.05rem; }

/* ------------------------- Contacto (página) ------------------------- */
.contacto { background: var(--crema); }

.contacto__grid { display: grid; gap: var(--esp-bloque); }

.contacto__datos { list-style: none; margin-top: 1.3rem; display: grid; gap: 1rem; }
.contacto__datos strong { color: var(--verde-oscuro); }

/* Nota debajo de cada dato de contacto (horario, tiempo de respuesta) */
.dato__nota {
    display: block;
    font-size: 0.88rem;
    font-weight: var(--peso-texto);
    color: var(--tinta-suave);
    margin-top: 0.15rem;
}
.footer .dato__nota { color: rgba(246, 247, 245, 0.62); }

.contacto__formulario { padding: 1.8rem 1.5rem; box-shadow: var(--sombra); }

.campo { margin-bottom: 1.1rem; }
.campo label {
    display: block;
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--verde-oscuro);
    margin-bottom: 0.35rem;
}
.campo input,
.campo select,
.campo textarea {
    width: 100%;
    font-family: var(--fuente-texto);
    font-weight: var(--peso-texto);
    font-size: 1rem;
    color: var(--tinta);
    background: var(--crema);
    border: var(--borde-fuerte);
    border-radius: var(--r-chico);
    padding: 0.72rem 0.95rem;
    transition: border-color var(--transicion), box-shadow var(--transicion), background-color var(--transicion);
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--tinta-suave); opacity: 1; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--verde-oscuro);
    background: var(--blanco);
    box-shadow: 0 0 0 4px rgba(103, 115, 70, 0.18);
}
.campo textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.campo__nota { font-size: 0.85rem; color: var(--tinta-suave); margin-top: 0.9rem; text-align: center; }

/* Campo trampa anti-spam: fuera de la vista y del recorrido con teclado */
.campo-trampa {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.alerta {
    border-radius: var(--r-medio);
    padding: 0.95rem 1.15rem;
    margin-bottom: 1.3rem;
    font-size: 0.97rem;
}
.alerta ul { margin: 0.4rem 0 0 1.2rem; }
.alerta--exito {
    background: rgba(103, 115, 70, 0.14);
    border: 2px solid var(--verde);
    color: var(--verde-oscuro);
}
.alerta--error {
    background: rgba(42, 60, 24, 0.08);
    border: 2px solid var(--verde-noche);
    color: var(--tinta);
}

@media (min-width: 900px) {
    .contacto__grid { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; align-items: start; }
    .contacto__formulario { padding: 2.3rem 2.2rem; }
}

/* ------------------------- Footer ------------------------- */
.footer {
    background: var(--verde-noche);
    color: rgba(246, 247, 245, 0.85);
}
.footer__grid {
    display: grid;
    gap: 2.4rem;
    padding: 3.5rem 0 2.5rem;
}
.footer h3 {
    color: var(--verde-claro);
    font-size: 1.05rem;
    margin-bottom: 0.8rem;
    letter-spacing: 0.05em;
}
.footer__marca {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}
.footer__logo {
    display: block;
    width: min(170px, 100%);
    height: auto;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 0.55rem;
}
.footer__lema { font-family: var(--fuente-titulos); font-style: italic; font-size: 1.1rem; color: var(--crema); }
.footer__nav ul { list-style: none; display: grid; gap: 0.45rem; }
.footer a { color: rgba(246, 247, 245, 0.85); text-decoration: none; }
.footer a:hover, .footer a:focus-visible { color: var(--verde-claro); text-decoration: underline; }
.footer__contacto p { margin-bottom: 0.35rem; }
.footer__legal {
    border-top: 1px solid rgba(246, 247, 245, 0.18);
    padding: 1.2rem 4%;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(246, 247, 245, 0.65);
}
.footer__desc { font-size: 0.92rem; color: rgba(246,247,245,.7); margin-top: 0.4rem; }

@media (min-width: 768px) {
    .footer__grid { grid-template-columns: 1.2fr 1fr 1.2fr; }
}

/* ------------------------- Animaciones de aparición ------------------------- */
/* Si el navegador no tiene JS, header.php restaura la visibilidad con <noscript>,
   y main.js tiene una red de seguridad por si el script falla a medio camino. */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    .boton:hover, .boton--linea:hover, .boton--fantasma:hover,
    .tarjeta:hover, .galeria__foto:hover { transform: none; }
}

/* =========================================================================
   Páginas interiores
   ========================================================================= */

/* Enlace activo del menú */
.nav__lista a.activo {
    background: var(--crema-oscuro);
    color: var(--verde-oscuro);
}
.nav__cta.activo { background: var(--verde-noche) !important; }

/* Hero interior de cada página */
.pagina-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: clamp(7rem, 13vw, 9rem) 0 clamp(4rem, 8vw, 6.5rem);
    display: flex;
    align-items: center;
    min-height: 62vh;
}
@supports (min-height: 62dvh) {
    .pagina-hero { min-height: 62dvh; }
}
.pagina-hero--corta { min-height: 46vh; padding: clamp(6.5rem, 12vw, 8rem) 0 clamp(3.5rem, 7vw, 5.5rem); }
@supports (min-height: 46dvh) {
    .pagina-hero--corta { min-height: 46dvh; }
}
.pagina-hero__contenido { position: relative; z-index: 1; max-width: 40rem; }
.pagina-hero__contenido h1 {
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    line-height: 1.1;
    color: var(--blanco);
    margin: 0.7rem 0 0.9rem;
    text-shadow: 0 2px 18px rgba(26, 38, 14, 0.35);
}
.pagina-hero__contenido p { color: rgba(246, 247, 245, 0.94); max-width: 52ch; }
.pagina-hero__contenido strong { color: var(--blanco); font-weight: 700; }
.pagina-hero .hero__acciones { margin-top: 1.6rem; }

.migas { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: rgba(246, 247, 245, 0.92); }
.migas a { color: var(--crema); text-decoration: underline; text-underline-offset: 3px; }
.migas a:hover, .migas a:focus-visible { color: var(--blanco); text-decoration: underline; }

/* Utilidades */
.centrado { margin-top: var(--esp-bloque); display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.seccion--blanca { background: var(--blanco); }
.bloque-acciones { margin-top: 1.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.bloque-acciones--centrado { justify-content: center; }

.lista-puntos { list-style: none; margin-top: 1.2rem; display: grid; gap: 0.6rem; }
.lista-puntos li { padding-left: 1.9rem; position: relative; }
.lista-puntos li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: var(--verde-claro);
    border: 2px solid var(--verde-oscuro);
}
.lista-info { list-style: none; margin-top: 0.9rem; display: grid; gap: 0.6rem; color: var(--tinta-suave); }
.lista-info li { padding-left: 1.9rem; position: relative; }
.lista-info li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.55em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--verde);
}
.lista-info strong { color: var(--tinta); }

/* Dos columnas */
.doble-columna { display: grid; gap: var(--esp-rejilla); }
@media (min-width: 900px) { .doble-columna { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } }

.panel { background: var(--crema); padding: 1.7rem 1.6rem; }
.panel h3 { margin-bottom: 0.5rem; font-size: 1.25rem; }
.panel p { color: var(--tinta-suave); }

/* Valores (sobre fondo oscuro) */
.valores-grid { display: grid; gap: var(--esp-rejilla); }
@media (min-width: 900px) { .valores-grid { grid-template-columns: repeat(3, 1fr); } }
.valor-card {
    background: var(--crema);
    padding: 1.7rem 1.6rem;
}
.valor-card h3 { margin: 0.9rem 0 0.5rem; font-size: 1.2rem; }
.valor-card p { color: var(--tinta-suave); font-size: 0.97rem; }
.valor-ejemplo {
    margin-top: 0.9rem;
    font-size: 0.9rem;
    background: rgba(103, 115, 70, 0.12);
    border-left: 3px solid var(--verde-claro);
    border-radius: var(--r-chico);
    padding: 0.6rem 0.85rem;
}

/* Servicios ampliados */
.servicios-lista { display: grid; gap: var(--esp-rejilla); }
.servicio-ficha {
    display: grid;
    gap: 1.3rem;
    background: var(--crema);
    padding: 1.7rem 1.6rem;
}
.servicio-ficha__media { margin: 0; }
.servicio-ficha__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-medio);
    box-shadow: var(--sombra-chica);
}
.servicio-ficha__cuerpo { min-width: 0; }
@media (min-width: 900px) {
    .servicio-ficha { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
    .servicio-ficha__media { order: 2; position: sticky; top: 96px; }
    .servicio-ficha__media img { aspect-ratio: 4 / 3; height: auto; }
}
.servicio-ficha__head { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.9rem; }
.servicio-ficha__head .tarjeta__icono { margin-bottom: 0; }
.servicio-num { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--verde-oscuro); }
.servicio-ficha h3 { font-size: 1.35rem; }
.servicio-ficha p.servicio-ficha__intro { font-weight: 700; color: var(--tinta); margin-bottom: 0.5rem; }
.servicio-ficha p { color: var(--tinta-suave); }
.servicio-ficha__cols { display: grid; gap: 1.2rem; margin-top: 1.3rem; }
.servicio-ficha__cols h4 { color: var(--verde-oscuro); margin-bottom: 0.35rem; }
.servicio-para {
    background: var(--blanco);
    border: var(--borde);
    border-radius: var(--r-medio);
    padding: 1.1rem 1.2rem;
}
.servicio-para p { color: var(--tinta-suave); }
@media (min-width: 900px) { .servicio-ficha__cols { grid-template-columns: 1.15fr 1fr; gap: 1.6rem; } }

/* Pasos para contratar (sobre fondo oscuro) */
.pasos-contratar { list-style: none; display: grid; gap: var(--esp-rejilla); max-width: 860px; margin: 0 auto; }
@media (min-width: 900px) { .pasos-contratar { grid-template-columns: repeat(3, 1fr); } }
.pasos-contratar li {
    background: rgba(246, 247, 245, 0.07);
    border: var(--borde-claro);
    border-radius: var(--r-grande);
    padding: 1.4rem 1.3rem;
    color: rgba(246, 247, 245, 0.9);
}
.pasos-contratar strong { color: var(--crema); display: block; margin-bottom: 0.3rem; }

/* Proceso ampliado (tarjetas sobre fondo oscuro) */
.proceso--pagina { padding-bottom: calc(var(--esp-seccion) + 2rem); }
.proceso-pasos { display: grid; gap: var(--esp-rejilla); }
.proceso-card {
    display: grid;
    gap: 1rem;
    background: rgba(246, 247, 245, 0.06);
    border: var(--borde-claro);
    border-radius: var(--r-grande);
    padding: 1.6rem 1.4rem;
}
.proceso-card__media { margin: 0; }
.proceso-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-medio);
    box-shadow: var(--sombra-chica);
}
@media (min-width: 900px) {
    .proceso-card { grid-template-columns: 72px minmax(0, 1fr) 260px; gap: 1.5rem; }
    .proceso-card__media { order: 3; }
    .proceso-card__media img { aspect-ratio: auto; }
    .proceso-card__body { min-width: 0; }
}
.proceso-card__num {
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.5rem;
    color: var(--verde-noche); background: var(--verde-claro);
    border-radius: 50%;
}
.proceso-card__body h3 { color: var(--crema); font-size: 1.3rem; }
.proceso-card__body p.proceso-card__intro { color: var(--verde-claro-suave); font-weight: 700; margin: 0.3rem 0 0.5rem; }
.proceso-card__body p { color: rgba(246, 247, 245, 0.86); }
.proceso-checks { list-style: none; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.proceso-checks li {
    background: rgba(164, 175, 147, 0.16);
    border: 1px solid rgba(164, 175, 147, 0.45);
    color: var(--crema);
    font-size: 0.88rem;
    border-radius: var(--r-pastilla);
    padding: 0.32rem 0.9rem;
}
.proceso-checks span { color: var(--verde-claro); }

/* Contacto: motivos, preguntas y cierre en portada */
.motivos { margin-top: 1.5rem; padding: 1.2rem 1.3rem; }
.motivos h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.motivos ul { list-style: none; display: grid; gap: 0.5rem; font-size: 0.95rem; color: var(--tinta-suave); }
.motivos li { padding-left: 1.9rem; position: relative; }
.motivos li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.55em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--verde);
}
.motivos strong { color: var(--tinta); }

.preguntas .faq { background: var(--crema); padding: 1rem 1.2rem; }
.preguntas .faq summary {
    font-weight: 700;
    color: var(--verde-oscuro);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.preguntas .faq summary::-webkit-details-marker { display: none; }
.preguntas .faq summary::after {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    color: var(--verde);
    flex-shrink: 0;
}
.preguntas .faq[open] summary::after { content: "–"; }
.preguntas .faq p { margin-top: 0.6rem; color: var(--tinta-suave); }

.contacto-cierre { background: var(--crema); }
.contacto-cierre__grid { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 900px) { .contacto-cierre__grid { grid-template-columns: 1.15fr 1fr; gap: 3rem; } }
.contacto-cierre__datos { background: var(--blanco); padding: 2.4rem 2.2rem; display: grid; gap: 1.8rem; }

.dato-contacto-lista { list-style: none; display: grid; gap: 1.6rem; }
.dato-contacto { display: flex; align-items: flex-start; gap: 1.2rem; }
.dato-contacto:only-child { align-items: center; justify-content: center; text-align: left; }
.dato-contacto__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    color: var(--verde-oscuro);
    background: rgba(103, 115, 70, 0.14);
    border-radius: 50%;
}
.dato-contacto__icono svg { width: 30px; height: 30px; }
.dato-contacto__cuerpo { display: flex; flex-direction: column; padding-top: 0.2rem; }
.dato-contacto__label {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.86rem;
    color: var(--tinta-suave);
    margin-bottom: 0.2rem;
}
.dato-contacto__cuerpo .dato__nota { font-size: 0.95rem; margin-top: 0.2rem; }
.dato-contacto__valor {
    font-weight: 700;
    font-size: 1.45rem;
    color: var(--verde-oscuro);
    text-decoration: none;
}
.dato-contacto__valor:hover, .dato-contacto__valor:focus-visible { color: var(--verde-noche); text-decoration: underline; }
.contacto-cierre__datos .boton { margin-top: 0; }