/*==========================================================
BASE
Primera capa del sitio. Aquí viven las decisiones que
condicionan todo lo demás: variables de diseño, reset,
estilos por defecto de los elementos HTML y las utilidades
que se usan en cualquier página.

Orden de carga en TODAS las páginas:
    base.css  ->  layout.css  ->  components.css  ->  pages/<pagina>.css

Puntos de corte del sitio (siempre max-width, de mayor a menor).
Se usan estos seis y solo estos seis:
    1400px · el diseño ancho de escritorio pasa a una columna
    1200px · portátiles pequeños y escalado de pantalla al 125-150 %
    1000px · tablets en horizontal
     900px · a partir de aquí aparece el menú hamburguesa
     700px · móviles
     380px · móviles pequeños
==========================================================*/


/*==========================================================
VARIABLES DE DISEÑO
==========================================================*/

:root {
    /* Tipografía */
    --font-title: "Poppins", sans-serif;
    --font-text: "Outfit", sans-serif;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --font-size-h: clamp(1.7rem, 4.4vw, 2.5rem);
    --font-size-p: clamp(1rem, 2.2vw, 1.15rem);

    /* Colores */
    --primary-color: #7A0C0C;
    --primary-hover: #981212;
    --background-color: #F5F5F5;
    --white: #FFFFFF;
    --text-color: #222222;
    --text-light: #444444;
    --border-color: #DDDDDD;

    /* Formas */
    --radius: 10px;
    --shadow: 0 12px 35px rgba(0,0,0,.12);
    --transition: .3s ease;

    /* Medidas de contenido.
       --gutter es el margen lateral de TODO el sitio: vale 40px en
       escritorio y se encoge solo en pantallas estrechas. Cualquier
       sección que quiera alinearse con el resto debe usarlo. */
    --gutter: clamp(18px, 4vw, 40px);
    --container-width: 1400px;
    --container-width-wide: 1800px;

    /* Alto de la cabecera fija. Lo usan el menú desplegable, las
       barras sticky y el scroll-margin de las anclas, así que basta
       con cambiarlo aquí para que todo siga cuadrando. */
    --header-height: 90px;
}


/*==========================================================
RESET
==========================================================*/

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-text);
    color: var(--text-color);
    background: var(--background-color);
    overflow-x: hidden;
}

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

h1,
h2,
h3 {
    font-family: var(--font-title);
    font-weight: var(--fw-semibold);
}

/* Foco visible para quien navega con teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary-hover);
    outline-offset: 3px;
}

/* Las anclas no deben quedar tapadas por la cabecera fija */
section[id],
div[id] {
    scroll-margin-top: calc(var(--header-height) + 20px);
}


/*==========================================================
CONTENEDORES

Regla importante del proyecto: el margen lateral lo pone
SIEMPRE el contenedor con padding-inline. Una sección que
comparta elemento con .container debe usar padding-block
(o padding-top / padding-bottom), nunca el atajo `padding`,
porque el atajo pone el lateral a 0 y el contenido se queda
pegado al borde de la pantalla.
==========================================================*/

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container-wide {
    /* 95 % en pantallas anchas: deja un respiro extra a los lados
       de las secciones que quieren sentirse casi a pantalla completa */
    width: 95%;
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

@media (max-width: 1200px) {

    .container-wide {
        width: 100%;
    }
}


/*==========================================================
UTILIDADES
==========================================================*/

/* Oculto en pantalla, disponible para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/*==========================================================
ANIMACIONES DE ENTRADA AL HACER SCROLL

La clase .in-view la añade js/main.js con IntersectionObserver
cuando el elemento entra en pantalla.
==========================================================*/

.reveal-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 2.5s ease, transform 2.5s ease;
}

.reveal-right {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 2.5s ease, transform 2.5s ease;
}

.reveal-up {
    opacity: 0;
    transform: translateY(50px) scale(.96);
    transition: opacity 1s ease, transform 1s ease;
}

.reveal-fade {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1.6s ease, transform 1.6s ease;
}

.reveal-left.in-view,
.reveal-right.in-view,
.reveal-up.in-view,
.reveal-fade.in-view {
    opacity: 1;
    transform: none;
}

.reveal-fade-delay { transition-delay: .2s; }

.reveal-fade-delay-1 { transition-delay: .15s; }

.reveal-fade-delay-2 { transition-delay: .3s; }

.reveal-fade-delay-3 { transition-delay: .45s; }

.reveal-fade-delay-4 { transition-delay: .6s; }

img.reveal-left,
img.reveal-right {
    transition: opacity 2.5s ease, transform 2.5s ease;
}

/* En móvil, 80px de desplazamiento lateral es demasiado */
@media (max-width: 700px) {

    .reveal-left {
        transform: translateX(-30px);
    }

    .reveal-right {
        transform: translateX(30px);
    }
}


/*==========================================================
PREFERENCIA DEL SISTEMA: MENOS MOVIMIENTO
Si la persona ha pedido reducir animaciones, el contenido
aparece directamente en su sitio.
==========================================================*/

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .reveal-left,
    .reveal-right,
    .reveal-up,
    .reveal-fade,
    .service-card,
    .slide {
        opacity: 1;
        transform: none;
        transition: none;
    }
}