/* ==========================================================================
   Sistema visual de Regalos Personalizados.

   Tipografía y color propios, servidos desde este mismo dominio: ni Google
   Fonts ni CDNs. Además de cargar antes, evita contarle a un tercero quién
   entra en la web.

   La paleta es de taller —tinta, papel, madera, cobre— y no la del morado
   saturado que traía antes: vendemos algo hecho a mano, y el color tiene que
   decir eso desde el primer vistazo.
   ========================================================================== */

/* ===== Tipografía local ===== */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/fraunces-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/fraunces-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'InterLocal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'InterLocal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'InterLocal';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'InterLocal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Fichas de diseño ===== */
:root {
    /* Color */
    --tinta: #1c1917;          /* texto principal, casi negro cálido */
    --tinta-suave: #57534e;    /* texto secundario */
    --tenue: #78716c;          /* apoyos y leyendas */
    --papel: #fdfbf7;          /* fondo de página, crema */
    --papel-hondo: #f5f0e8;    /* franjas y zonas alternas */
    --carta: #ffffff;          /* tarjetas */
    --linea: #e7e1d8;          /* bordes */
    --linea-fuerte: #d6cec1;

    --cobre: #b45309;          /* acento principal: cálido, de taller */
    --cobre-hondo: #92400e;
    --cobre-claro: #fef3e2;
    --bosque: #166534;         /* acento secundario, confianza */
    --bosque-claro: #ecfdf3;
    --madera: #b8865f;
    --alerta: #b91c1c;
    --alerta-clara: #fef2f2;

    /* Compatibilidad con el CSS anterior, que usa estos nombres */
    --brand: var(--cobre);
    --brand-dark: var(--cobre-hondo);
    --accent: #f59e0b;
    --wood: var(--madera);
    --ink: var(--tinta);
    --muted: var(--tenue);
    --bg: var(--papel);
    --card: var(--carta);
    --border: var(--linea);
    --success: var(--bosque);
    --danger: var(--alerta);

    /* Forma */
    --radius: 12px;
    --radius-lg: 20px;
    --radius-sm: 8px;

    /* Sombra: suave y en tono cálido, no el gris azulado de siempre */
    --sombra-sutil: 0 1px 2px rgba(28, 25, 23, .04), 0 2px 8px rgba(28, 25, 23, .04);
    --sombra-media: 0 4px 12px rgba(28, 25, 23, .06), 0 12px 28px rgba(28, 25, 23, .08);
    --sombra-alta: 0 12px 24px rgba(28, 25, 23, .1), 0 28px 60px rgba(28, 25, 23, .12);

    /* Ritmo vertical */
    --paso: 8px;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
    font-family: 'InterLocal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--tinta);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--tinta);
}

h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
h3 { font-size: 1.15rem; }

p { color: var(--tinta-suave); }

a { color: var(--cobre-hondo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

/* El foco tiene que verse: hay gente que navega solo con el teclado */
:focus-visible {
    outline: 2.5px solid var(--cobre);
    outline-offset: 2px;
    border-radius: 3px;
}

::selection { background: var(--cobre-claro); color: var(--cobre-hondo); }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.container-estrecho { max-width: 780px; margin: 0 auto; padding: 0 24px; }

/* Enlace para saltar al contenido: lo primero que encuentra un lector de
   pantalla, y no estorba a nadie más */
.saltar-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--tinta);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--radius) 0;
    z-index: 999;
    font-weight: 600;
}
.saltar-contenido:focus { left: 0; }