/* ==========================================================================
   TOKENS — Sistema compartido de Yeguada Casablanca

   Contiene lo que usan todas las páginas: variables, reset, base tipográfica,
   utilidades, cabecera, pie, menú móvil, botones, campos de formulario,
   componentes reutilizables, estados y keyframes.

   Los estilos exclusivos de cada página viven en su propia hoja.
   Cada regla de componente parte de la clase de la sección que lo contiene.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografía local
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Variables
   -------------------------------------------------------------------------- */

:root {
    /* Colores de marca */
    --primary-color: #0a4dbe;
    --primary-dark-color: #083c96;
    --secondary-color: #f9b208;
    --secondary-dark-color: #d4960a;
    /* El cobalto es más claro que el azul anterior, así que el amarillo de la
       marca se queda en 4,05 sobre él. Este tono, un punto más claro, sube a
       4,85 sin salirse de la familia. */
    --secondary-on-primary-color: #ffc933;

    /* Superficies y texto */
    --body-color: #f5f3ef;
    --surface-color: #ffffff;
    --surface-alt-color: #eceae4;
    --deep-color: #12233a;
    --title-color: #12233a;
    --text-color: #3d4a5c;
    /* Texto secundario. Cumple AA sobre los tres fondos claros del sistema:
       5,08 sobre crema, 5,63 sobre blanco y 4,68 sobre gris. */
    --muted-color: #5e6878;
    --inverse-color: #f5f3ef;
    /* Texto secundario sobre oscuro: 9,97 sobre el azul profundo y 5,27 sobre
       el azul de marca, donde el tono anterior se quedaba en 3,99. */
    --inverse-muted-color: #c6ced9;
    --border-color: rgba(18, 35, 58, 0.16);
    --border-strong-color: rgba(18, 35, 58, 0.42);
    --border-inverse-color: rgba(245, 243, 239, 0.24);
    /* Los bordes de un campo identifican el componente, así que necesitan 3:1
       frente al fondo (WCAG 1.4.11). El borde decorativo no tiene ese deber. */
    --field-border-color: rgba(18, 35, 58, 0.55);
    --field-border-inverse-color: rgba(245, 243, 239, 0.62);

    /* Estados */
    --error-color: #b3261e;
    --success-color: #146c43;

    /* Tipografía */
    --primary-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --title-weight: 800;
    --label-tracking: 0.18em;

    /* Espaciado */
    --spacing-2xs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 5rem;
    --section-padding: clamp(3.5rem, 7vw, 7rem);
    --shell-width: 1240px;
    --shell-gutter: clamp(1.25rem, 4vw, 3rem);

    /* Campos de formulario */
    --field-height: 3.25rem;
    --field-padding-inline: 0.9rem;
    --field-icon-size: 20px;

    /* Otros */
    --radius-none: 0;
    --transition-fast: 0.2s ease;
    --transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-card: 0 18px 40px rgba(18, 35, 58, 0.12);
    --header-height: 76px;
}

/* --------------------------------------------------------------------------
   3. Reset y base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--body-color);
    color: var(--text-color);
    font-family: var(--primary-font);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    color: var(--title-color);
    font-weight: var(--title-weight);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2.75rem, 8vw, 6.5rem);
    text-transform: uppercase;
}

h2 {
    font-size: clamp(1.9rem, 4.2vw, 3.25rem);
}

h3 {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    letter-spacing: -0.01em;
}

h4 {
    font-size: 1rem;
}

p {
    margin: 0;
}

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

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

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

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Indicador de foco de doble aro: el dorado destaca sobre los fondos oscuros y
   el aro interior azul profundo lo hace sobre los claros, de modo que siempre
   hay al menos 3:1 contra lo que tenga detrás. */
:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 3px;
    box-shadow: 0 0 0 1px var(--deep-color), 0 0 0 7px rgba(18, 35, 58, 0.35);
}

/* --------------------------------------------------------------------------
   4. Utilidades transversales
   -------------------------------------------------------------------------- */

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

.site-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-skip-link {
    position: absolute;
    top: -100%;
    left: var(--spacing-sm);
    z-index: 100;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--secondary-color);
    color: var(--deep-color);
    font-weight: 700;
}

.site-skip-link:focus {
    top: var(--spacing-xs);
}

/* --------------------------------------------------------------------------
   5. Componentes del sistema
   -------------------------------------------------------------------------- */

/* Antetítulo: rótulo pequeño en versales sobre cada sección. */
.site-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.site-eyebrow::before {
    content: "";
    width: 2.5rem;
    height: 2px;
    background-color: currentColor;
}

.site-eyebrow--on-dark {
    color: var(--secondary-color);
}

/* Botones */
.site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    min-height: 2.9rem;
    padding: 0.7rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--radius-none);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast), transform var(--transition-fast);
}

.site-button:hover {
    transform: translateY(-2px);
}

.site-button--primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--inverse-color);
}

.site-button--primary:hover {
    background-color: var(--primary-dark-color);
    border-color: var(--primary-dark-color);
}

.site-button--accent {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--deep-color);
}

.site-button--accent:hover {
    background-color: var(--secondary-dark-color);
    border-color: var(--secondary-dark-color);
}

/* Sobre fondo oscuro el contorno claro mantiene el contraste. */
.site-button--outline-light {
    border-color: var(--inverse-color);
    color: var(--inverse-color);
}

.site-button--outline-light:hover {
    background-color: var(--inverse-color);
    color: var(--deep-color);
}

.site-button--outline-dark {
    border-color: var(--deep-color);
    color: var(--deep-color);
}

.site-button--outline-dark:hover {
    background-color: var(--deep-color);
    color: var(--inverse-color);
}

.site-button__icon {
    flex: none;
}

/* Enlace con flecha */
.site-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding-bottom: var(--spacing-2xs);
    border-bottom: 2px solid currentColor;
    color: var(--title-color);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.site-arrow-link:hover {
    gap: var(--spacing-sm);
    color: var(--primary-color);
}

.site-arrow-link__icon {
    flex: none;
}

/* Etiqueta breve sobre un dato */
.site-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border-color);
    background-color: var(--surface-alt-color);
    color: var(--muted-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-tag--accent {
    border-color: rgba(10, 77, 190, 0.3);
    background-color: rgba(10, 77, 190, 0.08);
    color: var(--primary-color);
}

/* Encabezado de sección con título y acción a la derecha */
.site-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-md);
}

/* Héroe de página interior.

   Lo comparten las seis páginas de dentro. Cada una lleva además su clase de
   bloque propia, que es la que usa el importador para identificar la sección;
   estas reglas van sobre la clase común para no repetir el bloque seis veces.

   La composición: fotografía de la página bajo un velo azul, antetítulo y
   título a la izquierda, bajada a la derecha sobre un filete dorado, y un
   remate dorado cerrando la banda. */

.site-page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(20rem, 46vh, 30rem);
    padding-block: clamp(3.5rem, 7vw, 6rem);
    background-color: var(--deep-color);
    overflow: hidden;
}

/* Remate dorado al pie de la banda. */
.site-page-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background-color: var(--secondary-color);
}

.site-page-hero__media {
    position: absolute;
    inset: 0;
}

.site-page-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
    filter: grayscale(1);
}

/* El velo no baja del 82 % para que el texto conserve contraste sea cual sea
   la fotografía que ponga el cliente. */
.site-page-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(18, 35, 58, 0.95) 0%,
        rgba(18, 35, 58, 0.88) 55%,
        rgba(18, 35, 58, 0.82) 100%
    );
}

.site-page-hero__shell {
    position: relative;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: end;
}

.site-page-hero__intro {
    display: grid;
    gap: var(--spacing-sm);
}

.site-page-hero__title {
    color: var(--inverse-color);
    font-size: clamp(2.75rem, 7.5vw, 5.5rem);
    line-height: 0.94;
}

.site-page-hero__description {
    max-width: 42ch;
    padding-left: var(--spacing-md);
    border-left: 2px solid var(--secondary-color);
    color: var(--inverse-muted-color);
    font-size: 1.02rem;
}

@media (max-width: 900px) {
    .site-page-hero__shell {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .site-page-hero__media::after {
        background: linear-gradient(180deg, rgba(18, 35, 58, 0.84) 0%, rgba(18, 35, 58, 0.94) 100%);
    }
}

/* --------------------------------------------------------------------------
   6. Cabecera
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background-color: var(--body-color);
    border-bottom: 1px solid var(--border-color);
}

.site-header__shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    min-height: var(--header-height);
}

.site-header__logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.site-header__logo-mark {
    flex: none;
    color: var(--deep-color);
}

.site-header__logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-header__logo-name {
    color: var(--deep-color);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

.site-header__logo-tag {
    color: var(--muted-color);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1;
}

.site-header__nav-list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}

.site-header__nav-link {
    color: var(--deep-color);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.site-header__nav-link:hover,
.site-header__nav-link[aria-current="page"] {
    color: var(--primary-color);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.site-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--border-color);
    background-color: transparent;
}

.site-header__toggle-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 20px;
}

.site-header__toggle-bar {
    height: 2px;
    background-color: var(--deep-color);
}

.site-header__panel {
    display: none;
    padding-block: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.site-header__panel[data-open="true"] {
    display: block;
}

.site-header__panel-list {
    display: grid;
    gap: var(--spacing-sm);
}

.site-header__panel-link {
    color: var(--deep-color);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7. Pie de página
   -------------------------------------------------------------------------- */

.site-footer {
    width: 100%;
    background-color: var(--deep-color);
    color: var(--inverse-muted-color);
}

.site-footer__shell {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--spacing-xl);
    padding-block: var(--spacing-2xl) var(--spacing-xl);
}

.site-footer__brand-mark {
    color: var(--inverse-color);
}

.site-footer__brand-name {
    margin-top: var(--spacing-sm);
    color: var(--inverse-color);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.3;
}

.site-footer__brand-description {
    margin-top: var(--spacing-xs);
    font-size: 0.88rem;
}

.site-footer__column-title {
    color: var(--secondary-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.site-footer__list {
    display: grid;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
}

.site-footer__link {
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}

.site-footer__link:hover {
    color: var(--inverse-color);
}

.site-footer__link--accent {
    color: var(--secondary-color);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding-block: var(--spacing-md);
    border-top: 1px solid var(--border-inverse-color);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Botón flotante de WhatsApp */
.site-whatsapp {
    position: fixed;
    right: var(--spacing-md);
    bottom: var(--spacing-md);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: #25d366;
    color: #ffffff;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-fast);
}

.site-whatsapp:hover {
    transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   8. Campos de formulario
   -------------------------------------------------------------------------- */

.site-field {
    display: grid;
    gap: var(--spacing-2xs);
}

.site-field__label {
    color: var(--muted-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-field__control {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding-inline: var(--field-padding-inline);
    border: 2px solid var(--field-border-color);
    background-color: var(--body-color);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.site-field__control:focus-within {
    border-color: var(--primary-color);
    background-color: var(--surface-color);
}

.site-field__control:focus-within .site-field__icon {
    color: var(--primary-color);
}

.site-field__control--invalid {
    border-color: var(--error-color);
}

.site-field__icon {
    flex: none;
    color: var(--muted-color);
    transition: color var(--transition-fast);
}

.site-field__input {
    flex: 1;
    min-height: var(--field-height);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--title-color);
    font-family: inherit;
    font-size: 1rem;
}

.site-field__input:focus {
    outline: none;
}

.site-field__input::placeholder {
    color: var(--muted-color);
    opacity: 1;
}

/* Chrome pinta de amarillo el autorrelleno: se neutraliza con una sombra interior. */
.site-field__input:-webkit-autofill {
    box-shadow: inset 0 0 0 100px var(--body-color);
    -webkit-text-fill-color: var(--title-color);
}

textarea.site-field__input {
    padding-block: 0.85rem;
    min-height: 7rem;
    resize: vertical;
}

/* En un campo alto el icono acompaña a la primera línea, no al centro. */
.site-field__control:has(textarea) {
    align-items: flex-start;
}

.site-field__control:has(textarea) .site-field__icon {
    margin-top: 0.95rem;
}

select.site-field__input {
    appearance: none;
    cursor: pointer;
}

.site-field__error {
    color: var(--error-color);
    font-size: 0.8rem;
    font-weight: 600;
}

.site-field__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    color: var(--muted-color);
    font-size: 0.85rem;
    cursor: pointer;
}

.site-field__checkbox {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 4px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* Trampa anti-spam: fuera de la vista y fuera del recorrido de foco. */
.site-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.site-form-message {
    padding: var(--spacing-sm);
    border-left: 3px solid var(--success-color);
    background-color: rgba(20, 108, 67, 0.08);
    color: var(--success-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.site-form-message--error {
    border-left-color: var(--error-color);
    background-color: rgba(179, 38, 30, 0.08);
    color: var(--error-color);
}

/* --------------------------------------------------------------------------
   9. Cursor con carácter equino
   -------------------------------------------------------------------------- */

/* El cursor y su rastro los crea `cursor.js` en tiempo de ejecución, y solo en
   dispositivos con ratón. Aquí queda su apariencia. */

.site-cursor,
.site-cursor-trail {
    position: fixed;
    inset: 0;
    z-index: 95;
    pointer-events: none;
}

.site-cursor__dot,
.site-cursor__ring,
.site-cursor-trail__print {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

.site-cursor__dot {
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background-color: var(--secondary-color);
}

.site-cursor__ring {
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border: 1.5px solid var(--secondary-color);
    border-radius: 50%;
    opacity: 0.55;
    transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease,
        background-color 0.25s ease, opacity 0.25s ease;
}

/* Sobre un elemento accionable el anillo crece y se rellena. */
.site-cursor[data-hovering="true"] .site-cursor__ring {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    background-color: rgba(249, 178, 8, 0.16);
    opacity: 0.9;
}

.site-cursor-trail__print {
    color: var(--secondary-color);
    line-height: 0;
}

/* El cursor del sistema se oculta solo cuando el propio hay tomado el relevo. */
@media (hover: hover) and (pointer: fine) {
    body.has-custom-cursor,
    body.has-custom-cursor a,
    body.has-custom-cursor button,
    body.has-custom-cursor label,
    body.has-custom-cursor summary {
        cursor: none;
    }

    /* En los campos de texto se conserva el cursor nativo: ahí indica dónde
       se va a escribir y sustituirlo entorpecería la escritura. */
    body.has-custom-cursor input,
    body.has-custom-cursor textarea,
    body.has-custom-cursor select {
        cursor: auto;
    }
}

/* --------------------------------------------------------------------------
   10. Animaciones
   -------------------------------------------------------------------------- */

@keyframes site-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Estado inicial del contenido que aparece al entrar en pantalla. */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

[data-reveal][data-revealed="true"] {
    opacity: 1;
    transform: none;
}

/* Sin JavaScript el contenido debe verse igualmente. */
.no-js [data-reveal] {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   11. Responsive del sistema
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .site-footer__shell {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .site-header__nav {
        display: none;
    }

    .site-header__toggle {
        display: flex;
    }

    .site-header__actions .site-button {
        display: none;
    }
}

@media (max-width: 640px) {
    .site-footer__shell {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .site-footer__bottom {
        flex-direction: column;
    }
}