/* Portada en tinta, con la tarjeta de ejemplo como protagonista */
.portada { background: var(--tinta); color: var(--arena); position: relative; overflow: hidden; }
.portada::after { /* la ola de la Explanada, muy sutil */
  content: ""; position: absolute; inset: auto -10% -1px; height: 90px; opacity: .08; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 120%, transparent 0 22px, var(--arena) 22px 30px);
}
.portada .barra { color: var(--arena); }
.btn.pequeño { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
.portada .btn.claro { color: var(--arena); box-shadow: inset 0 0 0 1.5px rgba(243,237,227,.3); }

.heroe { max-width: 1080px; margin: 0 auto; padding: 28px 16px 90px; display: grid; gap: 44px; align-items: center; }
@media (min-width: 880px) { .heroe { grid-template-columns: 1.15fr 1fr; padding-top: 56px; padding-bottom: 120px; } }
.heroe .etiqueta { color: rgba(243,237,227,.7); margin: 0 0 16px; }
.heroe h1 { font-weight: 800; font-size: clamp(52px, 15vw, 104px); letter-spacing: -.045em; line-height: .9; }
.heroe h1 em { font-style: normal; color: var(--teja); display: inline-block; }
.entradilla { font-size: clamp(18px, 4.6vw, 21px); line-height: 1.45; max-width: 34ch; margin: 22px 0 28px; color: rgba(243,237,227,.88); text-wrap: pretty; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }

.escena { position: relative; max-width: 380px; width: calc(100% - 16px); justify-self: center; }
.escena .tarjeta { transform: rotate(-4deg); box-shadow: 0 2px 0 rgba(0,0,0,.2), 0 40px 70px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(243,237,227,.12); }
.escena::before { /* segunda tarjeta detrás, como en una cartera */
  content: ""; position: absolute; inset: 14px -10px -14px 12px; border-radius: 22px; background: var(--teja); transform: rotate(5deg); opacity: .9;
}
@keyframes cae { 0% { scale: 1.9; opacity: 0; } 55% { scale: .92; opacity: 1; } 100% { scale: 1; } }
.hueco.cae .huella { animation: cae .55s cubic-bezier(.3,.7,.4,1) both; }

/* Bloques */
.bloque { max-width: 1080px; margin: 0 auto; padding: 72px 16px 0; }
.bloque h2 { font-weight: 800; font-size: clamp(34px, 8.5vw, 58px); letter-spacing: -.04em; max-width: 16ch; text-wrap: balance; }
.bloque h2 span { color: var(--teja); }

.pasos { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 14px; counter-reset: paso; }
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.pasos li { background: var(--papel); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); }
.pasos b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--teja); color: var(--teja); font-family: var(--display); font-size: 22px; font-weight: 800; transform: rotate(-8deg); }
.pasos h3 { font-size: 24px; font-weight: 800; margin: 16px 0 8px; }
.pasos p { margin: 0; color: var(--muted); }

.sectores { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sectores li { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 5vw, 28px); letter-spacing: -.02em; padding: 8px 18px; border-radius: 999px; border: 2px solid var(--tinta); }
.sectores li:nth-child(3n+2) { background: var(--tinta); color: var(--arena); }
.sectores li:nth-child(3n) { border-color: var(--teja); color: var(--teja); }

.persona { display: grid; gap: 26px; }
@media (min-width: 820px) { .persona { grid-template-columns: 1.2fr 1fr; align-items: end; } }
.persona p { font-size: 18px; max-width: 46ch; margin: 18px 0 0; text-wrap: pretty; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding: 14px 16px 14px 50px; background: var(--papel); border-radius: 14px; font-weight: 500; }
.checks li::before { content: ""; position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; border-radius: 50%; background: var(--teja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23F3EDE3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }

.tarifas { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 640px) { .tarifas { grid-template-columns: 1fr 1fr; max-width: 720px; } }
.tarifas .caja { padding: 24px; }
.tarifas small { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tarifas b { display: block; font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: -.04em; line-height: 1.1; margin: 6px 0 8px; }
.tarifas b span { font-size: 20px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tarifas p { margin: 0; color: var(--muted); }
.tarifas .destacada { background: var(--tinta); color: var(--arena); }
.tarifas .destacada small, .tarifas .destacada p, .tarifas .destacada b span { color: rgba(243,237,227,.72); }
.precio .aviso { margin-top: 12px; }

.contacto { padding-bottom: 80px; }
.contacto p { font-size: 18px; max-width: 40ch; margin: 14px 0 22px; }

.pie-web { border-top: 1px solid var(--line); padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); text-align: center; font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; }