/* FUENTES:INICIO — generado por tools/descargar-fuentes.sh */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-400-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/newsreader-400-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* FUENTES:FIN */

/* Boutick — sitio público
   Los estilos de composición viven en línea en el marcado, tal como se
   aprobaron en el paquete de diseño. Aquí sólo va lo que un atributo style
   no puede expresar: estados (:hover, :focus), cortes responsivos,
   el desplegable, el acordeón y el formulario. */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #F7F1E8;
  color: #2F2A24;
  font-family: "DM Sans", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: #47562F; text-decoration: none; }
a:hover { color: #C05F3C; }
p { text-wrap: pretty; }
img { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Foco visible para navegación con teclado */
:focus-visible {
  outline: 2px solid #C05F3C;
  outline-offset: 3px;
  border-radius: 4px;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #23291A;
  color: #FFFCF6;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-size: 15px;
}
.saltar:focus {
  left: 0;
  color: #FFFCF6;
}

/* ---------- Estados hover del diseño ---------- */
.h-cta:hover        { background: #A94E2E; color: #FFFCF6; }
.h-oliva:hover      { background: #C05F3C; color: #FFFCF6; }
.h-crema:hover      { background: #EFE5D6; color: #2F2A24; }
.h-terracota:hover  { color: #C05F3C; }
.h-verde:hover      { color: #47562F; }
.h-borde:hover      { background: #EFE5D6; color: #2F2A24; }
.h-translucido:hover { background: rgba(255, 252, 246, 0.14); color: #FFFCF6; }

/* ---------- Héroe ----------
   Un solo marcado para las dos variantes aprobadas en el diseño. Antes eran
   dos bloques gemelos ocultos con CSS, lo que dejaba dos <h1> idénticos en el
   HTML y todo el texto del héroe duplicado para los rastreadores.

   Móvil: la foto va suelta arriba, sin velo ni texto encima (decisión
   explícita del cliente). Escritorio: la foto pasa a fondo y el texto se
   monta sobre ella. */
.heroe { max-width: 1360px; margin: 0 auto; }

.heroe-foto {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: 84% center;
  border-radius: 24px;
  display: block;
}
.heroe-velo { display: none; }
.heroe-contenido { padding: 26px 6px 0; }

.heroe-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #EFE5D6;
  color: #5C5142;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
  margin: 0 0 18px;
  font-family: "DM Mono", ui-monospace, monospace;
}
.heroe-punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C05F3C;
  flex: none;
}
.heroe-titulo {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: #2A251F;
}
.heroe-destacado {
  font-family: "DM Sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.76em;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #C05F3C;
}
.heroe-texto {
  font-size: 17px;
  line-height: 1.55;
  color: #6E6558;
  margin: 0 0 24px;
}
.heroe-acciones { display: grid; gap: 10px; }
.heroe-acciones a {
  border-radius: 999px;
  font-size: 16px;
  text-align: center;
}
.heroe-cta {
  background: #C05F3C;
  color: #FFFCF6;
  padding: 17px 24px;
  font-weight: 500;
}
.heroe-cta:hover { background: #A94E2E; color: #FFFCF6; }
.heroe-cta-2 {
  border: 1px solid #D9C9B1;
  color: #2F2A24;
  padding: 16px 24px;
}
.heroe-cta-2:hover { background: #EFE5D6; color: #2F2A24; }

@media (min-width: 900px) {
  .heroe {
    position: relative;
    border-radius: 36px;
    overflow: hidden;
    background-color: #23291A;
    min-height: clamp(520px, 50vw, 640px);
    display: flex;
    align-items: flex-end;
  }
  .heroe-foto {
    position: absolute;
    inset: 0;
    height: 100%;
    border-radius: 0;
    object-position: 78% center;
    filter: brightness(1.16) saturate(1.03);
  }
  /* El degradado se apaga al 64% del ancho: no debe alcanzar el rostro
     de la modelo (restricción del cliente). */
  .heroe-velo {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
      rgba(24, 29, 17, 0.95) 0%,
      rgba(24, 29, 17, 0.92) 34%,
      rgba(24, 29, 17, 0.55) 48%,
      rgba(24, 29, 17, 0.1) 58%,
      rgba(24, 29, 17, 0) 64%);
  }
  .heroe-contenido {
    position: relative;
    width: 100%;
    padding: clamp(32px, 5vw, 64px);
  }
  .heroe-etiqueta {
    background: rgba(255, 252, 246, 0.14);
    border: 1px solid rgba(255, 252, 246, 0.3);
    color: #F2E9DA;
    padding: 8px 16px;
    font-size: 13px;
    letter-spacing: 0.03em;
    margin-bottom: 22px;
  }
  .heroe-punto { width: 7px; height: 7px; background: #DE8A63; }
  .heroe-titulo {
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    color: #FFFCF6;
    max-width: min(500px, 46%);
  }
  .heroe-destacado { font-size: 0.78em; letter-spacing: -0.02em; color: #E79A72; }
  .heroe-texto {
    font-size: clamp(16px, 1.4vw, 19px);
    color: #E6DBC9;
    margin: 0 0 30px;
    max-width: min(430px, 42%);
  }
  .heroe-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
  .heroe-cta { padding: 17px 30px; }
  .heroe-cta-2 {
    border: 1px solid rgba(255, 252, 246, 0.5);
    color: #FFFCF6;
    padding: 16px 28px;
  }
  .heroe-cta-2:hover { background: rgba(255, 252, 246, 0.14); color: #FFFCF6; }
}

/* ---------- Corte responsivo (900px) ---------- */
@media (min-width: 900px) {
  .solo-movil { display: none !important; }
}
@media (max-width: 899px) {
  .solo-escritorio { display: none !important; }
}

/* ---------- Menú Soluciones ---------- */
.soluciones { position: relative; display: flex; align-items: center; }
.soluciones > .disparador {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.soluciones-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  padding-top: 14px;
  width: 270px;
}
.soluciones:hover .soluciones-menu,
.soluciones:focus-within .soluciones-menu,
.soluciones.abierto .soluciones-menu { display: block; }

/* ---------- Panel móvil ----------
   El display vive aquí, no en línea: el atributo hidden debe poder ganarle. */
#panel-movil { display: grid; gap: 2px; }
#panel-movil[hidden] { display: none; }
.boton-panel {
  background: #FFFCF6;
  border: 1px solid #E2D6C3;
  border-radius: 12px;
  width: 46px;
  height: 46px;
  font-size: 18px;
  color: #2F2A24;
  cursor: pointer;
  line-height: 1;
}

/* ---------- Preguntas frecuentes ---------- */
.faq {
  background: #FFFCF6;
  border: 1px solid #E2D6C3;
  border-radius: 20px;
  padding: 22px 24px;
}
.faq > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-size: 17px;
  color: #2A251F;
  list-style: none;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: "+";
  color: #C05F3C;
  font-size: 20px;
  line-height: 1;
  flex: none;
}
.faq[open] > summary::after { content: "\2212"; }
.faq > p {
  font-size: 16px;
  line-height: 1.6;
  color: #6E6558;
  margin: 14px 0 0;
}

/* ---------- Formulario ---------- */
.campo {
  border: 1px solid #E2D6C3;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 16px;
  font-family: "DM Sans", Helvetica, Arial, sans-serif;
  color: #2F2A24;
  background: #F7F1E8;
  width: 100%;
}
.campo:focus {
  outline: none;
  border-color: #C05F3C;
  box-shadow: 0 0 0 3px rgba(192, 95, 60, 0.18);
}
textarea.campo { resize: vertical; }

.chip {
  border: 1px solid #E2D6C3;
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background: #FFFCF6;
  color: #2F2A24;
  user-select: none;
}
.chip:hover { background: #EFE5D6; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.chip:has(input:checked) {
  background: #47562F;
  border-color: #47562F;
  color: #FFFCF6;
}
.chip:has(input:focus-visible) {
  outline: 2px solid #C05F3C;
  outline-offset: 3px;
}

.obligatorio { color: #C05F3C; }

/* Las etiquetas se estiran al alto de la fila; sin esto, la que lleva
   pista de ayuda deja su campo a distinta altura que los de al lado. */
#formulario-demo label:not(.chip) { align-content: start; }

.campo-error,
.campo-error:focus {
  border-color: #A94E2E;
  box-shadow: 0 0 0 3px rgba(169, 78, 46, 0.18);
}

#aviso-formulario {
  font-size: 14px;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0 0;
  text-align: center;
}
#aviso-formulario[hidden] { display: none; }
.aviso-ok { color: #47562F; background: #EFE5D6; }
.aviso-error { color: #A94E2E; background: #F6DCCE; }

.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.boton-enviar {
  margin-top: 24px;
  width: 100%;
  background: #C05F3C;
  color: #FFFCF6;
  border: none;
  padding: 18px 30px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 500;
  font-family: "DM Sans", Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.boton-enviar:hover { background: #A94E2E; }

/* ---------- Piezas de contenido ----------
   Con doce páginas, repetir los mismos estilos en línea en cada archivo era
   insostenible. Estas clases reproducen exactamente los valores del paquete
   de diseño; los estilos en línea quedan sólo para lo irrepetible. */

.seccion {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(60px, 7vw, 100px) clamp(18px, 3vw, 32px);
}
.seccion--estrecha { max-width: 900px; }
.seccion--sin-arriba { padding-top: 0; }

.banda-clara {
  background: #FFFCF6;
  border-top: 1px solid #E5D9C6;
  border-bottom: 1px solid #E5D9C6;
}
.banda-tibia {
  background: #EFE5D6;
  border-top: 1px solid #E5D9C6;
  border-bottom: 1px solid #E5D9C6;
  position: relative;
  overflow: hidden;
}
.banda-oscura {
  background: #23291A;
  color: #EFE5D6;
  position: relative;
  overflow: hidden;
}
/* Círculo decorativo de las secciones oscuras y tibias */
.circulo {
  position: absolute;
  border-radius: 50%;
  background: rgba(192, 95, 60, 0.16);
  pointer-events: none;
}
.banda-tibia .circulo { background: rgba(192, 95, 60, 0.12); }
.banda-oscura .seccion,
.banda-tibia .seccion { position: relative; }

.etiqueta {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #C05F3C;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.etiqueta--clara { color: #DE8A63; }

.titulo {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: clamp(29px, 3.8vw, 44px);
  line-height: 1.1;
  margin: 0 0 16px;
  color: #2A251F;
  max-width: 720px;
}
.titulo--menor { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.titulo--claro { color: #FFFCF6; }

.subtitulo {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 14px;
  color: #2A251F;
}
.subtitulo--claro { color: #FFFCF6; }

.entrada {
  font-size: 18px;
  line-height: 1.6;
  color: #6E6558;
  margin: 0 0 22px;
  max-width: 640px;
}
.entrada--clara { color: #CFC4AF; }
.nota {
  font-size: 14px;
  line-height: 1.55;
  color: #8A7F6E;
  margin: 18px 0 0;
}

.rejilla-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 4vw, 60px);
}
.rejilla-2--centrada { align-items: center; }
.rejilla-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.rejilla-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 11px 24px;
  font-size: 15px;
  color: #4A4238;
}
.rejilla-lista > * { border-top: 1px solid #E2D6C3; padding-top: 11px; }
.banda-oscura .rejilla-lista { color: #E4DAC7; }
.banda-oscura .rejilla-lista > * { border-top-color: #3E4531; }

.tarjeta {
  background: #FFFCF6;
  border: 1px solid #E2D6C3;
  border-radius: 24px;
  padding: 28px;
}
.tarjeta--tibia { background: #F7F1E8; border-color: transparent; }
.tarjeta--punteada { border-style: dashed; border-color: #D9C9B1; }
.tarjeta--oscura {
  background: #2E3623;
  border-color: #3E4531;
  color: #CFC4AF;
}
.tarjeta--oliva {
  background: #47562F;
  border-color: #47562F;
  color: #E4E8D8;
}
.banda-clara .tarjeta--tibia { background: #F7F1E8; }

.rotulo {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #A99A83;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.tarjeta--oliva .rotulo { color: #C7CDB4; }
.tarjeta--oscura .rotulo { color: #DE8A63; }

.lista {
  display: grid;
  gap: 9px;
  font-size: 15px;
  line-height: 1.5;
  color: #4A4238;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tarjeta--oscura .lista { color: #CFC4AF; }
.tarjeta--oliva .lista { color: #E4E8D8; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
  border: 1px solid #E2D6C3;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
}
.chips--relleno li { background: #FFFCF6; }

.boton {
  background: #C05F3C;
  color: #FFFCF6;
  padding: 15px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
}
.boton:hover { background: #A94E2E; color: #FFFCF6; }

.foto {
  width: 100%;
  object-fit: cover;
  border-radius: 30px;
  display: block;
}

/* Migas de pan */
.migas {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px clamp(18px, 3vw, 32px) 0;
  font-size: 13px;
  color: #8A7F6E;
}
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.migas a { color: #8A7F6E; }
.migas a:hover { color: #C05F3C; }
.migas li + li::before { content: "›"; margin-right: 8px; color: #A99A83; }

/* Bloque de enlaces a las demás páginas */
.siguientes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.siguientes a {
  background: #FFFCF6;
  border: 1px solid #E2D6C3;
  border-radius: 18px;
  padding: 20px 22px;
  color: #2F2A24;
  display: block;
}
.siguientes a:hover { background: #EFE5D6; color: #2F2A24; }
.siguientes .rotulo { margin-bottom: 6px; }

/* ---------- Blog ---------- */
.lista-articulos { display: grid; gap: 20px; max-width: 820px; }
.tarjeta-articulo {
  background: #FFFCF6;
  border: 1px solid #E2D6C3;
  border-radius: 24px;
  padding: 28px 30px;
}
.tarjeta-articulo h2 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 30px);
  line-height: 1.2;
  margin: 0 0 12px;
}
.tarjeta-articulo h2 a { color: #2A251F; }
.tarjeta-articulo h2 a:hover { color: #C05F3C; }
.tarjeta-articulo .resumen {
  font-size: 16px;
  line-height: 1.6;
  color: #6E6558;
  margin: 0 0 14px;
}
.tarjeta-articulo .fecha {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #A99A83;
  margin: 0;
}

.articulo {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 56px) clamp(18px, 3vw, 32px) clamp(50px, 6vw, 80px);
}
.articulo-cabeza { margin-bottom: 40px; }
.articulo-cabeza h1 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: clamp(31px, 4.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: #2A251F;
}
.articulo-datos {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #A99A83;
  margin: 0;
}
.articulo > p,
.articulo li {
  font-size: 17px;
  line-height: 1.7;
  color: #3F382F;
}
.articulo > p { margin: 0 0 22px; }
.articulo h2 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: clamp(25px, 3vw, 32px);
  line-height: 1.2;
  margin: 46px 0 16px;
  color: #2A251F;
}
.articulo h3 {
  font-family: "DM Sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin: 32px 0 10px;
  color: #2A251F;
}
.articulo ul, .articulo ol { padding-left: 22px; margin: 0 0 22px; }
.articulo li { margin-bottom: 10px; }
.articulo a { color: #C05F3C; text-decoration: underline; text-underline-offset: 2px; }
.articulo a:hover { color: #A94E2E; }
.articulo strong { color: #2A251F; }
.articulo figure { margin: 32px 0; }
.articulo figure img { border-radius: 20px; display: block; width: 100%; }
.articulo figcaption {
  font-size: 13px;
  color: #A99A83;
  margin-top: 10px;
  text-align: center;
}
.articulo .destacado {
  background: #FFFCF6;
  border: 1px solid #E2D6C3;
  border-radius: 20px;
  padding: 24px 26px;
  margin: 32px 0;
}
.articulo .destacado > :first-child { margin-top: 0; }
.articulo .destacado > :last-child { margin-bottom: 0; }
.articulo .tabla-envoltura { overflow-x: auto; margin: 28px 0; }
.articulo table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 15px;
}
.articulo th, .articulo td {
  border-bottom: 1px solid #E5D9C6;
  padding: 11px 14px;
  text-align: left;
  color: #4A4238;
}
.articulo th {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A99A83;
  font-weight: 400;
}
.articulo code {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.92em;
  background: #F1E7D8;
  border-radius: 6px;
  padding: 2px 6px;
  color: #2F2A24;
}

/* Visible para lectores de pantalla, no para la vista */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Aviso de cookies ---------- */
.aviso-cookies {
  position: fixed;
  left: clamp(12px, 3vw, 24px);
  right: clamp(12px, 3vw, 24px);
  bottom: clamp(12px, 3vw, 24px);
  z-index: 80;
  max-width: 640px;
  margin: 0 auto;
  background: #FFFCF6;
  border: 1px solid #E2D6C3;
  border-radius: 20px;
  box-shadow: 0 20px 44px -26px rgba(47, 42, 36, 0.45);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #4A4238;
  flex: 1 1 260px;
}
.aviso-cookies a { color: #C05F3C; text-decoration: underline; text-underline-offset: 2px; }
.aviso-cookies button {
  background: #47562F;
  color: #FFFCF6;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  font-family: "DM Sans", Helvetica, Arial, sans-serif;
  cursor: pointer;
  flex: none;
}
.aviso-cookies button:hover { background: #C05F3C; }

/* ---------- Páginas legales ---------- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(18px, 3vw, 32px) clamp(60px, 7vw, 90px);
}
.legal h1 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: #2A251F;
}
.legal .actualizado {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #A99A83;
  margin: 0 0 36px;
  text-transform: uppercase;
}
.legal h2 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.2;
  margin: 40px 0 12px;
  color: #2A251F;
}
.legal h3 {
  font-family: "DM Sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 24px 0 8px;
  color: #2A251F;
}
.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.65;
  color: #4A4238;
}
.legal ul { padding-left: 20px; margin: 12px 0; }
.legal li { margin-bottom: 8px; }
.legal a { color: #C05F3C; text-decoration: underline; text-underline-offset: 2px; }
.legal .destacado {
  background: #FFFCF6;
  border: 1px solid #E2D6C3;
  border-radius: 20px;
  padding: 22px 24px;
  margin: 24px 0;
}
.legal .destacado p:first-child { margin-top: 0; }
.legal .destacado p:last-child { margin-bottom: 0; }