/* =======================================================================
   BORRADOR · Paleta nueva de ARRAIGO (solo la usa index-paleta.html)
   Va DESPUÉS de home.css, mujeres.css, pedir.css y chordeleg.css, y los pisa.
   Todos los colores del sitio salen de las 8 variables de abajo: cambia un valor aquí y cambia en todo.
   ======================================================================= */
:root{
  --paja:#FDFCFA;      /* fondo principal; también el texto sobre fondos oscuros o verdes */
  --toquilla:#F6F5F2;  /* fondos alternos de secciones */
  --fibra:#E9E7E3;     /* líneas, separadores y bordes finos */
  --tinta:#111110;     /* titulares y texto principal */
  --carbon:#3D3D3B;    /* texto secundario */
  --neblina:#8E8D8A;   /* texto apagado, preguntas en cursiva, notas */
  --esmeralda:#0E7A52; /* color de marca: bloques grandes y botones */
  --achiote:#9A3B26;   /* acento de detalles pequeños */

  /* Los nombres viejos ahora apuntan a la paleta nueva */
  --off-white:var(--paja); --pure-white:var(--toquilla);
  --off-black:var(--tinta); --pure-black:var(--tinta);
  --steel:var(--carbon); --ash:var(--neblina); --blue:var(--achiote);
  --line:var(--fibra); --line-1px:var(--fibra);

  /* Tipografías (ver tipografia.css) */
  --f-serif:'EB Garamond', Georgia, serif;
  --f-sans:'Manrope', Arial, sans-serif;
  --f-mono:'Overpass Mono', 'Courier New', monospace;
  --font:var(--f-sans); --serif:var(--f-serif); --mono:var(--f-mono);
}

/* ---------- Base ---------- */
body{ background:var(--paja); color:var(--tinta); }
.h1,.h2{ color:var(--tinta); }
.lead{ color:var(--carbon); }
.lnk{ color:inherit; border-bottom-color:var(--achiote); }
.ph{ background:var(--fibra); }
.qa__q{ color:var(--neblina); }
.qa__a{ color:var(--tinta); }
.card__t, .cho__price, .step__n, .step__t{ color:var(--tinta); }

/* ---------- Botón principal: esmeralda; al pasar el mouse baja a 88% ---------- */
.btn{ background:var(--esmeralda); color:var(--paja); transition:opacity .2s ease; }
.btn:hover{ background:var(--esmeralda); opacity:.88; transform:none; }

/* ---------- Franja de anuncios: esmeralda con texto paja ---------- */
html .franja{ background:var(--esmeralda); color:var(--paja); }

/* ---------- Header ---------- */
.top{ color:var(--paja); }
.top.is-solid{ background:color-mix(in srgb, var(--paja) 86%, transparent); color:var(--tinta); }
.top.is-open{ background:var(--paja); color:var(--tinta); }
.nav__sub a{ color:var(--tinta); }
@media (hover:hover){ .nav__sub a:hover{ background:var(--fibra); } }
@media (max-width:999px){ .nav__sub a{ border-left-color:var(--neblina); } }
.pill:focus-visible{ outline-color:var(--paja); }

/* Links con punto: subrayado y cuadrito en achiote (sobre la foto del hero, paja) */
.pill::before{ background:var(--achiote); }
.hero .pill::before{ background:var(--paja); }
.pill__t{ background-image:linear-gradient(var(--achiote),var(--achiote)); }
.hero .pill__t{ background-image:linear-gradient(var(--paja),var(--paja)); }

/* ---------- 1 · Hero (texto paja sobre la foto) ---------- */
.hero{ color:var(--paja); }
.hero .h1{ color:var(--paja); }
.hero .lead{ color:color-mix(in srgb, var(--paja) 90%, transparent); }
.hero__scrim{ background:linear-gradient(to top, rgba(17,17,16,.74) 0%, rgba(17,17,16,.46) 22%, rgba(17,17,16,0) 45%), linear-gradient(to bottom, rgba(17,17,16,.30) 0%, rgba(17,17,16,0) 18%); }
@media (max-width:899px){
  .hero[data-m="top"] .hero__scrim{ background:linear-gradient(to top, rgba(17,17,16,.74) 0%, rgba(17,17,16,.46) 22%, rgba(17,17,16,0) 45%), linear-gradient(to bottom, rgba(17,17,16,.62) 0%, rgba(17,17,16,.30) 36%, rgba(17,17,16,0) 58%); }
}
/* Indicadores de posición: la parte llena en achiote sobre una raya clara */
.bar::before{ background:color-mix(in srgb, var(--paja) 45%, transparent); }
.bar i{ background:var(--achiote); }
.bar:focus-visible{ outline-color:var(--paja); }

/* ---------- 3 · Charms ---------- */
.ac__item{ background:var(--paja); }
.ac__btn{ color:var(--tinta); }
.ac__nm{ color:var(--tinta); }
.ac__shade{ background:linear-gradient(to bottom, rgba(17,17,16,0) 30%, rgba(17,17,16,.82) 100%); }
/* Etiquetas pequeñas en Overpass Mono */
.ac__tag{ font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.12em; color:var(--achiote); }
.ac__txt .ch__name{ font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.12em; color:var(--paja); }
.ac__txt .ch__what{ color:var(--paja); }
.ac__txt .ch__pre{ color:color-mix(in srgb, var(--paja) 92%, transparent); }
.ac__txt .ch__go{ color:var(--paja); text-decoration-color:var(--achiote); text-decoration-thickness:2px; }
@media (min-width:769px){ .ac__nm{ color:var(--paja); } }
.dots button::before{ background:var(--neblina); opacity:.5; }
.dots button[aria-current="true"]::before{ background:var(--achiote); opacity:1; }

/* ---------- 4 · Mujeres (fondo tinta, texto paja) ---------- */
#las-que-la-llevan{ background:var(--tinta); }
#las-que-la-llevan .h2, #las-que-la-llevan .card__t{ color:var(--paja); }
#las-que-la-llevan .lead, #las-que-la-llevan .card__p{ color:color-mix(in srgb, var(--paja) 72%, transparent); }
#las-que-la-llevan .lnk, .mu2__wt .lnk{ color:var(--paja); border-bottom-color:var(--paja); }
.mu2{ --panel:linear-gradient(135deg,rgba(17,17,16,.50) 0%,rgba(17,17,16,.68) 100%); }
.mu2__text{ background:var(--tinta); }
.mu2__title{ color:var(--paja); }
.mu2__p{ color:color-mix(in srgb, var(--paja) 82%, transparent); }
.mu2__wt{ color:var(--paja); }
.mu2__lb{ font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--paja); }
.mu2__bar::before{ background:var(--paja); opacity:.4; }
.mu2__bar i{ background:var(--achiote); }
.mu2__arrow{ background:color-mix(in srgb, var(--paja) 94%, transparent); color:var(--tinta); border-color:var(--fibra); }

/* ---------- 5 · Cómo pedir: fondo claro (toquilla). El esmeralda ya no se usa como fondo de secciones:
   solo en la franja del taller, en los botones principales y en la línea de progreso de abajo ---------- */
#como-pedir{ background:var(--toquilla); color:var(--tinta); }
#como-pedir .h2{ color:var(--tinta); }
#como-pedir .ped__head .lead{ color:var(--carbon); }
.ped2__w{ color:var(--neblina); transition:color .4s ease; }
.ped2__it.is-on .ped2__w{ color:var(--tinta); }
.ped2__fr p, .ped2__mf{ color:var(--carbon); }
.ped2__mw{ color:var(--tinta); }
.ped2__duda .pill{ color:var(--tinta); }
/* Línea de progreso: lo recorrido en esmeralda sólido, lo que falta en fibra */
.ped2__bar{ background:var(--fibra); }
.ped2__bar i{ background:var(--esmeralda); }
/* Imagen de cada paso: esquinas con radio leve de 4 px y sin sombra (la única excepción a las esquinas cuadradas) */
.ped2__frame, .ped2__mvis{ border-radius:4px !important; box-shadow:none; overflow:hidden; }
.ped2__frame, .ped2__mvis, .chat{ background:var(--fibra); }
.chat__b{ color:var(--tinta); }
.chat__b--ellos, .chat__typing{ background:var(--paja); }
.chat__h{ color:var(--neblina); }
.chat__h b{ color:var(--neblina); }

/* ---------- 6 · Chordeleg ---------- */
.cho2__title, .cho2__f{ color:var(--tinta); }
.cho2__f--sans{ color:var(--carbon); }
.cho2__price{ color:var(--tinta); }
.cho2__line{ background:color-mix(in srgb, var(--tinta) 35%, transparent); }
.cho2__end .pill{ color:var(--tinta); }
@media (prefers-reduced-motion:no-preference){
  .cho2__sticky{ background:var(--tinta); }
  .cho2__title, .cho2__f{ color:var(--paja); }
  .cho2__f--sans{ color:color-mix(in srgb, var(--paja) 82%, transparent); }
  .cho2__bg::after{ background:linear-gradient(to bottom, rgba(17,17,16,.72) 0%, rgba(17,17,16,.82) 40%, rgba(17,17,16,.92) 100%); }
}
@media (min-width:769px) and (prefers-reduced-motion:no-preference){
  .cho2__bg::after{
    background:linear-gradient(to right, rgba(17,17,16,.92) 0%, rgba(17,17,16,.82) 40%, rgba(17,17,16,.55) 58%, rgba(17,17,16,.18) 76%, rgba(17,17,16,0) 90%),
               linear-gradient(to bottom, rgba(17,17,16,.35) 0%, rgba(17,17,16,0) 18%); }
}

/* ---------- Footer ---------- */
.footer{ background:var(--tinta); color:var(--paja); }
.footer__brand p, .footer__col li, .footer__col a{ color:color-mix(in srgb, var(--paja) 62%, transparent); }
.footer__col a:hover{ color:var(--paja); }