:root { --fondo: #f3f1ec; --panel: #fbfaf7; --texto: #26251f; --suave: #6d6a61; --borde: #e2ddd3; --salida: cubic-bezier(0.23, 1, 0.32, 1); }
* { box-sizing: border-box; }
html { overflow-wrap: anywhere; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 17px/1.65 Inter, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 40px 24px 96px; }
nav.migas { font-size: 14px; color: var(--suave); margin-bottom: 28px; }
nav.migas a { color: var(--texto); text-underline-offset: 3px; }
h1 { margin: 0 0 16px; font-size: clamp(30px, 5vw, 44px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.intro { font-size: 19px; color: var(--suave); margin: 0 0 36px; max-width: 62ch; }
ol.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0 0 40px; }
ol.pasos li { counter-increment: paso; position: relative; padding: 0 0 26px 52px; }
ol.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--texto); color: var(--panel); font-weight: 700; font-size: 15px; }
ol.pasos h2 { margin: 2px 0 6px; font-size: 19px; line-height: 1.3; }
ol.pasos p { margin: 0; color: #3b3a35; max-width: 62ch; }
.consejos { border-top: 1px solid var(--borde); padding-top: 24px; margin-bottom: 40px; }
.consejos h2 { font-size: 17px; margin: 0 0 10px; }
.consejos ul { margin: 0; padding-left: 20px; color: #3b3a35; }
.llamada { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 24px; border-radius: 20px; background: var(--panel); border: 1px solid var(--borde); margin-bottom: 48px; }
.llamada p { margin: 0; flex: 1 1 260px; }
a.boton { display: inline-flex; min-height: 48px; align-items: center; padding: 12px 22px; border-radius: 14px; background: var(--texto); color: var(--panel);
  text-decoration: none; font-weight: 600; transition: transform 160ms var(--salida); }
a.boton:active { transform: scale(0.97); }
.otras h2 { font-size: 17px; margin: 0 0 8px; }
.otras ul { list-style: none; padding: 0; margin: 0 0 40px; }
.otras a { display: inline-flex; min-height: 44px; align-items: center; color: var(--texto); text-underline-offset: 3px; }
footer { font-size: 13px; color: var(--suave); padding-bottom: 84px; }
footer a { color: var(--texto); display: inline-flex; min-height: 44px; align-items: center; }
.whatsapp { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; min-height: 48px; padding: 12px 18px; border: 1px solid var(--texto);
  border-radius: 14px; background: var(--panel); color: var(--texto); font-weight: 600; text-decoration: none; align-items: center; gap: 8px;
  box-shadow: 0 10px 30px rgba(40, 36, 30, 0.14); transition: transform 160ms var(--salida); }
.whatsapp:not([hidden]) { display: inline-flex; }
.whatsapp[hidden] { display: none; }
.whatsapp::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #2f7d4f; }
.whatsapp:active { transform: scale(0.97); }
.enlace-cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.enlace-cookies[hidden] { display: none; }
:focus-visible { outline: 3px solid var(--texto); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
