/* Estilo común de las páginas de la guía MENSAJES (capa de expresión, manual 1.3) */
:root {
  --marino: #172338; --marino-2: #22314B; --crema: #F7F2E8; --crema-texto2: #C9C3B6;
  --camel: #B8895A; --verde: #2D4B3C; --linea-oscura: #34425C; --gris-claro: #5E584D;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--marino); scroll-behavior: smooth; }
body {
  min-height: 100vh; background: var(--marino); color: var(--crema);
  font-family: 'Manrope', system-ui, sans-serif; font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(900px 600px at 78% 12%, rgba(184,137,90,.15), transparent 70%),
    radial-gradient(700px 500px at 10% 70%, rgba(45,75,60,.32), transparent 70%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2226%22%20height%3D%2226%22%3E%3Ccircle%20cx%3D%222%22%20cy%3D%222%22%20r%3D%221.3%22%20fill%3D%22%23F7F2E8%22%20opacity%3D%22.09%22/%3E%3C/svg%3E");
  background-size: auto, auto, 26px 26px;
}
a { color: inherit; }
main { max-width: 560px; margin: 0 auto; padding: 32px 20px 40px; }

/* Encabezado */
.arriba { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.arriba .foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--camel); }
.arriba .logo { height: 21px; }

/* Sticker */
.chip {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--crema); color: var(--marino); font-size: 13px; font-weight: 700;
  transform: rotate(-2deg); box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Títulos y texto */
h1 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 38px; line-height: 1.06; letter-spacing: -.2px; }
h1 em, h2 em { font-style: italic; color: var(--camel); }
h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 28px; line-height: 1.12; }
.cuerpo { color: var(--crema-texto2); font-size: 17px; }
.cuerpo strong, .cuerpo b { color: var(--crema); font-weight: 700; }
.etiqueta { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--camel); }

/* Tarjeta translúcida */
.tarjeta {
  border-radius: 20px; background: rgba(247,242,232,.06); border: 1px solid rgba(247,242,232,.14);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

/* Lista en píldoras con número en círculo camel */
.pildoras { list-style: none; display: grid; gap: 10px; }
.pildoras li {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px;
  background: rgba(247,242,232,.06); border: 1px solid rgba(247,242,232,.14);
  color: var(--crema-texto2); font-size: 15.5px; line-height: 1.4;
}
.pildoras li strong { color: var(--crema); }
.pildoras .n {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--camel); color: var(--marino); font-family: 'DM Serif Display', Georgia, serif; font-size: 18px;
}

/* Botones */
.boton {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 22px;
  border-radius: 18px; text-decoration: none; font-weight: 700; font-size: 17px;
  background: var(--crema); color: var(--marino); box-shadow: 0 14px 34px rgba(0,0,0,.3);
  transition: transform .15s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton .flecha { color: var(--camel); font-size: 20px; }
.boton-sec {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 18px;
  text-decoration: none; background: rgba(247,242,232,.06); border: 1px solid rgba(247,242,232,.18);
  transition: transform .15s ease, border-color .15s ease;
}
.boton-sec:hover { transform: translateY(-2px); border-color: rgba(184,137,90,.7); }
.badge { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: rgba(184,137,90,.2); }
.badge.wa { background: #25D366; }
.boton-sec .t { display: block; font-weight: 700; }
.boton-sec .s { display: block; font-size: 13px; color: var(--crema-texto2); }
.boton-sec .flecha { margin-left: auto; color: var(--camel); font-size: 20px; }

/* Tarjeta clara (formulario y calendario) */
.clara { border-radius: 22px; background: var(--crema); color: var(--marino); box-shadow: 0 16px 40px rgba(0,0,0,.32); }
.clara .nota { color: var(--gris-claro); }

/* Pie */
.firma {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linea-oscura);
  text-align: center; font-size: 15px; font-weight: 600;
}
.firma::before { content: "✦ "; color: var(--camel); }
.firma::after { content: " ✦"; color: var(--camel); }

@media (min-width: 960px) { body { background-attachment: fixed; } h1 { font-size: 52px; } h2 { font-size: 34px; } }

/* Maqueta de la guía: la tapa en una tablet, con cosas que «salen de la pantalla» */
.maqueta { position: relative; width: 250px; margin: 0 auto; padding: 18px 0 30px; }
.maqueta .brillo { position: absolute; inset: -30px -50px; background: radial-gradient(closest-side, rgba(184,137,90,.28), transparent 75%); z-index: 0; }
.maqueta .tablet {
  position: relative; z-index: 1; padding: 9px; border-radius: 24px; background: #0C1322;
  border: 1px solid rgba(247,242,232,.18); transform: rotate(-6deg);
  box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
}
.maqueta .tablet img { display: block; width: 100%; height: auto; border-radius: 16px; }
.maqueta .flota { position: absolute; z-index: 2; font-family: 'Manrope', system-ui, sans-serif; box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.maqueta .burbuja {
  right: -54px; top: 34%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #D9FDD3; color: #111B21;
  font-size: 14px; font-weight: 600; transform: rotate(4deg);
}
.maqueta .sello {
  left: -40px; bottom: 6px; padding: 10px 18px; border-radius: 999px; background: var(--crema); color: var(--marino);
  font-size: 16px; font-weight: 800; transform: rotate(-8deg);
}
@media (max-width: 420px) { .maqueta { width: 200px; } .maqueta .burbuja { right: -30px; font-size: 13px; } .maqueta .sello { left: -24px; font-size: 14px; } }

/* Pie con copyright */
.pie-legal { margin-top: 18px; text-align: center; font-size: 12.5px; color: rgba(201,195,182,.7); letter-spacing: .02em; }
.pie-legal a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(201,195,182,.3); }

/* Menú fijo arriba (como el de Alen): queda visible al bajar */
.menu-fijo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(23,35,56,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(247,242,232,.08);
}
.menu-fijo .interior { max-width: 1120px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn-top {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; text-decoration: none;
  background: var(--camel); color: var(--marino); font-weight: 800; font-size: 14px; white-space: nowrap;
  transition: transform .15s ease;
}
.btn-top:hover { transform: translateY(-1px); }
@media (min-width: 960px) { .menu-fijo .interior { padding: 14px 48px; } }
@media (max-width: 400px) { .menu-fijo .arriba .logo { display: none; } }

/* Etiqueta de sección en píldora (más visible que la etiqueta suelta) */
.pildora-sec {
  display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(184,137,90,.16); color: var(--camel); border: 1px solid rgba(184,137,90,.4);
}
.pildora-sec.sobre-crema { background: var(--marino); color: var(--crema); border-color: var(--marino); }

/* Fila de llamado: botón + aclaración. En celular, uno abajo del otro */
.llamado { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.llamado .boton { width: 100%; justify-content: center; padding: 17px 24px; }
.llamado .sub { font-size: 15px; line-height: 1.5; color: var(--crema-texto2); }
@media (min-width: 640px) {
  .llamado { flex-direction: row; align-items: center; gap: 20px; }
  .llamado .boton { width: auto; }
  .llamado .sub { max-width: 360px; }
}

/* Aviso de uso de datos, debajo del formulario */
.legal-form { margin-top: 10px; font-size: 12px; line-height: 1.45; }
.legal-form a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }