/* =========================================================================
   DESIDERIUM SYSTEMS — SISTEMA DE DISEÑO FIRMADO (decisión final 2026-10-23)
   Un solo sistema para las cuatro superficies: página comercial, ficha del
   tag, página del negocio y salida digna. D-D1 a D-D11.
   REGLAS DURAS (lint automático en herramientas/lint_tokens.py):
   - El cobre #C97E46 NUNCA es texto ni fondo sobre superficies claras:
     vive solo sobre noche (marca, acción sobre noche).
   - El borde decorativo #E5DDC9 NUNCA delimita un control o campo.
   - Retirados: #D9B45B, #B8912F (dorados) y #10294D (azul mar) como sistema.
   ========================================================================= */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/source-serif-4-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
/* Respaldo con métricas ajustadas (§3.3.3: font-display + size-adjust) */
@font-face {
  font-family: "SerifRespaldo";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 103%;
}

:root {
  color-scheme: light;
  --fondo: #FBF8F1;
  --banda: #F6F0DF;
  --superficie: #FFFFFF;
  --tinta: #1C2733;
  --secundario: #4F5E6E;
  --noche: #081426;
  --noche2: #0D2242;
  --cobre: #C97E46;          /* SOLO sobre noche */
  --accion: #9A5A28;         /* acción principal sobre claro (+ blanco) */
  --accion-hover: #87501F;
  --enlace: #1A5C9E;
  --compartir: #0D2242;
  --borde-deco: #E5DDC9;     /* decorativo: nunca delimita controles */
  --borde: #7A8491;          /* control: ≥3:1 */
  --demo-fondo: #E8ECF2;
  --demo-borde: #5B6A7A;
  --foco: #0B63CE;
  --exito: #1E6B4B;
  --error: #A12B2B;
  --deshab-fondo: #EEE7D8;
  --deshab-texto: #8A938C;
  --serif: "Source Serif 4", "SerifRespaldo", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r-chico: 8px;
  --r-med: 14px;
  --r-grande: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.53; /* 26/17 */
  color: var(--tinta);
  background: var(--fondo);
  font-variant-numeric: lining-nums tabular-nums;
}

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; line-height: 1.15; }
a { color: var(--enlace); }
img { max-width: 100%; display: block; }

/* Foco: anillo doble con OUTLINE (sobrevive a forced-colors, §3.3.2) */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #FFFFFF;
}
.noche :focus-visible, .sobre-noche :focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 6px var(--foco); /* anillo interior claro */
}

/* Bilingüismo: cada elemento lleva UN idioma (nada de EN·ES mezclados) */
.t-es { display: none; }
html[data-lang="es"] .t-es { display: initial; }
html[data-lang="es"] .t-en { display: none; }
.t-es-b { display: none; }
html[data-lang="es"] .t-es-b { display: block; }
html[data-lang="es"] .t-en-b { display: none; }

/* ---------- Cabecera y selector de idioma (pastilla, patrón único) ------ */
.cabecera {
  background: var(--noche);
  color: var(--fondo);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
}
.cabecera .identidad {
  font-family: var(--serif); font-size: 1rem; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.langsel {
  display: inline-flex; flex: none;
  border: 1px solid var(--borde); border-radius: 999px; overflow: hidden;
  background: transparent;
}
.langsel button {
  font-family: var(--sans); font-size: .92rem; font-weight: 600;
  min-width: 44px; min-height: 44px; padding: 6px 12px;
  background: transparent; color: inherit; border: 0; cursor: pointer;
}
.cabecera .langsel button[aria-pressed="true"] { background: var(--fondo); color: var(--noche); }
.langsel.clara button[aria-pressed="true"] { background: var(--noche); color: #FFFFFF; }

/* Cabecera clara de la página comercial */
.cabecera-clara {
  background: var(--fondo); color: var(--tinta);
  border-bottom: 1px solid var(--borde-deco);
  position: relative;
}
.cabecera-clara .identidad { color: var(--noche); }

/* ---------- Signo lunar (SVG, un solo color, un solo uso de marca) ----- */
.signo-lunar { width: 22px; height: 22px; flex: none; }
.signo-lunar path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

/* ---------- Banda DEMO + pastilla (§D-D6 / §3.3.4) ---------------------- */
.banda-demo {
  background: var(--demo-fondo); color: var(--tinta);
  border-bottom: 2px dotted var(--demo-borde);
  text-align: center; font-size: .92rem; font-weight: 600;
  padding: 8px 16px; letter-spacing: .02em;
}
.pastilla-demo {
  display: inline-block; background: var(--demo-fondo); color: var(--tinta);
  border: 1.5px dotted var(--demo-borde); border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  padding: 3px 10px; margin: 0 0 10px;
}

/* ---------- Botones ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 650; text-decoration: none; text-align: center;
  border-radius: var(--r-med); cursor: pointer; border: 1px solid transparent;
  min-height: 48px; padding: 12px 22px; font-size: 1.02rem; line-height: 1.25;
}
.btn svg { width: 24px; height: 24px; flex: none; }
.btn-principal { background: var(--accion); color: #FFFFFF; }
.btn-principal:hover { background: var(--accion-hover); }
.btn-principal:active { background: #7A4718; }
.btn-sobre-noche { background: var(--cobre); color: var(--noche); }
.btn-sobre-noche:hover { background: #D18A52; }
.btn-sobre-noche:active { background: #BC7439; }
.btn-contorno { background: var(--superficie); color: var(--tinta); border-color: var(--borde); }
.btn-contorno:hover { background: var(--fondo); }
.btn-contorno-noche { background: transparent; color: var(--fondo); border-color: var(--fondo); }
.btn-contorno-noche:hover { background: rgba(251,248,241,.1); }
.btn-compartir { background: var(--compartir); color: #FFFFFF; width: 100%; }
.btn-compartir:hover { background: #123058; }
.btn-deshabilitado, .btn[aria-disabled="true"] {
  background: var(--deshab-fondo); color: var(--deshab-texto);
  border-color: var(--borde); cursor: not-allowed; box-shadow: none;
}
.nota-demo-acciones { font-size: .9rem; color: var(--secundario); margin: 8px 0 0; }

/* ---------- FICHA DEL TAG ------------------------------------------------ */
.ficha-main { max-width: 34em; margin: 0 auto; padding: 22px 16px 30px; }
.nombre-negocio { color: var(--noche); margin: 2px 0 6px; overflow-wrap: anywhere; hyphens: auto; }
.esc-32 { font-size: 32px; } .esc-28 { font-size: 28px; } .esc-24 { font-size: 24px; }
.descriptor { color: #33404E; margin: 0 0 16px; font-size: 1.02rem; }
.principal-52 { width: 100%; min-height: 52px; font-size: 1.1rem; margin: 4px 0 10px; }
.solo-escritorio { display: none; }
@media (min-width: 880px) { .solo-escritorio { display: inline; } }
.secundario-ancho { width: 100%; margin: 0 0 18px; }
.cuadricula { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 18px; }
.accion {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 11px 8px;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--r-med);
  font-weight: 600; font-size: .99rem; text-decoration: none; text-align: center;
}
.accion svg { width: 24px; height: 24px; flex: none; }
.accion:hover { background: var(--fondo); }
.accion.deshabilitada {
  background: var(--deshab-fondo); color: var(--deshab-texto); cursor: not-allowed;
}
.tarjeta-detalles {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-med); padding: 18px 20px; margin: 0 0 18px;
}
.tarjeta-detalles h2 { font-size: 1.12rem; color: var(--noche); margin: 0 0 10px; }
.detalle-fila { display: grid; grid-template-columns: 7.5em 1fr; gap: 6px 14px; margin: 7px 0; }
.detalle-fila dt { color: var(--secundario); font-weight: 600; font-size: .95rem; }
.detalle-fila dd { margin: 0; }
.compartir-card {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-med); padding: 20px; margin: 0 0 8px;
}
.compartir-card h2 { font-size: 1.22rem; color: var(--noche); margin: 0 0 6px; }
.compartir-card p { margin: 0 0 14px; color: #33404E; }
.compartir-botones { display: grid; gap: 8px; }
#share-estado { min-height: 1.4em; margin: 12px 0 0; font-size: .97rem; }
#share-estado.exito { color: var(--exito); font-weight: 650; }
#share-manual { display: none; margin-top: 12px; }
#share-manual input {
  width: 100%; padding: 12px; border-radius: var(--r-chico);
  border: 1px solid var(--borde); font-size: .98rem;
  background: var(--superficie); color: var(--tinta); font-family: var(--sans);
}
.pie-ficha {
  color: var(--secundario); font-size: .88rem; text-align: center; padding: 6px 16px 28px;
}
.pie-ficha a { color: var(--secundario); }

/* Ficha en escritorio: dos columnas en ≈880 px (D-D8) */
@media (min-width: 880px) {
  .ficha-main { max-width: 880px; padding: 30px 24px 36px; }
  .ficha-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .ficha-columnas .tarjeta-detalles { margin: 0; }
  .compartir-card { margin-top: 22px; }
}

/* ---------- SALIDA DIGNA ------------------------------------------------ */
.salida-main { max-width: 32em; margin: 0 auto; padding: 24px 16px 30px; }
.salida-card {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-med); padding: 24px 22px;
}
.salida-card h1 { font-size: 1.55rem; color: var(--noche); margin: 2px 0 10px; }
.linea-neutra { font-size: 1.05rem; margin: 0 0 18px; }
.salida-card .btn { width: 100%; margin: 0 0 10px; }
.salida-datos { margin: 14px 0 4px; }
.salida-datos .meta { color: var(--secundario); margin: 5px 0; }

/* ---------- PÁGINA COMERCIAL -------------------------------------------- */
.contenedor { width: min(1080px, calc(100vw - 32px)); margin: 0 auto; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--noche); color: #FFFFFF; padding: 12px 18px;
  border-radius: var(--r-chico); text-decoration: none; font-weight: 650;
}
.skip-link:focus { top: 12px; }
.nav-principal { display: flex; gap: 4px; align-items: center; }
.nav-principal a {
  color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .98rem;
  padding: 10px 12px; border-radius: var(--r-chico); min-height: 44px;
  display: inline-flex; align-items: center;
}
.nav-principal a:hover { background: var(--banda); }
.btn-menu { display: none; }

/* Hero (noche) */
.hero {
  background: var(--noche); color: var(--fondo);
  padding: 46px 0 52px;
}
.antetitulo {
  color: var(--cobre); font-weight: 700; letter-spacing: .14em;
  font-size: .85rem; margin: 0 0 14px; text-transform: uppercase;
}
.hero h1 { font-size: 40px; margin: 0 0 14px; color: #FFFFFF; }
.hero .subtitulo { font-size: 1.13rem; line-height: 1.5; color: #E8E2D2; margin: 0 0 24px; max-width: 34em; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 8px; }
.qr-card {
  display: none; background: #FFFFFF; border-radius: var(--r-med);
  padding: 12px; text-align: center; width: 148px;
}
.qr-card svg { width: 112px; height: 112px; margin: 0 auto 6px; }
.qr-card p { color: var(--tinta); font-size: .78rem; margin: 0; line-height: 1.35; }
@media (min-width: 1024px) { .qr-card { display: block; } }

/* Clúster visual del hero: DÍPTICO efectivo (teléfono + mini vista).
   La ranura del objeto físico queda oculta hasta la foto del dueño. */
.hero-visual { display: flex; gap: 18px; align-items: flex-start; margin-top: 30px; }
.telefono-marco {
  flex: none; width: 218px; border: 3px solid #2A3B52; border-radius: 34px;
  overflow: hidden; background: #FFFFFF; box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.telefono-marco img { width: 100%; height: auto; }
.navegador-marco {
  flex: 1 1 auto; min-width: 0; border: 2px solid #2A3B52; border-radius: var(--r-med);
  overflow: hidden; background: #FFFFFF; box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.navegador-marco .barra {
  background: #22344E; color: #C9D4E2; font-size: .72rem; padding: 6px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.navegador-marco img { width: 100%; height: auto; }
.pie-muestra { color: #C9D4E2; font-size: .85rem; margin: 10px 0 0; }
.ranura-objeto { display: none; } /* ranura de integración: foto del objeto */
@media (min-width: 1024px) {
  .hero-grid { display: grid; grid-template-columns: 1fr 480px; gap: 44px; align-items: start; }
  .hero-visual { margin-top: 6px; }
  .hero h1 { font-size: 48px; line-height: 1.1; }
}

/* Secciones */
.seccion { padding: 54px 0; }
.seccion-banda { background: var(--banda); }
.seccion-blanca { background: var(--superficie); }
.seccion h2 { font-size: 30px; color: var(--noche); margin: 0 0 12px; }
.seccion .intro { max-width: 42em; margin: 0 0 26px; color: #33404E; }
.compromisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 880px) { .compromisos { grid-template-columns: 1fr 1fr; gap: 20px 36px; } }
.compromisos li { display: flex; gap: 12px; align-items: flex-start; }
.compromisos .check {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--exito); color: #FFFFFF; display: inline-flex;
  align-items: center; justify-content: center; margin-top: 2px;
}
.compromisos .check svg { width: 16px; height: 16px; }
.compromisos strong { display: block; font-size: 1.05rem; }
.compromisos span.respaldo { color: var(--secundario); font-size: .97rem; }

.incluye-grid { display: grid; gap: 30px; }
@media (min-width: 880px) { .incluye-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.incluye-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.incluye-lista li { display: flex; gap: 14px; }
.incluye-lista .icono {
  flex: none; width: 48px; height: 48px; border-radius: var(--r-med);
  border: 1px solid var(--borde); display: inline-flex; align-items: center;
  justify-content: center; color: var(--noche); background: var(--fondo);
}
.incluye-lista svg { width: 24px; height: 24px; }
.incluye-lista strong { display: block; font-size: 1.05rem; }
.incluye-lista span { color: var(--secundario); font-size: .97rem; }
.marco-ancho { border: 2px solid var(--borde); border-radius: var(--r-med); overflow: hidden; }
.marco-ancho .barra { background: var(--fondo); color: var(--secundario); font-size: .75rem; padding: 6px 12px; border-bottom: 1px solid var(--borde-deco); }

.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 22px; }
@media (min-width: 880px) { .pasos { grid-template-columns: 1fr 1fr; gap: 26px 40px; } }
.pasos li { display: flex; gap: 16px; }
.pasos .num {
  font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--accion);
  flex: none; width: 1.2em;
}
.pasos strong { display: block; font-size: 1.06rem; }
.pasos span { color: var(--secundario); font-size: .97rem; }

/* Precios (sobre noche) */
.seccion-precios { background: var(--noche2); color: var(--fondo); }
.seccion-precios h2 { color: #FFFFFF; }
.seccion-precios .intro { color: #D8DEE8; }
.tarjetas-precios { display: grid; gap: 18px; }
@media (min-width: 880px) { .tarjetas-precios { grid-template-columns: repeat(3, 1fr); } }
.tarjeta-precio {
  background: var(--superficie); color: var(--tinta); border-radius: var(--r-grande);
  padding: 24px 22px; border: 1px solid var(--borde);
}
.tarjeta-precio h3 { font-size: 1.3rem; color: var(--noche); margin: 0 0 4px; }
.tarjeta-precio .precio { font-family: var(--serif); font-size: 2.1rem; color: var(--noche); margin: 0 0 12px; }
.tarjeta-precio .precio small { font-size: .95rem; font-family: var(--sans); color: var(--secundario); }
.tarjeta-precio ul { margin: 0 0 14px; padding-left: 1.15em; display: grid; gap: 7px; }
.tarjeta-precio .linea-miembro {
  border-top: 1px solid var(--borde-deco); padding-top: 12px; margin: 0;
  font-size: .93rem; color: var(--secundario);
}
.nota-precios { color: #D8DEE8; font-size: .95rem; margin: 18px 0 0; }

.cuidado-grid { display: grid; gap: 24px; }
@media (min-width: 880px) { .cuidado-grid { grid-template-columns: 1fr 1fr; gap: 28px 44px; } }
.cuidado-grid h3 { font-size: 1.22rem; color: var(--noche); margin: 0 0 8px; }
.cuidado-grid p { margin: 0; color: #33404E; }

.faq details {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-med); padding: 4px 20px; margin: 0 0 12px;
}
.faq summary {
  font-weight: 650; font-size: 1.03rem; cursor: pointer; padding: 14px 0;
  min-height: 48px; display: flex; align-items: center;
}
.faq details p { margin: 0 0 16px; color: #33404E; }

.formulario { display: grid; gap: 14px; max-width: 34em; }
.formulario label { font-weight: 600; font-size: .97rem; display: block; margin-bottom: 5px; }
.formulario input, .formulario textarea, .formulario select {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-chico);
}
.contacto-grid { display: grid; gap: 30px; }
@media (min-width: 880px) { .contacto-grid { grid-template-columns: 1fr 1.2fr; } }
.contacto-directo { display: grid; gap: 12px; align-content: start; }
#form-estado { min-height: 1.4em; margin: 4px 0 0; }
#form-estado.exito { color: var(--exito); font-weight: 650; }

.pie-comercial { background: var(--noche); color: #C9D4E2; padding: 34px 0 40px; font-size: .95rem; }
.pie-comercial .identidad { color: #FFFFFF; font-family: var(--serif); font-size: 1.05rem; display: flex; gap: 8px; align-items: center; }
.pie-comercial a { color: #C9D4E2; }

/* Barra inferior de CTA (solo tras el hero; única sombra suave permitida) */
.barra-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--noche); color: var(--fondo);
  box-shadow: 0 -2px 14px rgba(8,20,38,.25);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: none; align-items: center; justify-content: space-between; gap: 14px;
}
.barra-cta.visible { display: flex; }
.barra-cta p { margin: 0; font-size: .95rem; font-weight: 600; }
.barra-cta .btn { min-height: 48px; padding: 10px 18px; flex: none; }
body.con-barra { padding-bottom: 84px; } /* la barra reserva su altura (§3.3.7) */

/* Cabecera comercial en móvil: logo compacto + EN|ES + menú (D-D8) */
@media (max-width: 767px) {
  .btn-menu {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: 1px solid var(--borde); border-radius: var(--r-chico);
    min-height: 44px; padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer;
  }
  .nav-principal {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--fondo); border-bottom: 1px solid var(--borde);
    flex-direction: column; align-items: stretch; padding: 8px 12px 12px; z-index: 40;
  }
  .nav-principal.abierto { display: flex; }
  .marca-opcional { display: none; }
  .hero h1 { font-size: 34px; }
  .hero-visual { flex-direction: column; }
  .telefono-marco { width: 200px; }
  .detalle-fila { grid-template-columns: 6.4em 1fr; }
}

/* ---------- Servicios (v2) y CTA del Diagnóstico --------------------------
   La sección de la escalera vive sobre --fondo con .tarjeta-precio y
   .btn-principal: el cobre NO aparece aquí (solo vive sobre noche). */
.hero-diag { flex: 1 1 100%; }
.micro-diagnostico {
  color: #E8E2D2; font-size: .97rem; line-height: 1.5;
  margin: 10px 0 2px; max-width: 34em;
}
.servicios-grupo { margin-top: 36px; }
.servicios-grupo > h3 {
  font-family: var(--serif); font-size: 1.45rem; color: var(--noche);
  margin: 0 0 16px;
}
.tarjeta-precio .icono {
  flex: none; width: 48px; height: 48px; border-radius: var(--r-med);
  border: 1px solid var(--borde); display: inline-flex; align-items: center;
  justify-content: center; color: var(--noche); background: var(--fondo);
  margin: 0 0 12px;
}
.tarjeta-precio .icono svg { width: 24px; height: 24px; }
.tarjeta-precio .significado { color: #33404E; margin: 0 0 14px; }
.tarjeta-ancha { grid-column: 1 / -1; }
@media (min-width: 880px) {
  .tarjeta-ancha { display: flex; gap: 14px 34px; justify-content: space-between; }
  .tarjeta-ancha .ancha-lado { flex: none; min-width: 230px; }
}
.formulario .trampa { display: none; }
.aviso-privacidad {
  font-size: .9rem; color: var(--secundario); margin: 2px 0 0; max-width: 34em;
}