/* ================================================================
   STYLE.CSS — Constructora Almonacid
   Base del proyecto: variables, reset, tipografía y utilidades.
   Todos los demás archivos CSS heredan las variables de aquí.
   ================================================================

   ÍNDICE
   1. Variables globales (colores, tipografía, espaciados, transiciones)
   2. Reset y base
   3. Tipografía
   4. Clases de sección (.seccion-oscura / .seccion-media / .seccion-gris)
   5. Títulos de sección (eyebrow, título, subtítulo)
   6. Botones globales (.btn-ca / .btn-ca-outline)
   7. Scroll offset para navbar fija
   ================================================================ */


/* ----------------------------------------------------------------
   1. VARIABLES GLOBALES
   Cambiar un valor acá lo actualiza en todo el sitio.
   ---------------------------------------------------------------- */
:root {

    /* — Colores principales — */
    --color-fondo:       #0a0a0a;   /* fondo de páginas */
    --color-seccion:     #111111;   /* secciones alternas oscuras */
    --color-seccion-alt: #161616;   /* secciones medias (obras) */
    --color-gris-sec:    #1a1a1a;   /* fondo sección formas de pago */

    /* — Texto — */
    --color-texto:       #ffffff;   /* texto principal */
    --color-texto-suave: #cccccc;   /* descripciones, datos secundarios */
    --color-eyebrow:     #999999;   /* texto pequeño sobre los títulos */

    /* — Bordes y separadores — */
    /* El gris SOLO se usa en bordes, líneas divisoras y fondos de sección.
       Nunca como color de texto. */
    --color-borde:       #2a2a2a;   /* bordes de cards y separadores */
    --color-borde-suave: #1f1f1f;   /* bordes muy sutiles */

    /* — Tipografía — */
    --fuente-titulo:  'Bebas Neue', sans-serif;   /* títulos, nombres de obras */
    --fuente-cuerpo:  'Raleway', sans-serif;       /* párrafos, datos, UI */

    /* — Tamaños de fuente (mobile first → se sobreescriben en breakpoints) — */
    --fs-eyebrow:    0.75rem;    /* 12px */
    --fs-titulo-sec: 1.5rem;       /* 32px en mobile */
    --fs-subtitulo:  0.95rem;    /* 15px */
    --fs-cuerpo:     0.9rem;     /* 14px */
    --fs-datos:      0.82rem;    /* 13px */

    /* — Espaciados de sección — */
    --padding-sec-y: 4rem;       /* padding vertical de cada sección en mobile */

    /* — Border radius — */
    --radio-card:    16px;       /* cards de proyectos y obras */
    --radio-btn:     8px;        /* botones */
    --radio-badge:   50px;       /* link activo en navbar */

    /* — Navbar — */
    --navbar-h:      70px;       /* altura de la barra en mobile */
    --navbar-h-desk: 64px;       /* altura en desktop */

    /* — Transiciones globales — */
    --trans-rapida:  0.2s ease;
    --trans-normal:  0.35s ease;
    --trans-suave:   0.5s ease;
}


/* ----------------------------------------------------------------
   2. RESET Y BASE
   Parte de lo que enseña el libro: resetear márgenes y paddings,
   definir box-sizing global y evitar comportamientos inesperados.
   ---------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;             /* base para los rem */
    scroll-behavior: smooth;     /* scroll suave al hacer clic en enlaces internos */
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-cuerpo);
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;   /* texto más nítido en pantallas retina */
    overflow-x: hidden;                    /* evita scroll horizontal accidental */
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


/* ----------------------------------------------------------------
   3. TIPOGRAFÍA
   Bebas Neue → títulos grandes, nombres de obras, modelos.
   Raleway → todo el resto: párrafos, botones, datos técnicos.
   ---------------------------------------------------------------- */

/* Títulos jerárquicos */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulo);
    font-weight: 400;            /* Bebas Neue no tiene bold real, el normal ya es pesado */
    line-height: 1.1;
    color: var(--color-texto);
    letter-spacing: 0.03em;
}

/* Párrafos y texto de cuerpo */
p {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-cuerpo);
    color: var(--color-texto-suave);
    line-height: 1.65;
}

/* Tamaños responsivos de tipografía — desktop */
@media (min-width: 992px) {
    :root {
        --fs-titulo-sec: 2rem;    /* 42px en desktop */
        --fs-subtitulo:  1rem;
        --fs-cuerpo:     0.95rem;
        --navbar-h:      var(--navbar-h-desk);
        --padding-sec-y: 6rem;
    }
}


/* ----------------------------------------------------------------
   4. CLASES DE SECCIÓN
   Cada sección del index usa una de estas tres clases para
   diferenciar visualmente los bloques de contenido.
   ---------------------------------------------------------------- */

/* Secciones sobre fondo muy oscuro (proyectos, por qué elegirnos) */
.seccion-oscura {
    background-color: var(--color-seccion);
    padding: var(--padding-sec-y) 0;
}

/* Secciones con fondo levemente más claro (obras destacadas) */
.seccion-media {
    background-color: var(--color-seccion-alt);
    padding: var(--padding-sec-y) 0;
    border-top: 1px solid var(--color-borde);
    border-bottom: 1px solid var(--color-borde);
}

/* Sección de formas de pago — gris más marcado para separar visualmente */
.seccion-gris {
    background-color: var(--color-gris-sec);
    padding: var(--padding-sec-y) 0;
    border-top: 1px solid var(--color-borde);
}


/* ----------------------------------------------------------------
   5. TÍTULOS DE SECCIÓN
   Estructura visual: eyebrow (texto pequeño) → título → subtítulo
   ---------------------------------------------------------------- */

/* Texto chico encima del título principal (ej: "Lo que más eligen") */
.seccion-eyebrow {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-eyebrow);
    margin-bottom: 0.4rem;
}

/* Título principal de cada sección */
.seccion-titulo {
    font-family: var(--fuente-titulo);
    font-size: var(--fs-titulo-sec);
    color: var(--color-texto);
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    line-height: 1.05;
}

/* Subtítulo descriptivo bajo el título */
.seccion-subtitulo {
    font-family: var(--fuente-cuerpo);
    font-size: var(--fs-subtitulo);
    color: var(--color-texto-suave);
    font-weight: 300;
    margin-bottom: 0;
}


/* ----------------------------------------------------------------
   6. BOTONES GLOBALES
   Dos estilos: relleno blanco (.btn-ca) y contorno (.btn-ca-outline)
   Se usan en cards y al final de secciones.
   ---------------------------------------------------------------- */

/* Botón primario — fondo blanco, texto negro */
.btn-ca {
    display: inline-block;
    font-family: var(--fuente-cuerpo);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #000000;
    padding: 0.55rem 1.4rem;
    border-radius: var(--radio-btn);
    border: 2px solid #ffffff;
    transition: background-color var(--trans-normal),
                color var(--trans-normal),
                transform var(--trans-rapida);
    cursor: pointer;
}

.btn-ca:hover,
.btn-ca:focus {
    background-color: transparent;
    color: #ffffff;
    transform: translateY(-2px);
    outline: none;
}

/* Botón secundario — solo contorno blanco */
.btn-ca-outline {
    display: inline-block;
    font-family: var(--fuente-cuerpo);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: transparent;
    padding: 0.65rem 2rem;
    border-radius: var(--radio-btn);
    border: 2px solid #ffffff;
    transition: background-color var(--trans-normal),
                color var(--trans-normal),
                transform var(--trans-rapida);
}

.btn-ca-outline:hover,
.btn-ca-outline:focus {
    background-color: #ffffff;
    color: #252423;
    transform: translateY(-2px);
    outline: none;
}


/* ----------------------------------------------------------------
   7. SCROLL OFFSET PARA NAVBAR FIJA
   Sin esta regla, al hacer clic en un link del menú la sección
   queda tapada por la navbar. scroll-padding-top reserva ese espacio.
   Se aplica al elemento raíz para que afecte todos los anchors.
   ---------------------------------------------------------------- */
html {
    scroll-padding-top: var(--navbar-h);
}


/* ----------------------------------------------------------------
   CARDS DE ÍCONOS — sección "Por qué elegirnos"
   ---------------------------------------------------------------- */
.icono-card {
    text-align: center;
    padding: 2rem 1rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-card);
    background-color: var(--color-gris-sec);
    transition: border-color var(--trans-normal),
                transform var(--trans-suave);
    height: 100%;
}

.icono-card:hover {
    border-color: #555555;
    transform: translateY(-4px);
}

.icono-grande {
    font-size: 2.2rem;
    color: var(--color-texto);
    display: block;
    margin-bottom: 1rem;
}

.icono-titulo {
    font-family: var(--fuente-titulo);
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    color: var(--color-texto);
    margin-bottom: 0.5rem;
}

.icono-texto {
    font-size: var(--fs-datos);
    color: var(--color-texto-suave);
    line-height: 1.5;
    margin-bottom: 0;
}


/* ----------------------------------------------------------------
   CARDS DE FORMAS DE PAGO
   ---------------------------------------------------------------- */
.pago-card {
    text-align: center;
    padding: 1.8rem 1rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-card);
    background-color: var(--color-seccion);
    transition: border-color var(--trans-normal),
                transform var(--trans-suave);
    height: 100%;
}

.pago-card:hover {
    border-color: #000000;
    transform: translateY(-4px);
}

/* Ícono simple — una sola forma de pago */
.pago-icono {
    font-size: 2rem;
    color: var(--color-texto);
    display: block;
    margin-bottom: 0.8rem;
}

/* Contenedor para la card combinada efectivo + transferencia
   Muestra dos íconos en fila, centrados, con separación */
.pago-iconos-dobles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.pago-iconos-dobles .pago-icono {
    display: inline;   /* anula el display:block individual para que queden en fila */
    margin-bottom: 0;
}

.pago-titulo {
    font-family: var(--fuente-titulo);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    color: var(--color-texto);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.pago-texto {
    font-size: var(--fs-datos);
    color: var(--color-texto-suave);
    line-height: 1.5;
    margin-bottom: 0;
}


/* ----------------------------------------------------------------
   WHATSAPP FLOTANTE
   Fijo en esquina inferior derecha en todas las páginas.
   El color verde es el oficial de WhatsApp — excepción puntual
   a la paleta del sitio, justificada por reconocimiento de marca.
   ---------------------------------------------------------------- */
.whatsapp-flotante {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #4bff8d;      /* verde oficial WhatsApp #25d366 */
    color: #ffffff;
    font-size: 1.6rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    transition: transform var(--trans-normal),
                box-shadow var(--trans-normal);
}

.whatsapp-flotante:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    color: #ffffff;
}

/* En desktop el botón es un poco más grande */
@media (min-width: 992px) {
    .whatsapp-flotante {
        width: 62px;
        height: 62px;
        font-size: 1.8rem;
        bottom: 2rem;
        right: 2rem;
    }
}