/* =============================================================
   NUTRICIA MESSINA · Sistema de diseño
   -------------------------------------------------------------
   Paleta y tipografías tomadas literalmente del manual de
   identidad oficial (Documento Maestro de Contexto, §6).
   El manual prohíbe de forma expresa modificar tonalidades,
   crear variaciones arbitrarias y usar degradados no
   autorizados. Aquí no se inventa un solo color.

   Regla de contraste: el Gris Cálido #7A7A7A alcanza 3.56:1
   sobre Arena Clara. Es suficiente para texto grande (AA),
   NO para texto corrido. Por eso el cuerpo usa Grafito y el
   gris queda reservado a subtítulos amplios, tal como lo
   prescribe el propio manual.
   ============================================================= */

/* ---------- 1. Tokens ---------- */

:root {
  /* Paleta institucional — no modificar */
  --verde:    #1F5C4E;   /* Verde Esmeralda Profundo · títulos, CTA */
  --salvia:   #6F9E8E;   /* Verde Salvia · fondos suaves y acentos  */
  --arena:    #EFE9E2;   /* Arena Clara · fondo principal           */
  --gris:     #7A7A7A;   /* Gris Cálido · subtítulos amplios        */
  --grafito:  #2E2E2E;   /* Grafito · texto e información clínica   */
  --blanco:   #FFFFFF;

  /* Derivados de uso estructural, no colores nuevos */
  --borde:       color-mix(in srgb, var(--grafito) 14%, var(--arena));
  --arena-honda: color-mix(in srgb, var(--verde) 6%, var(--arena));
  --verde-hover: color-mix(in srgb, var(--verde) 86%, var(--grafito));
  --salvia-wash: color-mix(in srgb, var(--salvia) 16%, var(--arena));

  /* Tipografía.
     Los respaldos «Playfair respaldo» y «Lato respaldo» se definen en
     fuentes.css con las métricas ajustadas, de modo que el texto no
     salte cuando la tipografía real termina de cargar. */
  --display: "Playfair Display", "Playfair respaldo", Georgia, "Times New Roman", serif;
  --texto:   "Lato", "Lato respaldo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Ritmo vertical */
  --paso:   clamp(3rem, 8vw, 5.5rem);
  --ancho:  min(100% - 2.5rem, 68rem);
  --lectura: 64ch;

  /* Profundidad — suave, nunca dramática. El manual pide serenidad
     visual por encima del impacto. */
  --sombra:   0 1px 2px rgba(46,46,46,.04), 0 8px 24px -18px rgba(46,46,46,.28);
  --sombra-x: 0 1px 2px rgba(46,46,46,.05), 0 18px 40px -24px rgba(31,92,78,.35);
}

/* ---------- 2. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* La cabecera es fija: sin esto, al saltar a un ancla el título
   de destino queda escondido debajo de ella. */
:target, [id] { scroll-margin-top: 6.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--arena);
  /* Textura orgánica sutil — el manual la pide explícitamente.
     Grano SVG de ~250 bytes, sin petición de red. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  color: var(--grafito);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

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

::selection { background: var(--salvia); color: var(--blanco); }

/* Salto de navegación para lector de pantalla y teclado */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--verde);
  color: var(--blanco);
  padding: .8rem 1.2rem;
  z-index: 100;
  font-weight: 700;
}
.saltar:focus { left: .75rem; top: .75rem; }

/* ---------- 3. Tipografía ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--verde);
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0 0 .7em;
}

h1 { font-size: clamp(2.05rem, 5.6vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 3.9vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.45rem); }
h4 {
  font-family: var(--texto);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--grafito);
}

p { margin: 0 0 1.15rem; max-width: var(--lectura); }
p:last-child { margin-bottom: 0; }

a { color: var(--verde); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--verde-hover); }

strong { font-weight: 700; }

/* Antetítulo — reemplaza el uso de gris claro en texto pequeño,
   que no alcanzaría contraste AA. */
.antetitulo {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--verde);
  margin: 0 0 .9rem;
}

/* Entrada editorial.
   Va en Grafito, no en Gris Cálido. El gris sobre arena da 3.56:1,
   que basta para texto grande (≥24 px) pero no para estos 18–23 px:
   fallaría AA justo en el párrafo que más gente lee.
   La jerarquía la sostienen la serif y el tamaño, que es como el
   manual quería distinguirlo. */
.entrada {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  line-height: 1.5;
  color: color-mix(in srgb, var(--grafito) 86%, transparent);
  max-width: 42ch;
  margin: 0 0 1.6rem;
}

.nota {
  font-size: .88rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--grafito) 78%, transparent);
}

/* ---------- 4. Estructura ---------- */

.contenedor { width: var(--ancho); margin-inline: auto; }
.estrecho   { max-width: 48rem; }

.seccion { padding-block: var(--paso); }
.seccion--clara  { background: var(--blanco); }
.seccion--honda  { background: var(--arena-honda); }
.seccion--verde  { background: var(--verde); color: var(--arena); }
.seccion--verde h2,
.seccion--verde h3 { color: var(--blanco); }

/* :not(.boton) es obligatorio. Sin él esta regla gana por
   especificidad sobre .boton--claro y deja el texto blanco
   sobre un botón blanco: invisible. */
.seccion--verde a:not(.boton) { color: var(--blanco); }

/* Sobre verde el antetítulo va en Arena, no en Salvia: salvia sobre
   verde da 2.58:1 y esto es texto pequeño en versalitas. Arena da
   6.46:1. La salvia se queda para superficies claras, donde sí
   contrasta. */
.seccion--verde .antetitulo { color: var(--arena); }
.seccion--verde .entrada    { color: var(--arena); }
.seccion--verde .nota       { color: var(--arena); }

.encabezado-seccion { margin-bottom: 2.6rem; max-width: 46rem; }
.encabezado-seccion p { color: var(--grafito); }

/* ---------- 5. Cabecera y navegación ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--arena) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5rem;
  padding-block: .6rem;
}

.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img { width: 132px; height: auto; }
@media (min-width: 46rem) { .marca img { width: 150px; } }
.marca__filete {                    /* el filete del logotipo, dibujado
                                       en CSS para que no se pierda al
                                       reducir el mapa de bits */
  display: block;
  height: 1.5px;
  background: var(--salvia);
  margin-top: 3px;
}

.nav__lista {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Todas estas reglas excluyen .boton. Sin el :not() ganan por
   especificidad sobre la clase del botón y le pintan el texto en
   Grafito sobre fondo verde: 1.75:1, ilegible. Es el mismo error
   que ya estaba en las secciones verdes. */
.nav__lista a:not(.boton) {
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  color: var(--grafito);
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__lista a:not(.boton):hover { color: var(--verde); border-bottom-color: var(--salvia); }
.nav__lista a:not(.boton)[aria-current="page"] { color: var(--verde); border-bottom-color: var(--verde); }

.nav__lista .boton { font-size: .92rem; padding: .6rem 1.15rem; white-space: nowrap; }

.nav__boton {
  display: none;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: .55rem .8rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--grafito);
  cursor: pointer;
}
.nav__barras { display: block; width: 18px; height: 12px; position: relative; }
.nav__barras::before,
.nav__barras::after,
.nav__barras span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--verde);
  transition: transform .2s ease, opacity .2s ease;
}
.nav__barras::before { top: 0; }
.nav__barras span    { top: 5px; }
.nav__barras::after  { top: 10px; }
[aria-expanded="true"] .nav__barras::before { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .nav__barras span    { opacity: 0; }
[aria-expanded="true"] .nav__barras::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 60rem) {
  .nav__boton { display: inline-flex; }
  .nav__lista {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--arena);
    border-bottom: 1px solid var(--borde);
    padding: .5rem 1.25rem 1.25rem;
    box-shadow: var(--sombra);
  }
  .nav[data-abierto="true"] .nav__lista { display: flex; }
  .nav__lista li { border-top: 1px solid var(--borde); }
  .nav__lista a:not(.boton) {
    display: block;
    padding: .95rem .25rem;
    border-bottom: none;
    font-size: 1.02rem;
  }
  .nav__lista .boton { margin-top: .9rem; text-align: center; }
  .nav__lista li:has(.boton) { border-top: none; }
}

.nav { position: static; }
@media (max-width: 60rem) { .cabecera__fila { position: relative; } }

/* ---------- 6. Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border: 2px solid var(--verde);
  border-radius: 4px;
  background: var(--verde);
  color: var(--blanco);
  font-family: var(--texto);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.boton:hover {
  background: var(--verde-hover);
  border-color: var(--verde-hover);
  color: var(--blanco);
  transform: translateY(-1px);
}
.boton:active { transform: translateY(0); }
.boton[disabled], .boton[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.boton--linea {
  background: transparent;
  color: var(--verde);
}
.boton--linea:hover { background: var(--verde); color: var(--blanco); }

.boton--claro {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--verde);
}
.boton--claro:hover {
  background: var(--arena);
  border-color: var(--arena);
  color: var(--verde);
}

/* Botón secundario sobre fondo verde. Existe como clase y no
   como estilo en línea para que el contraste se corrija en un
   solo lugar el día que haga falta. */
.boton--fantasma {
  background: transparent;
  border-color: var(--arena);
  color: var(--arena);
}
.boton--fantasma:hover {
  background: var(--arena);
  border-color: var(--arena);
  color: var(--verde);
}

.boton--ancho { width: 100%; }

.acciones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

/* ---------- 7. Portada ---------- */

.portada { padding-block: clamp(2.5rem, 7vw, 4.5rem) var(--paso); }

.portada__reja {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .portada__reja { grid-template-columns: 1.05fr .95fr; }
}

.portada h1 { margin-bottom: .5em; }
.portada__texto > p { font-size: 1.1rem; }

.portada__figura { position: relative; margin: 0; }
.portada__figura img {
  width: 100%;
  border-radius: 6px;
  box-shadow: var(--sombra-x);
}
/* Lámina salvia detrás de la fotografía: profundidad suave,
   sin degradado, dentro de la paleta. */
.portada__figura::before {
  content: "";
  position: absolute;
  inset: 1.5rem -1.1rem -1.1rem 1.5rem;
  background: var(--salvia);
  opacity: .3;
  border-radius: 6px;
  z-index: -1;
}

.sellos {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin: 1.8rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--borde);
  list-style: none;
  font-size: .88rem;
  font-weight: 600;
  color: var(--verde);
}
.sellos li { display: flex; align-items: center; gap: .45rem; }

/* ---------- 8. Rejas y tarjetas ---------- */

.reja { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .reja--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 46rem) { .reja--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .reja--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 46rem) { .reja--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .reja--4 { grid-template-columns: repeat(4, 1fr); } }

.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: 1.6rem;
  box-shadow: var(--sombra);
}
.tarjeta h3 { margin-bottom: .55rem; }
.tarjeta p  { font-size: .96rem; }
.tarjeta__pie { margin-top: auto; padding-top: 1.2rem; }

.seccion--clara .tarjeta { background: var(--arena); }

/* Tarjeta de servicio con nivel */
.nivel { border-top: 4px solid var(--salvia); }
.nivel--destacado { border-top-color: var(--verde); }
.nivel__marca {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde);
  margin: 0 0 .35rem;
}
.nivel__precio {
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--verde);
  line-height: 1.1;
  margin: 0;
}
.nivel__precio small {
  display: block;
  font-family: var(--texto);
  font-size: .82rem;
  font-weight: 600;
  color: var(--grafito);
  opacity: .75;
  margin-top: .3rem;
  letter-spacing: .01em;
}
.nivel__estado {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde);
  background: var(--salvia-wash);
  border: 1px solid var(--salvia);
  border-radius: 3px;
  padding: .25em .6em;
}

.ficha {
  display: grid;
  gap: .1rem .9rem;
  margin: 0 0 1.2rem;
  font-size: .93rem;
}
.ficha > div { display: flex; gap: .5rem; padding: .3rem 0; }
.ficha dt { font-weight: 700; color: var(--verde); min-width: 6.5rem; }
.ficha dd { margin: 0; }

/* ---------- 9. Listas ---------- */

.lista-marcada { list-style: none; padding: 0; margin: 0 0 1.3rem; max-width: var(--lectura); }
.lista-marcada li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .6rem;
  font-size: .97rem;
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--salvia);
}
.seccion--verde .lista-marcada li::before { background: var(--arena); }

/* ---------- 10. Cita / tesis ---------- */

.tesis {
  margin: 2.2rem 0;
  padding: 1.7rem 1.9rem;
  background: var(--salvia-wash);
  border-left: 4px solid var(--verde);
  border-radius: 0 4px 4px 0;
  max-width: 52rem;
}
.tesis p {
  font-family: var(--display);
  font-size: clamp(1.12rem, 2.3vw, 1.35rem);
  line-height: 1.5;
  color: var(--verde);
  max-width: none;
}
.seccion--verde .tesis {
  background: color-mix(in srgb, var(--blanco) 10%, transparent);
  border-left-color: var(--salvia);
}
.seccion--verde .tesis p { color: var(--blanco); }

/* ---------- 11. Pasos del modelo ---------- */

.pasos {
  display: grid;
  gap: 1.2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: paso;
}
@media (min-width: 52rem) { .pasos { grid-template-columns: repeat(4, 1fr); } }

.pasos li {
  counter-increment: paso;
  position: relative;
  padding-top: 2.9rem;
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--verde);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 1rem;
}
.pasos h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.pasos p  { font-size: .93rem; }
.seccion--verde .pasos li::before { background: var(--arena); color: var(--verde); }

/* ---------- 12. Formulario ---------- */

.formulario {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  box-shadow: var(--sombra);
}
.seccion--clara .formulario { background: var(--arena); }

.campo { margin-bottom: 1.25rem; }
.campo label {
  display: block;
  font-size: .93rem;
  font-weight: 700;
  color: var(--grafito);
  margin-bottom: .35rem;
}
.campo .ayuda {
  display: block;
  font-size: .84rem;
  font-weight: 400;
  color: var(--grafito);
  opacity: .75;
  margin-top: .2rem;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .75rem .85rem;
  font-family: var(--texto);
  font-size: 1rem;
  color: var(--grafito);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 4px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--salvia-wash);
  outline: none;
}
.campo textarea { min-height: 7rem; resize: vertical; }

.campo--doble { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .campo--doble { grid-template-columns: 1fr 1fr; } }

.consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  padding: 1.1rem;
  background: var(--salvia-wash);
  border: 1px solid var(--salvia);
  border-radius: 4px;
  margin-bottom: 1.4rem;
}
/* 1.5rem = 24px, el mínimo de objetivo táctil que pide
   WCAG 2.2 AA. Antes eran 19px: en un teléfono se fallaba
   el toque justo en la casilla que da el consentimiento. */
.consentimiento input {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .1rem;
  accent-color: var(--verde);
  flex-shrink: 0;
}
.consentimiento label {
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
}

/* La casilla opcional no puede pedir lo mismo que la obligatoria.
   Va sin fondo ni borde verde: se ve que es una invitación, no un
   requisito. La ley exige justamente que se distingan. */
.consentimiento--suave {
  background: none;
  border: 1px solid var(--borde);
  padding: .85rem 1.1rem;
  margin-top: -.6rem;
}
.consentimiento label .ayuda { display: block; margin-top: .3rem; }

/* Campo trampa contra automatización — invisible pero no display:none,
   que algunos robots detectan. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Candado del aviso de privacidad. El formulario no se publica
   mientras el aviso no exista: es la regla del Bloque 1. */
.candado {
  padding: 1.5rem;
  background: var(--arena-honda);
  border: 1px dashed var(--verde);
  border-radius: 4px;
  text-align: left;
}
.candado p:last-child { margin-bottom: 0; }

/* ---------- 13. Tabla de programación ---------- */

.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: 5px;
  background: var(--blanco);
}
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .94rem; }
caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.2rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--verde);
  background: var(--arena-honda);
  border-bottom: 1px solid var(--borde);
}
th, td { padding: .8rem 1.2rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
thead th {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--verde);
  background: var(--arena);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }

/* ---------- 14. Llamada final ---------- */

.remate { text-align: center; }
.remate .entrada { margin-inline: auto; }
.remate .acciones { justify-content: center; }
.remate h2 { color: var(--blanco); }

/* ---------- 15. Pie ---------- */

.pie {
  background: var(--grafito);
  color: var(--arena);
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
  font-size: .93rem;
}
.pie__reja { display: grid; gap: 2.2rem; }
@media (min-width: 52rem) { .pie__reja { grid-template-columns: 1.4fr 1fr 1fr; } }

.pie h3 {
  font-family: var(--texto);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--salvia);
  margin-bottom: 1rem;
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .6rem; }
.pie a { color: var(--arena); text-decoration: none; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }
.pie p { color: var(--arena); opacity: .82; }
.pie img { width: 130px; margin-bottom: 1rem; }

.pie__legal {
  margin-top: 2.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(239,233,226,.18);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .84rem;
}
.pie__legal p { margin: 0; opacity: .7; max-width: none; }

/* ---------- 16. Utilidades ---------- */

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.centrado { text-align: center; }
.sin-margen { margin-bottom: 0; }

/* =============================================================
   18. COMPONENTES EDITORIALES
   -------------------------------------------------------------
   Todo lo de aquí abajo existe para sacar al sitio del ritmo
   plano de «encabezado, párrafo, rejilla de tarjetas». El
   lenguaje está tomado de los flyers del propio cliente, que
   tenían mucho más carácter que la web.
   ============================================================= */

/* ---------- 18.1 Énfasis en cursiva dentro de los títulos ----------
   El recurso central de los flyers: «Tu pareja *no* te hiere».
   La cursiva de Playfair carga sola cuando aparece el primer em. */

h1 em, h2 em, h3 em, .titular em {
  font-style: italic;
  font-weight: 400;
}

/* ---------- 18.2 Filete con rombo ----------
   Separador editorial que ya usan los dos flyers. */

.filete {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1.6rem 0;
  color: var(--salvia);
}
.filete::before,
.filete::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.filete__rombo {
  width: .5rem;
  height: .5rem;
  transform: rotate(45deg);
  background: currentColor;
  flex-shrink: 0;
}
.filete--izq::before { display: none; }
.filete--izq { justify-content: flex-start; }
.filete--izq::after { flex: 0 0 4.5rem; }

/* ---------- 18.3 Banda a sangre completa ----------
   Rompe la sucesión de secciones. La fotografía va tratada con
   los verdes de marca: la calidez se consigue tiñendo la foto,
   no inventando colores nuevos. */

.banda {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
  color: var(--arena);
  overflow: hidden;
}
.banda__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* El velo no es decorativo: es lo que garantiza el contraste.
   Con la foto más clara del banco (píxel blanco puro) por debajo,
   .88 deja el texto crema en 4.76:1 y el blanco en 5.74:1, ambos
   por encima del 4.5 que pide AA. Bajarlo vuelve a romperlo. */
.banda::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--verde);
  opacity: .88;
}
.banda--suave::after { opacity: .86; }
.banda h2, .banda h3 { color: var(--blanco); }
.banda .antetitulo   { color: var(--arena); }
.banda .entrada      { color: var(--arena); }
.banda p             { color: var(--arena); }
.banda a:not(.boton) { color: var(--blanco); }
.banda .lista-marcada li::before { background: var(--arena); }

/* ---------- 18.4 Bloque de datos con iconos ----------
   Calcado del lenguaje de los flyers: calendario, reloj,
   pantalla, inversión. */

.datos {
  display: grid;
  gap: .9rem 1.8rem;
  margin: 0 0 1.8rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 34rem) { .datos { grid-template-columns: repeat(2, 1fr); } }

.datos li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}
.datos svg {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: .1rem;
  stroke: var(--verde);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.datos b { display: block; font-weight: 700; }
/* El envoltorio no lleva opacidad: si la llevara, la etiqueta
   interior la multiplicaría por la suya y el gris resultante
   caía a 4.01:1, por debajo de AA. */
.datos li > span { color: var(--grafito); }
.datos li > span > span { display: block; opacity: .8; font-size: .92rem; }
.banda .datos svg { stroke: var(--arena); }
.banda .datos li > span { color: var(--arena); }
.banda .datos li > span > span { opacity: .85; }

/* ---------- 18.5 Urgencia: cuenta regresiva y cupo ----------
   Ambas se alimentan de datos reales. Si no hay fecha o no hay
   cupo declarado, el JavaScript no las dibuja. Nunca aparece
   una escasez que nadie contó. */

.urgencia {
  display: grid;
  gap: 1.4rem;
  padding: 1.4rem 1.5rem;
  background: var(--salvia-wash);
  border: 1px solid var(--salvia);
  border-radius: 5px;
  margin: 0 0 1.8rem;
}

.cuenta__etiqueta,
.cupo__etiqueta {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: .6rem;
}

.cuenta__reloj {
  display: flex;
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cuenta__reloj li {
  flex: 0 0 auto;
  min-width: 3.9rem;
  padding: .5rem .4rem .45rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 4px;
  text-align: center;
  margin: 0;
}
.cuenta__n {
  display: block;
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}
.cuenta__u {
  display: block;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grafito);
  opacity: .75;
  margin-top: .25rem;
}

.cupo__barra {
  height: .55rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 99px;
  overflow: hidden;
}
.cupo__relleno {
  height: 100%;
  background: var(--verde);
  border-radius: 99px;
  transition: width .6s ease;
}
.cupo__texto { font-size: .9rem; margin: .55rem 0 0; }
.cupo__texto b { color: var(--verde); }

/* ---------- 18.6 Ficha de persona ----------
   Quién imparte. La investigación es consistente: ver la cara y
   la credencial de quien está del otro lado sube el registro. */

.persona {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.3rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 5px;
}
.seccion--clara .persona { background: var(--arena); }
.persona img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--salvia);
}
.persona__nombre {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--verde);
  margin: 0 0 .1rem;
  line-height: 1.2;
}
.persona__cargo {
  font-size: .88rem;
  font-weight: 700;
  color: var(--grafito);
  margin: 0 0 .25rem;
}
.persona__nota { font-size: .86rem; color: var(--grafito); opacity: .8; margin: 0; }

.persona--grande { flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 1.6rem; }
.persona--grande img { width: 100%; height: auto; max-width: 12rem; border-radius: 5px; aspect-ratio: 1 / 1.35; }

/* ---------- 18.7 Reconocimiento: «esto es para ti si…» ----------
   El bloque que nombra el dolor en las palabras de la persona.
   Es lo que hace que los flyers funcionen y lo que faltaba. */

.reconocimiento {
  display: grid;
  gap: .8rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 46rem) { .reconocimiento { grid-template-columns: repeat(2, 1fr); } }

.reconocimiento li {
  position: relative;
  margin: 0;
  padding: 1rem 1.15rem 1rem 2.9rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--salvia);
  border-radius: 0 4px 4px 0;
  font-size: .97rem;
  line-height: 1.5;
}
.seccion--clara .reconocimiento li { background: var(--arena); }
.reconocimiento li::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 1.25rem;
  width: .95rem;
  height: .55rem;
  border-left: 2px solid var(--verde);
  border-bottom: 2px solid var(--verde);
  transform: rotate(-45deg);
}

/* ---------- 18.8 Temario numerado ----------
   Numerado porque sí es una secuencia: la conferencia recorre
   estos puntos en este orden. */

.temario { list-style: none; padding: 0; margin: 0 0 1.8rem; counter-reset: tema; }
.temario li {
  counter-increment: tema;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: .2rem 1rem;
  padding: 1.1rem 0;
  margin: 0;
  border-top: 1px solid var(--borde);
}
.temario li:last-child { border-bottom: 1px solid var(--borde); }
.temario li::before {
  content: counter(tema, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--salvia);
  font-variant-numeric: tabular-nums;
  padding-top: .1rem;
}
.temario b { font-size: 1.02rem; font-weight: 700; }
.temario p { margin: .2rem 0 0; font-size: .93rem; color: var(--grafito); opacity: .85; max-width: 56ch; }

/* ---------- 18.9 Qué te llevas ---------- */

.llevas { display: grid; gap: 1rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
@media (min-width: 46rem) { .llevas { grid-template-columns: repeat(3, 1fr); } }
.llevas li {
  margin: 0;
  padding: 1.2rem 1.3rem;
  background: var(--salvia-wash);
  border-top: 3px solid var(--verde);
  border-radius: 0 0 4px 4px;
  font-size: .95rem;
  line-height: 1.55;
}
.llevas b { display: block; font-family: var(--display); font-weight: 500; font-size: 1.1rem; color: var(--verde); margin-bottom: .35rem; }

/* ---------- 18.10 Portada de conferencia ----------
   Todo lo decisivo cabe en la primera pantalla del teléfono:
   antetítulo, título, datos, urgencia y botón. */

.portada-conf { padding-block: clamp(2rem, 6vw, 3.5rem) var(--paso); }

/* En teléfono el orden lo decide la conversión, no la maquetación:
   antetítulo, título, entrada, y enseguida precio, urgencia y botón.
   El detalle largo —datos, husos, descripción— va después.
   Sin esto el botón caía a 1330 px, muy por debajo del pliegue. */
.portada-conf__reja {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
  grid-template-areas: "intro" "aside" "detalle";
}
.portada-conf__intro   { grid-area: intro; }
.portada-conf__aside   { grid-area: aside; }
.portada-conf__detalle { grid-area: detalle; }

@media (min-width: 62rem) {
  .portada-conf__reja {
    grid-template-columns: 1.15fr .85fr;
    grid-template-areas:
      "intro   aside"
      "detalle aside";
    column-gap: 3rem;
    row-gap: 1.6rem;
  }
}

.portada-conf .titular {
  font-family: var(--display);
  font-weight: 500;
  color: var(--verde);
  font-size: clamp(2rem, 5.4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 .6rem;
}
.portada-conf__aside {
  padding: clamp(1.3rem, 3vw, 1.8rem);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 5px;
  box-shadow: var(--sombra);
  position: sticky;
  top: 6.5rem;
}
@media (max-width: 62rem) { .portada-conf__aside { position: static; } }

.precio-conf {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 0 0 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--borde);
}
.precio-conf strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--verde);
}
.precio-conf span { font-size: .92rem; color: var(--grafito); opacity: .8; }

/* ---------- 18.11 Objeciones ---------- */

.objeciones { margin: 0; }
.objeciones > div { border-top: 1px solid var(--borde); padding: 1.15rem 0; }
.objeciones > div:last-child { border-bottom: 1px solid var(--borde); }
.objeciones dt { font-weight: 700; font-size: 1rem; margin-bottom: .3rem; color: var(--verde); }
.objeciones dd { margin: 0; font-size: .95rem; max-width: 62ch; }

/* ---------- 18.12 Revelado al hacer scroll ----------
   Discreto: 12 px y opacidad. Nada de rebotes ni de entradas
   laterales, que en una clínica se leen como ruido. */

@media (prefers-reduced-motion: no-preference) {
  .revelar {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .revelar.visible { opacity: 1; transform: none; }
}


/* =============================================================
   19. CAPTACIÓN Y AGENDA
   -------------------------------------------------------------
   Tres piezas nuevas, ninguna con un color que no esté en el
   manual: el marcador de los huecos del aviso, la ventana de
   bienvenida y la agenda de conferencias con su plegado.
   ============================================================= */

/* ---------- 19.1 Huecos por completar del aviso ----------
   <mark> por defecto se pinta de amarillo, que no existe en
   esta paleta. Se repinta como lo que es: una casilla vacía
   que alguien tiene que llenar antes de publicar. */

.completar {
  background: var(--salvia-wash);
  color: var(--grafito);
  border: 1px dashed var(--salvia);
  border-radius: 3px;
  padding: .1em .45em;
  font-size: .92em;
  font-weight: 700;
  letter-spacing: .01em;
}

/* ---------- 19.2 Ventana de bienvenida ----------
   Aparece una vez, se cierra y no vuelve. Todo lo que la
   gobierna vive en ventana.js; aquí solo está su aspecto.

   En teléfono entra desde abajo, como una hoja: ocupa el
   pulgar, no la cara de la persona. En escritorio se centra. */

.ventana {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, var(--grafito) 55%, transparent);
  /* Sin -webkit-backdrop-filter no se degrada mal: queda el velo. */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.ventana[hidden] { display: none; }

.ventana__caja {
  position: relative;
  width: 100%;
  max-width: 30rem;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--blanco);
  border-radius: 14px 14px 0 0;
  box-shadow: var(--sombra-x);
}

@media (min-width: 40rem) {
  .ventana { align-items: center; padding: 1.5rem; }
  .ventana__caja { border-radius: 14px; max-height: 88dvh; }
}

@media (prefers-reduced-motion: no-preference) {
  .ventana__caja { animation: ventana-entra .38s cubic-bezier(.16,.84,.44,1) both; }
  @keyframes ventana-entra {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }
}

.ventana__cerrar {
  position: absolute;
  top: .55rem; right: .55rem;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blanco) 78%, transparent);
  color: var(--grafito);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.ventana__cerrar:hover { background: var(--arena); }

.ventana__tapa {
  background: var(--verde);
  color: var(--blanco);
  padding: 1.25rem 1.4rem 1.15rem;
  text-align: center;
}
.ventana__tapa .antetitulo { color: var(--arena); }

.ventana__cifra {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.35rem, 11vw, 3.4rem);
  line-height: .95;
  font-weight: 600;
  color: var(--blanco);
  margin: .25rem 0 .1rem;
}

.ventana__tapa h2 {
  color: var(--blanco);
  font-size: 1.14rem;
  line-height: 1.3;
  margin: 0;
}

.ventana__linea {
  margin: .6rem 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--arena);
}

.ventana__cuerpo { padding: 1.1rem 1.4rem 1.4rem; }

.ventana .campo { margin-bottom: .7rem; }
.ventana .consentimiento { padding: .8rem .95rem; margin-bottom: .95rem; }
.ventana .consentimiento label { font-size: .85rem; }

.ventana__nogracias {
  display: block;
  width: 100%;
  margin-top: .9rem;
  padding: .4rem;
  border: none;
  background: none;
  color: var(--grafito); opacity: .74;
  font-family: var(--texto);
  font-size: .88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ventana__nogracias:hover { opacity: 1; }

.ventana__letra {
  margin: .8rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--borde);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--grafito); opacity: .78;
}

/* El cupón, cuando ya se registró. */
.cupon {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .6rem;
  margin: 0 0 .9rem;
  padding: .55rem .8rem;
  background: var(--salvia-wash);
  border: 1px dashed var(--salvia);
  border-radius: 8px;
}
.cupon b {
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: .06em;
  color: var(--verde);
}
.cupon span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grafito); opacity: .74; }

body.ventana-abierta { overflow: hidden; }

/* ---------- 19.3 Plegado «ver más» ----------
   Se construye sobre <details>, no sobre JavaScript: si el
   guion falla o tarda, el contenido sigue ahí y sigue
   abriéndose. El buscador también lo lee. */

.desplegar {
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--blanco);
  margin-bottom: .85rem;
}

.desplegar > summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--verde);
  list-style: none;
  border-radius: 10px;
}
.desplegar > summary::-webkit-details-marker { display: none; }
.desplegar > summary:hover { background: var(--arena-honda); }
.desplegar > summary:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* La cruz que gira. Dos trazos, sin imagen ni fuente de iconos. */
.desplegar > summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: .72rem; height: .72rem;
  background:
    linear-gradient(var(--verde), var(--verde)) center/100% 2px no-repeat,
    linear-gradient(var(--verde), var(--verde)) center/2px 100% no-repeat;
  transition: transform .25s ease;
}
.desplegar[open] > summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .desplegar > summary::after { transition: none; }
}

.desplegar__cuerpo { padding: 0 1.2rem 1.3rem; }
.desplegar__cuerpo > :first-child { margin-top: 0; }
.desplegar__cuerpo > :last-child  { margin-bottom: 0; }

.desplegar--llano { border: none; background: none; }
.desplegar--llano > summary { padding-left: 0; padding-right: 0; }
.desplegar--llano .desplegar__cuerpo { padding-left: 0; padding-right: 0; }

/* ---------- 19.4 Agenda ----------
   Una sola lista en el HTML. El guion la reparte en próximas y
   anteriores según la fecha de cada tarjeta, de modo que nunca
   pueda quedar una conferencia pasada anunciada como próxima
   porque alguien olvidó moverla de sitio. */

.agenda { display: grid; gap: 1rem; }

.evento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.1rem;
  align-items: start;
  padding: 1.2rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
}

.evento__fecha {
  flex: none;
  width: 3.9rem;
  text-align: center;
  padding: .5rem .2rem .45rem;
  border-radius: 8px;
  background: var(--verde);
  color: var(--blanco);
  line-height: 1;
}
.evento__dia {
  display: block;
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 600;
}
.evento__mes {
  display: block;
  margin-top: .2rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--arena);
}

.evento__cuerpo { min-width: 0; }

.evento__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .45rem;
}

.marbete {
  display: inline-block;
  padding: .16rem .5rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: var(--salvia-wash);
  color: var(--verde);
  border: 1px solid color-mix(in srgb, var(--salvia) 45%, var(--arena));
}
.marbete--vivo   { background: var(--verde);  color: var(--blanco); border-color: var(--verde); }
.marbete--pasado { background: var(--arena);  color: var(--grafito); opacity: .74; border-color: var(--borde); }

.evento h3 {
  font-size: 1.12rem;
  line-height: 1.3;
  margin: 0 0 .35rem;
}

.evento__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .95rem;
  margin-top: .8rem;
  font-size: .86rem;
  color: var(--grafito); opacity: .8;
}
.evento__precio { font-weight: 700; color: var(--grafito); }

.evento .desplegar { margin: .8rem 0 0; }

/* La tarjeta de una conferencia que ya pasó se apaga un punto:
   sigue siendo comprable, pero no compite con la próxima. */
.evento--anterior { background: var(--arena-honda); box-shadow: none; }
.evento--anterior .evento__fecha { background: var(--grafito); }
.evento--anterior h3 { color: var(--grafito); }

.evento__acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.evento__acciones .boton { font-size: .88rem; padding: .6rem 1.15rem; }

.evento__singrabacion {
  margin: .9rem 0 0;
  font-size: .84rem;
  color: var(--grafito); opacity: .78;
  font-style: italic;
}

/* Mientras el guion no ha repartido las tarjetas, la lista está
   oculta para que no se vea saltar. Sin JavaScript nunca se
   añade la clase, así que .agenda-cruda deja todo visible. */
.agenda-cruda [data-grupo] { display: block; }

@media (max-width: 30rem) {
  .evento { grid-template-columns: 1fr; }
  .evento__fecha {
    width: auto;
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    padding: .3rem .7rem;
    margin-bottom: .7rem;
  }
  .evento__dia { font-size: 1.15rem; }
  .evento__mes { margin-top: 0; }
}

.agenda__titulo {
  font-size: 1.05rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--verde);
  margin: 0 0 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--borde);
}

[data-grupo] { margin-bottom: 2.6rem; }
[data-grupo]:last-child { margin-bottom: 0; }

/* ---------- 19.5 Recordatorio de descuento ----------
   Lo inyecta nutricia.js encima de un formulario cuando la
   persona ya tiene un descuento vivo guardado en su navegador.
   No es una insignia de venta: es evitar que alguien pierda algo
   que ya se ganó por no acordarse en el momento justo. */

.recordatorio-promo {
  margin: 0 0 1.2rem;
  padding: .85rem 1.1rem;
  background: var(--salvia-wash);
  border: 1px dashed var(--salvia);
  border-radius: 5px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--grafito);
}
.recordatorio-promo b { color: var(--verde); }

/* ---------- 20. Impresión ---------- */

@media print {
  .cabecera, .pie, .acciones, .formulario, .ventana { display: none !important; }
  .desplegar__cuerpo { display: block !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
}