:root { --azul: #1F4FFF; --azul-oscuro: #1236C4; --azul-suave: #E6EDFF; --lima: #C6FF3D; --marino: #0B1433; --tinta-suave: #4A5578; --fondo: #F5F8FF; --borde: #DFE6F7; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--marino); font: 400 17px/1.65 "Figtree", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
header { background: var(--azul); color: #fff; padding: 28px 16px 40px; }
.envoltura { max-width: 780px; margin: 0 auto; }
.marca { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font: 800 1.5rem "Baloo 2", sans-serif; }
.marca svg { width: 40px; height: 40px; }
h1 { margin: 26px 0 6px; font: 800 clamp(2rem, 6vw, 3rem)/1.05 "Baloo 2", "Figtree", sans-serif; }
header p { margin: 0; color: #E6EDFF; max-width: 46ch; }
main { padding: 0 16px 64px; }
.resumen { margin-top: -22px; background: #fff; border-radius: 22px; padding: 22px 24px; box-shadow: 0 6px 0 var(--lima), 0 18px 40px rgba(20, 40, 140, 0.10); }
.resumen h2 { margin: 0 0 10px; font: 800 1.35rem "Baloo 2", sans-serif; }
.resumen ul { margin: 0; padding-left: 20px; }
.resumen li { margin-bottom: 6px; }
section { margin-top: 40px; }
section h2 { font: 800 1.45rem/1.2 "Baloo 2", "Figtree", sans-serif; margin: 0 0 10px; }
section h3 { font-size: 1.05rem; margin: 18px 0 6px; }
section p, section li { color: #1b2445; }
section ul { padding-left: 20px; }
.medidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.medida { background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 14px 16px; }
.medida b { display: block; color: var(--azul-oscuro); margin-bottom: 4px; }
.medida span { font-size: 15.5px; color: var(--tinta-suave); }
.nota { background: var(--azul-suave); border-left: 4px solid var(--azul); border-radius: 12px; padding: 12px 16px; font-size: 15.5px; margin-top: 14px; }
footer { border-top: 1px solid var(--borde); padding: 22px 16px 34px; text-align: center; font-size: 14px; color: var(--tinta-suave); }
a { color: var(--azul-oscuro); }
@media (max-width: 640px) { .medidas { grid-template-columns: 1fr; } }