/* ==========================================================================
   @dr.dagobertosilva — hoja de estilo única
   Tokens derivados de DESIGN.md (provisional, 2026-09-20).
   Regla dura: el oro es ACENTO, nunca cuerpo. Un acento dorado por bloque.
   Sin degradados, sin sombras difusas, sin oro metalizado.
   ========================================================================== */

:root {
  /* --- color (DESIGN.md) --- */
  --negro-tinta: #16151A;
  --negro-elev: #1F1E24;      /* separador de bloque dentro de lo oscuro */
  --oro: #D3AE38;             /* 8.55:1 sobre negro-tinta → AAA */
  --oro-brillante: #EAC13D;   /* SOLO dentro del logo */
  --oro-sombra: #A58930;      /* único oro admisible sobre fondo claro */
  --off-white: #FAFAF9;
  --gris-texto: #1F2937;
  --gris-secundario: #6B7280;
  --gris-linea: #E3E2DF;
  --rojo-alarma: #DC2626;
  --ambar-precaucion: #F59E0B;
  --verde-confianza: #059669;

  /* --- tipografía --- */
  --f-titulo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-cuerpo: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- espaciado base 8 --- */
  --xs: 4px;  --sm: 8px;  --md: 16px;  --lg: 28px;  --xl: 48px;  --xxl: 80px;

  /* --- radios mínimos --- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;

  --ancho-max: 1120px;
  --ancho-texto: 68ch;
}

/* ---------- reset acotado ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--f-cuerpo);
  font-size: 18px;
  line-height: 1.55;
  color: var(--gris-texto);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--f-titulo); margin: 0 0 var(--md); text-wrap: balance; }
h1 { font-weight: 700; font-size: clamp(32px, 6vw, 48px); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-weight: 600; font-size: clamp(24px, 4vw, 30px); line-height: 1.22; letter-spacing: -.01em; }
h3 { font-weight: 600; font-size: 20px; line-height: 1.3; }
p  { margin: 0 0 var(--md); }
p, li { max-width: var(--ancho-texto); }
ul, ol { padding-left: 1.2em; margin: 0 0 var(--md); }
li + li { margin-top: var(--sm); }
strong { font-weight: 600; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: var(--r-sm); }

/* ---------- utilidades de layout ---------- */
.contenedor { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--md); }
@media (min-width: 720px) { .contenedor { padding-inline: var(--lg); } }
.seccion { padding-block: clamp(48px, 9vw, 80px); }
.seccion--ajustada { padding-block: clamp(36px, 6vw, 56px); }
.centrado { text-align: center; }
.centrado p, .centrado li { margin-inline: auto; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- superficies ---------- */
.s-oscura { background: var(--negro-tinta); color: var(--off-white); }
.s-oscura h1, .s-oscura h2, .s-oscura h3 { color: var(--off-white); }
.s-clara { background: var(--off-white); color: var(--gris-texto); }
.s-papel { background: #F2F1EE; color: var(--gris-texto); }

/* ---------- saltar al contenido ---------- */
.saltar {
  position: absolute; left: var(--md); top: -100px; z-index: 100;
  background: var(--oro); color: var(--negro-tinta);
  padding: var(--sm) var(--md); border-radius: var(--r-sm); font-weight: 600;
}
.saltar:focus { top: var(--md); }

/* ---------- encabezado ---------- */
.cabecera {
  background: var(--negro-tinta);
  border-bottom: 1px solid rgba(250,250,249,.1);
  position: sticky; top: 0; z-index: 50;
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--md); min-height: 64px;
}
.cabecera__logo { display: flex; align-items: center; text-decoration: none; }
/* Espacio de protección del logo = altura de la «D». No recomponer el script. */
.cabecera__logo img { height: 30px; width: auto; margin-block: 10px; }
.nav { display: flex; align-items: center; gap: var(--md); flex-wrap: wrap; }
.nav a {
  color: var(--off-white); text-decoration: none;
  font-family: var(--f-titulo); font-size: 14px; font-weight: 500;
  padding: var(--sm) 0;
}
.nav a:hover { text-decoration: underline; text-decoration-color: var(--oro); }
.nav a[aria-current="page"] { color: var(--oro); }
@media (max-width: 560px) {
  .cabecera__fila { flex-direction: column; align-items: flex-start; padding-block: var(--sm); }
  .nav { gap: var(--md); }
}

/* ---------- botones ---------- */
.btn {
  display: inline-block; font-family: var(--f-titulo); font-weight: 600;
  font-size: 16px; line-height: 1.2; text-decoration: none;
  padding: 14px 24px; border-radius: var(--r-sm); border: 2px solid transparent;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
/* negro-tinta sobre oro = 8.55:1 → AAA */
.btn--oro { background: var(--oro); color: var(--negro-tinta); }
.btn--oro:hover { background: var(--oro-brillante); }
.btn--linea { background: transparent; color: var(--off-white); border-color: rgba(250,250,249,.45); }
.btn--linea:hover { border-color: var(--off-white); }
.btn--linea-oscura { background: transparent; color: var(--gris-texto); border-color: #C9C7C2; }
.btn--linea-oscura:hover { border-color: var(--gris-texto); }
.btn--ancho { width: 100%; text-align: center; }
.botonera { display: flex; flex-wrap: wrap; gap: var(--md); margin-top: var(--lg); }

/* ---------- portada ---------- */
.portada { padding-block: clamp(56px, 10vw, 96px); }
.portada__rejilla { display: grid; gap: var(--xl); align-items: center; }
@media (min-width: 860px) { .portada__rejilla { grid-template-columns: 1.15fr .85fr; } }
.portada__antetitulo {
  font-family: var(--f-titulo); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--oro);
  margin: 0 0 var(--md);
}
.portada__bajada { font-size: 20px; color: rgba(250,250,249,.82); max-width: 54ch; }

/* Marco del retrato. Mientras no haya foto, muestra el hueco con instrucción. */
.retrato {
  position: relative; aspect-ratio: 4 / 5; background: var(--negro-elev);
  border: 1px solid rgba(250,250,249,.14); border-radius: var(--r-md); overflow: hidden;
}
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.retrato__hueco {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sm);
  padding: var(--lg); text-align: center;
  color: var(--gris-secundario); font-size: 14px;
}
.retrato__hueco strong { color: rgba(250,250,249,.75); font-family: var(--f-titulo); }

/* ---------- placa «cuándo NO» (componente recurrente de la marca) ---------- */
.placa {
  background: var(--negro-tinta); color: var(--off-white);
  border-left: 4px solid var(--oro); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--lg); margin-block: var(--lg);
}
.placa p:last-child, .placa ul:last-child { margin-bottom: 0; }
.placa__titulo {
  font-family: var(--f-titulo); font-weight: 700; font-size: 20px;
  margin: 0 0 var(--sm); color: var(--off-white);
}
/* variante sobre fondo oscuro: la regla dorada basta, sin doble fondo */
.s-oscura .placa { background: var(--negro-elev); }

/* ---------- aviso / disclaimer: contraste real, nunca gris ilegible ---------- */
.aviso {
  border: 1px solid var(--gris-linea); border-left: 4px solid var(--gris-secundario);
  background: #fff; color: var(--gris-texto);
  padding: var(--md) var(--lg); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 16px; margin-block: var(--lg);
}
.aviso p:last-child { margin-bottom: 0; }
.aviso--alarma { border-left-color: var(--rojo-alarma); }
.aviso--precaucion { border-left-color: var(--ambar-precaucion); }
.aviso--confianza { border-left-color: var(--verde-confianza); }
.s-oscura .aviso {
  background: var(--negro-elev); color: rgba(250,250,249,.9);
  border-color: rgba(250,250,249,.16);
}

/* ---------- tarjetas ---------- */
.rejilla { display: grid; gap: var(--lg); }
.rejilla--2 { grid-template-columns: 1fr; }
.rejilla--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .rejilla--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  background: #fff; border: 1px solid var(--gris-linea);
  border-radius: var(--r-md); padding: var(--lg);
}
.tarjeta h3 { margin-bottom: var(--sm); }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta__numero {
  font-family: var(--f-titulo); font-weight: 700; font-size: 14px;
  letter-spacing: .1em; color: var(--oro-sombra); display: block; margin-bottom: var(--sm);
}
.s-oscura .tarjeta {
  background: var(--negro-elev); border-color: rgba(250,250,249,.14); color: rgba(250,250,249,.88);
}
.s-oscura .tarjeta__numero { color: var(--oro); }

/* --- las dos puertas: marca personal vs. clínica --- */
.puerta { display: flex; flex-direction: column; height: 100%; }
.puerta__etiqueta {
  font-family: var(--f-titulo); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris-secundario);
  margin-bottom: var(--sm);
}
.puerta .btn { margin-top: auto; align-self: flex-start; }
.puerta ul { margin-bottom: var(--lg); }

/* ---------- listas con marca ---------- */
.lista-limpia { list-style: none; padding: 0; }
.lista-limpia li { position: relative; padding-left: 28px; }
.lista-limpia li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 14px; height: 2px; background: var(--oro-sombra);
}
.s-oscura .lista-limpia li::before { background: var(--oro); }
.lista-no li::before { background: var(--rojo-alarma); }

/* ---------- precio ---------- */
.precio {
  border: 1px solid var(--gris-linea); border-radius: var(--r-md);
  background: #fff; padding: var(--lg);
}
.precio__cifra {
  font-family: var(--f-titulo); font-weight: 700; font-size: 40px;
  line-height: 1; letter-spacing: -.02em; display: block; margin-bottom: var(--xs);
}
.precio__nota { color: var(--gris-secundario); font-size: 15px; margin: 0; }
.precio__tachado { color: var(--gris-secundario); text-decoration: line-through; font-size: 18px; }
.precio--destacado { border: 2px solid var(--negro-tinta); }
.precio__sello {
  display: inline-block; background: var(--negro-tinta); color: var(--oro);
  font-family: var(--f-titulo); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-sm); margin-bottom: var(--md);
}

/* ---------- preguntas frecuentes ---------- */
.faq { border-top: 1px solid var(--gris-linea); max-width: var(--ancho-texto); }
.faq details { border-bottom: 1px solid var(--gris-linea); }
.faq summary {
  font-family: var(--f-titulo); font-weight: 600; font-size: 18px;
  padding: var(--md) 36px var(--md) 0; cursor: pointer; position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: var(--md);
  font-weight: 400; font-size: 24px; line-height: 1; color: var(--oro-sombra);
}
.faq details[open] summary::after { content: "–"; }
.faq details > *:not(summary) { margin-bottom: var(--md); }

/* ---------- cita de fuente ---------- */
.fuente {
  font-family: var(--f-titulo); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris-secundario);
  margin-top: var(--sm);
}
.s-oscura .fuente { color: rgba(250,250,249,.6); }

/* ---------- contenido legal ---------- */
.legal { max-width: var(--ancho-texto); }
.legal h2 { margin-top: var(--xl); }
.legal h3 { margin-top: var(--lg); }
.legal ol > li { margin-top: var(--sm); }
.legal table { width: 100%; border-collapse: collapse; margin-bottom: var(--md); font-size: 16px; }
.legal th, .legal td { text-align: left; padding: var(--sm) var(--md); border: 1px solid var(--gris-linea); vertical-align: top; }
.legal th { background: #F2F1EE; font-family: var(--f-titulo); font-weight: 600; }
.legal__meta { color: var(--gris-secundario); font-size: 15px; }

/* ---------- pie ---------- */
.pie { background: var(--negro-tinta); color: rgba(250,250,249,.72); padding-block: var(--xl) var(--lg); }
.pie a { color: var(--off-white); }
.pie__rejilla { display: grid; gap: var(--lg); }
@media (min-width: 720px) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie h4 {
  font-family: var(--f-titulo); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--off-white);
  margin: 0 0 var(--md);
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li + li { margin-top: var(--sm); }
.pie__legal {
  border-top: 1px solid rgba(250,250,249,.12); margin-top: var(--xl); padding-top: var(--lg);
  font-size: 14px; color: rgba(250,250,249,.6);
}
.pie__legal p { max-width: none; }
.pie img { height: 28px; width: auto; margin-bottom: var(--md); }