/* =============================================================================
   ecommgrowthlab.com — hoja unica
   -----------------------------------------------------------------------------
   Pagina de continuidad de una marca retirada, con los colores de CLIMENT MEDIA
   (26-sep-2026, Manuel: «alinearlo con Climent Media»): el negro, el texto y el
   naranja #ff5c00 de climentmedia.com, con texto negro sobre el naranja como
   sus botones. Quien pulsa «Ir a Climent Media» llega a la misma marca que ya
   estaba viendo. La marca vieja se reconoce por su NOMBRE, apagado en el h1.
   La primera version llevaba los colores de la marca vieja (medidos en su CSS de
   Elementor: negro #090909, verde neon #28F67A): volver es cambiar los tokens.
   Todo en Inter (la de las dos marcas), con peso alto en los titulares.
   Inter autoalojada (subconjunto latino de Google, con tildes, ñ, ¿, ¡ y €; sin
   la flecha →, medido leyendo su cmap). Licencia en assets/fonts/OFL-Inter.txt.
   ========================================================================== */

/* Inter es VARIABLE: el rango de pesos se declara entero (con 400 700 el 800
   saldria sintetizado; climentmedia-website/CLAUDE.md, 20-ago-2026). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* los de climentmedia.com: --bg, --text, --muted, --border, --accent y
     --accent-bright de su styles.css */
  --bg: rgb(7, 7, 8);
  --bg-2: #131315;
  --ink: rgb(244, 244, 242);
  --ink-2: #a2a29c;
  --line: rgba(255, 255, 255, 0.12);
  --primary: #ff5c00;
  --primary-strong: #ff7a26;
  --on-primary: #000;
  --antes: #8a8a84;
  --text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 16px;
  --max: 920px;
  --measure: 36rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--text); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--primary-strong); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }

.in { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  background: var(--primary); color: var(--on-primary); padding: 0.6rem 1rem; border-radius: 6px;
}
.skip:focus { top: 12px; }

/* ── cabecera y pie ─────────────────────────────────────────────────────── */
.hdr { border-bottom: 1px solid var(--line); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.hdr__marca { font: 800 1.0625rem/1 var(--text); color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.hdr__marca:hover { color: var(--ink); }
.hdr__nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.hdr__nav a { color: var(--ink); text-decoration: none; font-size: 0.9375rem; padding: 0.5rem 0; }
.hdr__nav a:hover { text-decoration: underline; }

.pie { border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.875rem; }
.pie__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 1.75rem; }
.pie ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.pie a { color: var(--ink-2); }

/* ── secciones ──────────────────────────────────────────────────────────── */
.sec { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.sec h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 750; line-height: 1.12; letter-spacing: -0.025em; margin-bottom: 1.4rem; }
.sec h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.eyebrow { font: 600 0.8125rem/1.3 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1.25rem; }
.lead { font-size: clamp(1.125rem, 1.05rem + 0.45vw, 1.3125rem); line-height: 1.5; max-width: var(--measure); color: var(--ink); }
.prosa { max-width: var(--measure); }
.prosa > * + * { margin-top: 1.1em; }
.prosa h3 { margin-top: 2.2rem; }
.prosa h3 + p { margin-top: 0.6em; }

.btn {
  display: inline-block; font: 650 1rem/1.2 var(--text); text-decoration: none;
  padding: 0.85rem 1.25rem; border-radius: 8px; border: 1px solid transparent;
}
.btn--1 { background: var(--primary); color: var(--on-primary); }
.btn--1:hover { background: var(--primary-strong); color: var(--on-primary); }
.btn--2 { border-color: var(--ink-2); color: var(--ink); }
.btn--2:hover { background: var(--ink); color: var(--bg); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* hero: el nombre viejo apagado, el nuevo en el naranja de Climent Media */
.sec--hero { padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.sec--hero h1 { font-size: clamp(2.5rem, 1.25rem + 5.2vw, 4.75rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; margin-bottom: 1.5rem; max-width: 14ch; }
.h1__antes { color: var(--antes); }
.h1__ahora { color: var(--primary); }

/* prueba: banda de datos. Las cifras son terminos de una lista, no titulares */
.sec--prueba { background: var(--bg-2); }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1.5rem; margin: 0; }
.dato { border-top: 1px solid var(--line); padding-top: 1rem; }
.dato dt { font: 800 clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem)/1.1 var(--text); letter-spacing: -0.03em; }
.dato dd { margin: 0.5rem 0 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
@media (min-width: 860px) { .datos { grid-template-columns: repeat(4, 1fr); } }

/* cierre: el bloque en el naranja de la marca, la unica inversion de la pagina */
.sec--cierre { background: var(--primary); color: var(--on-primary); }
.sec--cierre h2 { color: var(--on-primary); }
.cierre__txt { max-width: var(--measure); font-size: 1.125rem; }
.sec--cierre .btn--1 { background: var(--on-primary); color: var(--primary); }
.sec--cierre .btn--1:hover { background: var(--bg); color: var(--primary-strong); }
.btn--grande { font-size: 1.0625rem; padding: 1rem 1.4rem; overflow-wrap: anywhere; }
.sec--cierre :focus-visible { outline-color: var(--on-primary); }

/* legal y 404 */
.sec--contexto h1, .sec--404 h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 1rem; }
.crumbs { font-size: 0.875rem; color: var(--ink-2); margin-bottom: 1.25rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; }
.crumbs a { color: var(--ink-2); }
.actualizado { color: var(--ink-2); font-size: 0.9375rem; margin-bottom: 2.5rem; }
.prosa h2 { font-size: 1.375rem; line-height: 1.25; margin: 2.25rem 0 0; }
.prosa h2 + p { margin-top: 0.6em; }
.destinos { margin: 2rem 0 0; padding-left: 1.2rem; }
.destinos li + li { margin-top: 0.6rem; }

/* /cookies/: una ficha por lo que se guarda. Sin <table> a proposito: a 390 px
   tres columnas no caben, y apilarla exige un data-* leido solo desde CSS, que
   los gates no reconocen como lector (climentmedia-website/CLAUDE.md, MED-05) */
.galletas { margin: 0.9rem 0 0; }
.galleta { border-top: 1px solid var(--line); padding-block: 0.9rem; }
.galleta:last-child { border-bottom: 1px solid var(--line); }
.galleta dt { font-weight: 650; }
.galleta dt code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.95em; }
.galleta dd { margin: 0.3rem 0 0; color: var(--ink-2); }

/* ── consentimiento ───────────────────────────────────────────────────────
   El aviso lo pinta consent.js (port de climentmedia.com, con su misma forma).
   Aceptar y rechazar comparten TODA la geometria: si rechazar cuesta mas, el
   consentimiento no es libre. En movil va en una sola fila y bajo: en
   climentmedia.com la version apilada tapaba el boton del hero (mobile-gate M2). */
.cookie-bar {
  position: fixed; z-index: 200; left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 62rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.4rem;
  padding: 1rem 1.25rem; background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.cookie-bar__text { margin: 0; flex: 1 1 20rem; font-size: 0.9375rem; line-height: 1.5; }
.cookie-bar__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie-bar__btn {
  min-width: 7.5rem; padding: 0.62rem 1.1rem; font: 600 0.9375rem/1.2 var(--text);
  color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.cookie-bar__btn:hover { border-color: var(--ink-2); }
.cookie-bar__btn--yes { color: var(--primary-strong); border-color: var(--primary); }
.cookie-bar__btn--yes:hover { border-color: var(--primary-strong); }
@media (max-width: 560px) {
  .cookie-bar { left: 0.55rem; right: 0.55rem; bottom: 0.55rem; padding: 0.55rem 0.7rem; gap: 0.5rem 0.7rem; flex-wrap: nowrap; }
  .cookie-bar__text { flex: 1 1 auto; font-size: 0.8125rem; line-height: 1.4; }
  .cookie-bar__actions { flex: 0 0 auto; gap: 0.4rem; }
  .cookie-bar__btn { min-width: 0; padding: 0.5rem 0.65rem; font-size: 0.8125rem; }
}
/* "Configurar cookies": abre el aviso, no navega, asi que es un <button>. Sale
   escondido en el HTML y consent.js lo muestra. */
.pie .cookie-settings { font: inherit; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; }
button.btn--2 { background: transparent; cursor: pointer; }