/* ==========================================================================
   ECOM OLIMPO — sistema visual
   Dirección: documental, no mitológico. Editorial de autoridad.
   Paleta y marca: manual oficial (/Documents/Logo EcomOlimpo/Marca.pdf)
   ========================================================================== */

/* --- Tipografías autoalojadas (OFL). Nunca fonts.googleapis.com: enviar la IP
       del visitante a Google sin consentimiento es un vector de reclamación. --- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Color — derivado del manual oficial */
  --negro:        #212121;   /* oficial: "Innovación" */
  --negro-fondo:  #121212;   /* fondo dominante, un punto por debajo del oficial */
  --negro-carta:  #191919;
  --negro-borde:  #2C2C2C;
  --oro:          #FA9E0D;   /* oficial: "Prestigio" */
  --oro-vivo:     #FCC917;   /* oficial: "Cercanía" — solo acento y CTA */
  --oro-tenue:    rgba(250, 158, 13, 0.16);
  --crema:        #FBF7EE;   /* lectura larga */
  --crema-borde:  #E8E0CE;
  --blanco:       #FFFFFF;   /* oficial: "Honestidad" */

  --texto:        #EDEAE4;
  --texto-suave:  #A6A29A;
  --texto-tenue:  #8A857C;   /* era #6E6A63: 3,27:1, suspendía AA */
  --texto-oscuro: #1A1A1A;
  --texto-oscuro-suave: #55514A;

  /* Tipografía */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --cuerpo:  'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Escala fluida */
  --t-hero:  clamp(2.4rem, 1.2rem + 4.6vw, 5rem);
  --t-h1:    clamp(2.25rem, 1.3rem + 4vw, 4rem);
  --t-h2:    clamp(1.75rem, 1.15rem + 2.6vw, 3rem);
  --t-h3:    clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  --t-body:  clamp(1rem, 0.97rem + 0.16vw, 1.125rem);
  --t-lead:  clamp(1.125rem, 1.03rem + 0.5vw, 1.375rem);
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* Ritmo */
  --gap:       clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --seccion-y: clamp(4rem, 2rem + 8vw, 11rem);
  --ancho:     1200px;
  --ancho-texto: 68ch;

  --radio:      4px;   /* nada de píldoras de 28px: eso es plantilla */
  --radio-carta: 8px;
  --linea:      1px solid var(--negro-borde);
  --transicion: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--negro-fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 800; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.018em; line-height: 1.2; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2px solid var(--oro-vivo);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--oro); color: var(--negro); }

.saltar {
  position: absolute; left: -9999px;
  background: var(--oro); color: var(--negro);
  padding: 0.75rem 1.25rem; z-index: 999; font-weight: 600;
}
.saltar:focus { left: 1rem; top: 1rem; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}
.contenedor--estrecho { width: min(100% - 2.5rem, 780px); }

.seccion { padding-block: var(--seccion-y); position: relative; }
.seccion--crema {
  background: var(--crema);
  color: var(--texto-oscuro);
}
.seccion--crema h1, .seccion--crema h2, .seccion--crema h3 { color: var(--texto-oscuro); }
.seccion--crema .eyebrow { color: #8A6A16; }
.seccion--crema .apoyo { color: var(--texto-oscuro-suave); }
.seccion--filo { border-top: var(--linea); }

/* Etiqueta de sección: numeración de dossier. El gesto que fija el tono. */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.28;
}

.apoyo {
  color: var(--texto-suave);
  font-size: var(--t-lead);
  max-width: var(--ancho-texto);
}

.cabecera-seccion { margin-bottom: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
.cabecera-seccion h2 { max-width: 20ch; margin-bottom: 1.25rem; }

/* ==========================================================================
   4. NAVEGACIÓN
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(18, 18, 18, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: var(--linea);
}
/* Progreso de lectura: el oro es color de dato, y esto es un dato del lector.
   Atado al scroll (no autónomo), así que convive con reduced-motion. */
.nav__progreso {
  position: absolute; inset: auto 0 -1px 0;
  height: 2px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.nav__interior {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.5rem;
}
.nav__marca {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: var(--oro);
  margin-right: auto;
}
.nav__marca svg { width: 30px; height: 30px; }
.nav__marca span {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanco);
}
.nav__enlaces { display: flex; align-items: center; gap: 1.75rem; }
.nav__enlaces a {
  text-decoration: none;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--texto-suave);
  transition: color var(--transicion);
}
.nav__enlaces a:hover, .nav__enlaces a[aria-current='page'] { color: var(--blanco); }
/* El botón del nav no hereda el gris de los enlaces: iba a 1,9:1 sobre el oro. */
.nav__cta { color: #121212; flex: 0 0 auto; }

.nav__idioma {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: var(--texto-tenue);
  display: flex; gap: 0.4rem; align-items: center;
}
.nav__idioma a { text-decoration: none; }
.nav__idioma a[aria-current] { color: var(--oro); font-weight: 700; }

.nav__menu {
  display: none;
  background: none; border: var(--linea); border-radius: var(--radio);
  color: var(--texto); padding: 0.5rem 0.7rem; cursor: pointer;
}

@media (max-width: 900px) {
  /* marca + CTA + menú no caben con el gap de escritorio: desbordaban 3px */
  .nav__interior { gap: 0.75rem; }
  /* zona táctil mínima de 44px: con el padding de escritorio se queda en ~24px */
  .nav__menu {
    display: inline-flex; align-items: center; justify-content: center;
    order: 3; min-width: 44px; min-height: 44px;
  }
  .nav__cta { order: 2; padding: 0.7rem 1.05rem; font-size: var(--t-micro); }
  .nav__enlaces {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--negro-fondo);
    border-bottom: var(--linea);
    padding: 0.5rem 1.25rem 1.25rem;
    display: none;
  }
  .nav[data-abierto='true'] .nav__enlaces { display: flex; }
  .nav__enlaces a { padding: 0.9rem 0; border-bottom: var(--linea); font-size: 1rem; }
  .nav__idioma { padding-top: 1rem; }
}
@media (max-width: 420px) {
  /* el CTA en inglés es más largo y la fila se pasaba 2px */
  .nav__interior { gap: 0.5rem; }
  .nav__cta { padding: 0.7rem 0.8rem; letter-spacing: 0; }
}

/* ==========================================================================
   5. BOTONES
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radio);
  font-family: var(--cuerpo);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
  white-space: nowrap;
}
.btn--primario {
  background: var(--crema);
  color: #121212;
  border-color: var(--crema);
}
.btn--primario:hover { background: var(--blanco); border-color: var(--blanco); transform: translateY(-1px); }
.btn--secundario {
  background: transparent;
  color: var(--texto);
  border-color: var(--negro-borde);
}
.btn--secundario:hover { border-color: var(--oro); color: var(--oro); }
.seccion--crema .btn--secundario { color: var(--texto-oscuro); border-color: var(--crema-borde); }
.seccion--crema .btn--secundario:hover { border-color: var(--negro); color: var(--negro); }
.btn--grande { padding: 1.15rem 2rem; font-size: 1rem; }

.acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* En móvil el CTA no cabe en una línea: con nowrap desborda la página entera
   (scroll horizontal). Se le deja partir y ocupa el ancho completo. */
@media (max-width: 560px) {
  .acciones .btn { white-space: normal; text-align: center; width: 100%; }
}

.microcopia {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
  margin-top: 1rem;
}
.seccion--crema .microcopia { color: var(--texto-oscuro-suave); }

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(4rem, 2rem + 9vw, 8.5rem) clamp(3.5rem, 2rem + 6vw, 7rem);
  overflow: hidden;
  border-bottom: var(--linea);
}
.hero__interior { position: relative; max-width: 64ch; }
.hero h1 {
  font-size: var(--t-hero);
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 21ch;
  margin-bottom: 1.75rem;
}
.hero h1 em { font-style: normal; color: var(--oro); }
.hero__lead {
  font-size: var(--t-lead);
  color: var(--texto-suave);
  max-width: 54ch;
  margin-bottom: 2.25rem;
}
@media (max-width: 720px) {
  .dato { border-right: 0; border-bottom: var(--linea); }
}
@media (max-width: 620px) { .bento__celda--ancha { grid-column: span 1; } }

.lista-check { list-style: none; padding: 0; margin: 0.25rem 0 0; display: grid; gap: 0.5rem; }
.lista-check li {
  position: relative; padding-left: 1.6rem;
  font-size: var(--t-small); color: var(--texto-suave);
}
.lista-check li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 1px;
  background: var(--oro);
}
.lista-check--no li::before { background: var(--texto-tenue); }

/* ==========================================================================
   9. SÍ / NO — el filtro
   ========================================================================== */
.filtro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--crema-borde);
  border: 1px solid var(--crema-borde);
  border-radius: var(--radio-carta);
  overflow: hidden;
}
.filtro__col { background: var(--crema); padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }
.filtro__col--no { background: #F3EEE2; }
.filtro__col h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; }
.filtro__marca {
  font-family: var(--mono); font-weight: 700; font-size: 0.8rem;
  width: 1.75rem; height: 1.75rem; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 3px;
}
.filtro__marca--si { background: var(--negro); color: var(--oro-vivo); }
.filtro__marca--no { background: #DDD5C4; color: #3E3A33; }
.filtro__col .lista-check li { color: var(--texto-oscuro-suave); }
.filtro__col .lista-check li::before { background: var(--negro); }
.filtro__col--no .lista-check li::before { background: #B9B0A0; }
@media (max-width: 560px) {
  .paso { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* ==========================================================================
   11. PRUEBA DURA — bloque de datos tipo panel
   ========================================================================== */
.panel {
  border: var(--linea);
  border-radius: var(--radio-carta);
  overflow: hidden;
  background: var(--negro-carta);
}
.panel__cabecera {
  padding: 1rem 1.5rem;
  border-bottom: var(--linea);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: baseline;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--texto-tenue);
  text-transform: uppercase;
}
.panel__cabecera b { color: var(--texto); font-weight: 700; }
.panel__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--negro-borde);
}
.panel__dato { background: var(--negro-carta); padding: 1.5rem; }
.panel__dato dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 0.5rem;
}
.panel__dato dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--blanco);
  font-variant-numeric: tabular-nums;
}
.panel__pie {
  padding: 1rem 1.5rem;
  border-top: var(--linea);
  font-size: var(--t-small);
  color: var(--texto-suave);
}
.panel__pie strong { color: var(--texto); }

.aviso {
  border-left: 2px solid var(--oro);
  padding: 0.9rem 0 0.9rem 1.25rem;
  font-size: var(--t-small);
  color: var(--texto-suave);
  margin-top: 1.75rem;
}
.seccion--crema .aviso { color: var(--texto-oscuro-suave); border-color: var(--negro); }

/* ==========================================================================
   12. PERFIL (Javier)
   ========================================================================== */
.perfil {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
.perfil__foto {
  border-radius: var(--radio-carta);
  border: var(--linea);
  background: var(--negro-carta);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}
@media (max-width: 760px) { .perfil { grid-template-columns: 1fr; } }

/* ==========================================================================
   13. FAQ
   ========================================================================== */
.faq { border-top: var(--linea); }
.faq__item { border-bottom: var(--linea); }
.faq__pregunta {
  width: 100%;
  background: none; border: 0;
  padding: 1.5rem 3rem 1.5rem 0;
  text-align: left;
  color: inherit;
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  cursor: pointer;
  position: relative;
  display: block;
}
.faq__pregunta::after {
  content: '+';
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--oro);
  transition: transform var(--transicion);
}
.faq__item[data-abierto='true'] .faq__pregunta::after { transform: translateY(-50%) rotate(45deg); }
.faq__respuesta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms cubic-bezier(0.4,0,0.2,1);
}
.faq__item[data-abierto='true'] .faq__respuesta { grid-template-rows: 1fr; }
.faq__respuesta > div { overflow: hidden; }
.faq__respuesta p {
  color: var(--texto-suave);
  max-width: var(--ancho-texto);
  padding-bottom: 1.75rem;
}
.seccion--crema .faq { border-color: var(--crema-borde); }
.seccion--crema .faq__item { border-color: var(--crema-borde); }
.seccion--crema .faq__respuesta p { color: var(--texto-oscuro-suave); }

/* ==========================================================================
   14. FORMULARIO
   ========================================================================== */
.formulario { display: grid; gap: 1.5rem; }
.campo { display: grid; gap: 0.5rem; }
.campo > label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.campo > label .obligatorio { color: var(--oro); }
.campo input[type='text'],
.campo input[type='email'],
.campo input[type='tel'],
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.95rem 1rem;
  background: var(--negro-carta);
  border: var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 1rem;
  transition: border-color var(--transicion);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--oro);
  outline: none;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-tenue); }
.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--oro) 50%),
                    linear-gradient(135deg, var(--oro) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.campo--error input, .campo--error select { border-color: #E2574C; }
.campo__error {
  font-size: var(--t-small);
  color: #F08078;
  display: none;
}
.campo--error .campo__error { display: block; }

.consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: var(--t-small);
  color: var(--texto-suave);
  line-height: 1.5;
}
.consentimiento input { margin-top: 0.25rem; accent-color: var(--oro); width: 1.05rem; height: 1.05rem; }
.consentimiento a { color: var(--oro); }

.trampa { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.formulario__estado {
  padding: 1rem 1.25rem;
  border-radius: var(--radio);
  border: var(--linea);
  font-size: var(--t-small);
  display: none;
}
.formulario__estado[data-tipo='ok'] { display: block; border-color: var(--oro); background: var(--oro-tenue); color: var(--texto); }
.formulario__estado[data-tipo='error'] { display: block; border-color: #E2574C; color: #F08078; }

/* ==========================================================================
   15. CIERRE Y PIE
   ========================================================================== */
.cierre {
  border-top: var(--linea);
  background: var(--negro-fondo);
  text-align: center;
}
.cierre h2 { max-width: 18ch; margin-inline: auto; margin-bottom: 1.25rem; }
.cierre .apoyo { margin-inline: auto; margin-bottom: 2.25rem; }
.cierre .acciones { justify-content: center; }
.cierre .microcopia { text-align: center; }

.pie {
  border-top: var(--linea);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem;
  font-size: var(--t-small);
}
.pie__rejilla {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 860px) { .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .pie__rejilla { grid-template-columns: 1fr; } }

.pie__marca { display: flex; align-items: center; gap: 0.7rem; color: var(--oro); margin-bottom: 1.25rem; }
.pie__marca svg { width: 34px; height: 34px; }
.pie__marca span {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--blanco);
}
.pie h4 {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin: 0 0 1.1rem;
}
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.pie a { color: var(--texto-suave); text-decoration: none; transition: color var(--transicion); }
.pie a:hover { color: var(--oro); }
.pie address { font-style: normal; color: var(--texto-suave); line-height: 1.7; }

.pie__legal {
  border-top: var(--linea);
  padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem;
  justify-content: space-between;
  color: var(--texto-tenue);
  font-size: var(--t-micro);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.pie__legal nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ==========================================================================
   16. MOVIMIENTO — solo funcional
   ========================================================================== */
html.js [data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.16,1,0.3,1), transform 620ms cubic-bezier(0.16,1,0.3,1);
}
html.js [data-revelar].visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html.js [data-revelar] { opacity: 1; transform: none; }
}

/* ==========================================================================
   17. PÁGINAS DE TEXTO LARGO (legales, gracias, 404)
   ========================================================================== */
.prosa { max-width: var(--ancho-texto); }
.prosa h2 { font-size: var(--t-h3); margin: 2.75rem 0 1rem; }
.prosa h3 { font-size: 1.125rem; margin: 2rem 0 0.75rem; }
.prosa ul, .prosa ol { padding-left: 1.25rem; margin: 0 0 1.1em; }
.prosa li { margin-bottom: 0.5rem; }
.prosa table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0;
  font-size: var(--t-small);
}
.prosa th, .prosa td { text-align: left; padding: 0.75rem; border: var(--linea); vertical-align: top; }
.prosa th { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--oro); }
.tabla-scroll { overflow-x: auto; }
/* Las tablas dentro de cuerpo_html van sin envoltorio: en móvil, que se
   desplacen ellas solas en vez de ensanchar la página entera. */
@media (max-width: 700px) {
  .prosa table { display: block; overflow-x: auto; }
}

.pendiente {
  background: var(--oro-tenue);
  border: 1px dashed var(--oro);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--oro-vivo);
  margin: 1.5rem 0;
}

/* ==========================================================================
   18. BANNER DE COOKIES
   Se muestra hasta que hay decisión. Nada de seguimiento antes de aceptar,
   y "rechazar" tiene el mismo peso visual que "aceptar".
   ========================================================================== */
.cookies {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 200;
  background: var(--negro-carta);
  border: 1px solid var(--negro-borde);
  border-radius: var(--radio-carta);
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  padding: 1.25rem 1.5rem;
  max-width: 640px;
  margin-inline: auto;
}
.cookies[hidden] { display: none; }
.cookies__interior {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; justify-content: space-between;
}
.cookies p {
  margin: 0; flex: 1 1 280px;
  font-size: var(--t-small); color: var(--texto-suave);
}
.cookies a { color: var(--oro); }
.cookies__acciones { display: flex; gap: 0.6rem; flex: 0 0 auto; }
.cookies__acciones .btn { padding: 0.7rem 1.1rem; font-size: var(--t-micro); }

@media (max-width: 520px) {
  .cookies__acciones { width: 100%; }
  .cookies__acciones .btn { flex: 1; }
}

/* Marcador de dato pendiente. Chilla a propósito: si esto llega a producción,
   se ve desde la otra punta de la habitación. deploy.sh live los bloquea. */
.falta {
  background: #7A1D1D;
  color: #FFD9D9;
  font-family: var(--mono);
  font-size: 0.8em;
  font-weight: 500;
  padding: 0.15em 0.45em;
  border-radius: 3px;
  border: 1px dashed #E2574C;
  white-space: normal;
}


/* ==========================================================================
   19. SERIF EDITORIAL
   Tres usos y ni uno más. El repertorio del gurú es sans pesada + mono y
   jamás serif: una serif bien puesta desactiva esa lectura más rápido que
   cualquier cambio de color.
   ========================================================================== */
.seccion--crema .cabecera-seccion h2,
.perfil + * h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.1;
}
.aviso {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.5;
}
.ruta .btn { align-self: flex-start; }

.precios__titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  letter-spacing: -0.01em;
  margin-bottom: 1.75rem;
}
.tabla-precios { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.tabla-precios th, .tabla-precios td {
  text-align: left; padding: 1rem 1.25rem 1rem 0;
  border-bottom: var(--linea); vertical-align: baseline;
}
.tabla-precios th { font-weight: 600; color: var(--texto); font-family: var(--cuerpo); }
.tabla-precios td { color: var(--texto-suave); }
.tabla-precios__rango {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--blanco) !important; white-space: nowrap;
}
.tabla-precios tr:last-child th,
.tabla-precios tr:last-child td { border-bottom: 0; }
.tabla-precios tr:last-child .tabla-precios__rango { color: var(--oro) !important; }

/* En móvil la tabla de 3 columnas no cabe y obliga a scroll lateral justo
   donde se mira el precio. Cada fila pasa a ficha apilada. */
@media (max-width: 620px) {
  .tabla-precios, .tabla-precios tbody,
  .tabla-precios tr, .tabla-precios th, .tabla-precios td { display: block; }
  .tabla-precios tr { padding: 1rem 0; border-bottom: var(--linea); }
  .tabla-precios tr:last-child { border-bottom: 0; }
  .tabla-precios th, .tabla-precios td { padding: 0; border-bottom: 0; }
  .tabla-precios__rango { white-space: normal; font-size: 1.05rem; margin-top: 0.3rem; }
  .tabla-precios td:last-child { font-size: var(--t-micro); margin-top: 0.25rem; }
  .seccion--crema .tabla-precios tr { border-color: var(--crema-borde); }
}

.propiedad .lista-check li { font-size: var(--t-small); }

.campo__ayuda {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t-micro);
  color: var(--texto-tenue);
}

/* ==========================================================================
   21. AVISO DE CAMBIO DE IDIOMA POR UBICACIÓN
   Discreto, pero con salida siempre visible: un cambio automático sin manera
   de deshacerlo es una trampa, no una comodidad.
   ========================================================================== */
.geo-aviso {
  background: var(--negro-carta);
  border-bottom: var(--linea);
  font-size: var(--t-small);
}
.geo-aviso[hidden] { display: none; }
.geo-aviso__interior {
  display: flex; align-items: center; gap: 1rem;
  padding-block: 0.75rem; flex-wrap: wrap;
}
.geo-aviso p { margin: 0; color: var(--texto-suave); flex: 1 1 auto; }
.geo-aviso a { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }
.geo-aviso button {
  background: none; border: 0; color: var(--texto-tenue);
  font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 0.25rem;
}
.geo-aviso button:hover { color: var(--texto); }
.aviso-maqueta { font-weight: 700; }

/* Sin foto, el perfil va a una columna: un hueco vacío parece web sin terminar. */
.perfil--sin-foto { grid-template-columns: 1fr; }
.perfil--sin-foto > div { max-width: var(--ancho-texto); }

/* ==========================================================================
   23. CASOS
   Cada uno cierra con su procedencia y con qué NO demuestra. Esa disciplina
   es lo único que ninguna competidora del sector tiene: no se toca.
   ========================================================================== */
.casos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1px;
  background: var(--negro-borde);
  border: var(--linea);
  border-radius: var(--radio-carta);
  overflow: hidden;
}
.caso {
  background: var(--negro-carta);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: background var(--transicion);
}
/* Dentro de una rejilla con overflow hidden no se puede levantar la tarjeta:
   el hover aclara el fondo en vez de desplazarla. */
.caso:hover { background: #232221; }
.caso__etiqueta {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--oro); margin: 0;
}
.caso h3 { margin: 0; max-width: 24ch; }
.caso__cifra {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  letter-spacing: -0.03em; line-height: 1;
  color: var(--blanco); font-variant-numeric: tabular-nums;
  margin: 0.25rem 0 0;
}
.caso__cifra:empty { display: none; }
.caso__cifra small { color: var(--oro); font-size: 0.42em; font-weight: 700; margin-left: 0.35em; }
.caso__texto { color: var(--texto-suave); font-size: var(--t-small); margin: 0; }

.caso__datos { display: grid; gap: 1px; background: var(--negro-borde); margin: 0.4rem 0 0; }
.caso__datos:empty { display: none; }
.caso__datos > div {
  background: var(--negro-carta); display: flex; justify-content: space-between;
  gap: 1rem; padding: 0.55rem 0;
}
.caso__datos dt { font-size: var(--t-small); color: var(--texto-suave); }
.caso__datos dd {
  margin: 0; font-family: var(--mono); font-size: var(--t-small);
  color: var(--blanco); font-variant-numeric: tabular-nums; white-space: nowrap;
}

.caso__enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.caso__enlaces:empty { display: none; }
.caso__enlaces a {
  font-family: var(--mono); font-size: var(--t-small);
  color: var(--oro); text-decoration: underline; text-underline-offset: 3px;
}

.caso__fuente {
  font-family: var(--mono); font-size: 0.6875rem; line-height: 1.5;
  color: var(--texto-tenue); margin: auto 0 0; padding-top: 0.9rem;
  border-top: var(--linea);
}
.caso__limite {
  font-family: var(--serif); font-style: italic; font-size: 0.95rem;
  line-height: 1.45; color: var(--texto-suave); margin: 0;
  padding-left: 0.9rem; border-left: 2px solid var(--oro);
}

/* Un bloque de pendiente vacío no debe dibujar una caja. */
.pendiente:empty { display: none; }

/* ==========================================================================
   24. HOME V2 — reconstrucción tras la demolición
   Requisito de la Fase 4: H1, entrada, botón y verificables ENTEROS a 1440×900.
   ========================================================================== */
.hero--compacto { padding-block: clamp(2.5rem, 1.2rem + 3.5vw, 4.5rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.hero--compacto h1 { font-size: clamp(1.9rem, 1.1rem + 2.9vw, 3.4rem); max-width: 24ch; }
.hero--compacto .hero__lead { margin-bottom: 1.5rem; }
.hero__verificables {
  list-style: none; margin: 1.75rem 0 0; padding: 1.25rem 0 0;
  border-top: var(--linea);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem 2rem;
}
.hero__verificables li {
  position: relative; padding-left: 1.4rem;
  font-size: var(--t-small); color: var(--texto-suave); line-height: 1.5;
}
.hero__verificables li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border-radius: 1px; background: var(--oro);
}

.panel__cuerpo { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) 1.5rem 0.5rem; }
.panel__cuerpo h3 { max-width: 34ch; margin-bottom: 0.75rem; }
.panel__cuerpo p { color: var(--texto-suave); font-size: var(--t-small); max-width: 72ch; }
.panel__pie--limite { font-family: var(--serif); font-style: italic; border-top: 0; padding-top: 0; }
.panel__pie--fuente {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em;
  color: var(--texto-tenue); border-top: 0; padding-top: 0;
}
.casos--tres { margin-top: 2rem; }

.reglas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; }
.regla { background: #FFFFFF; border: 1px solid var(--crema-borde); border-radius: var(--radio-carta); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
/* Las cartas sueltas sobre crema sí pueden levantarse al pasar por encima.
   Solo las que son carta de verdad (fondo y borde): un bloque de texto
   desnudo con sombra parece un error, no un detalle. */
.regla, .cuenta {
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.regla:hover, .cuenta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(33, 33, 33, 0.08);
}
.regla h3 { margin-bottom: 0.6rem; font-size: 1.125rem; }
.regla p { margin: 0; font-size: var(--t-small); color: var(--texto-oscuro-suave); }
.seccion--crema .prosa th { color: #8A6A16; }
.seccion--crema .prosa th, .seccion--crema .prosa td { border-color: var(--crema-borde); background: #FFFFFF; }

.lista-check--doble { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0.9rem 2.5rem; }
.propiedad__cierre {
  font-family: var(--serif); font-style: italic;
  font-size: var(--t-lead); max-width: 56ch;
  margin: 2.25rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--oro);
}

.bloques-servicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.75rem 2.5rem; margin: 2.5rem 0; }
.bloque-servicio h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.bloque-servicio p { margin: 0; font-size: var(--t-small); color: var(--texto-oscuro-suave); }

.cuentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.cuenta { background: #FFFFFF; border: 1px solid var(--crema-borde); border-radius: var(--radio-carta); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.cuenta h4 { font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin: 0 0 0.6rem; }
.cuenta p { margin: 0; font-size: var(--t-small); color: var(--texto-oscuro-suave); }

.dubai { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: 2rem; border-top: var(--linea); max-width: 78ch; }
.dubai h3 { margin-bottom: 1rem; }
.dubai .lista-check { margin-top: 1.25rem; }

.cierre .cierre__pasa { text-align: left; margin-inline: 0; max-width: none; }
.cierre__nopasa { text-align: left; margin: 2rem 0; }
.cierre__nopasa h3 { font-size: 1.05rem; margin-bottom: 0.9rem; }
.cierre { text-align: left; }
.cierre h2 { margin-inline: 0; max-width: 24ch; }
.cierre .acciones { justify-content: flex-start; }
.cierre .microcopia { text-align: left; }

.panel--apilado + .panel--apilado { margin-top: 1.5rem; }
.panel__pie:empty { display: none; }

/* ==========================================================================
   25. CAPTURAS DE LOS PANELES — las primeras imágenes del sitio.
   Prueba, no decoración: cada una con su pie diciendo qué enseña.
   ========================================================================== */
.panel__capturas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--negro-borde);
  border-top: var(--linea);
}
.panel__capturas:empty { display: none; }
.panel__capturas figure {
  margin: 0; background: var(--negro-carta);
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.panel__capturas img {
  width: 100%; height: auto;
  border: var(--linea); border-radius: 4px;
}
@media (max-width: 680px) { .panel__capturas { grid-template-columns: 1fr; } }
.panel__capturas figcaption {
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.04em; line-height: 1.5;
  color: var(--texto-suave);
}

/* La foto en /quien-soy/: al lado del texto, no encima de él. */
.prosa .foto-perfil {
  float: right;
  width: min(280px, 40%);
  margin: 0 0 1.25rem 1.75rem;
  border: var(--linea);
  border-radius: var(--radio-carta);
}
@media (max-width: 560px) {
  .prosa .foto-perfil { float: none; width: 100%; max-width: 320px; margin: 0 0 1.5rem; }
}

/* CORRECCIÓN: la tabla de precios vive ahora en sección crema y heredaba los
   colores de la versión oscura — texto casi blanco sobre crema, ilegible. */
.seccion--crema .tabla-precios th { color: var(--texto-oscuro); }
.seccion--crema .tabla-precios td { color: var(--texto-oscuro-suave); }
.seccion--crema .tabla-precios th,
.seccion--crema .tabla-precios td { border-color: var(--crema-borde); }
.seccion--crema .tabla-precios__rango { color: var(--texto-oscuro) !important; }
.seccion--crema .tabla-precios tr:last-child .tabla-precios__rango { color: #8A6A16 !important; }