/* ============================================================================
   CLOSIFIER · Sistema de diseño
   ---------------------------------------------------------------------------
   Los colores salen del logo, muestreados del propio fichero y no elegidos a
   ojo: cyan #01D7EB, azul #0165A4 y navy #00285B son literalmente los tres
   colores del degradado de la C, y #001C42 es el del wordmark.

   Todo son variables. Cambiar la marca entera es tocar el bloque :root.
   ========================================================================= */

:root{
  /* Marca */
  --cy:        #01D7EB;
  --cy-claro:  #4BE6F5;
  --cy-suave:  #E6FBFE;
  --az:        #0165A4;
  --az-hondo:  #00285B;
  --tinta:     #001C42;

  /* Degradado de marca. Es el de la C del logo, en ese orden. */
  --grad: linear-gradient(120deg, var(--cy) 0%, var(--az) 55%, var(--az-hondo) 100%);
  --grad-boton: linear-gradient(100deg, var(--cy) 0%, #0F8FD4 60%, var(--az) 100%);

  /* Neutros. Van con una gota de azul dentro, no son grises puros: un gris
     neutro al lado de este cyan se ve sucio. */
  --f0:  #FFFFFF;
  --f1:  #F6F9FC;
  --f2:  #EDF3F8;
  --bor: #DCE6EF;
  --bor-suave: #EAF1F7;
  --txt: #12263F;
  --txt2:#54677E;
  --txt3:#8294A9;

  /* Oscuro (hero, pie, app) */
  --n900:#04101F;
  --n850:#071A2E;
  --n800:#0B2239;
  --n700:#123152;
  --n-txt:#C9DBEA;
  --n-txt2:#8AA6C0;

  --exito:#0C9E6A;
  --aviso:#C77700;
  --error:#D63A46;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl:32px;
  --r-pill:999px;

  --som-s: 0 1px 2px rgba(0,28,66,.06), 0 2px 8px rgba(0,28,66,.05);
  --som-m: 0 2px 6px rgba(0,28,66,.06), 0 12px 32px rgba(0,28,66,.09);
  --som-g: 0 8px 24px rgba(0,28,66,.10), 0 32px 64px rgba(0,28,66,.12);
  --som-cy:0 8px 28px rgba(1,215,235,.32);

  --ancho: 1200px;
  --gutter: 24px;

  --disp: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  font-family:var(--cuerpo);
  font-size:17px;
  line-height:1.65;
  color:var(--txt);
  background:var(--f0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  font-family:var(--disp);
  color:var(--tinta);
  line-height:1.12;
  letter-spacing:-.022em;
  margin:0 0 .5em;
  font-weight:800;
}
h1{ font-size:clamp(2.4rem, 5.6vw, 4.2rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.55rem); font-weight:700; }
h4{ font-size:1.08rem; font-weight:700; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--az); text-decoration:none; }
a:hover{ color:var(--cy); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--cy);
  outline-offset:2px;
  border-radius:4px;
}

/* ── ESTRUCTURA ─────────────────────────────────────────────────────────── */
.env{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); }
.env-est{ max-width:760px; }
.secc{ padding-block:clamp(56px, 8vw, 104px); }
.secc-f1{ background:var(--f1); }
.secc-osc{ background:var(--n900); color:var(--n-txt); }
.secc-osc h2,.secc-osc h3,.secc-osc h4{ color:#fff; }

/* ── ETIQUETA SUPERIOR ──────────────────────────────────────────────────── */
/* El "SEGURIDAD QUE ACOMPAÑA" del mockup: versalitas muy espaciadas en cyan.
   Es el gesto tipográfico que más identifica a la marca. */
.etiq{
  display:inline-block;
  font-family:var(--disp);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--az);
  margin-bottom:1.1rem;
}
.etiq-cy{ color:var(--cy); }
.etiq-linea::after{
  content:''; display:block; width:38px; height:3px; margin-top:.8rem;
  background:var(--cy); border-radius:2px;
}

/* ── BOTONES ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--disp); font-size:.95rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  padding:1rem 1.9rem;
  border-radius:var(--r-pill);
  border:2px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, color .18s, border-color .18s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-p{ background:var(--grad-boton); color:#fff; box-shadow:var(--som-cy); }
.btn-p:hover{ color:#fff; box-shadow:0 12px 34px rgba(1,215,235,.42); }

.btn-s{ background:#fff; color:var(--tinta); border-color:var(--bor); box-shadow:var(--som-s); }
.btn-s:hover{ color:var(--az); border-color:var(--cy); }

.btn-f{ background:transparent; color:var(--tinta); border-color:currentColor; }
.btn-f:hover{ color:var(--az); }
.secc-osc .btn-f, .hero .btn-f{ color:#fff; }
.secc-osc .btn-f:hover, .hero .btn-f:hover{ color:var(--cy); }

.btn-g{ font-size:1.02rem; padding:1.15rem 2.3rem; }
.btn-ancho{ width:100%; }

/* ── CABECERA ───────────────────────────────────────────────────────────── */
.cab{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--bor-suave);
}
.cab-in{ display:flex; align-items:center; gap:2rem; min-height:78px; }
.cab-logo{ display:flex; align-items:center; flex:0 0 auto; }
.cab-logo img{ height:44px; width:auto; }
.cab-nav{ display:flex; align-items:center; gap:.35rem; margin-left:auto; }
.cab-nav a{
  font-family:var(--disp); font-weight:600; font-size:.95rem;
  color:var(--txt); padding:.55rem .9rem; border-radius:var(--r-s);
  position:relative;
}
.cab-nav a:hover{ color:var(--az); background:var(--f1); }
.cab-nav a.act{ color:var(--az); }
.cab-nav a.act::after{
  content:''; position:absolute; left:.9rem; right:.9rem; bottom:.1rem;
  height:2.5px; background:var(--cy); border-radius:2px;
}
.cab-acc{ display:flex; align-items:center; gap:.7rem; margin-left:.8rem; }

.cab-burger{
  display:none; background:none; border:0; padding:.5rem; cursor:pointer;
  margin-left:auto; color:var(--tinta);
}
.cab-burger svg{ width:26px; height:26px; }

@media (max-width:1000px){
  .cab-nav, .cab-acc{ display:none; }
  .cab-burger{ display:block; }
  .cab-nav.abierta{
    display:flex; flex-direction:column; align-items:stretch;
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--bor);
    padding:1rem var(--gutter) 1.4rem; gap:.2rem;
    box-shadow:var(--som-m);
  }
  .cab-nav.abierta a{ padding:.85rem .6rem; font-size:1.05rem; }
  .cab-nav.abierta a.act::after{ display:none; }
  .cab-acc.abierta{ display:flex; flex-direction:column; align-items:stretch; margin:0; }
}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  background:var(--n900); color:#fff;
  padding-block:clamp(72px, 11vw, 150px);
  isolation:isolate;
}
.hero::before{
  /* La C del logo, gigante y apenas visible, como en el mockup. */
  content:''; position:absolute; z-index:0;
  right:-6%; top:50%; transform:translateY(-50%);
  width:min(760px, 72vw); aspect-ratio:1;
  background:url('../img/isotipo.png') center/contain no-repeat;
  opacity:.07;
  pointer-events:none;
}
.hero-foto{
  position:absolute; inset:0; z-index:-1;
  background-size:cover; background-position:center 28%;
  opacity:.5;
}
.hero-foto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(95deg,
    var(--n900) 0%, rgba(4,16,31,.94) 36%, rgba(4,16,31,.55) 66%, rgba(4,16,31,.35) 100%);
}
.hero-in{ position:relative; z-index:2; max-width:660px; }
.hero h1{ color:#fff; margin-bottom:.45em; }
.hero h1 .ac{ color:var(--cy); }
.hero-bajo{
  font-size:clamp(1.05rem, 1.7vw, 1.25rem);
  color:var(--n-txt); max-width:50ch; margin-bottom:2rem;
}
.hero-btns{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.hero-pie{
  margin-top:2.2rem; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:1.6rem;
  font-size:.9rem; color:var(--n-txt2);
}
.hero-pie b{ color:#fff; font-family:var(--disp); }

/* ── REJILLAS ───────────────────────────────────────────────────────────── */
.rej{ display:grid; gap:1.4rem; }
.rej-2{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.rej-3{ grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); }
.rej-4{ grid-template-columns:repeat(auto-fit, minmax(215px, 1fr)); }
.rej-5{ grid-template-columns:repeat(auto-fit, minmax(185px, 1fr)); }

.dos-col{
  display:grid; gap:clamp(2rem, 5vw, 4.5rem);
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  align-items:center;
}

/* ── TARJETAS ───────────────────────────────────────────────────────────── */
.tj{
  background:#fff; border:1px solid var(--bor-suave);
  border-radius:var(--r-l); padding:1.9rem;
  box-shadow:var(--som-s);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.tj-viva:hover{ transform:translateY(-4px); box-shadow:var(--som-m); border-color:#CFE6F4; }
.tj h3{ margin-bottom:.45rem; }
.tj p{ color:var(--txt2); font-size:.97rem; }

.tj-ico{
  width:52px; height:52px; border-radius:15px;
  display:grid; place-items:center; margin-bottom:1.15rem;
  background:var(--cy-suave); color:var(--az);
}
.tj-ico svg{ width:26px; height:26px; stroke-width:1.8; }
.tj-ico-grad{ background:var(--grad); color:#fff; box-shadow:var(--som-cy); }

.secc-osc .tj{
  background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1);
  box-shadow:none;
}
.secc-osc .tj p{ color:var(--n-txt2); }
.secc-osc .tj-ico{ background:rgba(1,215,235,.14); color:var(--cy); }

/* ── MODES ──────────────────────────────────────────────────────────────── */
.mode{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:1.7rem 1.5rem; border-radius:var(--r-m);
  background:#fff; border:1px solid var(--bor-suave);
  box-shadow:var(--som-s);
  transition:transform .2s, box-shadow .2s, border-color .2s;
  height:100%;
}
.mode:hover{ transform:translateY(-4px); box-shadow:var(--som-m); border-color:var(--cy); }
.mode-ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--cy-suave); color:var(--az); margin-bottom:1rem;
}
.mode-ico svg{ width:24px; height:24px; stroke-width:1.8; }
.mode b{ font-family:var(--disp); font-size:1.12rem; color:var(--tinta); display:block; margin-bottom:.3rem; }
.mode span{ font-size:.92rem; color:var(--txt2); line-height:1.5; }

/* ── PASOS ──────────────────────────────────────────────────────────────── */
.pasos{ counter-reset:paso; display:grid; gap:1.2rem; }
.paso{
  display:grid; grid-template-columns:auto 1fr; gap:1.3rem; align-items:start;
  padding:1.5rem 1.7rem; background:#fff;
  border:1px solid var(--bor-suave); border-radius:var(--r-m);
}
.paso::before{
  counter-increment:paso; content:counter(paso);
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--grad); color:#fff;
  font-family:var(--disp); font-weight:800; font-size:1.05rem;
}
.paso h4{ margin-bottom:.3rem; }
.paso p{ color:var(--txt2); font-size:.96rem; margin:0; }

/* ── PRECIOS ────────────────────────────────────────────────────────────── */
.planes{
  display:grid; gap:1.6rem; align-items:stretch;
  grid-template-columns:repeat(auto-fit, minmax(310px, 1fr));
  max-width:900px; margin-inline:auto;
}
.plan{
  background:#fff; border:1.5px solid var(--bor);
  border-radius:var(--r-xl); padding:2.2rem 2rem;
  display:flex; flex-direction:column;
}
.plan-destacado{
  background:var(--n900); border-color:var(--az-hondo); color:var(--n-txt);
  position:relative; box-shadow:var(--som-g);
}
.plan-destacado h3{ color:#fff; }
.plan-cinta{
  position:absolute; top:1.4rem; right:1.4rem;
  background:var(--grad-boton); color:#fff;
  font-family:var(--disp); font-size:.68rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.4rem .85rem; border-radius:var(--r-pill);
}
.plan-precio{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(2.6rem,5vw,3.4rem); line-height:1;
  color:var(--tinta); margin:.6rem 0 .2rem;
  letter-spacing:-.03em;
}
.plan-destacado .plan-precio{ color:#fff; }
.plan-periodo{ font-size:.92rem; color:var(--txt3); margin-bottom:.4rem; }
.plan-destacado .plan-periodo{ color:var(--n-txt2); }
.plan-equiv{ font-size:.88rem; color:var(--txt3); margin-bottom:1.5rem; }
.plan-destacado .plan-equiv{ color:var(--cy); }
.plan ul{ list-style:none; padding:0; margin:0 0 1.8rem; flex:1; }
.plan li{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.5rem 0; font-size:.96rem;
  border-bottom:1px solid var(--bor-suave);
}
.plan-destacado li{ border-bottom-color:rgba(255,255,255,.08); }
.plan li:last-child{ border-bottom:0; }
.plan li svg{ width:19px; height:19px; flex:0 0 19px; margin-top:.22rem; color:var(--cy); stroke-width:2.4; }
.plan li.no{ color:var(--txt3); }
.plan li.no svg{ color:var(--bor); }

.cambia-periodo{
  display:inline-flex; background:var(--f2); border-radius:var(--r-pill);
  padding:4px; margin:0 auto 2.4rem; gap:2px;
}
.cambia-periodo button{
  border:0; background:none; cursor:pointer;
  font-family:var(--disp); font-weight:700; font-size:.88rem;
  padding:.6rem 1.4rem; border-radius:var(--r-pill);
  color:var(--txt2); transition:.18s;
}
.cambia-periodo button[aria-pressed="true"]{ background:#fff; color:var(--tinta); box-shadow:var(--som-s); }
.cambia-periodo .aho{
  font-size:.7rem; color:var(--exito); font-weight:800;
  margin-left:.4rem; letter-spacing:.04em;
}

/* ── AVISO DE SEGURIDAD ─────────────────────────────────────────────────── */
/* Lo que Closifier NO es. Tiene su propio estilo, visible y sobrio, porque
   esconderlo en letra pequeña sería exactamente lo contrario de lo que este
   producto tiene que hacer. */
.aviso-real{
  display:flex; gap:1rem; align-items:flex-start;
  background:#FFF8E9; border:1px solid #F3DFB5;
  border-left:4px solid var(--aviso);
  border-radius:var(--r-m); padding:1.2rem 1.4rem;
  font-size:.94rem; color:#6B4E12; line-height:1.55;
}
.aviso-real svg{ width:22px; height:22px; flex:0 0 22px; color:var(--aviso); margin-top:.15rem; }
.aviso-real b{ color:#4A3608; }
.secc-osc .aviso-real{
  background:rgba(199,119,0,.1); border-color:rgba(243,223,181,.28);
  color:#F0DCB4;
}
.secc-osc .aviso-real b{ color:#fff; }

/* ── TELÉFONOS DEL PAÍS ─────────────────────────────────────────────────── */
.tels{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.tel{
  display:flex; align-items:center; gap:1rem;
  background:#fff; border:1px solid var(--bor-suave);
  border-radius:var(--r-m); padding:1.1rem 1.3rem;
  text-decoration:none; color:inherit;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.tel:hover{ border-color:var(--cy); transform:translateY(-2px); box-shadow:var(--som-s); color:inherit; }
.tel-num{
  font-family:var(--disp); font-weight:800; font-size:1.5rem;
  color:var(--tinta); line-height:1; letter-spacing:-.02em;
}
.tel-et{ font-size:.85rem; color:var(--txt2); line-height:1.4; }
.tel-cerrado{ opacity:.62; }
.tel-cerrado .tel-num{ color:var(--txt3); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{ max-width:800px; margin-inline:auto; }
.faq details{
  background:#fff; border:1px solid var(--bor-suave);
  border-radius:var(--r-m); margin-bottom:.8rem; overflow:hidden;
}
.faq details[open]{ border-color:#CFE6F4; box-shadow:var(--som-s); }
.faq summary{
  cursor:pointer; padding:1.2rem 1.5rem; list-style:none;
  font-family:var(--disp); font-weight:700; font-size:1.03rem;
  color:var(--tinta); display:flex; justify-content:space-between; gap:1rem;
  align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; width:11px; height:11px; flex:0 0 11px;
  border-right:2.5px solid var(--az); border-bottom:2.5px solid var(--az);
  transform:rotate(45deg); transition:transform .22s; margin-top:-4px;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:4px; }
.faq .resp{ padding:0 1.5rem 1.4rem; color:var(--txt2); font-size:.97rem; }

/* ── FORMULARIOS ────────────────────────────────────────────────────────── */
.campo{ margin-bottom:1.1rem; }
.campo label{
  display:block; font-family:var(--disp); font-weight:600;
  font-size:.9rem; color:var(--tinta); margin-bottom:.4rem;
}
.campo .ayuda{ font-size:.84rem; color:var(--txt3); margin-top:.35rem; }
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],input[type=search],input[type=url],input[type=datetime-local],
select,textarea{
  width:100%; padding:.85rem 1rem;
  font-family:var(--cuerpo); font-size:1rem; color:var(--txt);
  background:#fff; border:1.5px solid var(--bor); border-radius:var(--r-s);
  transition:border-color .16s, box-shadow .16s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--cy);
  box-shadow:0 0 0 4px rgba(1,215,235,.16);
}
textarea{ min-height:130px; resize:vertical; }
select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2354677E' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 1rem center;
  padding-right:2.6rem;
}

.form-linea{ display:flex; gap:.7rem; flex-wrap:wrap; }
.form-linea input{ flex:1 1 240px; }

/* ── MENSAJES ───────────────────────────────────────────────────────────── */
.msg{
  padding:.95rem 1.2rem; border-radius:var(--r-s);
  margin-bottom:1.1rem; font-size:.95rem;
  border:1px solid; display:flex; gap:.7rem; align-items:flex-start;
}
.msg-ok{    background:#EBFAF3; border-color:#B9E8D4; color:#075B3E; }
.msg-error{ background:#FDEEEF; border-color:#F5C8CC; color:#8C1B25; }
.msg-info{  background:var(--cy-suave); border-color:#B6E9F3; color:#065971; }

/* ── PIE ────────────────────────────────────────────────────────────────── */
.pie{ background:var(--n900); color:var(--n-txt2); padding-block:4rem 2rem; font-size:.93rem; }
.pie-rej{
  display:grid; gap:2.4rem;
  grid-template-columns:1.6fr repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom:2.8rem;
}
.pie img.pie-logo{ height:40px; width:auto; margin-bottom:1.1rem; }
.pie h4{ color:#fff; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem; }
.pie ul{ list-style:none; padding:0; margin:0; }
.pie li{ margin-bottom:.55rem; }
.pie a{ color:var(--n-txt2); }
.pie a:hover{ color:var(--cy); }
.pie-bajo{
  border-top:1px solid rgba(255,255,255,.1); padding-top:1.6rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  align-items:center; font-size:.86rem;
}

/* ── SELECTOR DE PAÍS ───────────────────────────────────────────────────── */
.paises{ position:relative; }
.paises-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:none; border:1px solid rgba(255,255,255,.2);
  color:var(--n-txt2); cursor:pointer;
  padding:.5rem .9rem; border-radius:var(--r-pill);
  font-family:var(--cuerpo); font-size:.88rem;
}
.paises-btn:hover{ border-color:var(--cy); color:#fff; }
.paises-lista{
  position:absolute; bottom:calc(100% + .6rem); left:0; z-index:40;
  background:#fff; border:1px solid var(--bor); border-radius:var(--r-m);
  box-shadow:var(--som-g); padding:.5rem; min-width:230px;
  max-height:340px; overflow-y:auto;
  display:none;
}
.paises-lista.abierta{ display:block; }
.paises-lista a{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.55rem .8rem; border-radius:var(--r-s);
  color:var(--txt); font-size:.92rem;
}
.paises-lista a:hover{ background:var(--f1); color:var(--az); }
.paises-lista a.act{ background:var(--cy-suave); color:var(--az); font-weight:600; }
.paises-lista .mon{ color:var(--txt3); font-size:.85rem; }

/* ── PLACAS DE TIENDA ───────────────────────────────────────────────────── */
.placas{ display:flex; flex-wrap:wrap; gap:.8rem; }
.placa{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.6rem 1.2rem .6rem 1rem;
  border-radius:14px; text-decoration:none;
  background:#000; color:#fff; border:1px solid rgba(255,255,255,.2);
  line-height:1.1; transition:transform .16s, box-shadow .16s;
}
.placa:hover{ transform:translateY(-2px); color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.28); }
.placa svg{ width:25px; height:25px; flex:0 0 25px; }
.placa small{ display:block; font-size:.66rem; opacity:.82; letter-spacing:.02em; }
.placa b{ display:block; font-family:var(--disp); font-size:1rem; font-weight:700; }
.placa-clara{ background:#fff; color:var(--tinta); border-color:var(--bor); }
.placa-clara:hover{ color:var(--tinta); }

/* ── UTILIDADES ─────────────────────────────────────────────────────────── */
.centro{ text-align:center; }
.centro .etiq-linea::after{ margin-inline:auto; }
.medio{ max-width:660px; margin-inline:auto; }
.apilar{ display:flex; flex-direction:column; }
.gap-s{ gap:.6rem } .gap-m{ gap:1.2rem } .gap-g{ gap:2rem }
.mt-s{ margin-top:.8rem } .mt-m{ margin-top:1.6rem } .mt-g{ margin-top:3rem }
.mb-0{ margin-bottom:0 } .mb-m{ margin-bottom:1.6rem } .mb-g{ margin-bottom:3rem }
.txt2{ color:var(--txt2) } .txt3{ color:var(--txt3) }
.peq{ font-size:.88rem } .mini{ font-size:.8rem }
.fila{ display:flex; flex-wrap:wrap; align-items:center; }
.solo-lector{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.saltar{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--tinta); color:#fff; padding:.9rem 1.4rem;
  border-radius:0 0 var(--r-s) 0;
}
.saltar:focus{ left:0; color:#fff; }

/* ── MODO APP ───────────────────────────────────────────────────────────── */
/* Cuando <html class="es-app">. La cabecera y el pie de la web sobran dentro
   de la app; lo que manda es la barra de pestañas de abajo. Y el padding de
   las áreas seguras del iPhone: sin él, la barra queda debajo de la franja
   del gesto de inicio y no se puede pulsar el último botón. */
.es-app .cab, .es-app .pie, .es-app .solo-web{ display:none !important; }
.es-app body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
.es-app .secc{ padding-block:2rem; }
.solo-app{ display:none; }
.es-app .solo-app{ display:revert; }

.barra-app{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; background:rgba(255,255,255,.97);
  backdrop-filter:blur(16px) saturate(1.6);
  border-top:1px solid var(--bor);
  padding-bottom:env(safe-area-inset-bottom);
}
.es-app .barra-app{ display:flex; }
.barra-app a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:.55rem .2rem .45rem; color:var(--txt3);
  font-size:.66rem; font-weight:600; font-family:var(--disp);
  letter-spacing:.02em;
}
.barra-app a.act{ color:var(--az); }
.barra-app svg{ width:23px; height:23px; stroke-width:1.9; }

/* ── BOTONES QUE OCUPAN TODO EL ANCHO ───────────────────────────────────── */
/* .btn lleva white-space:nowrap, que está bien para un botón que se ajusta a
   su texto y mal para uno que ocupa el ancho de la pantalla: en un móvil de
   400px el texto del SOS se salía por la derecha y se leía "AVISAR A MI CIRCLE
   AHOR". Un botón de emergencia con el texto cortado es exactamente lo que no
   puede pasar, así que aquí se deja partir en dos líneas. */
.btn-ancho{
  white-space:normal;
  text-align:center;
  line-height:1.3;
}

/* ── TAMAÑO DE LOS ICONOS, DE UNA VEZ Y PARA TODO ───────────────────────── */
/* Un SVG no tiene tamaño propio: dentro de un contenedor flex se estira hasta
   ocupar lo que pueda. Salió dos veces en sitios distintos (un triángulo de
   aviso de cuatrocientos píxeles en la pantalla de mercados, y otro dentro del
   botón de emergencias de la página de seguimiento), así que en vez de
   parchear caso a caso se pone aquí la regla para todos los sitios donde
   conviven un SVG y texto.

   Se usa `em` y no píxeles para que el icono crezca con el texto del botón:
   así un .btn-g grande no sale con un icono enano al lado. */
.btn svg, .bt svg, .tel svg, .placa svg{
  width:1.15em; height:1.15em; flex:0 0 auto;
}
.btn-g svg{ width:1.1em; height:1.1em; }
.paises-btn svg{ width:16px; height:16px; flex:0 0 16px; }
.plan li svg{ width:19px; height:19px; flex:0 0 19px; }

/* ── ICONOS DENTRO DE LOS MENSAJES ──────────────────────────────────────── */
/* Sin esto, un SVG dentro de un .msg (que es flex) se estira hasta ocupar la
   caja entera: en la pantalla de mercados salía un triángulo de aviso de
   cuatrocientos píxeles encima de cada país. Los SVG no tienen tamaño propio,
   así que hay que dárselo siempre que vivan dentro de un contenedor flexible. */
.msg svg{ width:20px; height:20px; flex:0 0 20px; margin-top:.15rem; }
.aviso-real svg{ width:22px; height:22px; flex:0 0 22px; }
.vacio svg{ width:44px; height:44px; flex:none; margin-inline:auto; }
.suelta svg{ width:40px; height:40px; margin:0 auto; color:var(--az); }