/* Landings por país (/do/, /mx/, /co/, /cl/, /ar/, /pe/, /pa/, /py/, /ve/,
   /gt/, /hn/ y /br/). Es el mismo sistema visual de la portada en español
   (index.html, que lo lleva en línea): Anton para titulares, Barlow para
   texto, comercial en el héroe, "Así funciona", comparación, dos modos de
   operación, precios en papel, patrocinador en bloque grande, preguntas y
   contacto. Lo único propio de estas páginas va al final: el bloque del país
   (#pais), la nota fiscal del héroe y el ajuste de titulares con palabras
   largas (ESTACIONAMIENTOS, PARQUEADEROS).
   Si cambias algo aquí que también exista en index.html, cámbialo allá. */

/* Anton, autoalojada: un solo grosor; el rango 100-900 evita la negrita falsa. */
@font-face{font-family:'Anton'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/fonts/anton-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Anton'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/barlow-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/barlow-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/barlow-500-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/barlow-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/barlow-600-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/barlow-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/barlow-700-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/barlow-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/barlow-semi-condensed-600-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/barlow-semi-condensed-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --asphalt:#15181B; --asphalt-2:#1D2124; --asphalt-3:#25292D;
  --paper:#F7F4EA; --paper-2:#EFE7D0;
  --ink:#202421; --ink-soft:#3A3D3A;
  --yellow:#F5C242; --yellow-dim:#C89A2E;
  --teal:#155E63; --teal-bright:#4fb8bd; --teal-soft:rgba(21,94,99,0.12); --teal-line:rgba(21,94,99,0.35);
  --red:#D6483F;
  --mist:#9CA2AA; --mist-dim:#6B7280;
  --line: rgba(247,242,228,0.14);
  --line-ink: rgba(32,36,33,0.14);
  --font-display:"Anton","Arial Black","Helvetica Neue",Arial,sans-serif;
  --font-body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-label:"Barlow Semi Condensed","Barlow",Arial,sans-serif;
  --font-mono: ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--asphalt); color:var(--paper);
  font-family:var(--font-body); line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
@media (max-width:640px){ .wrap{padding:0 18px} }

/* textura de líneas de carril */
.lanes{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 120px, rgba(245,194,66,0.06) 120px 128px, transparent 128px 260px);
  mask-image:linear-gradient(180deg, black, transparent 85%);
}

/* ── header ── */
header{position:sticky; top:0; z-index:40; background:rgba(21,24,27,0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
/* .nav solo fija el eje vertical: el padding lateral es de .wrap. */
.nav{display:flex; align-items:center; justify-content:space-between; padding-block:16px; gap:12px}
.brand{display:flex; align-items:center; gap:10px; font-family:"Arial Black","Helvetica Neue",Arial,sans-serif; font-weight:900; font-size:19px; letter-spacing:0.5px; text-decoration:none}
.brand .p{
  width:34px; height:34px; border-radius:7px; background:var(--yellow); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:20px; flex:none;
}
.brand b{color:var(--yellow)}
nav.links{display:flex; align-items:center; gap:28px; font-size:14.5px; font-weight:600}
nav.links a{opacity:0.82; text-decoration:none}
nav.links a:hover{opacity:1; color:var(--yellow)}
.lang-switch{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-family:var(--font-label); font-weight:600; font-size:12.5px;
  background:rgba(245,194,66,0.09); border:1px solid rgba(245,194,66,0.3); padding:6px 12px; border-radius:100px;
}
.lang-switch b{color:var(--yellow)}
.lang-switch a{color:var(--mist); text-decoration:none}
.lang-switch a:hover{color:var(--yellow)}
nav.links .lang-switch a{opacity:1}
.cta-small{
  display:inline-flex; align-items:center; min-height:44px;
  background:var(--yellow); color:var(--ink); font-weight:800; font-size:14px;
  padding:10px 18px; border-radius:7px; text-decoration:none; white-space:nowrap;
}
.login-link{display:inline-flex; align-items:center; min-height:44px; color:var(--mist); font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap}
.login-link:hover{color:var(--yellow)}

/* ── botón hamburguesa + panel ──
   Corta en 1180 y no en 1060 como la portada: con el país en el header (más
   ancho que ES · EN · PT) la fila no cabe entre 1061 y 1160 y los últimos
   enlaces quedaban fuera de la pantalla. */
.menu-toggle{
  display:none; width:38px; height:38px; flex:none; position:relative; cursor:pointer;
  background:rgba(245,194,66,0.09); border:1px solid rgba(245,194,66,0.3); border-radius:8px;
}
.menu-toggle-bars{ position:absolute; left:9px; right:9px; height:2px; background:var(--yellow); border-radius:2px; transition:transform 0.22s ease, opacity 0.22s ease, top 0.22s ease }
.menu-toggle-bars::before, .menu-toggle-bars::after{
  content:''; position:absolute; left:0; right:0; height:2px; background:var(--yellow);
  border-radius:2px; transition:transform 0.22s ease, opacity 0.22s ease, top 0.22s ease;
}
.menu-toggle-bars{ top:18px }
.menu-toggle-bars::before{ top:-7px }
.menu-toggle-bars::after{ top:7px }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars{ background:transparent }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before{ top:0; transform:rotate(45deg) }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after{ top:0; transform:rotate(-45deg) }

.mobile-nav{ position:relative; display:none; background:var(--ink) }
.mobile-nav.open{ display:block; border-bottom:1px solid var(--line) }
.mobile-nav .lanes{ opacity:0.6 }
.mobile-nav-links{ position:relative; display:flex; flex-direction:column; padding:6px 24px 0 }
.mobile-nav-links a{
  color:var(--mist); text-decoration:none; font-weight:700; font-size:16px;
  padding:14px 4px; border-bottom:1px solid var(--line); border-left:3px solid transparent;
}
.mobile-nav-links a:hover, .mobile-nav-links a:focus-visible{
  color:var(--yellow); border-left-color:var(--yellow); padding-left:12px;
}
.mobile-nav-lang{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px 20px; font-size:13px; color:var(--mist);
}
@media (max-width:1180px){
  nav.links > *{display:none}
  .menu-toggle{display:flex; align-items:center; justify-content:center}
}
@media (min-width:1181px){ .mobile-nav.open{display:none} }
@media (prefers-reduced-motion:reduce){ .menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after{ transition:none } }
/* En el teléfono la marca baja a su fila y "Iniciar sesión" + "Crear cuenta" caben en la de abajo. */
@media (max-width:480px){
  .nav{flex-wrap:wrap; row-gap:10px}
  .brand{flex:1 1 100%}
  .login-link{font-size:13px}
}

/* ── hero ── */
.hero{position:relative; padding:76px 0 96px; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url('/img/hero-lot.webp') center 40%/cover no-repeat;
  opacity:.28; filter:saturate(.85);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(105deg, var(--asphalt) 0%, rgba(21,24,27,0.94) 30%, rgba(21,24,27,0.55) 55%, rgba(21,24,27,0.22) 78%, rgba(21,24,27,0.35) 100%),
    linear-gradient(180deg, transparent 55%, var(--asphalt) 100%);
}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; position:relative; z-index:2}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:64px} }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-label); font-weight:600; font-size:12.5px;
  letter-spacing:0.06em; color:var(--yellow); background:rgba(245,194,66,0.09);
  border:1px solid rgba(245,194,66,0.3); padding:6px 12px; border-radius:100px; margin-bottom:22px;
}
.eyebrow::before{content:"●"; font-size:8px}
h1{
  font-family:var(--font-display); font-weight:900; font-size:clamp(40px,6vw,64px);
  line-height:0.98; letter-spacing:-0.01em; margin:0 0 22px; text-transform:uppercase;
}
h1 em{font-style:normal; color:var(--paper); text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:4px; text-underline-offset:6px}
.lede{font-size:18.5px; color:var(--mist); max-width:490px; margin:0 0 34px}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:38px}
.btn{
  font-weight:800; font-size:15px; padding:14px 26px; border-radius:8px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--yellow); color:var(--ink)}
.btn-primary:hover{background:#ffd35e}
.btn-ghost{border-color:var(--line); color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper)}
.trust{font-family:var(--font-label); font-weight:600; font-size:12.5px; color:var(--mist); letter-spacing:0.02em}
.trust b{color:var(--paper)}

/* ── secciones ── */
section{padding:88px 0}
.section-head{max-width:640px; margin:0 0 52px}
.kicker{font-family:var(--font-label); font-weight:600; font-size:12.5px; color:var(--yellow); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:12px; display:block}
h2{font-family:var(--font-display); font-weight:900; font-size:clamp(28px,4vw,40px); text-transform:uppercase; line-height:1.05; margin:0 0 14px}
/* Si el titular no cabe, cede el tamaño, nunca la palabra. */
h1, h2, .section-title{hyphens:none; -webkit-hyphens:none; overflow-wrap:normal; word-break:normal}
.section-head p{color:var(--mist); font-size:16.5px; margin:0}

/* ── cobro con tarjeta en terminal Point (MX, AR, CL, BR): texto + la imagen de
   img/cobro-tarjeta-fixture.html. El guion de cada punto es el teal del arco
   que une los dos montos en la imagen. ── */
.tarjeta{border-top:1px solid var(--line)}
.tarjeta-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center}
.tarjeta-lede{color:var(--mist); font-size:16.5px; margin:0 0 26px; max-width:52ch}
.tarjeta-puntos{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:14px}
.tarjeta-puntos li{position:relative; padding-left:22px; color:var(--mist); font-size:16px; line-height:1.5; max-width:52ch}
.tarjeta-puntos li::before{content:""; position:absolute; left:0; top:.68em; width:11px; height:2px; background:var(--teal-bright)}
.tarjeta-puntos b{color:var(--paper); font-weight:700}
.tarjeta-foto{margin:0}
.tarjeta-foto img,.tarjeta-foto video{width:100%; height:auto; background:#15181B; display:block; border-radius:14px; box-shadow:0 30px 60px -28px rgba(0,0,0,.8)}
@media (max-width:900px){ .tarjeta-grid{grid-template-columns:1fr; gap:36px} }

/* ── así funciona: foto + la pantalla real que la acompaña ── */
.como{border-top:1px solid var(--line)}
.como-pasos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; counter-reset:paso}
.como-paso{counter-increment:paso}
.como-foto{position:relative; margin:0 0 30px; aspect-ratio:16/10}
.como-foto > img:first-child{width:100%; height:100%; object-fit:cover; border-radius:14px; display:block}
.como-app{position:absolute; right:-10px; bottom:-22px; width:34%; height:auto; border-radius:10px; border:3px solid var(--asphalt); box-shadow:0 18px 40px -12px rgba(0,0,0,.7)}
.como-paso h3{display:flex; align-items:baseline; gap:12px; font-family:var(--font-display); font-weight:400; font-size:28px; line-height:1.05; text-transform:uppercase; margin:0 0 10px}
.como-paso h3::before{content:counter(paso); font-size:44px; line-height:.8; color:var(--yellow)}
.como-paso p{color:var(--mist); font-size:16px; line-height:1.55; margin:0; max-width:34ch}
@media (max-width:900px){
  .como-pasos{grid-template-columns:1fr; gap:48px}
  .como-app{width:30%; right:10px}
}

/* ── comparación: sistema tradicional vs ParkingPro Cloud (sección clara) ── */
#comparacion{background:var(--paper-2); color:var(--ink); border-top:1px solid var(--line-ink); border-bottom:1px solid var(--line-ink)}
#comparacion .kicker{color:var(--teal)}
#comparacion h2{color:var(--ink)}
#comparacion .section-head p{color:var(--ink-soft)}
.vs-grid{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line-ink); border-radius:16px; overflow:hidden; box-shadow:0 20px 46px -26px rgba(32,36,33,0.4)}
@media (max-width:760px){ .vs-grid{grid-template-columns:1fr} }
.vs-col{padding:34px 30px; background-color:var(--asphalt-2)}
.vs-col.cloud{border-left:1px solid var(--line)}
.vs-foto{display:block; width:calc(100% + 60px); max-width:none; height:auto; aspect-ratio:16/9; object-fit:cover; margin:-34px -30px 26px}
@media (max-width:760px){ .vs-col.cloud{border-left:none; border-top:1px solid var(--line)} }
.vs-title{font-family:var(--font-display); font-size:15px; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:18px}
.vs-title.old{color:var(--mist)}
.vs-title.new{color:var(--teal-bright)}
.vs-list{list-style:none; margin:0 0 18px; padding:0; font-size:14.5px; color:var(--mist); display:flex; flex-direction:column; gap:10px}
.vs-list li{display:flex; gap:9px; align-items:flex-start}
.vs-col.old .vs-list li::before{content:"✕"; color:var(--red); flex:none; font-weight:700}
.vs-col.cloud .vs-list li{color:var(--paper)}
.vs-col.cloud .vs-list li::before{content:"✓"; color:var(--teal-bright); flex:none; font-weight:700}
.vs-cost{font-family:var(--font-label); font-weight:600; font-size:13px; color:var(--mist); padding-top:14px; border-top:1px dashed var(--line)}
.vs-cost b{font-size:22px; display:block; margin-top:3px; font-family:var(--font-display)}
.vs-col.old .vs-cost b{color:var(--paper)}
.vs-col.cloud .vs-cost b{color:var(--teal-bright)}

/* ── dos modos: una persona / por operarios ── */
#operadores{background:var(--asphalt-3); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
#operadores .kicker{color:var(--teal-bright)}
.modo-solo{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:36px; align-items:center; margin:0 0 56px}
.modo-solo img{width:100%; height:auto; border-radius:16px; display:block}
.modo-solo h3, .modo-titulo{font-family:var(--font-display); font-weight:400; font-size:30px; text-transform:uppercase; margin:0 0 10px}
.modo-solo p{color:var(--mist); font-size:17px; margin:0; max-width:40ch}
.modo-nota{color:var(--mist); margin:0 0 24px; max-width:60ch}
@media (max-width:900px){ .modo-solo{grid-template-columns:1fr} }
/* Las cuatro áreas: entrada -> cobros -> salida encadenadas, el supervisor fuera
   de la cadena. Los permisos al pie son la matriz real que aplica el servidor. */
.chain{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.post{position:relative; display:flex; flex-direction:column; background:var(--asphalt-2); border:1px solid var(--line); border-radius:18px; padding:0 22px 22px}
.post-shot{position:relative; margin:0 -22px 20px; aspect-ratio:16/9; background:linear-gradient(140deg,#333d42,#171c20); border-radius:17px 17px 0 0}
.post-shot img{width:100%; height:100%; object-fit:cover; border-radius:17px 17px 0 0}
.post-tag{align-self:flex-start; font-family:var(--font-label); font-weight:600; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal-bright); background:var(--teal-soft); border:1px solid var(--teal-line); padding:5px 11px; border-radius:100px; margin-bottom:14px}
.post h3{font-size:18px; margin:0 0 8px; letter-spacing:-0.01em}
.post p{color:var(--mist); font-size:14px; line-height:1.55; margin:0 0 22px}
.caps-label{font-family:var(--font-label); font-weight:600; font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--mist); margin:auto 0 12px; padding-top:18px; border-top:1px dashed var(--line)}
.post-caps{list-style:none; margin:0; padding:0; font-family:var(--font-label); font-weight:600; font-size:12.5px; display:flex; flex-direction:column; gap:9px}
@media (min-width:701px){
  .post h3{min-height:3em}
  .post-caps{min-height:94px}
}
.post-caps li{display:flex; gap:9px; align-items:flex-start; line-height:1.35}
.post-caps li::before{flex:none; width:12px; text-align:center; font-weight:700}
.post-caps li.on{color:var(--paper)}
.post-caps li.on::before{content:"\2713"; color:var(--teal-bright)}
.post-caps li.off{color:var(--mist)}
.post-caps li.off::before{content:"\2715"; color:var(--red)}
@media (min-width:1101px){
  .post + .post:not(.post-watch) .post-shot::after{
    content:""; position:absolute; top:50%; left:-20px; width:20px; height:2px; z-index:2;
    background-image:repeating-linear-gradient(90deg, var(--yellow-dim) 0 4px, transparent 4px 9px);
  }
}
.post-watch{border-style:dashed; border-color:rgba(247,242,228,0.26)}
.post-watch .post-tag{color:var(--mist); background:transparent; border-color:var(--line)}
.area-notes{margin-top:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.area-note{border:1px solid var(--line); border-radius:16px; padding:22px}
.area-note b{display:block; font-family:var(--font-label); font-weight:600; font-size:11.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--teal-bright); margin-bottom:9px}
.area-note p{margin:0; color:var(--mist); font-size:14px; line-height:1.55}
@media (max-width:1100px){ .chain{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px} }
@media (max-width:860px){ .area-notes{grid-template-columns:1fr} }
@media (max-width:640px){ .chain{grid-template-columns:1fr} }
@media (max-width:480px){
  .post{padding:0 18px 20px}
  .post-shot{margin:0 -18px 18px}
}
/* En el celular las cuatro áreas van en carrusel: apiladas medían 2,000 px. */
@media (max-width:700px){
  #operadores .chain{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -18px; padding:0 18px 8px; scroll-padding:0 18px; scrollbar-width:none}
  #operadores .chain::-webkit-scrollbar{display:none}
  #operadores .chain > .post{flex:0 0 84%; scroll-snap-align:start}
}

/* ── precios: la sección es el papel del ticket ── */
#precios{background:var(--paper); color:var(--ink); position:relative}
#precios::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
  background-image:repeating-linear-gradient(90deg, transparent 0 9px, rgba(27,29,27,0.3) 9px 10px);
}
#precios .kicker{color:#705300}
#precios h2{color:var(--ink)}
.landing-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.landing-plan{position:relative;background:var(--asphalt-2);border:1px solid var(--line);border-radius:18px;padding:24px 20px;display:flex;flex-direction:column;gap:10px;min-height:230px;color:var(--paper)}
.landing-plan.featured{border-color:var(--yellow);background-image:linear-gradient(180deg,rgba(245,194,66,.14),transparent 65%)}
.landing-plan b{font-family:var(--font-label);font-weight:600;font-size:12px;letter-spacing:.08em;color:var(--yellow)}
.landing-plan strong{font-family:var(--font-display);font-size:28px;color:var(--paper)}
.landing-plan strong small{font-family:var(--font-label);font-size:11px;color:var(--mist);font-weight:400}
.landing-plan span{font-size:13px;color:var(--mist);line-height:1.45;min-height:58px}
.landing-plan ul{list-style:none;padding:0;margin:0 0 14px;color:var(--mist);font-size:12px;line-height:1.45;flex:1}
.landing-plan li{padding:5px 0;border-top:1px solid var(--line)}
.landing-plan li:first-child{border-top:0}
.landing-plan li::before{content:"✓";color:var(--yellow);margin-right:7px;font-weight:700}
.landing-plan .btn{margin-top:auto;width:100%;justify-content:center;font-size:12px;padding:11px 10px}
.plans-note{margin:18px 0 0;color:var(--ink-soft);font-size:13.5px;line-height:1.55;max-width:74ch}
/* Solo el Starter trae prueba. Anidada para ganarle a .landing-plan span. */
.landing-plan .plan-trial{align-self:flex-start;min-height:0;margin:0;font-family:var(--font-label);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);background:rgba(245,194,66,.14);border:1px solid rgba(245,194,66,.42);border-radius:999px;padding:4px 10px;line-height:1.3}
.landing-plan .plan-flag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);min-height:0;margin:0;font-family:var(--font-label);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);background:var(--yellow);border-radius:999px;padding:4px 12px;line-height:1.3;white-space:nowrap}
@media (max-width:980px){.landing-plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.landing-plans{grid-template-columns:1fr}}

/* ── extras: el patrocinador en bloque grande, con el ticket a la vista ── */
.extras{padding:0 0 88px}
.extras-grid{display:grid; grid-template-columns:1fr; gap:20px}
.extra{background:var(--asphalt-2); border:1px solid var(--line); border-radius:16px; padding:26px 28px; display:flex; flex-direction:column; gap:10px}
#patrocinador.extra{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:48px; padding:44px 48px; overflow:hidden}
#patrocinador.extra img{width:240px; height:auto; border-radius:12px; box-shadow:0 24px 50px -18px rgba(0,0,0,.75); transform:rotate(2deg); margin:-8px 0}
#patrocinador h3{font-size:clamp(28px,3.6vw,40px); line-height:1.02; margin-bottom:6px}
#patrocinador p{font-size:17px; line-height:1.55; max-width:52ch}
.extra-texto{display:flex; flex-direction:column; gap:12px}
@media (max-width:700px){
  #patrocinador.extra{grid-template-columns:1fr; padding:30px 22px; gap:28px}
  #patrocinador.extra img{width:min(230px,70%); justify-self:center; transform:none}
}
.extra h3{font-family:var(--font-display); font-weight:400; font-size:24px; text-transform:uppercase; margin:0}
.extra p{color:var(--mist); margin:0}
.extra-pie{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline; margin-top:auto}
.extra-pie b{color:var(--yellow); font-weight:600}
.extra-pie a{color:var(--paper); font-weight:600}

/* ── FAQ: acordeón nativo <details> ── */
.faq-list{display:flex; flex-direction:column; gap:10px; max-width:760px}
.faq-list details{background:var(--asphalt-2); border:1px solid var(--line); border-radius:14px; padding:18px 22px}
.faq-list summary{cursor:pointer; font-weight:700; font-size:15.5px; list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{content:"+"; color:var(--yellow); font-family:var(--font-display); margin-right:12px; display:inline-block; width:14px}
.faq-list details[open] summary::before{content:"–"}
.faq-list details p{color:var(--mist); font-size:14.5px; line-height:1.6; margin:12px 0 2px 26px}
.faq-list details p a{color:var(--yellow); text-decoration:none}
.faq-list details p a:hover{text-decoration:underline}

/* ── contacto (sección clara antes del cierre) ── */
#contacto{background:var(--paper); color:var(--ink)}
#contacto .kicker{color:#705300}
#contacto h2{color:var(--ink)}
#contacto .section-head p{color:var(--ink-soft)}
.contact-band{background:var(--paper-2); border:1px solid var(--line-ink); border-radius:20px; padding:44px; max-width:600px; margin:0 auto}
@media (max-width:600px){ .contact-band{padding:28px 24px} }
.contact-other{max-width:600px; margin:64px auto 0; padding-top:40px; border-top:1px solid var(--line-ink); text-align:center}
.contact-other summary{cursor:pointer; font-weight:600; padding:10px 0}
.contact-other > p{color:var(--ink-soft); font-size:14px; margin:0 0 22px}
.contact-emails{list-style:none; padding:0; margin:0; font-size:13.5px; text-align:left}
.contact-emails li{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; padding:13px 0; border-top:1px solid var(--line-ink)}
.contact-emails li:first-child{border-top:none}
.contact-emails b{color:var(--ink); font-weight:600}
.contact-emails a{color:var(--teal); text-decoration:none; font-family:var(--font-label); font-weight:600; font-size:12.5px}
.contact-emails a:hover{text-decoration:underline}
.contact-form{display:flex; flex-direction:column; gap:16px}
.contact-field{display:flex; flex-direction:column; gap:6px}
.contact-field label{font-size:12px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em}
.contact-field input, .contact-field select, .contact-field textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line-ink);
  background:#fff; color:var(--ink); font:inherit; font-size:14.5px;
}
.contact-field input::placeholder, .contact-field textarea::placeholder{color:var(--mist-dim)}
.contact-field textarea{min-height:120px; resize:vertical; line-height:1.5}
.contact-field select{color:var(--ink)}
.contact-field select option{background:#fff; color:var(--ink)}
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus{outline:none; border-color:var(--teal)}
.contact-form .btn{align-self:flex-start}
.contact-status{font-size:13.5px; min-height:18px; margin:0}
.contact-status.ok{color:#1c7a3e}
.contact-status.err{color:var(--red)}

/* ── banda final ── */
.cta-band{background-color:var(--yellow); background-image:linear-gradient(rgba(245,194,66,0.90), rgba(245,194,66,0.94)), url('/img/cta-plaza.webp'); background-size:cover; background-position:center; color:var(--ink); border-radius:20px; padding:56px 48px; text-align:center; position:relative; overflow:hidden}
/* "ESTACIONAMIENTO?" pide 11.5 veces el cuerpo: el techo en vw lo hace caber
   entero en un teléfono de 320 y deja de aplicar en escritorio. */
.cta-band h2{color:var(--ink); margin-bottom:12px; font-size:min(clamp(28px,4vw,40px), 6.5vw)}
.cta-band p{color:var(--ink); font-weight:700; font-size:17.5px; line-height:1.5; margin:0 0 30px; max-width:520px; margin-left:auto; margin-right:auto}
.cta-band .btn-primary{background:var(--ink); color:var(--paper)}
.cta-band .btn-primary:hover{background:#000}
@media (max-width:480px){ .cta-band{padding:44px 24px; border-radius:16px} }

/* ── pie ── */
footer{border-top:1px solid var(--line); padding:48px 0 32px}
.foot-grid{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px}
.foot-cols{display:flex; flex-direction:column; gap:12px; align-items:flex-end}
.foot-links{display:flex; flex-wrap:wrap; gap:10px 26px; font-size:13.5px; color:var(--mist)}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--yellow)}
.foot-bottom{font-family:var(--font-label); font-weight:600; font-size:12px; color:var(--mist); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; border-top:1px solid var(--line); padding-top:22px}
@media (max-width:640px){ .foot-cols{align-items:flex-start} }

/* Guarda de desbordamiento a 320: las celdas del grid conservan min-width:auto. */
@media (max-width:380px){
  .hero-grid>*{min-width:0}
  .cta-small{font-size:12px; padding:8px 10px}
  .foot-links{width:100%; min-width:0; flex-wrap:wrap; gap:12px 18px}
}

@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
  .reveal.in{opacity:1; transform:none}
}
:focus-visible{outline:2px solid var(--yellow); outline-offset:2px}

/* ════ Propio de las landings por país ════ */

/* Titulares con una palabra larga (ESTACIONAMIENTOS pide 10.9 veces el cuerpo,
   PARQUEADEROS 8.4): con el tamaño de la portada se salían de su columna. Por
   debajo de 900 px el héroe es una columna y manda el ancho de la pantalla;
   por encima, la columna de texto del héroe con video. */
h1.largo{font-size:clamp(26px,8vw,46px); line-height:1.02; letter-spacing:-0.012em}
@media (min-width:901px){ h1.largo{font-size:clamp(30px,3.4vw,46px)} }

/* La nota fiscal del país, debajo de la línea de confianza del héroe. */
.fiscal-nota{margin:12px 0 0; color:var(--mist); font-size:14px; line-height:1.5; max-width:52ch}

/* El bloque del país: la facturación local, el cuadre del turno o lo que la
   página ya contaba de su mercado, en el mismo lenguaje de tarjeta que el resto. */
.pais{border-top:1px solid var(--line)}
.pais .kicker{color:var(--teal-bright)}
.pais-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.pais-card{background:var(--asphalt-2); border:1px solid var(--line); border-radius:16px; padding:24px}
.pais-card h3{font-size:18px; line-height:1.3; margin:0 0 8px; color:var(--paper)}
.pais-card p{margin:0; color:var(--mist); font-size:14.5px; line-height:1.6}
.pais-mas{margin-top:40px; max-width:74ch}
.pais-mas h3{font-family:var(--font-display); font-weight:400; font-size:24px; text-transform:uppercase; margin:28px 0 10px}
.pais-mas h3:first-child{margin-top:0}
.pais-mas p{color:var(--mist); font-size:15.5px; line-height:1.6; margin:0 0 14px}
.pais a, .fiscal-nota a{color:var(--yellow)}
@media (max-width:860px){ .pais-grid{grid-template-columns:1fr} }