/* ==========================================================================
   Breakpoints (mobile-first)
   Mobile:  < 768px
   Tablet:  768px – 1023px
   Desktop: >= 1024px
   ========================================================================== */

/* ==========================================================================
   Aileron — fuente de display y body. No está en Google Fonts; se self-hostea.
   Descargar los .woff2 desde https://dotcolon.net/font/aileron/ y colocarlos en
   assets/fonts/aileron/ (rutas relativas al CSS, que vive en assets/css/).
   Mientras no estén los archivos, el navegador hace fallback al siguiente
   ítem de la familia (Inter o sans-serif del sistema).
   ========================================================================== */
@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron/Aileron-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron/Aileron-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron/Aileron-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron/Aileron-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Design tokens (sincronizados con Figma node 1439:219 Home y 1661:267 Tienda).
   ========================================================================== */
:root {
  /* Brand colors */
  --color-primary: #8f5d46;          /* marrón Obrador: hero, headings, bordes de cards, precios */
  --color-primary-rgb: 143, 93, 70;
  --color-secondary: #5ebb95;        /* verde "Somos Genios" / Fundación */
  --color-secondary-rgb: 94, 187, 149;
  --color-accent: #db4a2b;            /* rojo/coral acento ("Somos Genios" inline) */
  --color-accent-rgb: 219, 74, 43;
  --color-peques: #936fd2;            /* morado/lavanda banda "Y para los más peques…" (Tienda) */

  /* Neutral palette */
  --color-text: #232421;             /* texto principal sobre fondo claro (cards, captions) */
  --color-text-light: #5a5a5a;
  --color-text-on-dark: #ffffff;     /* texto sobre hero marrón */
  --color-bg: #ffffff;
  --color-bg-alt: #f8f5f1;           /* tonalidad cálida sutil; ajustar si diseño confirma cream */
  --color-footer-bg: #dcdcdc;        /* per Figma; flag para confirmar con diseño (visual parece marrón) */
  --color-border: #e2e2e2;

  /* Alpha variants útiles */
  --color-primary-alpha-10: rgba(143, 93, 70, 0.10);
  --color-primary-alpha-20: rgba(143, 93, 70, 0.20);

  /* Font families
     - --font-display: Aileron Light Italic (66-70px) para grandes titulares de sección y hero
     - --font-body: Aileron Regular para párrafos largos
     - --font-ui: Inter para UI (nav, precios, captions, botones)
     - --font-numeral: Old Standard TT para los números 01-06 gigantes
     Si Aileron no carga, Inter actúa como sustituto razonable. */
  --font-display: "Aileron", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Aileron", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-numeral: "Old Standard TT", Georgia, "Times New Roman", serif;

  /* Typography sizes — mobile-first; suben en tablet y desktop. */
  --font-display-size: 36px;          /* desktop 70px (h1/h2 y títulos de página) */
  --font-section-title-size: 36px;    /* títulos de SECCIÓN — 40px en tablet/desktop (petición cliente) */
  --font-hero-size: 36px;             /* desktop 60px (hero headline) */
  --font-numeral-size: 64px;          /* desktop 114px (01–06) */
  --font-body-size: 16px;             /* desktop 20px */
  --font-body-size-small: 14px;       /* desktop 16px (footer items) */
  --font-card-title-size: 18px;       /* desktop 21px (Aileron Black) */
  --font-card-body-size: 16px;        /* desktop 21px (Aileron Regular) */
  --font-ui-size: 16px;               /* desktop 20px (nav, buttons) */
  --font-product-title-size: 16px;    /* desktop 18px (Inter Bold) */
  --font-price-size: 22px;            /* desktop 24px */
  --font-disclaimer-size: 12px;       /* siempre 12px */

  /* Line heights */
  --line-height-display: 0.98;        /* Figma usa 0.98 para los titulares */
  --line-height-body: 1.5;
  --line-height-tight: 1.2;

  /* Letter spacing */
  --letter-spacing-numeral: -0.1em;   /* numerales grandes 01-06 */

  /* Layout */
  --container-max: 100%;
  --content-padding-x: 20px;
  --section-padding-y: calc(var(--spacing-unit) * 1.5); /* móvil: 24px (sube a 40/48 en tablet/desktop) */
  --spacing-unit: 1rem;

  /* Radii y sombras */
  --border-radius: 8px;
  --border-radius-card: 8px;
  --border-radius-image: 7px;         /* Figma usa 7.191px para las imágenes de historia */
  --border-width-card: 2.5px;         /* Figma 2.672px; redondeamos a 2.5 */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);

  /* Buttons */
  --button-height: 46px;
  --button-radius: 8px;
  --button-border-width: 3px;
  --button-padding-x: 24px;
}

@media (min-width: 768px) {
  :root {
    --font-display-size: 52px;
    --font-section-title-size: 40px;
    --font-hero-size: 48px;
    --font-numeral-size: 88px;
    --font-body-size: 18px;
    --font-body-size-small: 15px;
    --font-card-title-size: 19px;
    --font-card-body-size: 19px;
    --font-ui-size: 18px;
    --font-product-title-size: 17px;
    --font-price-size: 23px;

    --container-max: 720px;
    --content-padding-x: 32px;
    --section-padding-y: calc(var(--spacing-unit) * 2.5);
  }
}

@media (min-width: 1024px) {
  :root {
    --font-display-size: 70px;
    --font-section-title-size: 40px;   /* títulos de sección a 40px (petición cliente; Figma marca 70) */
    --font-hero-size: 60px;
    --font-numeral-size: 114px;
    --font-body-size: 20px;
    --font-body-size-small: 16px;
    --font-card-title-size: 21px;
    --font-card-body-size: 21px;
    --font-ui-size: 20px;
    --font-product-title-size: 18px;
    --font-price-size: 24px;

    --container-max: 1280px;            /* Figma frame 1440 con padding ~80px a cada lado */
    --content-padding-x: 80px;
    --section-padding-y: calc(var(--spacing-unit) * 3);
  }
}

/* ==========================================================================
   Reset / normalize ligero
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Red de seguridad responsive: rompe palabras/URLs sin espacios (emails, tokens,
     enlaces largos en páginas legales) que de otro modo desbordarían en móvil.
     `break-word` no afecta al min-content sizing de flex/grid, así que es seguro global. */
  overflow-wrap: break-word;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Asegura que <picture> rellene su contenedor (por defecto es inline) y que
   la <img> interna preserve el aspect-ratio natural del source. */
picture {
  width: 100%;
}

picture > img {
  width: 100%;
  height: auto;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover, a:focus {
  text-decoration: none;
}

/* ==========================================================================
   Tipografía base
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;                   /* Aileron Light Italic */
  line-height: var(--line-height-display);
  margin-top: 0;
  margin-bottom: 0.5em;
  color: var(--color-primary);
}

h1 { font-size: var(--font-display-size); }
h2 { font-size: var(--font-display-size); }
h3 { font-size: calc(var(--font-display-size) * 0.6); }
h4 { font-size: calc(var(--font-display-size) * 0.45); }
h5 { font-size: calc(var(--font-display-size) * 0.35); }
h6 { font-size: calc(var(--font-display-size) * 0.3); }

p {
  margin-top: 0;
  margin-bottom: 1em;
}

button {
  font-family: var(--font-ui);
}

strong, b {
  font-weight: 700;
}

/* ==========================================================================
   Accesibilidad — skip-link y screen-reader-text
   ========================================================================== */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link:focus {
  background-color: var(--color-bg);
  clip: auto !important;
  clip-path: none;
  color: var(--color-primary);
  display: block;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}