/* =============================================================
   tema-inicio.css — PALETA de la pagina principal (solo de ella).

   Pesos de la paleta, tal como los pediste (blanco pastel manda):
     Blanco pastel  #F7F3EB  — el fondo de casi toda la pagina
     Crema          #E8DFD0  — bandas alternas y segundos planos
     Papel          #DAD1C2  — lineas y tercer plano
     Terracota      #B85C38  — SOLO acentos: botones, cifras, bloques chicos
     Tinta          #1A0F08  — texto y lineas (nunca fondo, salvo de noche)
     Terminal       #3D2B1F  — UN solo elemento en toda la pagina:
                               el boton que manda la busqueda por WhatsApp
     Sepia          #7A6A5A  — adornos y lineas

   Nada de bandas cafe o terracota a todo lo ancho: el cafe pesaba demasiado.
   Ahora el ritmo lo dan dos tonos de crema y las lineas finas.
   ============================================================= */

:root{
  --ancho:1140px;

  /* Blanco pastel: el fondo por defecto */
  --papel:#F7F3EB;
  --papel-translucido:rgba(247,243,235,.90);
  /* Crema y papel: segundos planos */
  --superficie:#EFE8DB;
  --superficie-2:#E8DFD0;
  --banda:#E8DFD0;

  --tinta:#1A0F08;
  /* Sepia de texto: tiene que pasar 4.5:1 sobre los tres cremas */
  --suave:#665648;
  --sepia-deco:#7A6A5A;

  /* Terracota, solo acento */
  --marca:#B85C38;
  --marca-fuerte:#9E4A2B;
  --marca-txt:#FFFFFF;
  --acento:#8A3F24;
  --sombra-marca:0 8px 20px -12px rgba(158,74,43,.55);

  /* Terminal: el unico elemento cafe oscuro de la pagina */
  --terminal:#3D2B1F;
  --terminal-txt:#F7F3EB;
  --terminal-suave:rgba(247,243,235,.70);

  --linea:rgba(26,15,8,.13);
  --linea-fuerte:rgba(26,15,8,.26);
  --sombra:0 1px 2px rgba(26,15,8,.04), 0 10px 26px -20px rgba(26,15,8,.35);
  --sombra-alta:0 2px 5px rgba(26,15,8,.06), 0 22px 44px -24px rgba(26,15,8,.45);

  --chip-fondo:rgba(184,92,56,.10);
  --chip-txt:#7A3620;
  --chip-linea:rgba(184,92,56,.26);
  --estado-fondo:#E8DFD0;
  --estado-txt:#5A3A28;

  --pie-fondo:#1A0F08;
  --pie-txt:#F7F3EB;
  --pie-suave:rgba(247,243,235,.62);
  --pie-linea:rgba(247,243,235,.16);
  --pie-acento:#D97B52;
}

/* Variante nocturna: aqui si el fondo es la Tinta. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papel:#1A0F08;
    --papel-translucido:rgba(26,15,8,.90);
    --superficie:#241610;
    --superficie-2:#2E1D14;
    --banda:#221510;
    --tinta:#F2EAE0;
    --suave:#AC9A8C;
    --marca:#C4653D;
    --marca-fuerte:#D97B52;
    --marca-txt:#1A0F08;
    --acento:#D97B52;
    --sombra-marca:0 8px 20px -12px rgba(0,0,0,.8);
    --terminal:#F2EAE0;
    --terminal-txt:#1A0F08;
    --terminal-suave:rgba(26,15,8,.68);
    --linea:rgba(242,234,224,.13);
    --linea-fuerte:rgba(242,234,224,.26);
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -20px rgba(0,0,0,.8);
    --sombra-alta:0 2px 6px rgba(0,0,0,.6), 0 22px 44px -22px rgba(0,0,0,.9);
    --chip-fondo:rgba(217,123,82,.15);
    --chip-txt:#E3A182;
    --chip-linea:rgba(217,123,82,.32);
    --estado-fondo:rgba(242,234,224,.10);
    --estado-txt:#E8DCD0;
    --pie-fondo:#0E0805;
  }
}
/* El mismo juego de tokens, pero forzado con data-theme="dark".
   Por que hace falta duplicarlo: el media query solo reacciona al ajuste del
   sistema. Sin este bloque, alguien con la Mac en claro no podria elegir
   oscuro nunca — y alguien con la Mac en oscuro no podria ver el diseno
   claro, que es la identidad de la marca. */
:root[data-theme="dark"]{
    --papel:#1A0F08;
    --papel-translucido:rgba(26,15,8,.90);
    --superficie:#241610;
    --superficie-2:#2E1D14;
    --banda:#221510;
    --tinta:#F2EAE0;
    --suave:#AC9A8C;
    --marca:#C4653D;
    --marca-fuerte:#D97B52;
    --marca-txt:#1A0F08;
    --acento:#D97B52;
    --sombra-marca:0 8px 20px -12px rgba(0,0,0,.8);
    --terminal:#F2EAE0;
    --terminal-txt:#1A0F08;
    --terminal-suave:rgba(26,15,8,.68);
    --linea:rgba(242,234,224,.13);
    --linea-fuerte:rgba(242,234,224,.26);
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -20px rgba(0,0,0,.8);
    --sombra-alta:0 2px 6px rgba(0,0,0,.6), 0 22px 44px -22px rgba(0,0,0,.9);
    --chip-fondo:rgba(217,123,82,.15);
    --chip-txt:#E3A182;
    --chip-linea:rgba(217,123,82,.32);
    --estado-fondo:rgba(242,234,224,.10);
    --estado-txt:#E8DCD0;
    --pie-fondo:#0E0805;
}


/* Textura de papel, muy tenue */
body{
  background-image:radial-gradient(circle at 1px 1px, rgba(122,106,90,.13) 1px, transparent 0);
  background-size:26px 26px;
}
@media (prefers-color-scheme: dark){
  body:not([data-theme="light"]){background-image:radial-gradient(circle at 1px 1px, rgba(242,234,224,.06) 1px, transparent 0)}
}

/* El cuadrito terracota al lado de cada titulo de seccion */
.cabeza h2{position:relative}
.cabeza h2::before{content:"";position:absolute;left:-20px;top:.34em;width:7px;height:7px;background:var(--marca)}
@media (max-width:920px){.cabeza h2::before{display:none}}

/* --- Bandas: dos tonos de crema, sin bloques cafe ------------- */
.banda-suave{background:var(--banda)}
.banda-papel{background:var(--superficie)}
/* Se quedan definidas para las subpaginas, pero la principal ya no las usa */
.banda-oscura{background:#1A0F08;color:#F7F3EB}
.banda-oscura h2,.banda-oscura h3,.banda-oscura h4{color:#FFFFFF}
.banda-oscura p{color:rgba(247,243,235,.78)}
.banda-oscura .eyebrow{color:#D97B52}
.banda-oscura .cabeza h2::before{background:#D97B52}