/* =============================================================
   estilos.css — AmedidaCuentos.com  (v09)
   Variables globales, reset, tipografía y estilos base.
   v09: color primario revisado para cumplir WCAG 2.1 AA en todos
        los fondos. #F5A623 (amarillo claro) reemplazado por
        #B85500 (naranja ámbar profundo, contraste 4.82:1 con blanco).
   ============================================================= */

/* ── Google Fonts (CDN externo permitido) ─────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap');

/* ── Variables CSS (:root) ────────────────────────────────── */
:root {
  /* Colores de marca */
  --color-primario:      #B85500;    /* Naranja ámbar — contraste 4.82:1 vs blanco (WCAG AA ✓) */
  --color-primario-hover: #8F4100;   /* Sombra más oscura para :hover */
  --color-secundario:    #E8557A;    /* Rosa vibrante — acento */
  --color-acento-2:      #4DBCE9;    /* Azul cielo — acento secundario */
  --color-acento-3:      #7DC95E;    /* Verde alegre — acento terciario */
  --color-acento-4:      #A97DE8;    /* Violeta — acento cuarto */

  /* Fondos de sección (alternancia suave) */
  --color-fondo-1:       #FFFCF5;   /* Crema cálida */
  --color-fondo-2:       #F0F8FF;   /* Azul muy suave */
  --color-fondo-3:       #F4FFF0;   /* Verde menta suave */
  --color-fondo-4:       #FFF4F8;   /* Rosa pálido */
  --color-fondo-5:       #F6F0FF;   /* Lavanda suave */

  /* Texto */
  --color-texto:         #3A3A3A;   /* Gris oscuro para cuerpo */
  --color-titulo:        #2C2C2C;   /* Casi negro para títulos */
  --color-texto-claro:   #FFFFFF;   /* Blanco sobre fondos oscuros */
  --color-texto-muted:   #7A7A7A;   /* Gris medio para subtítulos */

  /* Fondo semitransparente para texto sobre hero */
  --color-overlay:       rgba(255, 255, 255, 0.88);

  /* Fondo semitransparente para nav al hacer scroll */
  --color-nav-bg:        rgba(255, 255, 255, 0.97);

  /* Tarjetas de pasos/valores (fondos pastel diferenciados)
     v09: card-color-1 más anaranjado (menos amarillento) */
  --card-color-1:        #FFD9A0;   /* Naranja pastel (mejorado vs #FFE8C2) */
  --card-color-2:        #C8EBFF;   /* Azul pastel */
  --card-color-3:        #D6F5C8;   /* Verde pastel */
  --card-color-4:        #FFD6E7;   /* Rosa pastel */

  /* Geometría */
  --radio-borde:         14px;
  --radio-borde-sm:      8px;
  --radio-borde-xl:      24px;
  --radio-btn:           50px;

  /* Sombras */
  --sombra-sm:           0 2px 8px  rgba(0, 0, 0, 0.07);
  --sombra-md:           0 4px 20px rgba(0, 0, 0, 0.09);
  --sombra-lg:           0 8px 32px rgba(0, 0, 0, 0.13);

  /* Transiciones */
  --transicion:          all 0.3s ease;
  --transicion-lenta:    all 0.5s ease;

  /* Tipografía infantil — Google Fonts */
  --fuente-titulo:       'Baloo 2', cursive;
  --fuente-texto:        'Nunito', sans-serif;
  --tam-base:            16px;

  /* Espaciado de secciones */
  --padding-seccion:     80px 0;
  --padding-seccion-sm:  48px 0;
}

/* ── Reset y base ─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  scroll-behavior: smooth;
  font-size:        var(--tam-base);
}

body {
  font-family:   var(--fuente-texto);
  color:         var(--color-texto);
  background:    #FFFFFF;
  line-height:   1.7;
  overflow-x:    hidden;
}

/* ── Tipografía ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family:  var(--fuente-titulo);
  color:        var(--color-titulo);
  line-height:  1.2;
  margin-bottom: 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem);   font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 700; }
h4 { font-size: 1.2rem; font-weight: 700; }

p {
  margin-bottom: 1rem;
  color:         var(--color-texto);
}

a {
  color:           var(--color-primario);
  text-decoration: none;
  transition:      var(--transicion);
}
a:hover { color: var(--color-primario-hover); }

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

ul { list-style: none; }

/* ── Utilidades generales ─────────────────────────────────── */
.texto-primario    { color: var(--color-primario) !important; }
.texto-secundario  { color: var(--color-secundario) !important; }
.texto-centrado    { text-align: center; }
.negrita           { font-weight: 800; }

/* Fondos de sección */
.seccion           { padding: var(--padding-seccion); }
.seccion--compacta { padding: var(--padding-seccion-sm); }

.fondo-1 { background-color: var(--color-fondo-1); }
.fondo-2 { background-color: var(--color-fondo-2); }
.fondo-3 { background-color: var(--color-fondo-3); }
.fondo-4 { background-color: var(--color-fondo-4); }
.fondo-5 { background-color: var(--color-fondo-5); }

/* ── Botones ──────────────────────────────────────────────── */
.btn-amc {
  display:          inline-flex;
  align-items:      center;
  gap:              8px;
  padding:          12px 32px;
  border-radius:    var(--radio-btn);
  font-family:      var(--fuente-titulo);
  font-weight:      700;
  font-size:        1rem;
  text-decoration:  none;
  cursor:           pointer;
  border:           2px solid transparent;
  transition:       var(--transicion);
  white-space:      nowrap;
}

.btn-amc:focus-visible {
  outline:        3px solid var(--color-primario);
  outline-offset: 3px;
}

/* Primario (naranja ámbar sólido + texto blanco — contraste 4.82:1 ✓) */
.btn-amc--primario {
  background:   var(--color-primario);
  color:        var(--color-texto-claro);
  border-color: var(--color-primario);
}
.btn-amc--primario:hover {
  background:   var(--color-primario-hover);
  border-color: var(--color-primario-hover);
  color:        var(--color-texto-claro);
  transform:    translateY(-2px);
  box-shadow:   var(--sombra-md);
}

/* Outline (borde naranja, fondo transparente) */
.btn-amc--outline {
  background:   transparent;
  color:        var(--color-primario);
  border-color: var(--color-primario);
}
.btn-amc--outline:hover {
  background:  var(--color-primario);
  color:       var(--color-texto-claro);
  transform:   translateY(-2px);
}

/* Blanco (sobre hero) */
.btn-amc--blanco {
  background:   var(--color-texto-claro);
  color:        var(--color-titulo);
  border-color: var(--color-texto-claro);
}
.btn-amc--blanco:hover {
  background:   var(--color-primario);
  border-color: var(--color-primario);
  color:        var(--color-texto-claro);
  transform:    translateY(-2px);
}

/* Contactar (pie de página — sobre fondo oscuro) */
.btn-amc--contactar {
  background:   transparent;
  color:        var(--color-texto-claro);
  border-color: var(--color-texto-claro);
}
.btn-amc--contactar:hover {
  background:  var(--color-texto-claro);
  color:       var(--color-titulo);
}

/* ── Contenedor principal ─────────────────────────────────── */
.contenedor {
  width:      100%;
  max-width:  1200px;
  margin:     0 auto;
  padding:    0 24px;
}

/* ── Imágenes placeholder (cuando el archivo no existe) ────── */
.img-placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      #E8EEF5;
  border:          2px dashed #B0BEC5;
  border-radius:   var(--radio-borde);
  color:           #7A8A9A;
  font-size:       0.85rem;
  text-align:      center;
  padding:         20px;
  min-height:      200px;
  width:           100%;
}

/* ── Foco accesible global ────────────────────────────────── */
:focus-visible {
  outline:        3px solid var(--color-primario);
  outline-offset: 2px;
}

/* ── Scrollbar personalizada (WebKit) ─────────────────────── */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: #F0F0F0; }
::-webkit-scrollbar-thumb { background: var(--color-primario); border-radius: 4px; }

/* ── Media queries base ───────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --padding-seccion:    48px 0;
    --padding-seccion-sm: 32px 0;
  }
  .seccion { padding: 48px 0; }
}