/* =============================================================
   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);

  /* Elevación: la profundidad de las tarjetas y los botones */
  --elev-0:0 1px 2px rgba(26,15,8,.05);
  --elev-1:0 1px 2px rgba(26,15,8,.05), 0 8px 16px -6px rgba(26,15,8,.15);
  --elev-2:0 2px 4px rgba(26,15,8,.07), 0 18px 30px -10px rgba(26,15,8,.24);
  --elev-marca:0 2px 4px rgba(158,74,43,.18), 0 12px 22px -6px rgba(184,92,56,.45);
  --filo:inset 0 0 0 0 transparent;

  /* Chapa "Asesor" del encabezado: metal cálido que gira como una moneda */
  /* Oro metálico, no terracota: con la terracota oscura el texto de la
     chapa quedaba en 1.87:1 sobre el extremo claro del degradado, o sea
     ilegible. Este oro con tinta casi negra da entre 5.7 y 10.3:1. */
  --chapa-fondo:linear-gradient(135deg,#F7C98B 0%,#EDA85C 45%,#D98A42 100%);
  --chapa-txt:#3A1B08;
  --chapa-sombra:0 2px 5px rgba(158,74,43,.42), inset 0 1px 0 rgba(255,255,255,.34);
  --pulso:184,92,56;
  --op-fondo:#F7F3EB;
  --pan-fondo:#1A1512;
  --portico-nombre:#6B5C50;
  --pan-textura-movil:radial-gradient(120% 80% at 30% 20%, #3A3128 0%, #241E18 45%, #16120F 100%);

  --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:#191512;
    --papel-translucido:rgba(25,21,18,.90);
    --superficie:#221E1A;
    --superficie-2:#2C2722;
    --banda:#1F1B17;
    --tinta:#F7F3EB;
    --suave:#B5ADA4;
    --marca:#C4653D;
    --marca-fuerte:#D97B52;
    --marca-txt:#191512;
    --acento:#D97B52;
    --sombra-marca:0 8px 20px -12px rgba(0,0,0,.8);
    --terminal:#F7F3EB;
    --terminal-txt:#191512;
    --terminal-suave:rgba(25,21,18,.70);
    --linea:rgba(247,243,235,.15);
    --linea-fuerte:rgba(247,243,235,.28);
    --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);

    --elev-0:0 1px 2px rgba(0,0,0,.55);
    --elev-1:0 1px 2px rgba(0,0,0,.55), 0 10px 20px -8px rgba(0,0,0,.8);
    --elev-2:0 2px 6px rgba(0,0,0,.65), 0 22px 36px -12px rgba(0,0,0,.92);
    --elev-marca:0 2px 6px rgba(0,0,0,.6), 0 12px 24px -6px rgba(217,123,82,.42);
    --filo:inset 0 1px 0 rgba(247,243,235,.07);

    --chapa-fondo:linear-gradient(135deg,#FAD49B 0%,#F0B168 45%,#DE9148 100%);
    --chapa-txt:#3A1B08;
    --chapa-sombra:0 2px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
    --pulso:217,123,82;
    --op-fondo:#2C2722;
    --pan-fondo:#0F0D0B;
    --portico-nombre:#B5ADA4;
    --pan-textura-movil:radial-gradient(120% 80% at 30% 20%, #2B241D 0%, #1A150F 45%, #0E0B09 100%);
    --chip-fondo:rgba(217,123,82,.15);
    --chip-txt:#E3A182;
    --chip-linea:rgba(217,123,82,.32);
    --estado-fondo:rgba(247,243,235,.11);
    --estado-txt:#EFE8DB;
    --pie-fondo:#120F0D;
  }
}
/* 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:#191512;
    --papel-translucido:rgba(25,21,18,.90);
    --superficie:#221E1A;
    --superficie-2:#2C2722;
    --banda:#1F1B17;
    --tinta:#F7F3EB;
    --suave:#B5ADA4;
    --marca:#C4653D;
    --marca-fuerte:#D97B52;
    --marca-txt:#191512;
    --acento:#D97B52;
    --sombra-marca:0 8px 20px -12px rgba(0,0,0,.8);
    --terminal:#F7F3EB;
    --terminal-txt:#191512;
    --terminal-suave:rgba(25,21,18,.70);
    --linea:rgba(247,243,235,.15);
    --linea-fuerte:rgba(247,243,235,.28);
    --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);

    --elev-0:0 1px 2px rgba(0,0,0,.55);
    --elev-1:0 1px 2px rgba(0,0,0,.55), 0 10px 20px -8px rgba(0,0,0,.8);
    --elev-2:0 2px 6px rgba(0,0,0,.65), 0 22px 36px -12px rgba(0,0,0,.92);
    --elev-marca:0 2px 6px rgba(0,0,0,.6), 0 12px 24px -6px rgba(217,123,82,.42);
    --filo:inset 0 1px 0 rgba(247,243,235,.07);

    --chapa-fondo:linear-gradient(135deg,#FAD49B 0%,#F0B168 45%,#DE9148 100%);
    --chapa-txt:#3A1B08;
    --chapa-sombra:0 2px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
    --pulso:217,123,82;
    --op-fondo:#2C2722;
    --pan-fondo:#0F0D0B;
    --portico-nombre:#B5ADA4;
    --pan-textura-movil:radial-gradient(120% 80% at 30% 20%, #2B241D 0%, #1A150F 45%, #0E0B09 100%);
    --chip-fondo:rgba(217,123,82,.15);
    --chip-txt:#E3A182;
    --chip-linea:rgba(217,123,82,.32);
    --estado-fondo:rgba(247,243,235,.11);
    --estado-txt:#EFE8DB;
    --pie-fondo:#120F0D;
}


/* 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}


/* --- Islas claras dentro del modo oscuro -----------------------
   Dos bloques se quedan en papel crema aunque la página esté en oscuro:
   el panel de resultados del buscador y el pie. Es a propósito: son los
   dos lugares donde el visitante lee con calma, y el crema los separa
   del resto de la pantalla.

   Se escribe para los dos contextos oscuros —el del sistema operativo y
   el del interruptor de la página— porque son selectores distintos. */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .resultado{
    /* Vuelve a ser papel claro dentro del modo oscuro.

       Ojo con la línea de `color`: no sobra. Redefinir --tinta aquí NO
       cambia el texto, porque `color` ya se resolvió en body con el
       --tinta de la raíz y los descendientes heredan ese valor calculado,
       no la variable. Declarar color otra vez dentro de la isla lo obliga
       a re-resolverse, y de ahí sí lo heredan los hijos. */
    color:var(--tinta);
    --papel:#F7F3EB;
    --papel-translucido:rgba(247,243,235,.92);
    --superficie:#EFE8DB;
    --superficie-2:#E8DFD0;
    --banda:#E8DFD0;
    --op-fondo:#FFFFFF;
    --tinta:#1A0F08;
    --suave:#665648;
    --acento:#8A3F24;
    --marca:#B85C38;
    --marca-fuerte:#9E4A2B;
    --marca-txt:#FFFFFF;
    --linea:rgba(26,15,8,.14);
    --linea-fuerte:rgba(26,15,8,.28);
    --filo:inset 0 0 0 0 transparent;
    --elev-0:0 1px 2px rgba(26,15,8,.05);
    --elev-1:0 1px 2px rgba(26,15,8,.05), 0 8px 16px -6px rgba(26,15,8,.15);
    --elev-2:0 2px 4px rgba(26,15,8,.07), 0 18px 30px -10px rgba(26,15,8,.24);
    --elev-marca:0 2px 4px rgba(158,74,43,.18), 0 12px 22px -6px rgba(184,92,56,.45);
    --chip-fondo:rgba(184,92,56,.10);
    --chip-txt:#8A3F24;
    --chip-linea:rgba(184,92,56,.26);
    --estado-fondo:rgba(26,15,8,.06);
    --estado-txt:#463A2F;
    --terminal:#3D2B1F;
    --terminal-txt:#F7F3EB;
    --terminal-suave:rgba(247,243,235,.70);
    --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);
  }
  :root:not([data-theme="light"]) body > footer{
    /* El pie también pasa a crema en modo oscuro. Su acento va al
       terracota oscuro: el claro (#D97B52) sobre crema no alcanza el
       contraste mínimo. Y `color` se vuelve a declarar por lo mismo que
       en el panel de resultados. */
    color:var(--pie-txt);
    --pie-fondo:#F7F3EB;
    --pie-txt:#1A0F08;
    --pie-suave:rgba(26,15,8,.66);
    --pie-linea:rgba(26,15,8,.16);
    --pie-acento:#8A3F24;
  }
}

:root[data-theme="dark"] .resultado{
    /* Vuelve a ser papel claro dentro del modo oscuro.

       Ojo con la línea de `color`: no sobra. Redefinir --tinta aquí NO
       cambia el texto, porque `color` ya se resolvió en body con el
       --tinta de la raíz y los descendientes heredan ese valor calculado,
       no la variable. Declarar color otra vez dentro de la isla lo obliga
       a re-resolverse, y de ahí sí lo heredan los hijos. */
    color:var(--tinta);
    --papel:#F7F3EB;
    --papel-translucido:rgba(247,243,235,.92);
    --superficie:#EFE8DB;
    --superficie-2:#E8DFD0;
    --banda:#E8DFD0;
    --op-fondo:#FFFFFF;
    --tinta:#1A0F08;
    --suave:#665648;
    --acento:#8A3F24;
    --marca:#B85C38;
    --marca-fuerte:#9E4A2B;
    --marca-txt:#FFFFFF;
    --linea:rgba(26,15,8,.14);
    --linea-fuerte:rgba(26,15,8,.28);
    --filo:inset 0 0 0 0 transparent;
    --elev-0:0 1px 2px rgba(26,15,8,.05);
    --elev-1:0 1px 2px rgba(26,15,8,.05), 0 8px 16px -6px rgba(26,15,8,.15);
    --elev-2:0 2px 4px rgba(26,15,8,.07), 0 18px 30px -10px rgba(26,15,8,.24);
    --elev-marca:0 2px 4px rgba(158,74,43,.18), 0 12px 22px -6px rgba(184,92,56,.45);
    --chip-fondo:rgba(184,92,56,.10);
    --chip-txt:#8A3F24;
    --chip-linea:rgba(184,92,56,.26);
    --estado-fondo:rgba(26,15,8,.06);
    --estado-txt:#463A2F;
    --terminal:#3D2B1F;
    --terminal-txt:#F7F3EB;
    --terminal-suave:rgba(247,243,235,.70);
    --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);
  }
:root[data-theme="dark"] body > footer{
    /* El pie también pasa a crema en modo oscuro. Su acento va al
       terracota oscuro: el claro (#D97B52) sobre crema no alcanza el
       contraste mínimo. Y `color` se vuelve a declarar por lo mismo que
       en el panel de resultados. */
    color:var(--pie-txt);
    --pie-fondo:#F7F3EB;
    --pie-txt:#1A0F08;
    --pie-suave:rgba(26,15,8,.66);
    --pie-linea:rgba(26,15,8,.16);
    --pie-acento:#8A3F24;
  }


/* Dentro de las islas claras, el texto que traía color de una regla de
   afuera se vuelve a atar a los tokens de la isla.

   Los dos bloques van SEPARADOS a propósito: el panel de resultados usa
   --tinta y el pie usa --pie-txt. Juntarlos en una sola lista de
   selectores fue un error que cometí: dentro del panel, --pie-txt no está
   definido, así que caía al valor de la raíz —crema— y los títulos
   quedaban invisibles otra vez. */

/* --- el panel de resultados --- */
:root[data-theme="dark"] .resultado h1,
:root[data-theme="dark"] .resultado h2,
:root[data-theme="dark"] .resultado h3,
:root[data-theme="dark"] .resultado h4,
:root[data-theme="dark"] .resultado b,
:root[data-theme="dark"] .resultado strong{color:var(--tinta)}
:root[data-theme="dark"] .resultado p,
:root[data-theme="dark"] .resultado li{color:inherit}
:root[data-theme="dark"] .resultado .res-sub,
:root[data-theme="dark"] .resultado .res-cierre p{color:var(--suave)}

/* --- el pie --- */
:root[data-theme="dark"] body > footer b,
:root[data-theme="dark"] body > footer strong,
:root[data-theme="dark"] body > footer .pie-datos a{color:var(--pie-txt)}
:root[data-theme="dark"] body > footer .pie-links a{color:var(--pie-suave)}
:root[data-theme="dark"] body > footer .legal{color:var(--pie-suave)}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .resultado h1,
  :root:not([data-theme="light"]) .resultado h2,
  :root:not([data-theme="light"]) .resultado h3,
  :root:not([data-theme="light"]) .resultado h4,
  :root:not([data-theme="light"]) .resultado b,
  :root:not([data-theme="light"]) .resultado strong{color:var(--tinta)}
  :root:not([data-theme="light"]) .resultado p,
  :root:not([data-theme="light"]) .resultado li{color:inherit}
  :root:not([data-theme="light"]) .resultado .res-sub,
  :root:not([data-theme="light"]) .resultado .res-cierre p{color:var(--suave)}

  :root:not([data-theme="light"]) body > footer b,
  :root:not([data-theme="light"]) body > footer strong,
  :root:not([data-theme="light"]) body > footer .pie-datos a{color:var(--pie-txt)}
  :root:not([data-theme="light"]) body > footer .pie-links a{color:var(--pie-suave)}
  :root:not([data-theme="light"]) body > footer .legal{color:var(--pie-suave)}
}