/* Páginas de venta de España (es.html) y Estados Unidos (us.html). Colores "Nopal y mandarina", como index.html. */
:root {
  --papel: #F1F5F0; --superficie: #FFFFFF; --tinta: #13261C; --tinta-suave: #56685D; --linea: #D9E3DB;
  --acento: #14684A; --acento-tenue: #DCEFE5; --sol: #FF6B2C; --sol-tenue: #FFE7DB; --sol-texto: #2A0E00;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --cuerpo: "Onest", -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.55 var(--cuerpo); -webkit-font-smoothing: antialiased; }
a { color: var(--acento); }
h1, h2 { font-family: var(--display); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 14px; }
h1 { font-size: clamp(38px, 6vw, 64px); }
h1 em { font-style: normal; color: var(--acento); }
h2 { font-size: clamp(28px, 4vw, 42px); }
p { margin: 0 0 12px; }
.suave, .sub, .nota { color: var(--tinta-suave); }
.sub { max-width: 640px; margin-bottom: 26px; }
.nota { font-size: 14px; margin-top: 14px; }

.barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; padding: 12px max(16px, calc((100% - 1120px) / 2));
  background: color-mix(in srgb, var(--papel) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.logo { display: flex; align-items: center; gap: 8px; font: 800 22px/1 var(--display); letter-spacing: -0.04em; color: var(--tinta); text-decoration: none; }
.barra nav { display: flex; gap: 18px; margin-left: auto; }
.barra nav a { color: var(--tinta-suave); text-decoration: none; font-weight: 500; font-size: 15px; }
.barra nav a:hover { color: var(--tinta); }
@media (max-width: 760px) { .barra nav { display: none; } .barra .boton { margin-left: auto; } }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 24px;
  background: var(--sol); color: var(--sol-texto); font: 600 16px/1 var(--cuerpo); text-decoration: none; cursor: pointer; }
.boton:hover { filter: brightness(0.96); }
.boton.claro { background: var(--superficie); color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linea); }
.boton.chico { padding: 10px 16px; font-size: 15px; }
.boton:disabled { opacity: .6; cursor: default; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

main > section { padding: 64px max(16px, calc((100% - 1120px) / 2)); }
.portada { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding-top: 48px !important; }
.portada .grande { font-size: 19px; color: var(--tinta-suave); max-width: 560px; }
.sello-chico { display: inline-block; background: var(--acento-tenue); color: var(--acento); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; margin-bottom: 16px; }
@media (max-width: 860px) { .portada { grid-template-columns: 1fr; } }

/* Celular con una tarjeta */
.celular { justify-self: center; width: 300px; background: var(--tinta); border-radius: 46px; padding: 12px; box-shadow: 0 40px 70px -40px rgba(19,38,28,.6); }
.pantalla { background: #EEF0F4; border-radius: 36px; padding: 56px 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-height: 480px; align-content: start; }
.pase { background: var(--c); color: var(--t); border-radius: 20px; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pase-arriba { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.pase-arriba .dato { margin-left: auto; text-align: right; font-size: 14px; white-space: nowrap; }
.pase small { display: block; font-size: 10px; letter-spacing: .08em; opacity: .7; font-weight: 600; }
.inicial { width: 34px; height: 34px; border-radius: 50%; background: var(--t); color: var(--c); display: grid; place-items: center; font: 800 15px var(--display); }
.sellos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sellos i { aspect-ratio: 1; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--t) 45%, transparent); display: grid; place-items: center; font-style: normal; color: var(--sol); font-weight: 800; }
.sellos i.si { background: var(--t); border: 0; }
.pase-abajo { display: flex; justify-content: space-between; align-items: flex-end; font-weight: 600; }
.qr { width: 58px; height: 58px; background: #fff; border-radius: 8px; border: 6px solid #fff;
  background-image: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0); background-size: 12px 12px; }
.aviso { background: rgba(255,255,255,.92); border-radius: 18px; padding: 12px 14px; font-size: 14px; box-shadow: 0 10px 24px -16px rgba(0,0,0,.4); }
.aviso b { display: block; font-size: 12px; color: var(--tinta-suave); font-weight: 600; margin-bottom: 2px; }

.bloque h2 { max-width: 760px; }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.paso { background: var(--superficie); border-radius: 22px; padding: 22px; box-shadow: inset 0 0 0 1.5px var(--linea); }
.paso span { width: 38px; height: 38px; border-radius: 50%; background: var(--acento); color: #fff; display: grid; place-items: center; font: 800 18px var(--display); margin-bottom: 12px; }
.paso b { display: block; font: 700 20px/1.2 var(--display); margin-bottom: 6px; }
.paso p { color: var(--tinta-suave); margin: 0; font-size: 15px; }
@media (max-width: 760px) { .pasos { grid-template-columns: 1fr; } }

.tipos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tipo { background: var(--c); color: #fff; border-radius: 22px; padding: 22px; }
.tipo .ic { font-size: 30px; }
.tipo b { display: block; font: 800 24px/1.1 var(--display); margin: 8px 0 6px; }
.tipo p { margin: 0; opacity: .9; font-size: 15px; }
.tipo.ancho { grid-column: span 2; }
@media (max-width: 700px) { .tipos { grid-template-columns: 1fr; } .tipo.ancho { grid-column: auto; } }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .dos { grid-template-columns: 1fr; } }
.lista { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.bloqueo { background: linear-gradient(160deg, #1E3B2D, #0E2018 60%, #2A1A12); border-radius: 30px; padding: 30px 20px; display: grid; gap: 10px; }
.bloqueo .hora { color: #fff; font: 600 64px/1 var(--display); text-align: center; margin-bottom: 10px; }
.tablero { background: var(--superficie); border-radius: 26px; padding: 22px; box-shadow: inset 0 0 0 1.5px var(--linea); }
.tablero > b { font: 800 20px var(--display); }
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cifras div { background: var(--papel); border-radius: 16px; padding: 14px; font: 800 34px/1.1 var(--display); }
.cifras div.sol { background: var(--sol-tenue); }
.cifras small { display: block; font: 400 14px var(--cuerpo); color: var(--tinta-suave); }

.precios { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; }
.precio { background: var(--superficie); border-radius: 26px; padding: 26px; box-shadow: inset 0 0 0 1.5px var(--linea); display: grid; gap: 6px; align-content: start; }
.precio.destacado { box-shadow: inset 0 0 0 2.5px var(--acento); }
.precio small { color: var(--acento); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.precio > b { font: 800 46px/1 var(--display); letter-spacing: -0.03em; margin: 4px 0 8px; }
.precio > b i { font: 400 17px var(--cuerpo); color: var(--tinta-suave); font-style: normal; }
.precio .boton { margin-top: 10px; justify-self: start; }
@media (max-width: 700px) { .precios { grid-template-columns: 1fr; } }

details { background: var(--superficie); border-radius: 18px; padding: 16px 20px; margin-bottom: 10px; box-shadow: inset 0 0 0 1.5px var(--linea); max-width: 860px; }
summary { font-weight: 600; cursor: pointer; }
details p { margin: 10px 0 0; color: var(--tinta-suave); }

.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .contacto { grid-template-columns: 1fr; } }
form { background: var(--superficie); border-radius: 26px; padding: 24px; box-shadow: inset 0 0 0 1.5px var(--linea); display: grid; gap: 6px; }
label { font-weight: 600; font-size: 15px; margin-top: 8px; }
label span { color: var(--tinta-suave); font-weight: 400; }
input, textarea { width: 100%; font: inherit; border: 1.5px solid var(--linea); border-radius: 14px; padding: 12px 14px; background: #fff; color: var(--tinta); }
input:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; }
form .boton { margin-top: 12px; }
.estado { margin: 8px 0 0; font-size: 15px; }
.estado.error { color: #A3121B; }
.estado.ok { color: var(--acento); font-weight: 600; }

.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 24px max(16px, calc((100% - 1120px) / 2)) 40px; color: var(--tinta-suave); font-size: 14px; border-top: 1px solid var(--linea); }

/* Textos legales (borradores) */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 16px 64px; }
.legal h1 { font-size: clamp(32px, 5vw, 46px); }
.legal h2 { font-size: 24px; margin-top: 30px; }
.legal .borrador { background: var(--sol-tenue); border-radius: 14px; padding: 12px 16px; font-size: 15px; }