/* ==========================================================================
   SERVICIOS BECERRA — Hoja de estilos del sitio público
   --------------------------------------------------------------------------
   Orden del archivo:
     1. Variables de diseño (colores, tipografía, medidas)
     2. Base y utilidades
     3. Botones
     4. Cabecera y menú
     5. Portada (hero)
     6. Barra de confianza
     7. Tarjetas de servicio
     8. Tarjetas de flota
     9. Cómo trabajamos
    10. Llamado final a cotizar
    12. Pie de página
    13. Botón flotante de WhatsApp
    14. Pantallas grandes (tablet y escritorio)
   --------------------------------------------------------------------------
   Está escrito "primero para celular": los estilos base son los del teléfono
   y al final se agregan los cambios para pantallas más grandes.
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES DE DISEÑO
   Si se cambia un color aquí, cambia en todo el sitio.
   ========================================================================== */

:root {
    /* Colores de marca */
    --color-primario:        #1B2A4A;   /* azul marino */
    --color-primario-oscuro: #12203A;
    --color-acento:          #F5A623;   /* ámbar: botones de acción */
    --color-acento-hover:    #DD8F0F;
    --color-acento-texto:    #8A5A00;   /* ámbar oscurecido: para textos pequeños sobre fondo claro (contraste AA) */
    --color-whatsapp:        #25D366;

    /* Fondos y textos */
    --fondo:            #F7F8FA;
    --superficie:       #FFFFFF;
    --texto:            #2D2D2D;
    --texto-secundario: #5A6472;
    --texto-claro:      #E8ECF3;
    --borde:            #E3E7ED;

    /* Estados */
    --exito:     #1F8A4C;
    --error:     #C0392B;
    --pendiente: #B7791F;

    /* Formas */
    --radio-tarjeta: 10px;
    --radio-boton:   8px;
    --radio-chip:    999px;
    --sombra:        0 2px 12px rgba(27, 42, 74, .08);
    --sombra-fuerte: 0 8px 24px rgba(27, 42, 74, .16);

    /* Medidas */
    --contenedor:      1200px;
    --altura-cabecera: 64px;
    --espacio-seccion: 3.25rem;

    /* Tipografía */
    --fuente: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}


/* ==========================================================================
   2. BASE Y UTILIDADES
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding-top: var(--altura-cabecera); /* deja espacio para la barra fija */
    font-family: var(--fuente);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--texto);
    background-color: var(--fondo);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* nunca debe haber desplazamiento lateral */
}

/* Bloquea el desplazamiento del fondo cuando el menú móvil está abierto */
body.menu-abierto { overflow: hidden; }

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

a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primario);
    margin: 0 0 .75rem;
    text-wrap: balance;
}

h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1rem; }

/* Contorno visible al navegar con teclado (accesibilidad) */
:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Enlace "saltar al contenido": solo se ve al llegar con el teclado */
.saltar-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--color-acento);
    color: var(--color-primario-oscuro);
    padding: .75rem 1.25rem;
    font-weight: 700;
    border-radius: 0 0 var(--radio-boton) 0;
}
.saltar-contenido:focus { left: 0; }

.contenedor {
    width: 100%;
    max-width: var(--contenedor);
    margin: 0 auto;
    padding: 0 1.15rem;
}

.seccion { padding: var(--espacio-seccion) 0; }
.seccion-blanca  { background-color: var(--superficie); }
.seccion-clara   { background-color: var(--fondo); }
.seccion-oscura  { background-color: var(--color-primario); color: var(--texto-claro); }
.seccion-oscura h2 { color: #FFFFFF; }
.seccion-oscura .encabezado-seccion p { color: var(--texto-claro); }
.seccion-oscura .etiqueta { color: var(--color-acento); }

.encabezado-seccion {
    max-width: 46rem;
    margin: 0 auto 2rem;
    text-align: center;
}
.encabezado-seccion p {
    color: var(--texto-secundario);
    font-size: 1.05rem;
    margin: 0;
}

/* Palabra corta sobre el título, tipo etiqueta */
.etiqueta {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-acento-texto);
    margin-bottom: .5rem;
}

/* Íconos dibujados en código */
.icono    { width: 24px; height: 24px; flex-shrink: 0; }
.icono-sm { width: 18px; height: 18px; }

/* Etiquetas de capacidad (16 m³, hasta 2.600 kg, etc.) */
.chip {
    display: inline-block;
    background: #EDF1F7;
    color: var(--color-primario);
    border-radius: var(--radio-chip);
    padding: .3rem .75rem;
    font-size: .82rem;
    font-weight: 700;
    margin: 0 .35rem .35rem 0;
}


/* ==========================================================================
   3. BOTONES
   Alto mínimo 44 px para que se puedan tocar cómodamente en el celular.
   ========================================================================== */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .7rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--radio-boton);
    font-family: var(--fuente);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .1s ease;
}
.boton:hover { text-decoration: none; }
.boton:active { transform: translateY(1px); }

/* Botón principal: ámbar con texto azul oscuro (buen contraste) */
.boton-primario {
    background-color: var(--color-acento);
    color: var(--color-primario-oscuro);
}
.boton-primario:hover { background-color: var(--color-acento-hover); }

/* Botón secundario: solo contorno */
.boton-secundario {
    background-color: transparent;
    border-color: var(--color-primario);
    color: var(--color-primario);
}
.boton-secundario:hover {
    background-color: var(--color-primario);
    color: #FFFFFF;
}

/* Variante del secundario para fondos oscuros (portada) */
.boton-secundario-claro {
    background-color: transparent;
    border-color: #FFFFFF;
    color: #FFFFFF;
}
.boton-secundario-claro:hover {
    background-color: #FFFFFF;
    color: var(--color-primario);
}

.boton-ancho { width: 100%; }


/* ==========================================================================
   4. CABECERA Y MENÚ
   ========================================================================== */

.cabecera {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--altura-cabecera);
    background-color: var(--color-primario);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

.cabecera-interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.logo { display: flex; align-items: center; }
/* El logo va sobre una placa blanca porque sus colores son verde y azul,
   y la barra superior es azul marino. Así siempre se lee bien. */
.logo img {
    height: 46px;
    width: auto;
    background-color: #FFFFFF;
    border-radius: var(--radio-boton);
}

/* --- Botón hamburguesa (solo celular) --- */
.boton-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.boton-menu-barra {
    display: block;
    height: 2px;
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
/* Se transforma en una "X" cuando el menú está abierto */
.boton-menu[aria-expanded="true"] .boton-menu-barra:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.boton-menu[aria-expanded="true"] .boton-menu-barra:nth-child(2) { opacity: 0; }
.boton-menu[aria-expanded="true"] .boton-menu-barra:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Menú desplegable en celular --- */
.navegacion {
    position: fixed;
    top: var(--altura-cabecera);
    left: 0; right: 0;
    max-height: calc(100vh - var(--altura-cabecera));
    overflow-y: auto;
    background-color: var(--color-primario-oscuro);
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: none;
}
.navegacion.abierto { display: block; }

.nav-lista {
    list-style: none;
    margin: 0;
    padding: .5rem 1.15rem 1.5rem;
}
.nav-lista li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.nav-lista li:last-child { border-bottom: 0; }

.nav-enlace {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    padding: .5rem 0;
    color: #FFFFFF;
    font-weight: 500;
}
.nav-enlace:hover { color: var(--color-acento); text-decoration: none; }
.nav-enlace.activo { color: var(--color-acento); font-weight: 700; }

.nav-telefono { font-weight: 700; }

.nav-cotizar { margin-top: 1rem; width: 100%; }


/* ==========================================================================
   5. PORTADA (HERO)
   ========================================================================== */

.hero {
    position: relative;
    min-height: 34rem;
    display: flex;
    align-items: center;
    padding: 3.5rem 0;
    background-color: var(--color-primario-oscuro);
    overflow: hidden;
}

.hero-fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Capa oscura sobre la foto para que el texto blanco se lea siempre */
.hero-capa {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 32, 58, .92) 0%, rgba(18, 32, 58, .78) 55%, rgba(18, 32, 58, .9) 100%);
}

.hero-contenido {
    position: relative;
    z-index: 2;
    max-width: 40rem;
    color: #FFFFFF;
}
.hero-contenido h1 { color: #FFFFFF; margin-bottom: 1rem; }

.hero-bajada {
    font-size: 1.1rem;
    color: var(--texto-claro);
    margin-bottom: 1.75rem;
}

.hero-botones {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.hero-nota {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--color-acento);
    margin: 0;
}


/* ==========================================================================
   6. BARRA DE CONFIANZA
   ========================================================================== */

.confianza { background-color: var(--superficie); border-bottom: 1px solid var(--borde); }

.confianza-grilla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1rem;
    padding: 1.75rem 0;
}

.confianza-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--color-primario);
}
.confianza-item .icono { color: var(--color-primario); width: 28px; height: 28px; }


/* ==========================================================================
   7. TARJETAS DE SERVICIO
   ========================================================================== */

.grilla-servicios {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.tarjeta-servicio {
    display: block;
    background-color: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra);
    padding: 1.5rem;
    color: var(--texto);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tarjeta-servicio:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-fuerte);
    text-decoration: none;
}

.tarjeta-servicio-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radio-boton);
    background-color: #EDF1F7;
    color: var(--color-primario);
    margin-bottom: 1rem;
}

.tarjeta-servicio h3 { margin-bottom: .4rem; }
.tarjeta-servicio p { color: var(--texto-secundario); margin-bottom: .75rem; font-size: .95rem; }

.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    color: var(--color-acento-texto);
}


/* ==========================================================================
   8. TARJETAS DE FLOTA
   ========================================================================== */

.grilla-flota {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.tarjeta-vehiculo {
    display: flex;
    flex-direction: column;
    background-color: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.tarjeta-vehiculo-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: #E9EDF3;
}

.tarjeta-vehiculo-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem;
}
.tarjeta-vehiculo-cuerpo h3 { margin-bottom: .6rem; }

.tarjeta-vehiculo-uso {
    color: var(--texto-secundario);
    font-size: .95rem;
    flex: 1;
    margin-bottom: 1rem;
}


/* ==========================================================================
   9. CÓMO TRABAJAMOS (3 pasos ordenados)
   ========================================================================== */

.grilla-pasos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    counter-reset: paso;
}

.paso {
    position: relative;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radio-tarjeta);
    padding: 1.5rem 1.25rem 1.25rem;
}

.paso-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--color-acento);
    color: var(--color-primario-oscuro);
    font-weight: 800;
    margin-bottom: .75rem;
}

.paso h3 { color: #FFFFFF; margin-bottom: .35rem; }
.paso p  { color: var(--texto-claro); font-size: .95rem; margin: 0; }


/* ==========================================================================
   11. LLAMADO FINAL A COTIZAR
   ========================================================================== */

.cta-final {
    background-color: var(--color-acento);
    color: var(--color-primario-oscuro);
    padding: var(--espacio-seccion) 0;
    text-align: center;
}
.cta-final h2 { color: var(--color-primario-oscuro); }
.cta-final p {
    max-width: 40rem;
    margin: 0 auto 1.75rem;
    font-size: 1.05rem;
    font-weight: 500;
}

.cta-final-botones {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 22rem;
    margin: 0 auto;
}

/* Botón oscuro sobre el fondo ámbar */
.boton-oscuro {
    background-color: var(--color-primario);
    color: #FFFFFF;
}
.boton-oscuro:hover { background-color: var(--color-primario-oscuro); }

/* Botón de contorno oscuro sobre el fondo ámbar */
.boton-contorno-oscuro {
    background-color: transparent;
    border-color: var(--color-primario-oscuro);
    color: var(--color-primario-oscuro);
}
.boton-contorno-oscuro:hover {
    background-color: var(--color-primario-oscuro);
    color: #FFFFFF;
}


/* ==========================================================================
   12. PIE DE PÁGINA
   ========================================================================== */

.pie {
    background-color: var(--color-primario-oscuro);
    color: var(--texto-claro);
    padding-top: 2.5rem;
    /* Espacio extra abajo para que el botón de WhatsApp no tape nada */
    padding-bottom: 5.5rem;
}

.pie-grilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.pie-logo {
    height: 58px;
    width: auto;
    background-color: #FFFFFF;
    border-radius: var(--radio-boton);
    margin-bottom: 1rem;
}

.pie-titulo {
    font-size: 1rem;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .9rem;
}

.pie-texto { color: var(--texto-claro); font-size: .95rem; }
.pie-lema  { color: var(--color-acento); font-weight: 700; margin: 0; }

.pie-lista { list-style: none; margin: 0; padding: 0; }
.pie-lista li { margin-bottom: .25rem; }

.pie-enlace,
.pie-horario {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    color: var(--texto-claro);
    font-size: .95rem;
}
.pie-enlace:hover { color: var(--color-acento); text-decoration: none; }
.pie-horario { color: #B9C2D0; }

.pie-redes { display: flex; gap: .75rem; margin-top: 1rem; }
.pie-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--radio-boton);
    color: #FFFFFF;
}
.pie-red:hover { background-color: var(--color-acento); color: var(--color-primario-oscuro); border-color: var(--color-acento); }

.pie-legal {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    font-size: .85rem;
    color: #B9C2D0;
}
.pie-legal p { margin: .25rem 0; }
.pie-enlace-legal { color: #B9C2D0; text-decoration: underline; }
.pie-enlace-legal:hover { color: var(--color-acento); }


/* ==========================================================================
   13. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */

.boton-whatsapp {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-whatsapp);
    color: #FFFFFF;
    box-shadow: var(--sombra-fuerte);
    transition: transform .2s ease;
}
.boton-whatsapp:hover { transform: scale(1.06); text-decoration: none; }
.icono-whatsapp { width: 30px; height: 30px; }

/* El texto "WhatsApp" solo se muestra en escritorio */
.boton-whatsapp-texto {
    display: none;
    font-weight: 700;
}


/* ==========================================================================
   14. PANTALLAS GRANDES
   ========================================================================== */

/* ---------- Tablet: desde 641 px ---------- */
@media (min-width: 641px) {

    :root { --espacio-seccion: 4rem; }

    .confianza-grilla   { grid-template-columns: repeat(4, 1fr); }
    .grilla-servicios   { grid-template-columns: repeat(2, 1fr); }
    .grilla-flota       { grid-template-columns: repeat(2, 1fr); }
    .grilla-pasos       { grid-template-columns: repeat(3, 1fr); }
    .pie-grilla         { grid-template-columns: 1fr 1fr; }

    .hero-botones {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .cta-final-botones {
        flex-direction: row;
        justify-content: center;
        max-width: none;
    }
    .boton-ancho { width: auto; }
}

/* ---------- Escritorio: desde 1024 px ---------- */
@media (min-width: 1024px) {

    :root {
        --altura-cabecera: 72px;
        --espacio-seccion: 5rem;
    }

    /* El menú deja de ser desplegable y se muestra en línea */
    .boton-menu { display: none; }

    .navegacion {
        position: static;
        display: block;
        max-height: none;
        overflow: visible;
        background: transparent;
        border: 0;
    }

    .nav-lista {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 0;
    }
    .nav-lista li { border: 0; }

    .nav-enlace {
        min-height: 44px;
        padding: 0;
        font-size: .97rem;
    }
    .nav-enlace.activo { border-bottom: 2px solid var(--color-acento); }

    .nav-cotizar { margin-top: 0; width: auto; padding: .6rem 1.3rem; }

    .logo img { height: 54px; }

    .hero { min-height: 38rem; }
    .hero-bajada { font-size: 1.2rem; }

    .grilla-servicios   { grid-template-columns: repeat(4, 1fr); }
    .grilla-flota       { grid-template-columns: repeat(3, 1fr); }
    .pie-grilla         { grid-template-columns: 2fr 1.2fr 1fr; gap: 3rem; }

    .pie-legal-interior {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* En escritorio el botón de WhatsApp muestra el texto */
    .boton-whatsapp {
        width: auto;
        height: 56px;
        padding: 0 1.35rem;
        border-radius: var(--radio-chip);
        right: 1.5rem;
        bottom: 1.5rem;
    }
    .boton-whatsapp-texto { display: inline; }
}

/* Menos animaciones para quien lo pide en la configuración de su equipo */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* ==========================================================================
   15. PÁGINAS INTERIORES (Servicios, Flota y Cobertura)
   Estos estilos se agregan en la fase 2. Igual que el resto del archivo,
   están escritos primero para celular y al final se ajustan para pantallas
   más grandes.
   ========================================================================== */

/* --- Franja azul con el título de la página --- */
.encabezado-pagina {
    background-color: var(--color-primario);
    color: var(--texto-claro);
    padding: 2.5rem 0;
}
.encabezado-pagina h1 { color: #FFFFFF; }
.encabezado-pagina .etiqueta { color: var(--color-acento); }
.encabezado-pagina p {
    max-width: 44rem;
    color: var(--texto-claro);
    font-size: 1.05rem;
    margin: 0;
}

/* --- Bloques de la página Servicios (foto + texto) --- */
.bloque-servicio {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
    padding: var(--espacio-seccion) 0;
    border-bottom: 1px solid var(--borde);
}
.bloque-servicio:last-of-type { border-bottom: 0; }

/* Deja espacio arriba al llegar desde un enlace con # (la barra fija no tapa el título) */
.bloque-servicio { scroll-margin-top: calc(var(--altura-cabecera) + 1rem); }

.bloque-foto, .ficha-foto { display: block; }
.ficha-foto { height: 100%; }

.bloque-servicio-foto {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra);
    background-color: #E9EDF3;
}

.bloque-servicio-texto h2 { margin-bottom: .75rem; }
.bloque-servicio-texto > p { color: var(--texto-secundario); }

/* --- Lista con visto bueno --- */
.lista-beneficios {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.lista-beneficios li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: .55rem;
    color: var(--texto);
}
.lista-beneficios li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background-color: var(--exito);
    /* El "visto bueno" se dibuja con un fondo, no es una imagen */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E");
    background-size: .8rem .8rem;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Fichas grandes de la página Flota --- */
.lista-fichas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.ficha-vehiculo {
    display: grid;
    grid-template-columns: 1fr;
    background-color: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.ficha-vehiculo-foto {
    width: 100%;
    height: 100%;
    min-height: 200px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: #E9EDF3;
}

.ficha-vehiculo-cuerpo { padding: 1.5rem; }
.ficha-vehiculo-cuerpo h2 { font-size: 1.3rem; margin-bottom: .6rem; }
.ficha-vehiculo-uso { color: var(--texto-secundario); margin-bottom: 1.25rem; }

/* --- Caja destacada (avisos y notas) --- */
.nota-destacada {
    background-color: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--color-acento);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra);
    padding: 1.5rem;
    margin-top: 2rem;
    text-align: center;
}
.nota-destacada h2 { font-size: 1.25rem; }
.nota-destacada p { color: var(--texto-secundario); }

/* --- Página Cobertura --- */
.cobertura-grilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

.mapa-chile {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    display: block;
}
.mapa-linea   { stroke: var(--color-primario); stroke-width: 3; stroke-linecap: round; }
.mapa-punto   { fill: var(--color-primario); }
.mapa-destaca { fill: var(--color-acento); stroke: var(--color-primario); stroke-width: 2.5; }
.mapa-texto   { fill: var(--texto); font-family: var(--fuente); font-size: 13px; font-weight: 500; }
.mapa-texto-destacado { fill: var(--color-primario); font-weight: 800; }
.mapa-nota    { fill: var(--texto-secundario); font-family: var(--fuente); font-size: 11px; }

.grilla-cobertura-tarjetas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
}
.tarjeta-cobertura {
    background-color: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra);
    padding: 1.5rem;
}
.tarjeta-cobertura .icono { color: var(--color-primario); margin-bottom: .75rem; }
.tarjeta-cobertura h3 { margin-bottom: .35rem; }
.tarjeta-cobertura p { color: var(--texto-secundario); font-size: .95rem; margin: 0; }


/* ---------- Páginas interiores: tablet ---------- */
@media (min-width: 641px) {

    .encabezado-pagina { padding: 3.25rem 0; }

    .grilla-cobertura-tarjetas { grid-template-columns: repeat(3, 1fr); }

    .ficha-vehiculo { grid-template-columns: 1fr 1.25fr; }
    .ficha-vehiculo-foto { aspect-ratio: auto; }
}

/* ---------- Páginas interiores: escritorio ---------- */
@media (min-width: 1024px) {

    .bloque-servicio {
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;
    }
    /* Los bloques pares invierten el orden: la foto queda a la derecha */
    .bloque-servicio:nth-child(even) .bloque-foto { order: 2; }

    .cobertura-grilla { grid-template-columns: 320px 1fr; gap: 3.5rem; }

    .ficha-vehiculo { grid-template-columns: 1fr 1.6fr; }
    .ficha-vehiculo-cuerpo { padding: 2rem; }

    .nota-destacada { padding: 2rem; }
}


/* ==========================================================================
   16. TARJETA DE VEHÍCULO SIN FOTOGRAFÍA
   --------------------------------------------------------------------------
   Se usa mientras un vehículo todavía no tiene foto. Cuando llegue la foto,
   basta con quitar la marca 'sin_foto' en includes/config.php y subir el
   archivo de imagen con el nombre correspondiente.
   ========================================================================== */

.vehiculo-sin-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    aspect-ratio: 4 / 3;
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 1rem;
    text-align: center;
    background-color: #EDF1F7;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(27, 42, 74, .035) 0 12px,
        transparent 12px 24px
    );
    color: var(--color-primario);
}
.vehiculo-sin-foto .icono { width: 46px; height: 46px; opacity: .55; }
.vehiculo-sin-foto span {
    font-size: .85rem;
    font-weight: 600;
    color: var(--texto-secundario);
}


/* ==========================================================================
   17. FORMULARIO DE COTIZACIÓN Y PÁGINAS DE TEXTO
   ========================================================================== */

.cotizar-grilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.tarjeta-formulario,
.panel-contacto {
    background-color: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra);
    padding: 1.5rem;
}

/* --- Avisos (información y error) --- */
.aviso {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    border-radius: var(--radio-boton);
    padding: .9rem 1rem;
    margin-bottom: 1.5rem;
    font-size: .95rem;
    line-height: 1.5;
}
.aviso .icono { margin-top: .15rem; }

.aviso-info {
    background-color: #E7F6ED;
    border: 1px solid #B7E2C7;
    color: #17603A;
}
.aviso-error {
    background-color: #FBEAE8;
    border: 1px solid #F0BFB9;
    color: #8E2A1F;
}

/* --- Campos --- */
.campo { margin-bottom: 1.15rem; }

.campo label {
    display: block;
    font-weight: 700;
    font-size: .95rem;
    color: var(--color-primario);
    margin-bottom: .35rem;
}
.obligatorio { color: var(--error); }
.opcional {
    font-weight: 500;
    color: var(--texto-secundario);
    font-size: .88rem;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    min-height: 46px;
    padding: .6rem .75rem;
    font-family: var(--fuente);
    font-size: 1rem;             /* 1rem evita que el celular haga zoom al escribir */
    color: var(--texto);
    background-color: var(--superficie);
    border: 1px solid #C7CEDA;
    border-radius: var(--radio-boton);
}
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.5; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--color-primario); }

/* Campo marcado como incorrecto */
.campo input.con-error,
.campo select.con-error,
.campo textarea.con-error { border-color: var(--error); background-color: #FEF7F6; }

.ayuda-campo {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .85rem;
    color: var(--texto-secundario);
    margin: .35rem 0 0;
}
.contador { white-space: nowrap; }
.contador.contador-lleno { color: var(--error); font-weight: 700; }

.mensaje-error {
    color: var(--error);
    font-size: .88rem;
    font-weight: 600;
    margin: .35rem 0 0;
}

/* El campo trampa contra robots: invisible para las personas */
.campo-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.nota-privacidad {
    font-size: .85rem;
    color: var(--texto-secundario);
    margin: 1rem 0 0;
    text-align: center;
}

/* --- Panel de contacto directo --- */
.panel-contacto h2 { font-size: 1.25rem; }
.panel-contacto-intro { color: var(--texto-secundario); font-size: .95rem; }

.boton-whatsapp-solido {
    background-color: var(--color-whatsapp);
    color: #06331A;
}
.boton-whatsapp-solido:hover { background-color: #1DB955; }

.lista-contacto {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}
.lista-contacto li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 0;
    border-top: 1px solid var(--borde);
}
.lista-contacto .icono { color: var(--color-primario); margin-top: .15rem; }
.lista-contacto a { font-weight: 600; }

.lista-contacto-etiqueta {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-secundario);
}

.panel-contacto-redes { margin-top: 1.25rem; }
.pie-red-claro { border-color: #C7CEDA; color: var(--color-primario); }

/* --- Página de confirmación y error --- */
.tarjeta-confirmacion {
    max-width: 34rem;
    margin: 0 auto;
    background-color: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra);
    padding: 2rem 1.5rem;
    text-align: center;
}
.tarjeta-confirmacion p { color: var(--texto-secundario); margin-bottom: 1.75rem; }

.icono-confirmacion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #E7F6ED;
    color: var(--exito);
    margin-bottom: 1rem;
}
.icono-confirmacion svg { width: 34px; height: 34px; }

/* --- Páginas de solo texto (privacidad) --- */
.contenido-texto { max-width: 46rem; }
.contenido-texto h2 { font-size: 1.3rem; margin-top: 2rem; }
.contenido-texto h2:first-child { margin-top: 0; }
.contenido-texto p { color: var(--texto-secundario); }
.contenido-texto a { font-weight: 600; text-decoration: underline; }


/* ---------- Formulario: tablet ---------- */
@media (min-width: 641px) {
    .campos-en-fila {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1rem;
    }
    .tarjeta-formulario,
    .panel-contacto { padding: 2rem; }
    .tarjeta-confirmacion { padding: 3rem 2.5rem; }
}

/* ---------- Formulario: escritorio ---------- */
@media (min-width: 1024px) {
    .cotizar-grilla {
        grid-template-columns: 1.55fr 1fr;
        gap: 2.5rem;
    }
    /* El panel de contacto acompaña al formulario al desplazarse */
    .panel-contacto { position: sticky; top: calc(var(--altura-cabecera) + 1.5rem); }
}


/* ==========================================================================
   18. PANEL DE CONTACTO SIN FORMULARIO
   --------------------------------------------------------------------------
   Cuando MODO_COTIZACION vale 'pausado', el contacto directo ocupa todo el
   ancho y queda centrado.
   ========================================================================== */

.panel-contacto-solo {
    max-width: 34rem;
    margin: 0 auto;
}
.panel-contacto-solo h2 { font-size: 1.4rem; }

.boton-separado { margin-top: .75rem; }

@media (min-width: 1024px) {
    /* Sin formulario al lado, el panel no necesita quedarse fijo al desplazar */
    .panel-contacto-solo { position: static; }
}