/* ============================================================
   MARCA.CSS · On Deck Co. · base compartida
   Escrita el 15 de septiembre de 2026 (tanda 0 del rediseno).

   QUE ES
   Los tokens del Design System oficial (la carpeta que Omar armo en
   Drive, copiada a docs/claudework/design-system/) mas una capa base
   de tipo, botones, barra, tarjetas y formularios.

   POR QUE EXISTE
   Hoy cada una de las 65 paginas con navegacion lleva su CSS adentro,
   con su propia copia de los colores. Repintar 65 paginas a mano es la
   garantia de que la numero 40 quede distinta de la numero 3. Esta hoja
   pone los valores en UN solo lugar: el cambio se hace aqui y baja solo.

   ESTA HOJA NO ESTA CABLEADA A NINGUNA PAGINA TODAVIA, A PROPOSITO.
   El sitio se ve hoy igual que ayer. Se cablea tanda por tanda, con
   vista previa y con el OK de Omar en cada una (R11).

   COMO SE CABLEA UNA PAGINA
     1. En el <head>, DESPUES del <style> propio de la pagina:
          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
          <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700&display=swap">
          <link rel="stylesheet" href="/css/marca.css">
     2. En la etiqueta de apertura:  <html lang="en" class="marca">
     3. Se borran del <style> inline las reglas que esta hoja ya cubre.

   OJO: SIN EL <link> DE LAS FUENTES, Lora y Source Sans 3 no cargan y
   la pagina cae a Georgia y a la sans del sistema. No falla con error:
   falla viendose parecido. Se comprueba mirando, no leyendo el codigo.

   LAS DOS DECISIONES DE OMAR DEL 15 DE SEPTIEMBRE, ESCRITAS AQUI
     · La barra va en VERDE (#243D2C), no en carbon.
     · El fondo de TODO el sitio es papel (#FBF8F0), no negro.
   Cambiarlas es cambiar --nav-bg y --bg en este archivo, nada mas.

   FUENTE: docs/claudework/design-system/readme.md. Si los dos se
   contradicen, manda el readme y esta hoja se corrige.
   ============================================================ */

:root{
  /* ---- verde oscuro: el color distintivo de la marca ---- */
  --green-900:#12201A;
  --green-800:#1A2E22;
  --green-700:#243D2C;   /* verde oficial */
  --green-600:#2E4B36;
  --green-500:#3B5B43;
  --green-100:#DDE3DA;
  --green-50:#EDF1EA;

  /* ---- sage: verde medio de apoyo ---- */
  --sage-700:#53614F;
  --sage-600:#687A63;    /* sage oficial */
  --sage-400:#93A18E;
  --sage-200:#C4CCC0;
  --sage-100:#E3E7E0;

  /* ---- crema ---- */
  --cream-50:#FBF7EC;
  --cream-100:#F4ECD5;   /* crema oficial */
  --cream-200:#EADFC2;
  --cream-300:#DCCDA6;

  /* ---- dorado: acento de uso moderado, una accion por pantalla ---- */
  --gold-700:#A8853B;
  --gold-600:#C9A24B;    /* dorado oficial */
  --gold-400:#DCBC77;
  --gold-200:#F0E2BE;

  /* ---- carbon: neutral oscuro de APOYO. No sustituye al verde ---- */
  --char-900:#1A1A1A;    /* carbon oficial */
  --char-800:#262626;
  --char-700:#3A3A3A;
  --char-600:#545454;
  --char-500:#6E6E6E;
  --char-400:#949494;
  --char-300:#BEBCB7;
  --char-200:#DFDCD5;
  --char-100:#EFEDE7;

  --paper:#FBF8F0;       /* fondo de pagina por defecto */
  --paper-2:#F4EEE0;     /* fondo alterno o hundido */
  --white:#FFFFFF;

  /* ---- semanticos: interfaz, NUNCA colores de marca ---- */
  --success-600:#3E7A4E; --success-100:#DEEBDF;
  --warning-600:#B4862A; --warning-100:#F6E9C8;
  --danger-600:#A8412C;  --danger-100:#F2DCD5;
  --info-600:#3D5A6C;    --info-100:#DCE5EA;

  /* ---- alias: estos son los que se usan al escribir producto ---- */
  --bg:var(--paper);
  --bg-sunk:var(--paper-2);
  --bg-dark:var(--green-700);
  --bg-charcoal:var(--char-900);
  --surface:var(--white);
  --surface-cream:var(--cream-50);

  --brand:var(--green-700);
  --brand-strong:var(--green-800);
  --brand-soft:var(--green-50);
  --brand-mid:var(--sage-600);
  --on-brand:var(--cream-100);

  --accent:var(--gold-600);
  --accent-soft:var(--gold-200);
  --accent-strong:var(--gold-700);

  --text-strong:var(--char-900);
  --text-body:var(--char-700);
  --text-muted:var(--char-500);
  --text-faint:var(--char-400);
  --text-on-dark:var(--cream-100);
  --text-on-dark-muted:var(--sage-200);

  --line:var(--char-200);
  --line-strong:var(--char-300);
  --line-on-dark:rgba(244,236,213,.22);
  --focus-ring:var(--gold-600);

  /* ---- tipografia ---- */
  --font-display:'Lora',Georgia,'Times New Roman',serif;
  --font-sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-label:var(--font-sans);
  --font-campaign:'Oswald','Arial Narrow',sans-serif; /* solo campana deportiva */

  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  --text-2xs:.6875rem; --text-xs:.75rem;  --text-sm:.875rem; --text-base:1rem;
  --text-md:1.125rem;  --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem;
  --text-3xl:3rem;     --text-4xl:4rem;    --text-5xl:5.25rem;

  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-.015em; --tracking-wide:.04em; --tracking-label:.14em; --tracking-badge:.28em;

  /* ---- espacio, base 4px ---- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;  --space-5:1.5rem;
  --space-6:2rem;   --space-7:2.5rem; --space-8:3rem;  --space-9:4rem;  --space-10:5rem;
  --space-12:7rem;

  --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;
  --border-hair:1px; --border-1:1.5px; --border-2:2px;

  --shadow-xs:0 1px 2px rgba(26,26,26,.06);
  --shadow-sm:0 1px 3px rgba(26,26,26,.08),0 1px 2px rgba(26,26,26,.04);
  --shadow-md:0 4px 14px rgba(26,26,26,.10);
  --shadow-lg:0 14px 34px rgba(26,26,26,.14);

  --container:1200px;
  --container-narrow:880px;
  --gutter:var(--space-5);

  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur-normal:200ms; --dur-slow:320ms;

  /* ---- decisiones de Omar, 15 de septiembre ---- */
  --nav-bg:var(--green-700);      /* la barra va verde */
  --nav-fg:var(--cream-100);
  --nav-h:72px;                   /* 68 a 76 en escritorio */
  --nav-h-sm:56px;                /* movil */
  --section-y:var(--space-10);    /* aire de seccion: 80 escritorio */
  --section-y-sm:var(--space-9);  /* 64 en movil */
}

/* ============================================================
   CAPA BASE
   Usa los MISMOS nombres de clase que ya tiene el sitio (.wrap,
   .display, .eyebrow, .btn, header.nav, .nav-in) para que cablear
   una pagina sea agregar un <link>, no renombrar su HTML.
   ============================================================ */

/* ---- reset, a especificidad CERO ----
   Va en :where() a proposito. Un reset tiene que PERDER contra cualquier regla
   propia de la pagina; si gana, rompe cosas que ya funcionaban. Ya paso dos
   veces en la tanda 1: un margin:0 en los titulares mato el `margin:0 auto` que
   centraba el titulo de las dos vias, y un color fijo pinto de carbon un titulo
   que iba en crema sobre el panel verde. Las reglas de COMPONENTE de mas abajo
   (.btn, .card, .nav-links) si llevan especificidad normal: esas deben ganar. */
:where(.marca) *{box-sizing:border-box}
:where(.marca) body{
  margin:0;
  background:var(--bg);
  color:var(--text-strong);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* El grano y la vineta del sitio viejo se apagan: el sistema pide
   superficies limpias, sin humo y sin degradados decorativos. */
:where(.marca) body::before{content:none}

:where(.marca) picture{display:contents}
/* OJO: aqui NO va un `height:auto` general, aunque se vea prolijo. El wordmark
   se sirve como PNG con alto fijo (.logo-cursive{height:46px}) y un height:auto
   global lo devuelve a su tamano natural: el logo tapaba media barra. Se vio en
   la captura del puente sobre /colecciones/, no leyendo el CSS.
   El `height:auto` va SOLO donde esta hoja pone `aspect-ratio` (leccion del
   24 de agosto: el atributo height del HTML anula el aspect-ratio del CSS). */
:where(.marca) img{max-width:100%;display:block}
:where(.marca) a{color:inherit;text-decoration:none}

.marca .wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.marca .wrap-narrow{max-width:var(--container-narrow)}

/* ---- tipo ---- */
/* los titulares NO declaran color: lo HEREDAN. Asi un panel verde que dice
   color:crema tine tambien su titulo, sin tener que enumerar cada caso. */
:where(.marca) :is(h1,h2,h3,h4),.marca .display{
  font-family:var(--font-display);
  font-weight:var(--fw-semibold);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);
  text-transform:none;
  margin:0;
}
:where(.marca) h1,.marca .display{font-size:clamp(2.125rem,5vw,var(--text-4xl))}
:where(.marca) h2{font-size:clamp(1.75rem,3.6vw,var(--text-3xl))}
:where(.marca) h3{font-size:var(--text-xl)}
:where(.marca) h4{font-size:var(--text-lg)}
/* TANDA 5: aqui decia `color:var(--text-body)` y esa es una trampa del
   propio reset. `:where()` da especificidad CERO y por eso pierde contra
   cualquier regla de la pagina, pero una pagina que NO escribe regla para
   `p` y se apoya en HEREDAR el color de su seccion no tiene con que ganar:
   una regla directa, aunque valga cero, le gana a un valor heredado.
   Resultado medido en `/prices/`: el parrafo del hero, que iba en crema
   sobre el panel verde, salia en carbon a 1.04 de contraste.
   Es la misma lecccion de la tanda 1 con los titulares, que ahi se arreglo
   y en el parrafo se quedo. El color lo pone `body` y se hereda. */
:where(.marca) p{margin:0 0 var(--space-4)}
.marca .lead{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body)}
.marca .muted{color:var(--text-muted)}

/* eyebrow y etiquetas: sans en caja alta, NUNCA condensada */
.marca .eyebrow,.marca .label{
  font-family:var(--font-label);
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:var(--tracking-label);
  font-size:var(--text-xs);
  /* TANDA 5: era `--brand-mid` a secas, o sea sage-600 fijo. Sobre papel eso
     daba 4.35 y sobre el pie verde 2.56, en toda pagina con `.label`. Pasa a
     `--sand`, que el puente remapea POR FONDO (sage-700 en claro, sage-200
     dentro del pie). Un color de etiqueta no puede ser uno solo si la
     etiqueta vive sobre dos fondos. */
  color:var(--sand,var(--brand-mid));
  margin:0;
}
.marca .eyebrow{color:var(--accent-strong)}

/* filete dorado corto bajo un titular: 2px, y uno por pantalla */
.marca .rule-gold{width:56px;height:var(--border-2);background:var(--accent);border:0;margin:var(--space-4) 0 0}

/* ---- botones ---- */
.marca .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:44px;padding:var(--space-3) var(--space-5);
  font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--fw-semibold);
  letter-spacing:0;text-transform:none;
  border:var(--border-1) solid transparent;border-radius:var(--radius-sm);
  cursor:pointer;transition:background var(--dur-normal) var(--ease-standard),
    border-color var(--dur-normal) var(--ease-standard),color var(--dur-normal) var(--ease-standard);
}
.marca .btn:active{transform:translateY(1px)}
.marca .btn-primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.marca .btn-primary:hover{background:var(--brand-strong);border-color:var(--brand-strong)}
.marca .btn-secondary{background:transparent;color:var(--brand);border-color:var(--brand)}
.marca .btn-secondary:hover{background:var(--brand-soft)}
.marca .btn-gold{background:var(--accent);color:var(--char-900);border-color:var(--accent)}
.marca .btn-gold:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--cream-50)}
.marca .btn-dark{background:var(--char-900);color:var(--cream-100);border-color:var(--char-900)}
.marca .btn-dark:hover{background:var(--char-800);border-color:var(--char-800)}
/* .btn-ghost es la clase VIEJA del sitio (contorno claro sobre negro). Sobre
   papel su borde quedaba casi invisible, asi que se alinea con el secundario. */
.marca .btn-ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.marca .btn-ghost:hover{background:var(--brand-soft);color:var(--brand)}
.marca .on-dark .btn-ghost{color:var(--cream-100);border-color:var(--line-on-dark)}
.marca .btn-text{background:none;border:0;padding:var(--space-2) 0;min-height:0;color:var(--brand);text-decoration:underline;text-underline-offset:3px}
/* sobre verde o carbon el contorno se invierte */
.marca .on-dark .btn-secondary{color:var(--cream-100);border-color:var(--line-on-dark)}
.marca .on-dark .btn-secondary:hover{background:rgba(244,236,213,.08);border-color:var(--cream-100)}

/* ---- barra ---- */
.marca .topbar{position:sticky;top:0;z-index:1000}
.marca header.nav{
  position:relative;
  background:var(--nav-bg);
  color:var(--nav-fg);
  border-bottom:var(--border-hair) solid rgba(244,236,213,.12);
  backdrop-filter:none;   /* sin glassmorphism: lo pide el sistema y ademas
                             rompia el position:fixed del cajon movil */
}
.marca .nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:var(--space-5)}
.marca .nav-links{display:flex;align-items:center;gap:var(--space-2)}
.marca .nav-links a{
  position:relative;padding:var(--space-2) var(--space-3);
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--nav-fg);
  border-radius:var(--radius-xs);
}
/* enlace activo y hover: subrayado dorado de 1.5px, sin degradados */
.marca .nav-links a::after{
  content:"";position:absolute;left:var(--space-3);right:var(--space-3);bottom:4px;
  height:var(--border-1);background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-normal) var(--ease-out);
}
.marca .nav-links a:hover::after,
.marca .nav-links a:focus-visible::after,
.marca .nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.marca .lang-toggle{
  background:none;color:var(--nav-fg);cursor:pointer;
  font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  border:var(--border-hair) solid var(--line-on-dark);border-radius:var(--radius-xs);
  padding:var(--space-2) var(--space-3);
}
.marca .lang-toggle:hover{border-color:var(--accent);color:var(--accent)}
.marca .nav-burger span{background:var(--nav-fg)}

/* ---- barra en movil: el cajon ----
   El boton lo inyecta js/nav-movil.js, que es COMPORTAMIENTO y se queda.
   Lo que cambia aqui es la piel: verde en vez de negro, Lora en vez de
   Anton. Una pagina cableada a esta hoja deja de cargar css/nav-movil.css
   y SIGUE cargando js/nav-movil.js.
   El corte va en 880px porque ese es el ancho con el que el script cierra
   el cajon al girar el telefono. Si los dos no coinciden, el menu se queda
   abierto e invisible encima del contenido. */
.marca .nav-burger{display:none;background:none;border:0;padding:10px 6px;
  cursor:pointer;flex-direction:column;gap:5px}
.marca .nav-burger span{display:block;width:26px;height:2px;background:var(--nav-fg);
  transition:transform var(--dur-slow) var(--ease-standard),opacity var(--dur-normal)}
.marca body.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.marca body.nav-open .nav-burger span:nth-child(2){opacity:0}
.marca body.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 26 sep: con "Catalogo" el menu tiene 6 enlaces + idioma + Escribenos.
   Entre 881 y 1340 px no cabia: "For Business" y "Get a Quote" partian en dos
   lineas y la portada se salia de la pantalla. Aqui se aprieta, no se esconde. */
.marca .nav-links a{white-space:nowrap}
.marca .lang-toggle{flex-shrink:0;white-space:nowrap}
.marca .nav-in>a:first-child{flex-shrink:0}
@media(min-width:881px) and (max-width:1340px){
  .marca .nav-in{gap:var(--space-3)}
  .marca .nav-links{gap:0}
  .marca .nav-links a{padding:var(--space-2) 8px;letter-spacing:.05em;font-size:12px}
  html.marca .nav-links a.nav-cta,html.marca .nav-links a.btn.nav-cta{padding:9px 12px;margin-left:6px}
  .marca .lang-toggle{padding:6px 10px;font-size:11px}
  .marca .nav-in>.lang-toggle{margin-left:10px;margin-right:10px}
}
@media(min-width:881px) and (max-width:1080px){
  .marca .nav-links a{padding:var(--space-2) 6px;letter-spacing:.03em;font-size:11.5px}
  html.marca .nav-links a.nav-cta,html.marca .nav-links a.btn.nav-cta{padding:8px 10px;margin-left:4px}
  .marca .nav-in .logo-cursive{height:34px;width:auto}
  .marca .nav-in>.lang-toggle{margin-left:8px;margin-right:4px;padding:5px 8px}
  .marca .nav-links .lang-toggle{padding:5px 8px;margin-left:4px}
}

@media(max-width:880px){
  .marca .nav-burger{display:flex;order:3;margin-left:auto;position:relative;z-index:1002}
  .marca .nav-links{
    position:fixed;inset:0;background:var(--nav-bg);
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:var(--space-1);padding:96px 32px 40px;z-index:1001;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity var(--dur-slow),transform var(--dur-slow),visibility var(--dur-slow);
  }
  .marca body.nav-open .nav-links{opacity:1;visibility:visible;transform:none}
  .marca .nav-links a{
    width:100%;padding:10px 0;
    font-family:var(--font-display);font-size:clamp(1.6rem,6vw,2.2rem);
    font-weight:var(--fw-semibold);text-transform:none;letter-spacing:var(--tracking-tight);
  }
  .marca .nav-links a::after{left:0;right:auto;width:44px;bottom:6px}

  /* EL BOTON DE IDIOMA NO SE PUEDE HUNDIR, y hay dos marcados distintos.
     La mayoria de quien compra es hispano, asi que en el telefono ese boton
     tiene que quedar a la vista, no septimo de ocho. Medido el 15 de
     septiembre: 64 de las 65 paginas con barra lo llevan DENTRO de
     .nav-links, y solo la portada lo tiene suelto en la barra. */
  .marca .nav-links .lang-toggle{order:-1;align-self:flex-start;margin:0 0 var(--space-5)}
  .marca .nav-in>.lang-toggle{order:2;margin:0 var(--space-4) 0 auto;position:relative;z-index:1002}
}

/* ---- superficies de seccion ---- */
.marca .sec{padding:var(--section-y) 0}
.marca .sec-cream{background:var(--surface-cream);color:var(--text-strong)}
.marca .sec-sunk{background:var(--bg-sunk)}
.marca .sec-dark{background:var(--bg-dark);color:var(--text-on-dark)}
.marca .sec-char{background:var(--bg-charcoal);color:var(--text-on-dark)}
.marca .sec-dark .muted,.marca .sec-char .muted{color:var(--text-on-dark-muted)}

/* ---- tarjetas ---- */
.marca .card{
  background:var(--surface);border:var(--border-hair) solid var(--line);
  border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-normal) var(--ease-standard),box-shadow var(--dur-normal) var(--ease-standard);
}
.marca .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.marca .card-media{aspect-ratio:1/1;background:var(--cream-100)}
.marca .card-media img{width:100%;height:100%;object-fit:cover}
:where(.marca) [style*="aspect-ratio"] img,:where(.marca) .ratio img{height:auto}
.marca .card-body{padding:var(--space-4)}
.marca .card-title{font-family:var(--font-display);font-size:var(--text-md);font-weight:var(--fw-semibold);
  color:var(--text-strong);line-height:var(--leading-snug);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.marca .card-meta{font-size:var(--text-sm);color:var(--text-muted);margin:var(--space-2) 0 0}
.marca .card-price{font-family:var(--font-sans);font-weight:var(--fw-bold);color:var(--text-strong);margin:var(--space-2) 0 0}

/* ---- etiquetas y estados ---- */
.marca .badge{
  display:inline-block;padding:3px var(--space-2);
  font-size:var(--text-2xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  border-radius:var(--radius-xs);background:var(--cream-100);color:var(--green-800);
}
.marca .badge-gold{background:var(--accent-soft);color:var(--gold-700)}
.marca .badge-green{background:var(--brand);color:var(--on-brand)}
.marca .msg{border-left:3px solid var(--info-600);background:var(--info-100);
  color:var(--text-strong);padding:var(--space-3) var(--space-4);border-radius:var(--radius-xs)}
.marca .msg-ok{border-left-color:var(--success-600);background:var(--success-100)}
.marca .msg-warn{border-left-color:var(--warning-600);background:var(--warning-100)}
.marca .msg-err{border-left-color:var(--danger-600);background:var(--danger-100)}

/* ---- formularios ---- */
:where(.marca) label{display:block;font-size:var(--text-2xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);
  margin:0 0 var(--space-2)}
:where(.marca) input,:where(.marca) select,:where(.marca) textarea{
  width:100%;min-height:44px;padding:var(--space-3);
  font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-strong);
  background:var(--white);border:var(--border-1) solid var(--line-strong);border-radius:var(--radius-sm);
}
.marca input:focus,.marca select:focus,.marca textarea:focus{outline:0;border-color:var(--brand)}
.marca .field-help{font-size:var(--text-sm);color:var(--text-muted);margin:var(--space-2) 0 0}
.marca .field-error{font-size:var(--text-sm);color:var(--danger-600);margin:var(--space-2) 0 0}

/* ---- foco de teclado, parejo en todo el sitio ---- */
.marca a:focus-visible,.marca button:focus-visible,
.marca input:focus-visible,.marca select:focus-visible,.marca textarea:focus-visible{
  outline:var(--border-2) solid var(--focus-ring);outline-offset:3px;
}

/* ---- responsive (readme seccion 15) ---- */
@media(max-width:1023px){
  .marca .wrap{padding:0 var(--space-4)}
}
@media(max-width:767px){
  .marca .nav-in{height:var(--nav-h-sm)}
  .marca .sec{padding:var(--section-y-sm) 0}
  .marca .wrap{padding:0 20px}
  .marca .btn-block,.marca .hero-cta .btn{width:100%;min-height:48px}
}
@media(prefers-reduced-motion:reduce){
  .marca *,.marca *::before,.marca *::after{transition:none!important;animation:none!important}
  .marca .card:hover{transform:none}
}

/* ============================================================
   PUENTE DE TOKENS VIEJOS
   Cada pagina del sitio trae adentro su propio :root con --ink,
   --gold, --ivory, --line y --maxw, de la epoca oscura y dorada.
   Este bloque los vuelve a apuntar a la paleta del sistema.

   Gana por especificidad, no por orden: `html.marca` es elemento mas
   clase, el `:root` de la pagina es solo pseudo-clase. Osea que
   funciona aunque el <style> inline venga despues de este archivo.

   PARA QUE SIRVE: convierte una pagina oscura en una de papel con
   UNA linea, sin tocar sus cientos de reglas. Es un puente de
   transicion, no el destino: en cada tanda, despues de verlo, se
   borran del inline las reglas que ya sobran.
   ============================================================ */
html.marca{
  --ink:var(--paper);          /* era el fondo negro de la pagina */
  --ink-2:var(--paper-2);
  --ink-3:var(--white);
  --ivory:var(--text-strong);  /* era el texto claro sobre negro */
  /* OJO con estos dos, que van al reves de como suena. El sitio viejo era
     OSCURO, asi que su --gold era el claro y --gold-bright el mas claro aun.
     Sobre PAPEL eso se invierte: medido, el dorado #C9A24B sobre #FBF8F0 da
     2.26 de contraste y un titular grande pide 3.0. El #A8853B da 3.25.
     Por eso --gold (que es el que pinta TEXTO en las paginas viejas) apunta al
     dorado oscuro, y --gold-bright, que se usa sobre superficies oscuras,
     al claro. No se ve leyendo el CSS: se ve midiendo el contraste. */
  --gold:var(--gold-700);
  --gold-bright:var(--gold-600);
  --sand:var(--sage-600);
  --muted:var(--text-muted);
  --red:var(--danger-600);
  --navy:var(--green-800);
  --line:var(--char-200);
  --maxw:1200px;
  --serif:var(--font-display); /* muere Fraunces, entra Lora */
  --verde:var(--green-700);
  --crema:var(--cream-100);
}

/* ============================================================
   TANDA 4 · 15 de septiembre de 2026
   CAPA DE COMPATIBILIDAD PARA LAS PAGINAS QUE INLINEAN SU CSS

   POR QUE VIVE AQUI Y NO EN UNA HOJA PROPIA
   Las 17 guias, su hub, el FAQ y el buscador NO comparten ninguna
   hoja: cada una lleva su <style> adentro. Lo unico que comparten es
   `marca.css`, asi que este es el unico lugar donde una regla las
   alcanza a las 20 de una vez en vez de copiarse veinte veces.

   ⚠️ LO QUE ESTO TOCA ADEMAS: la portada, que tambien carga esta hoja.
   Se midio ANTES de escribirlo, y lo que encontro es que la portada
   arrastraba el MISMO defecto que se cerro ayer en las otras 37: su
   eyebrow de 12px estaba en 3.25 de contraste y pide 4.5. El arreglo
   de ayer vivia en `collection.css`, que la portada no carga, asi que
   se habia quedado fuera sin que nadie lo viera. Esto la corrige.
   ============================================================ */

/* El dorado es ACENTO, no color de texto (mismo criterio que la tanda 3).
   Medido: 3.25 sobre papel donde un texto de 12px pide 4.5. El sage da 6.20. */
html.marca .eyebrow,
html.marca .crumbs span,
html.marca .result .kind,
html.marca .search-meta{color:var(--sage-700)}

/* La accion principal va VERDE RELLENA, una por pantalla.
   ⚠️ Y aqui habia un defecto introducido en esta misma tanda: al pasar el
   `color:#1a1407` literal a `var(--on-brand)` quedo CREMA SOBRE DORADO,
   2.03 de contraste. Con el boton en verde el texto crema da 11.12, que
   es lo que ya hacen las otras 37 paginas del sitio. */
html.marca .btn{font-family:var(--font-sans);text-transform:none;letter-spacing:0;
  font-weight:var(--fw-semibold);border-radius:var(--radius-sm)}
html.marca .btn-gold{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
html.marca .btn-gold:hover{background:var(--brand-strong);border-color:var(--brand-strong);transform:none}

/* Titulos y preguntas en Title Case. El sistema pide caja alta SOLO en
   etiquetas cortas, y una pregunta del FAQ no lo es. Se quedan en
   mayusculas el eyebrow, la miga de pan y los enlaces de barra y pie. */
html.marca .faq-item summary,
html.marca .result h2{text-transform:none;letter-spacing:0}

/* EL PIE VA EN VERDE, y no es preferencia: su wordmark es el PNG CREMA y
   sobre papel DESAPARECE. Es el mismo defecto que la tanda 1 encontro en la
   portada, donde Omar decidio anclarlo en verde; las 37 paginas de
   `collection.css` ya lo hacen. Aqui la regla cubre las 20 que faltaban y deja
   las tres superficies diciendo lo mismo.
   ⚠️ Devolverlo a claro obliga a cambiar TAMBIEN el logo al wordmark negro:
   es una sola decision, no dos.
   Y dentro del pie los dorados se INVIERTEN al claro, porque sobre #243D2C el
   oscuro da 3.42 y el claro 4.92 (la correccion por FONDO de la tanda 3). */
html.marca footer{background:var(--green-700);color:var(--text-on-dark);
  border-top:1px solid var(--line-on-dark);--gold:var(--gold-600);--gold-bright:var(--gold-400)}
html.marca footer p{color:var(--sage-200)}

/* Tarjeta de guia: el titulo en Title Case y el dorado fuera del texto chico */
html.marca .gcard h3,
html.marca .card h3{text-transform:none;letter-spacing:var(--tracking-tight);
  font-family:var(--font-display);font-weight:var(--fw-semibold)}
html.marca .gcard .kicker,
html.marca .kicker,
html.marca .go,
html.marca .go .arr,
html.marca .lm-text b,
html.marca .lm-arr,
html.marca .txbar .made{color:var(--sage-700)}

/* la cursiva sale del sistema: Kaushan Script no esta en la paleta tipografica */
html.marca .script{font-family:var(--font-display);font-style:italic;font-weight:var(--fw-medium)}

/* la etiqueta del banner: dorado de fondo con texto oscuro, no crema */
html.marca .lm-tag{background:var(--brand);color:var(--on-brand)}

/* Lo que queda de dorado como COLOR DE TEXTO en las guias, el FAQ y el
   buscador. Medido en la pagina renderizada: el enlace de prosa en 2.26 y el
   resto en 3.45, donde un texto de ese tamano pide 4.5.
   ⚠️ El ENLACE DE PROSA va en VERDE (11.12), no en sage: es contenido en el
   que se hace clic y tiene que distinguirse del parrafo que lo rodea, no solo
   leerse. Por eso conserva su subrayado. */
/* el token que leen los enlaces con estilo EN LINEA, que le ganan a cualquier
   hoja. Ya vivia en `collection.css` desde la tanda 3; aqui lo necesitan las 20
   paginas de esta tanda, que no cargan esa hoja. */
html.marca{--enlace:var(--green-700)}
html.marca{--bg-2:var(--paper-2)}  /* halos de hero que nacieron sobre negro */
/* 🔴 `:not(.btn)` NO es prolijidad: sin el, esta regla pinta de VERDE el texto
   de un BOTON que vive dentro de la prosa, y el boton ya es verde. Medido el 15
   de septiembre de noche en 3 guias (softball-mom, senior-night y grandma):
   contraste 1.00, o sea el CTA invisible, EN PRODUCCION. Gana por orden, no por
   especificidad: `.prose a` y `.btn-gold` valen lo mismo y esta va despues. */
html.marca .prose a:not(.btn){color:var(--green-700)}
html.marca .tagn,
html.marca .spec h3,
html.marca .faq-item summary .pm,
html.marca .pm{color:var(--sage-700)}

/* Los otros dos sitios donde un enlace vive dentro de prosa: la caja destacada
   y la respuesta del FAQ. Mismo criterio que `.prose a`: verde y subrayado. */
html.marca .callout a:not(.btn),
html.marca .faq-item .ans a:not(.btn){color:var(--green-700)}

/* y la negrita dentro de la caja destacada: era dorado claro a 2.40 */
html.marca .callout p b{color:var(--green-700)}

/* Titulos de tarjeta en Title Case. Se queda en MAYUSCULAS lo que si es
   etiqueta corta: `.spec h3` (Sizes, Fabric), el eyebrow, la miga de pan, la
   franja de Texas y el tagline del pie. */
html.marca .gift h3,
html.marca .callout h3{text-transform:none;letter-spacing:var(--tracking-tight);
  font-family:var(--font-display);font-weight:var(--fw-semibold)}

html.marca .empty b{color:var(--green-700)}

/* el aviso del buscador es una frase, no una etiqueta */
html.marca .search-meta{text-transform:none;letter-spacing:0}

/* ============================================================
   TANDA 5 · 15 de septiembre de 2026
   EL TEXTO DE CUERPO, ARREGLADO POR FONDO

   🔴 ESTO NO NACE EN LA TANDA 5: CORRIGE UN DEFECTO QUE LA TANDA 4
   YA MANDO A PRODUCCION, en las 17 guias, su hub, el FAQ, el buscador,
   about, contact y privacy. Medido en la pagina renderizada, no leido:
   el cuerpo daba 4.35 sobre papel y el PIE ENTERO daba 2.56, donde se
   piden 4.5. Ayer se midio el DORADO, que era el sospechoso, y por
   mirar al sospechoso no se miro al resto.

   LA CAUSA: dos lineas del puente. `--sand` y `--muted` son los tokens
   de TEXTO DE CUERPO del sitio viejo, que era oscuro; ahi el sage y el
   gris medio se leian bien. Sobre papel quedan al filo y sobre el verde
   del pie se hunden.

   Y LA FORMA DEL ARREGLO ES LA MISMA QUE LA DEL DORADO EN LA TANDA 3:
   se corrige POR FONDO, no de golpe. Un valor para lo claro, y el pie
   redefine los dos tokens en su propio scope. Perseguir selectores uno
   por uno es lo que se hizo mal la primera vez.
   ============================================================ */
html.marca{
  --sand:var(--sage-700);    /* 4.35 sobre papel -> 6.20 */
  --muted:var(--char-600);   /* 4.41 sobre papel -> 7.24 */
}
html.marca footer{
  --sand:var(--text-on-dark-muted);   /* 2.56 sobre el verde -> 7.17 */
  --muted:var(--text-on-dark-muted);  /* 2.32 sobre el verde -> 7.17 */
}

/* LA FRANJA DE TEXAS, para las paginas que la inlinean en NEGRO.
   Las 37 de coleccion ya la tienen en crema por `collection.css` y las
   guias por su propio CSS; `negocios/` y `gracias.html` no, y sobre ese
   #14130e la regla de arriba deja el sage en 2.83. La franja va en crema
   en todo el sitio: una sola respuesta, no una por familia de pagina. */
html.marca .txbar{background:var(--cream-100);color:var(--green-800);
  border-bottom:1px solid var(--sage-200)}
html.marca .txbar .sub{color:var(--sage-700)}

/* EL BOTON DE LA BARRA VUELVE A SER DORADO, y no es gusto: la capa de la
   tanda 4 mando TODO `.btn-gold` a verde relleno, y el CTA de la barra vive
   DENTRO de la barra, que tambien es verde. Resultado: un boton verde sobre
   verde, o sea un boton que no se ve. El dorado es acento de "una accion por
   pantalla" y el CTA de la barra es exactamente esa accion.
   Medido: crema sobre dorado daba 2.03; verde-900 sobre dorado da 7.00. */
html.marca .nav-links a.nav-cta,
html.marca .nav-links a.btn.nav-cta{
  background:var(--accent);color:var(--green-900);border-color:var(--accent)}
html.marca .nav-links a.nav-cta:hover{background:var(--gold-400);border-color:var(--gold-400)}

/* EL SELLO sobre oxblood. Su texto pedia `--ivory`, que el puente manda a
   CARBON, asi que quedaba carbon sobre rojo oscuro: 2.08 en `negocios/` y
   2.87 en las 17 guias, estas ULTIMAS YA EN PRODUCCION desde ayer. Con la
   crema encima da 4.92 y 6.79. */
html.marca .stamp{color:var(--on-brand)}

/* LA BARRA PEGAJOSA DEL TELEFONO SEGUIA EN NEGRO, y es la misma familia de
   defecto que la barra de navegacion de la tanda 5: un color ESCRITO A MANO
   (`rgba(13,13,14,.97)`) que el puente no alcanza. Solo sale bajo 880px y con
   scroll, asi que ninguna captura de escritorio la mostro nunca.
   Medido: el boton fantasma daba 1.65, verde sobre casi negro, con un borde
   verde que tampoco se veia. Es el CTA principal de la portada en movil. */
html.marca .sticky-cta{background:var(--nav-bg);border-top:1px solid var(--line-on-dark);
  -webkit-backdrop-filter:none;backdrop-filter:none}
html.marca .sticky-cta .btn-primary{background:var(--accent);color:var(--green-900);
  border-color:var(--accent)}
html.marca .sticky-cta .btn-ghost{color:var(--on-brand);border-color:var(--line-on-dark);
  background:transparent}