/* Gallos Osuna — Base */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */
:root {
    /* Marca */
    --rojo: #a31e22;
    --rojo-vivo: #c62828;
    --rojo-oscuro: #6e1417;
    --verde: #1f7a3d;
    --verde-oscuro: #14532a;
    --negro: #1a1310;
    --dorado: #b8892b;
    --whatsapp: #25d366;
    --whatsapp-oscuro: #1da851;

    /* Superficies y texto */
    --crema: #fbf8f2;
    --crema-suave: #f3ecdf;
    --blanco: #ffffff;
    --texto: #211714;
    --texto-suave: #55483f;
    --borde: #e7ddd0;
    --sombra: 0 10px 30px rgba(26, 19, 16, 0.12);

    /* Estados de un gallo */
    --estado-disponible-bg: #e7f5ec;
    --estado-disponible-fg: #14532a;
    --estado-reservado-bg: #fdf1dc;
    --estado-reservado-fg: #8a5a12;
    --estado-vendido-bg: #f3e2e2;
    --estado-vendido-fg: #7a1d20;

    /* Tipografia */
    --fuente-titulos: 'Oswald', 'Arial Narrow', sans-serif;
    --fuente-texto: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Tamaño base grande a proposito: publico 35+ en celular */
    --texto-base: 18px;
    --radio: 5px;
    --radio-chico: 3px;
    --contenedor-ancho: 1180px;
    --contenedor-ancho-angosto: 760px;
}

/* -------------------------------------------------------------------------
   2. Reset ligero
   ---------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--crema);
    color: var(--texto);
    font-family: var(--fuente-texto);
    font-size: var(--texto-base);
    line-height: 1.55;
}

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

a {
    color: var(--rojo);
    text-decoration: none;
}

a:hover {
    color: var(--rojo-vivo);
}

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

h1,
h2,
h3,
h4 {
    font-family: var(--fuente-titulos);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--negro);
    line-height: 1.15;
    margin: 0 0 0.5em;
}

button {
    font-family: inherit;
}

/* Foco visible en todo el sitio: imprescindible para navegar con teclado
   o lectores de pantalla, y ayuda tambien a quien ve poco. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--verde);
    outline-offset: 2px;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

.skip-link.screen-reader-text:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 12px 20px;
    background: var(--negro);
    color: var(--blanco);
    z-index: 10000;
    border-radius: var(--radio-chico);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* -------------------------------------------------------------------------
   3. Contenedores
   ---------------------------------------------------------------------- */
.page-wrap {
    max-width: var(--contenedor-ancho);
    margin: 0 auto;
    padding: 24px 18px 64px;
}

.page-wrap--narrow {
    max-width: var(--contenedor-ancho-angosto);
}