/* eSIMple (oct. 2026): tonos claros con el celeste y el blanco de la bandera, el sol solo como detalle.
   Fotos reales de Argentina y de los destinos (Wikimedia Commons, creditos en /creditos).
   Portada: el telefono se va configurando solo a medida que bajas (bloque INSTALACION y site.js). */
:root{
  color-scheme: light;   /* arranca siempre clara (marca); el boton de arriba pasa a oscuro y se recuerda */
  --f-body: 'Geist', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;

  --bg:#F5F9FD; --surface:#FDFEFF; --surface-2:#EAF3FB; --surface-3:#DCEAF7;
  --line:#DCE6F0; --line-strong:#C2D2E2;
  --ink:#0E1E33; --ink-soft:#42536A; --ink-faint:#5B6B80;
  --accent:#1F6FB8; --accent-hover:#185C9A; --accent-soft:#E2EFFA; --accent-ink:#134C82; --on-accent:#F7FBFF;
  --celeste:#74ACDF; --sol:#F6B40E;
  --warn-soft:#FDF3DC; --warn-ink:#7A4E05;
  --bad-soft:#FBEAE7; --bad-ink:#8E2D1C; --bad-line:#EBC4BC;
  --radio:18px; --radio-chico:10px;
  --sombra: 0 1px 2px rgb(14 40 70 / .05), 0 8px 24px rgb(14 40 70 / .07);
  --sombra-alta: 0 2px 6px rgb(14 40 70 / .06), 0 26px 50px rgb(14 40 70 / .14);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rapido: 180ms var(--ease-out);
}

/* modo oscuro: solo si la persona lo elige con el boton del encabezado (html[data-theme="dark"]) */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0A1424; --surface:#0F1C30; --surface-2:#14243B; --surface-3:#1B2E48;
  --line:#1F3350; --line-strong:#2D4566;
  --ink:#E8F0F9; --ink-soft:#A9BACE; --ink-faint:#8799B0;
  --accent:#7CB9EC; --accent-hover:#9ACAF2; --accent-soft:#16304D; --accent-ink:#A9D2F5; --on-accent:#04121F;
  --warn-soft:#2E2412; --warn-ink:#EBC27A;
  --bad-soft:#2F1915; --bad-ink:#F0A597; --bad-line:#5A2C24;
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
  --sombra-alta: 0 2px 6px rgb(0 0 0 / .35), 0 26px 50px rgb(0 0 0 / .45);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:5rem; }
body{ background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
a:not(.btn):not(.brand){ text-decoration-color:color-mix(in srgb, currentColor 35%, transparent); text-underline-offset:3px; }
h1,h2,h3,h4{ font-weight:600; letter-spacing:-.035em; line-height:1.05; text-wrap:balance; margin:0; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
.wrap{ width:min(1180px, 100% - 2rem); margin-inline:auto; }
.angosto{ width:min(760px, 100% - 2rem); margin-inline:auto; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.ph{ font-size:1.15em; line-height:1; flex:none; }
.bandera{ display:inline-block; width:1.5em; height:1em; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgb(14 30 51 / .12); flex:none; vertical-align:-.12em; }

.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.87rem; font-weight:500; color:var(--accent-ink);
  background:var(--accent-soft); padding:.32rem .8rem .32rem .45rem; border-radius:999px; }
.mono{ font-family:var(--f-mono); }
.suave{ color:var(--ink-soft); }
.tenue{ color:var(--ink-faint); font-size:.88rem; }
.etiqueta{ font-size:.8rem; font-weight:500; color:var(--ink-faint); }

/* ---------------- encabezado ---------------- */
.site-header{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:border-color 200ms ease; }
.site-header.con-borde{ border-bottom-color:var(--line); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:4.25rem; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.brand-mark{ width:1.9rem; height:1.9rem; flex:none; }
.brand-word{ font-weight:600; font-size:1.22rem; letter-spacing:-.04em; }
.brand-word b{ font-weight:600; color:var(--accent); }
.main-nav{ display:flex; align-items:center; gap:1.6rem; }
.main-nav a.lnk{ text-decoration:none; font-size:.93rem; font-weight:500; color:var(--ink-soft); transition:color var(--rapido); }
.main-nav a.lnk:hover{ color:var(--ink); }
.modo{ width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink-soft); cursor:pointer; font-size:1.1rem; flex:none; transition:color var(--rapido), border-color var(--rapido); }
.modo:hover{ color:var(--ink); border-color:var(--ink-faint); }
.modo .ph-sun{ display:none; }
:root[data-theme="dark"] .modo .ph-sun{ display:block; }
:root[data-theme="dark"] .modo .ph-moon{ display:none; }
@media (max-width:800px){ .main-nav a.lnk.opc{ display:none; } }
@media (max-width:480px){ .main-nav{ gap:.6rem; } }
@media (max-width:480px){ .main-nav a.lnk{ display:none; } }

/* ---------------- botones ---------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:500; font-size:.95rem;
  padding:.8rem 1.3rem; border-radius:999px; text-decoration:none; cursor:pointer; border:1px solid transparent; background:none; white-space:nowrap; }
.btn-primary{ background:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ background:var(--accent-hover); }
.btn-outline{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.btn-outline:hover{ border-color:var(--ink-faint); }
.btn-chico{ padding:.5rem .95rem; font-size:.85rem; }
.btn .ph{ transition:transform var(--rapido); }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }
.btn[aria-busy="true"]{ opacity:.75; cursor:progress; }

/* ---------------- secciones ---------------- */
section{ padding-block:6rem; }
.sec-titulo{ font-size:clamp(2rem, 4vw, 3rem); }
.sec-bajada{ margin-top:.9rem; color:var(--ink-soft); font-size:1.08rem; max-width:34rem; }

/* =====================================================================================
   INSTALACION: la portada. A la izquierda los pasos (cada uno ocupa una pantalla); a la derecha el
   telefono queda fijo y cambia de estado (data-paso 0-4) cuando cada paso llega al centro (site.js).
   ===================================================================================== */
.instalacion{ padding-block:0; position:relative; isolation:isolate; }
.instalacion::before{ content:""; position:absolute; inset:0 0 auto; height:110dvh; z-index:-1;
  background:radial-gradient(60% 55% at 78% 30%, color-mix(in srgb, var(--celeste) 28%, transparent), transparent 70%),
             linear-gradient(180deg, color-mix(in srgb, var(--celeste) 10%, var(--bg)), var(--bg)); }
.inst-grid{ display:grid; grid-template-columns:1.05fr .95fr; column-gap:3rem; }
.paso-panel{ grid-column:1; min-height:78dvh; display:flex; flex-direction:column; justify-content:center; padding-block:4rem; }
.paso-panel.hero-panel{ min-height:calc(100dvh - 4.25rem); padding-block:2.5rem 4rem; grid-row:1; }
.paso-panel[data-paso="1"]{ grid-row:2; } .paso-panel[data-paso="2"]{ grid-row:3; }
.paso-panel[data-paso="3"]{ grid-row:4; } .paso-panel[data-paso="4"]{ grid-row:5; }
.hero-panel h1{ font-size:clamp(2.3rem, 4.2vw, 3.5rem); margin-top:1.3rem; max-width:13em; }
.hero-panel h1 em{ font-style:normal; color:var(--accent); }
.hero-sub{ max-width:31rem; margin-top:1.3rem; font-size:1.15rem; color:var(--ink-soft); }
.hero-panel > .eyebrow{ align-self:flex-start; }
/* titulo: [logo eSIMple] Viaja [avion] de los datos nos ocupamos nosotros. */
.hero-panel h1.titulo-marca{ font-size:clamp(2.2rem, 4vw, 3.3rem); max-width:14em; line-height:1.1; }
.h1-marca{ display:inline-flex; align-items:center; gap:.18em; white-space:nowrap; vertical-align:-.04em; }
.h1-marca .brand-mark{ width:.92em; height:.92em; }
.h1-marca .brand-word{ font-size:1em; letter-spacing:-.045em; }
.titulo-marca .avion{ display:inline-block; color:var(--celeste); font-size:.9em; vertical-align:-.06em; margin-inline:.04em; }
.hero-cta-row{ display:flex; gap:.75rem; margin-top:2.2rem; flex-wrap:wrap; }
.paso-num{ display:inline-grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; font-weight:600; font-size:.95rem;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--accent-ink); transition:background-color 400ms ease, color 400ms ease, border-color 400ms ease; }
.paso-panel.activo .paso-num{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.paso-panel h2{ font-size:clamp(2rem, 3.8vw, 3rem); margin-top:1rem; }
.paso-panel p{ margin-top:.9rem; color:var(--ink-soft); font-size:1.08rem; max-width:30rem; }
.paso-panel .detalle{ margin-top:1.3rem; display:inline-flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.42rem .9rem; align-self:flex-start; }
.paso-panel .detalle .ph{ color:var(--accent); }

.tel-col{ grid-column:2; grid-row:1 / span 5; align-self:start; position:sticky; top:calc(50dvh - 300px + 2rem); height:600px;
  display:grid; place-items:center; z-index:2; }
.tel-col::before{ content:""; position:absolute; width:min(520px, 100%); aspect-ratio:1; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--celeste) 30%, transparent), transparent); }
.riel{ position:absolute; right:0; top:50%; translate:0 -50%; display:flex; flex-direction:column; gap:.6rem; list-style:none; padding:0; margin:0; }
.riel li{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); transition:background-color 300ms ease, transform 300ms var(--ease-out); }
.riel li.hecho{ background:var(--celeste); }
.riel li.actual{ background:var(--accent); transform:scale(1.5); }

/* el chip eSIM que entra al telefono */
.chip{ position:absolute; z-index:4; width:92px; height:118px; left:50%; top:50%; translate:118px -250px; rotate:12deg;
  border-radius:14px; background:linear-gradient(145deg, #FFFFFF, #E4EEF8); box-shadow:0 18px 40px rgb(14 40 70 / .22), inset 0 0 0 1px rgb(14 30 51 / .08);
  clip-path:polygon(0 0, 74% 0, 100% 20%, 100% 100%, 0 100%); display:grid; place-items:center; }
.chip::before{ content:""; width:50px; height:40px; border-radius:7px;
  background:linear-gradient(90deg, transparent 31%, rgb(120 80 10 / .35) 31% 34%, transparent 34% 66%, rgb(120 80 10 / .35) 66% 69%, transparent 69%),
             linear-gradient(180deg, transparent 46%, rgb(120 80 10 / .35) 46% 54%, transparent 54%), linear-gradient(135deg, #F8D36A, var(--sol)); }
.chip::after{ content:"eSIM"; position:absolute; bottom:9px; font-size:.62rem; font-weight:600; letter-spacing:.06em; color:#1F6FB8; }

.telefono-wrap{ position:relative; }
.telefono{ position:relative; width:280px; height:568px; border-radius:46px; padding:11px; background:#13233A;
  box-shadow:inset 0 0 0 1.5px #3A4E6B, var(--sombra-alta); }
.tel-pantalla{ position:relative; height:100%; border-radius:36px; overflow:hidden; background:#F7FAFD; color:#0E1E33; }
.tel-isla{ position:absolute; top:10px; left:50%; translate:-50% 0; width:86px; height:24px; border-radius:999px; background:#08111D; z-index:6; }
.tel-estado{ position:relative; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:13px 24px 0 26px; font-size:.75rem; font-weight:600; height:40px; }
.tel-estado .red-txt{ font-size:.62rem; font-weight:600; opacity:.6; margin-right:.35rem; }
.senal{ display:inline-flex; align-items:flex-end; gap:2px; height:11px; }
.senal i{ display:block; width:3px; border-radius:1px; background:currentColor; opacity:.22; transition:opacity 300ms ease; }
.senal i:nth-child(1){ height:4px; } .senal i:nth-child(2){ height:6px; } .senal i:nth-child(3){ height:8px; } .senal i:nth-child(4){ height:11px; }
.esc{ position:absolute; inset:40px 0 0; padding:20px 18px; display:flex; flex-direction:column; opacity:0; transform:translateY(14px);
  transition:opacity 450ms var(--ease-out), transform 550ms var(--ease-out); pointer-events:none; }
.esc h4{ font-size:1.2rem; letter-spacing:-.03em; }
.esc p{ font-size:.8rem; color:#566679; margin-top:.3rem; line-height:1.45; }
.telefono[data-paso="0"] .esc-0, .telefono[data-paso="1"] .esc-1, .telefono[data-paso="2"] .esc-2,
.telefono[data-paso="3"] .esc-3, .telefono[data-paso="4"] .esc-4{ opacity:1; transform:none; }
/* 0: bloqueado, sin servicio */
.esc-0{ align-items:center; text-align:center; padding-top:3rem; }
.esc-0 .reloj{ font-size:4rem; font-weight:500; letter-spacing:-.05em; line-height:1; }
.esc-0 .fecha{ font-size:.85rem; color:#566679; margin-top:.3rem; }
.esc-0 .sin-red{ margin-top:auto; margin-bottom:2.2rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:500; color:#566679;
  background:#FFFFFF; padding:.45rem .8rem; border-radius:999px; box-shadow:0 0 0 1px #DCE6F0; }
/* 1: elegis destino */
.lista-dest{ list-style:none; padding:0; margin:1rem 0 0; display:flex; flex-direction:column; gap:.5rem; }
.lista-dest li{ display:flex; align-items:center; gap:.65rem; padding:.62rem .75rem; border-radius:14px; background:#FFFFFF; box-shadow:0 0 0 1px #DCE6F0; font-size:.86rem; font-weight:500;
  transition:box-shadow 300ms ease, background-color 300ms ease; }
.lista-dest li span:last-child{ margin-left:auto; font-size:.76rem; color:#566679; font-weight:500; }
.telefono[data-paso="1"] .lista-dest li.elegido{ background:#E2EFFA; box-shadow:0 0 0 2px #1F6FB8; }
/* 2: llega el QR */
.notif{ display:flex; gap:.6rem; align-items:center; background:#FFFFFF; border-radius:16px; padding:.6rem .7rem; box-shadow:0 6px 20px rgb(14 40 70 / .12); }
.notif-ico{ width:32px; height:32px; border-radius:9px; background:#1F6FB8; color:#fff; display:grid; place-items:center; font-size:1.05rem; flex:none; }
.notif div b{ display:block; font-size:.78rem; }
.notif div span{ display:block; font-size:.72rem; color:#566679; line-height:1.3; }
.visor{ position:relative; margin:1.2rem auto 0; width:178px; height:178px; border-radius:20px; background:#FFFFFF; display:grid; place-items:center; box-shadow:0 0 0 1px #DCE6F0; overflow:hidden; }
.visor img{ width:128px; height:128px; image-rendering:pixelated; }
.visor::before{ content:""; position:absolute; inset:12px; border:3px solid #1F6FB8; border-radius:12px;
  clip-path:polygon(0 0,28% 0,28% 4%,4% 4%,4% 28%,0 28%, 0 72%,4% 72%,4% 96%,28% 96%,28% 100%,0 100%, 100% 100%,72% 100%,72% 96%,96% 96%,96% 72%,100% 72%, 100% 28%,96% 28%,96% 4%,72% 4%,72% 0,100% 0); }
.linea-scan{ position:absolute; left:14px; right:14px; top:20px; height:2px; background:#1F6FB8; box-shadow:0 0 12px 2px rgb(31 111 184 / .45); border-radius:2px; opacity:0; }
/* 3: se instala */
.esc-3{ align-items:center; text-align:center; padding-top:2.4rem; }
.anillo{ --p:0; width:116px; height:116px; border-radius:50%; display:grid; place-items:center; margin-bottom:1.1rem;
  background:conic-gradient(#1F6FB8 calc(var(--p) * 1turn), #DCE6F0 0); transition:--p 1.6s var(--ease-out); }
.anillo span{ width:96px; height:96px; border-radius:50%; background:#F7FAFD; display:grid; place-items:center; font-size:2.3rem; color:#1F6FB8; }
.telefono[data-paso="3"] .anillo, .telefono[data-paso="4"] .anillo{ --p:1; }
.checks{ list-style:none; padding:0; margin:1.1rem 0 0; text-align:left; display:flex; flex-direction:column; gap:.45rem; font-size:.8rem; color:#566679; }
.checks li{ display:flex; align-items:center; gap:.45rem; opacity:.35; transition:opacity 300ms ease, color 300ms ease; }
.checks li .ph{ color:#1F6FB8; }
.telefono[data-paso="3"] .checks li{ opacity:1; color:#0E1E33; }
.telefono[data-paso="3"] .checks li:nth-child(2){ transition-delay:500ms; }
.telefono[data-paso="3"] .checks li:nth-child(3){ transition-delay:1000ms; }
/* 4: aterrizaste */
.esc-4{ padding:0; inset:0; justify-content:flex-end; }
.esc-4 img.fondo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.esc-4::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgb(8 17 29 / .15) 30%, rgb(8 17 29 / .78)); }
.bienvenida{ position:relative; margin:0 14px 18px; padding:.9rem 1rem; border-radius:18px; background:rgb(253 254 255 / .94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.bienvenida b{ display:flex; align-items:center; gap:.45rem; font-size:.92rem; }
.bienvenida span{ display:block; font-size:.76rem; color:#566679; margin-top:.2rem; }
.bienvenida .red{ margin-top:.6rem; display:inline-flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:600; color:#134C82;
  background:#E2EFFA; padding:.32rem .65rem; border-radius:999px; }
.telefono[data-paso="4"] .tel-estado{ color:#FFFFFF; }
.telefono[data-paso="4"] .tel-estado .senal i, .telefono .bienvenida .senal i{ opacity:1; }

/* ---------------- destinos (fotos) ---------------- */
.buscador{ margin-top:2.4rem; max-width:34rem; }
.buscador label{ display:block; font-size:.9rem; font-weight:500; margin-bottom:.5rem; }
.buscador-caja{ position:relative; }
.buscador-caja .ph{ position:absolute; left:1.05rem; top:50%; translate:0 -50%; color:var(--ink-faint); font-size:1.2rem; pointer-events:none; }
.buscador input{ width:100%; padding:1rem 1.1rem 1rem 2.9rem; font-size:1.05rem; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); }
.buscador input::placeholder{ color:var(--ink-faint); opacity:1; }
.buscador input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.buscador-msj{ min-height:1.6rem; margin-top:.7rem; font-size:.92rem; color:var(--ink-soft); }
.buscador-msj b{ color:var(--ink); font-weight:600; }

.bento{ display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:repeat(2, minmax(260px, auto)); gap:1rem; margin-top:1.2rem; }
.tile{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; border-radius:var(--radio);
  text-decoration:none; color:#FFFFFF; isolation:isolate; background:#13233A; min-height:260px; }
.tile img.foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 900ms var(--ease-out); }
.tile::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgb(8 17 29 / 0) 25%, rgb(8 17 29 / .78) 100%); }
.tile-europa{ grid-row:span 2; }
.tile-estados-unidos{ grid-column:span 2; }
.tile .arriba{ position:absolute; top:1.2rem; left:1.3rem; right:1.3rem; display:flex; align-items:center; gap:.5rem; }
.tile .arriba .bandera{ width:2.1rem; height:1.4rem; box-shadow:0 2px 8px rgb(0 0 0 / .25); }
.tile .region{ font-size:.82rem; font-weight:500; padding:.2rem .6rem; border-radius:999px; background:rgb(8 17 29 / .45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.tile h3{ font-size:clamp(1.6rem, 2.6vw, 2.2rem); text-shadow:0 2px 14px rgb(0 0 0 / .3); }
.tile-europa h3{ font-size:clamp(2rem, 3.6vw, 3rem); }
.tile .tile-texto{ margin-top:.5rem; color:rgb(255 255 255 / .88); max-width:22rem; font-size:.95rem; }
.paises{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; max-width:24rem; }
.paises span{ display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; padding:.22rem .6rem .22rem .4rem; border-radius:999px; background:rgb(255 255 255 / .16); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.paises .bandera{ width:1.25rem; height:.85rem; }
.tile .desde{ margin-top:1.1rem; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.tile .desde small{ display:block; font-size:.8rem; color:rgb(255 255 255 / .8); }
.tile .desde strong{ font-size:1.6rem; font-weight:600; letter-spacing:-.03em; }
.tile .ir{ width:2.75rem; height:2.75rem; border-radius:50%; display:grid; place-items:center; background:#FDFEFF; color:#0E1E33; font-size:1.15rem; flex:none; }
.nota-precios{ margin-top:1.2rem; font-size:.88rem; color:var(--ink-faint); }

/* ---------------- Argentina ---------------- */
.argentina-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.collage{ position:relative; display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:auto auto; gap:.9rem; }
.collage figure{ margin:0; border-radius:20px; overflow:hidden; background:var(--surface-2); }
.collage img{ width:100%; height:100%; object-fit:cover; }
.collage .f1{ grid-row:span 2; aspect-ratio:3/4; }
.collage .f2{ aspect-ratio:1; }
.collage .f3{ aspect-ratio:1; display:grid; place-items:center; background:linear-gradient(180deg, var(--celeste) 0 33.3%, #FFFFFF 33.3% 66.6%, var(--celeste) 66.6%); }
.collage .f3 .sol{ width:44px; height:44px; border-radius:50%; background:var(--sol); box-shadow:0 0 0 7px rgb(246 180 14 / .25); }
.garantias{ display:grid; grid-template-columns:1fr 1fr; gap:2rem 2.4rem; margin-top:2.4rem; }
.garantia{ padding-top:1.2rem; border-top:1px solid var(--line-strong); }
.garantia .ph{ font-size:1.5rem; color:var(--accent); }
.garantia h3{ font-size:1.12rem; letter-spacing:-.02em; margin-top:.8rem; }
.garantia p{ margin-top:.4rem; font-size:.94rem; color:var(--ink-soft); }

/* ---------------- compatibilidad en la portada ---------------- */
.compat-banda{ background:var(--surface-2); }
.compat-caja{ max-width:46rem; margin-inline:auto; text-align:center; }
.compat-caja .buscador{ margin-inline:auto; text-align:left; }
.compat-caja .resultados{ text-align:left; max-width:34rem; margin:1rem auto 0; }
.truco{ margin:2rem auto 0; max-width:34rem; display:flex; gap:.9rem; align-items:flex-start; text-align:left; padding:1.1rem 1.2rem; border-radius:var(--radio); background:var(--surface); border:1px solid var(--line); }
.truco .ph{ font-size:1.4rem; color:var(--accent); margin-top:.1rem; }
.truco p{ font-size:.94rem; color:var(--ink-soft); }
.truco b{ color:var(--ink); }

/* ---------------- preguntas ---------------- */
.faq-list{ max-width:48rem; margin-top:2.4rem; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.3rem 0; font-weight:500; font-size:1.08rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:""; width:.7rem; height:.7rem; flex:none; margin-right:.3rem; border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft); rotate:45deg; translate:0 -.2rem; transition:rotate 220ms var(--ease-out), translate 220ms var(--ease-out); }
.faq-item[open] summary::after{ rotate:225deg; translate:0 .15rem; }
.faq-item p, .faq-item div{ padding:0 2rem 1.4rem 0; color:var(--ink-soft); }

/* ---------------- llamada final + pie ---------------- */
.final-cta{ padding-block:2rem 6rem; }
.final-panel{ position:relative; overflow:hidden; border-radius:28px; color:#FFFFFF; padding:clamp(2.4rem, 6vw, 4.5rem); min-height:340px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; isolation:isolate; background:#13233A; }
.final-panel img.foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.final-panel::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgb(12 40 72 / .85), rgb(12 40 72 / .25)); }
.final-panel h2{ font-size:clamp(2rem, 4.2vw, 3.2rem); max-width:30rem; }
.final-panel p{ margin-top:.8rem; color:rgb(255 255 255 / .88); max-width:28rem; }
.final-panel .btn{ background:#FDFEFF; color:#134C82; }
.final-panel .btn:hover{ background:#E2EFFA; }

footer{ border-top:1px solid var(--line); padding-block:3rem 2.4rem; color:var(--ink-soft); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem; }
.footer-tag{ margin-top:.9rem; font-size:.92rem; max-width:22rem; }
.footer-col h4{ font-size:.9rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); margin-bottom:.9rem; }
.footer-col ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.footer-col a{ text-decoration:none; font-size:.92rem; }
.footer-col a:hover{ color:var(--ink); text-decoration:underline; }
.footer-bottom{ margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:.82rem; flex-wrap:wrap; gap:.6rem; color:var(--ink-faint); }
.footer-bottom a{ color:inherit; }
.boton-arrepentimiento{ display:inline-block; margin-top:1.1rem; border:1px solid var(--line-strong); border-radius:999px; padding:.45rem .95rem; font-size:.85rem; font-weight:500; color:var(--ink); text-decoration:none; }
.boton-arrepentimiento:hover{ border-color:var(--ink-faint); }

/* ---------------- paginas internas ---------------- */
.cabecera{ padding-block:3.5rem 0; }
.cabecera h1{ font-size:clamp(2.2rem, 4.6vw, 3.6rem); }
.cabecera .hero-sub{ margin-top:1rem; }
.cabecera h1 .bandera{ width:.95em; height:.64em; border-radius:6px; margin-right:.2em; vertical-align:.02em; }
.volver{ display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; color:var(--ink-soft); text-decoration:none; margin-bottom:1.6rem; }
.volver:hover{ color:var(--ink); }
.meta-pedido{ font-size:.9rem; color:var(--ink-faint); margin-bottom:.8rem; }
.contenido{ padding-block:2.8rem 6rem; }

/* planes de un destino */
.planes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1rem; }
.plan{ position:relative; display:flex; flex-direction:column; gap:.2rem; padding:1.5rem; border-radius:var(--radio); background:var(--surface); border:1px solid var(--line); }
.plan h3{ font-size:2.2rem; letter-spacing:-.045em; }
.plan .dias{ color:var(--ink-soft); }
.plan-tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.8rem; }
.tag{ font-size:.78rem; padding:.22rem .6rem; border-radius:999px; background:var(--surface-2); color:var(--ink-soft); }
.plan-precio{ margin-top:auto; padding-top:1.4rem; }
.plan-precio small{ display:block; font-size:.8rem; color:var(--ink-faint); }
.plan-precio strong{ display:block; font-size:1.7rem; font-weight:600; letter-spacing:-.03em; }
.plan .btn{ margin-top:1rem; }
.incluye{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; margin-top:2rem; color:var(--ink-soft); font-size:.92rem; }
.incluye span{ display:inline-flex; align-items:center; gap:.45rem; }
.incluye .ph{ color:var(--accent); }

/* tarjetas y formularios */
.tarjeta{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radio); padding:1.7rem; }
.tarjeta + .tarjeta{ margin-top:1rem; }
.tarjeta h2{ font-size:1.45rem; letter-spacing:-.03em; margin-bottom:.8rem; }
.campo{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.15rem; }
.campo label{ font-size:.9rem; font-weight:500; color:var(--ink); }
.campo input, .campo textarea, .campo select{ width:100%; padding:.8rem .95rem; border:1px solid var(--line-strong); background:var(--bg); border-radius:var(--radio-chico); transition:border-color var(--rapido), box-shadow var(--rapido); }
.campo input::placeholder, .campo textarea::placeholder{ color:var(--ink-faint); opacity:1; }
.campo input:focus, .campo textarea:focus, .campo select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.campo .ayuda{ font-size:.82rem; color:var(--ink-faint); }
.dos-col{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
.check{ display:flex; gap:.75rem; align-items:flex-start; padding:.95rem 1.05rem; border:1px solid var(--line); border-radius:var(--radio-chico); background:var(--bg); margin-bottom:.6rem; font-size:.93rem; cursor:pointer; transition:border-color var(--rapido); }
.check:has(input:checked){ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.check input{ margin-top:.25rem; width:1.1rem; height:1.1rem; accent-color:var(--accent); flex:none; }
.errores{ border:1px solid var(--bad-line); background:var(--bad-soft); border-radius:var(--radio-chico); padding:.95rem 1.1rem; margin-bottom:1.2rem; color:var(--bad-ink); }
.errores ul{ padding-left:1.1rem; }
.aviso{ border:1px solid var(--line); background:var(--warn-soft); color:var(--ink); border-radius:var(--radio-chico); padding:.95rem 1.1rem; margin-bottom:1.2rem; font-size:.95rem; }
.aviso.ok{ background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); }

/* compra: formulario + resumen */
.compra{ display:grid; grid-template-columns:1.3fr .7fr; gap:1.4rem; align-items:start; }
.resumen{ position:sticky; top:5.5rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radio); padding:1.5rem; }
.resumen h2{ font-size:1.1rem; letter-spacing:-.02em; }
.resumen dl{ margin:1rem 0 0; display:flex; flex-direction:column; gap:.7rem; }
.resumen dl div{ display:flex; justify-content:space-between; gap:1rem; font-size:.94rem; }
.resumen dt{ color:var(--ink-faint); }
.resumen dd{ margin:0; font-weight:500; text-align:right; }
.resumen .total{ margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; }
.resumen .total strong{ font-size:1.9rem; font-weight:600; letter-spacing:-.035em; }
.seguro{ display:flex; align-items:center; gap:.5rem; margin-top:1rem; font-size:.84rem; color:var(--ink-soft); }
.seguro .ph{ color:var(--accent); }

/* resultados del verificador de compatibilidad */
.resultados{ border:1px solid var(--line); border-radius:var(--radio-chico); background:var(--surface); margin-top:-.4rem; margin-bottom:1rem; overflow:hidden; }
.resultado{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); font-size:.93rem; }
.resultado:last-child{ border-bottom:0; }
.resultado .si, .resultado .ojo{ border-radius:999px; padding:.12rem .6rem; font-size:.78rem; font-weight:500; white-space:nowrap; align-self:flex-start; }
.resultado .si{ color:var(--accent-ink); background:var(--accent-soft); }
.resultado .ojo{ color:var(--warn-ink); background:var(--warn-soft); }
.resultado small{ display:block; color:var(--ink-faint); }
.compat-pasos{ display:grid; gap:1rem; }
.compat-pasos .tarjeta + .tarjeta{ margin-top:0; }

/* pedido */
.pase{ display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:start; }
.qr{ background:#FDFEFF; padding:14px; border:1px solid var(--line); border-radius:var(--radio); width:250px; }
.qr img{ width:220px; height:220px; image-rendering:pixelated; }
.datos-manuales code{ font-family:var(--f-mono); font-size:.85rem; word-break:break-all; background:var(--surface-2); border-radius:8px; padding:.5rem .65rem; display:block; margin-top:.35rem; }
.barra{ height:.6rem; background:var(--surface-2); border-radius:999px; overflow:hidden; margin:.6rem 0 .5rem; }
.barra span{ display:block; height:100%; background:var(--accent); border-radius:999px; }
.pasos-instalar{ padding-left:1.2rem; display:flex; flex-direction:column; gap:.55rem; color:var(--ink-soft); }
.pasos-instalar b{ color:var(--ink); font-weight:600; }
.recargas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:.8rem; }
.recarga{ border:1px solid var(--line); border-radius:var(--radio-chico); padding:1rem; display:flex; flex-direction:column; gap:.4rem; background:var(--bg); }
.recarga strong{ font-size:1.45rem; font-weight:600; letter-spacing:-.03em; }

/* progreso de la entrega */
.progreso{ list-style:none; padding:0; margin:1rem 0 .4rem; display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.progreso li{ position:relative; padding-top:1.1rem; font-size:.9rem; color:var(--ink-faint); }
.progreso li::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px; border-radius:999px; background:var(--surface-2); }
.progreso li.hecho{ color:var(--ink); }
.progreso li.hecho::before{ background:var(--accent); }
.progreso li.ahora{ color:var(--ink); font-weight:500; }
.progreso li.ahora::before{ background:linear-gradient(90deg, var(--surface-2) 0 30%, var(--accent) 30% 60%, var(--surface-2) 60%); background-size:250% 100%; background-position:50% 0; }

/* textos legales y creditos */
.legal h1{ font-size:clamp(2rem, 4vw, 2.8rem); }
.legal h2{ font-size:1.3rem; letter-spacing:-.025em; margin:2.2rem 0 .7rem; }
.legal p, .legal li{ color:var(--ink-soft); margin-bottom:.7rem; }
.legal ul, .legal ol{ padding-left:1.2rem; }

/* admin */
.tabla{ width:100%; border-collapse:collapse; font-size:.88rem; background:var(--surface); border:1px solid var(--line); }
.tabla th{ font-size:.75rem; font-weight:500; color:var(--ink-faint); text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); background:var(--surface-2); }
.tabla td{ padding:.55rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; }
.tabla tr.atenuado td{ color:var(--ink-faint); }
.tabla-scroll{ overflow-x:auto; }
.estado{ font-family:var(--f-mono); font-size:.72rem; padding:.12rem .5rem; border-radius:999px; background:var(--surface-2); white-space:nowrap; }
.estado.entregado{ color:var(--accent-ink); background:var(--accent-soft); }
.estado.error, .estado.esperando_saldo{ color:var(--bad-ink); background:var(--bad-soft); }
.kpis{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.8rem; margin-bottom:1.4rem; }
.kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radio-chico); padding:1rem 1.1rem; }
.kpi strong{ display:block; font-size:1.6rem; font-weight:600; letter-spacing:-.03em; }
.filtros{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.filtros a{ font-size:.78rem; font-weight:500; text-decoration:none; padding:.3rem .75rem; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
.filtros a.activo{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
.acciones{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }

/* ---------------- responsive ---------------- */
@media (max-width:980px){
  .bento{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .tile-europa{ grid-row:auto; grid-column:span 2; min-height:340px; }
  .tile-estados-unidos{ grid-column:span 2; }
  .argentina-grid{ grid-template-columns:1fr; gap:2.6rem; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .compra{ grid-template-columns:1fr; }
  .resumen{ position:static; order:-1; }
  .pase{ grid-template-columns:1fr; }
  .kpis{ grid-template-columns:repeat(2,1fr); }
}
/* telefono arriba, pasos que pasan por debajo */
@media (max-width:860px){
  /* la fila 2 es el lugar del telefono: los pasos arrancan debajo y despues pasan por debajo de el */
  .inst-grid{ grid-template-columns:1fr; grid-template-rows:auto 340px; }
  .paso-panel{ grid-column:1; }
  .paso-panel.hero-panel{ min-height:0; padding-block:2.4rem 1rem; }
  .paso-panel:not(.hero-panel){ min-height:88dvh; justify-content:flex-end; padding:0 0 3.5rem; }
  .paso-panel:not(.hero-panel) > *{ position:relative; z-index:1; }
  .paso-panel:not(.hero-panel) .paso-texto{ background:color-mix(in srgb, var(--bg) 94%, transparent); border:1px solid var(--line); border-radius:var(--radio); padding:1.3rem 1.2rem; box-shadow:var(--sombra); }
  .paso-panel[data-paso="1"]{ grid-row:3; } .paso-panel[data-paso="2"]{ grid-row:4; }
  .paso-panel[data-paso="3"]{ grid-row:5; } .paso-panel[data-paso="4"]{ grid-row:6; }
  .tel-col{ grid-column:1; grid-row:2 / span 5; top:4.25rem; height:340px; z-index:3; pointer-events:none; }
  .telefono-wrap{ position:absolute; left:50%; top:50%; translate:-50% -50%; scale:.56; }
  .riel{ right:.2rem; }
  .instalacion::before{ height:130dvh; }
}
@media (max-width:640px){
  section{ padding-block:4.2rem; }
  .bento{ grid-template-columns:1fr; }
  .tile-europa, .tile-estados-unidos{ grid-column:auto; }
  .tile{ min-height:240px; }
  .garantias{ grid-template-columns:1fr; gap:1.6rem; }
  .dos-col{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .qr{ width:100%; max-width:250px; }
  .progreso{ grid-template-columns:1fr; }
  .final-panel{ align-items:flex-start; }
}

/* =====================================================================================
   ANIMACIONES. Cada una explica algo; con "reducir movimiento" no se mueve nada.
   1. Telefono: el chip eSIM entra al telefono y cada pantalla cambia cuando su paso llega al centro.
   2. Entrada de la portada: el texto aparece en orden de lectura, una sola vez.
   3. Destinos: el buscador atenua lo que no coincide (transicion, se puede interrumpir).
   4. Aparicion al bajar: los bloques entran una vez, suave (sin repetir).
   5. Respuesta al tocar: botones se hunden, flechas avanzan, fotos se acercan (solo con mouse).
   6. Pedido: progreso de la entrega, QR que aparece, barra de datos, avisos.
   ===================================================================================== */
@property --p{ syntax:"<number>"; inherits:true; initial-value:0; }
:root{ interpolate-size: allow-keywords; }
.btn{ transition:opacity 150ms ease; }
.resultados{ transition:opacity 200ms var(--ease-out); }
.resultados.htmx-added{ opacity:0; }
.faq-item::details-content{ opacity:0; transition:opacity 150ms ease, content-visibility 150ms allow-discrete; }
.faq-item[open]::details-content{ opacity:1; }
.tile{ transition:opacity 260ms var(--ease-out), filter 260ms var(--ease-out); }
.bento.filtrando .tile:not(.coincide){ opacity:.35; filter:saturate(.3); }
.celebra{ animation:aparece-suave 200ms ease both; }
@keyframes aparece-suave{ from{ opacity:0; } }
/* el chip: afuera en el paso 0, adentro (y oculto) desde el paso 1 */
.chip{ transition:translate 900ms var(--ease-out), rotate 900ms var(--ease-out), scale 900ms var(--ease-out), opacity 500ms ease 450ms; }
.telefono-wrap[data-paso]:not([data-paso="0"]) .chip{ translate:-46px -200px; rotate:0deg; scale:.42; opacity:0; }

@media (prefers-reduced-motion: reduce){
  .esc, .chip, .anillo, .checks li{ transition:none !important; }
}

@media (prefers-reduced-motion: no-preference){
  /* 1. detalles que se mueven dentro del telefono */
  .chip{ animation:flota 4s ease-in-out infinite; }
  .telefono-wrap[data-paso]:not([data-paso="0"]) .chip{ animation:none; }
  @keyframes flota{ 50%{ translate:118px -262px; } }
  .telefono[data-paso="2"] .linea-scan{ animation:scan 2.2s ease-in-out infinite; }
  @keyframes scan{ 0%{ opacity:1; top:20px; } 50%{ top:154px; } 100%{ opacity:1; top:20px; } }
  .telefono[data-paso="2"] .notif{ animation:notif 600ms var(--ease-out) both; }
  @keyframes notif{ from{ opacity:0; transform:translateY(-20px) scale(.96); } }
  .telefono[data-paso="4"] .bienvenida{ animation:sube 700ms var(--ease-out) 250ms both; }
  @keyframes sube{ from{ opacity:0; transform:translateY(24px); } }
  .telefono[data-paso="4"] img.fondo{ animation:acerca 6s ease-out both; }
  @keyframes acerca{ from{ transform:scale(1.12); } }

  /* 2. entrada de la portada */
  .entra{ animation:entra 800ms var(--ease-out) both; animation-delay:calc(var(--i, 0) * 90ms); }
  @keyframes entra{ from{ opacity:0; transform:translateY(18px); } }
  .telefono-wrap{ animation:sube-tel 1100ms var(--ease-out) 200ms both; }
  /* el avion entra volando una sola vez */
  .titulo-marca .avion{ animation:despega 1200ms var(--ease-out) 450ms both; }
  @keyframes despega{ from{ opacity:0; transform:translate(-.8em, .35em) rotate(-8deg); } }
  @keyframes sube-tel{ from{ opacity:0; transform:translateY(40px); } }

  /* 4. aparicion al bajar */
  .js .revela{ opacity:0; transform:translateY(24px); transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay:calc(var(--i, 0) * 70ms); }
  .js .revela.visto{ opacity:1; transform:none; }
  .js .paso-panel:not(.hero-panel) .paso-texto{ opacity:.35; transition:opacity 500ms ease; }
  .js .paso-panel.activo .paso-texto{ opacity:1; }

  /* 5. respuesta al tocar */
  .btn{ transition:transform 160ms var(--ease-out), background-color var(--rapido), border-color var(--rapido), opacity 150ms ease; }
  .btn:active{ transform:scale(.97); }
  @media (hover: hover) and (pointer: fine){
    .btn:hover .ph-arrow-right{ transform:translateX(3px); }
    .tile:hover img.foto{ transform:scale(1.05); }
    .tile .ir{ transition:transform 260ms var(--ease-out); }
    .tile:hover .ir{ transform:translateX(4px); }
    .plan{ transition:transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
    .plan:hover{ transform:translateY(-4px); box-shadow:var(--sombra-alta); }
  }
  .resultados{ transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
  .resultados.htmx-added{ opacity:0; transform:translateY(-4px); }

  /* 6. pedido */
  .progreso li.ahora::before{ animation:avanza 1.4s linear infinite; }
  @keyframes avanza{ from{ background-position:100% 0; } to{ background-position:0% 0; } }
  .progreso li.recien::before{ transform-origin:left; animation:completar 250ms var(--ease-out) both; }
  @keyframes completar{ from{ transform:scaleX(0); } }
  .qr{ animation:qr 420ms cubic-bezier(.2,.8,.3,1.2) both; }
  @keyframes qr{ from{ opacity:0; transform:scale(.92); } }
  .barra span{ animation:llenar 900ms var(--ease-out) 200ms both; }
  @keyframes llenar{ from{ width:0; } }
  .faq-item::details-content{ block-size:0; overflow:hidden; opacity:1;
    transition:block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete; }
  .faq-item[open]::details-content{ block-size:auto; }
  .celebra{ animation:celebra 300ms var(--ease-out) both; }
  @keyframes celebra{ from{ opacity:0; transform:translateY(-6px) scale(.98); } }
}