/* =========================================================
   Rentas de Auto — selector de país (Hertz · Dollar · Thrifty)
   Sitio estático, sin dependencias de build
   ========================================================= */

:root{
  --yellow:#FDC305;
  --yellow-deep:#F0B900;
  --yellow-soft:#FFF0B8;
  --ink:#141414;
  --ink-soft:#3D3D3D;
  --muted:#6E6E76;
  --card:#FFFFFF;
  --tile-line:#EFEFF2;
  --arrow:#F5C400;
  --radius-card:30px;
  --radius-tile:18px;
  --h:"Poppins","Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --t:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--t);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
}

/* ---------- Foto de fondo ---------- */
.scene{
  position:fixed;
  inset:0;
  z-index:-1;
  background:var(--yellow) url("../img/hero.jpg") left bottom / cover no-repeat;
  pointer-events:none;
}

/* ---------- Contenedor ---------- */
.shell{
  width:100%;
  max-width:1460px;
  margin:0 auto;
  padding:clamp(20px,2.6vw,34px) clamp(18px,3.4vw,48px) clamp(20px,2.6vw,34px);
  flex:1;
  display:flex;
  flex-direction:column;
}

/* ---------- Barra superior ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.brands{
  display:flex;
  align-items:center;
  gap:clamp(13px,1.7vw,26px);
}
.brands img{
  height:clamp(23px,2.3vw,33px);
  width:auto;
  display:block;
}

/* selector de idioma */
.lang{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--t);
  font-size:15px;
  font-weight:600;
  color:var(--ink);
}
.lang svg{width:19px;height:19px;flex:none}
.lang select{
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:0;
  font:inherit;
  color:inherit;
  padding:6px 24px 6px 2px;
  cursor:pointer;
  border-radius:8px;
}
.lang select:focus-visible{outline:2px solid rgba(0,0,0,.55);outline-offset:2px}
.lang .chev{
  position:absolute;
  right:4px;
  width:13px;height:13px;
  pointer-events:none;
}

/* ---------- Layout principal ---------- */
.main{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);
  align-items:start;
  gap:clamp(28px,4vw,58px);
  padding:clamp(18px,2.4vw,34px) 0 clamp(16px,2.4vw,32px);
}
/* el texto arranca algo más abajo que la tarjeta, igual que en el diseño */
.main > section{padding-top:clamp(6px,3.4vw,50px)}

/* ---------- Columna izquierda ---------- */
h1{
  font-family:var(--h);
  font-weight:800;
  font-size:clamp(40px,5.2vw,74px);
  line-height:1;
  letter-spacing:-.035em;
  margin:0 0 clamp(14px,1.6vw,20px);
  color:var(--ink);
}
.rule{
  width:clamp(84px,7.4vw,112px);height:5px;border-radius:3px;
  background:rgba(255,255,255,.72);
  margin:0 0 clamp(20px,2.6vw,30px);
}

.lead{
  font-family:var(--h);
  font-weight:700;
  font-size:clamp(16.5px,1.7vw,23px);
  line-height:1.34;
  margin:0 0 6px;
  color:var(--ink);
}
.lead-2{
  font-family:var(--h);
  font-weight:400;
  font-size:clamp(16px,1.62vw,22px);
  line-height:1.34;
  margin:0 0 clamp(26px,3.4vw,44px);
  color:var(--ink-soft);
}

.features{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(14px,1.5vw,19px);
  max-width:430px;
}
.features li{display:flex;align-items:flex-start;gap:14px}
.features .ico{
  flex:none;
  width:clamp(46px,4.1vw,62px);
  height:clamp(46px,4.1vw,62px);
  border-radius:17px;
  background:rgba(255,255,255,.46);
  display:grid;place-items:center;
  color:var(--ink);
}
.features .ico svg{width:clamp(21px,1.9vw,26px);height:clamp(21px,1.9vw,26px)}
.features b{
  display:block;
  font-family:var(--h);
  font-weight:700;
  font-size:clamp(14px,1.3vw,17px);
  line-height:1.3;
  margin-bottom:2px;
}
.features span{
  display:block;
  font-size:clamp(13px,1.15vw,15.5px);
  line-height:1.38;
  color:var(--ink-soft);
  max-width:23ch;
}

/* ---------- Tarjeta de países ---------- */
.panel{
  background:var(--card);
  border-radius:var(--radius-card);
  padding:clamp(26px,3vw,46px);
  box-shadow:0 40px 90px -34px rgba(90,62,0,.5), 0 4px 14px rgba(90,62,0,.10);
  animation:rise .6s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.panel-head{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.4vw,20px);
  margin-bottom:clamp(22px,2.8vw,38px);
}
.panel-head .globe{
  flex:none;
  width:clamp(58px,5.4vw,82px);
  height:clamp(58px,5.4vw,82px);
  border-radius:50%;
  background:var(--yellow-soft);
  display:grid;place-items:center;
  color:var(--ink);
}
.panel-head .globe svg{width:clamp(28px,2.6vw,38px);height:clamp(28px,2.6vw,38px)}
.panel-head h2{
  font-family:var(--h);
  font-weight:700;
  font-size:clamp(22px,2.1vw,31px);
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0 0 4px;
}
.panel-head p{
  margin:0;
  font-size:clamp(13px,1.15vw,15px);
  line-height:1.4;
  color:var(--muted);
}

.countries{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(13px,1.5vw,22px);
}
.tile{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(12px,1.1vw,16px);
  padding:clamp(20px,3.6vw,56px) clamp(15px,1.6vw,23px);
  background:#fff;
  border:1px solid var(--tile-line);
  border-radius:var(--radius-tile);
  box-shadow:0 2px 8px rgba(90,62,0,.05);
  text-decoration:none;
  color:inherit;
  transition:transform .25s cubic-bezier(.2,.8,.25,1),box-shadow .25s ease,border-color .25s ease;
}
.tile:hover,.tile:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(245,196,0,.75);
  box-shadow:0 20px 34px -16px rgba(160,116,0,.45);
  outline:none;
}
.tile:focus-visible{box-shadow:0 0 0 3px rgba(245,196,0,.6),0 20px 34px -16px rgba(160,116,0,.45)}

.tile .flag{
  width:clamp(50px,4.2vw,66px);
  height:clamp(50px,4.2vw,66px);
  border-radius:15px;
  object-fit:cover;
  box-shadow:0 3px 10px rgba(60,42,0,.22);
}
.tile .name{
  display:block;
  font-family:var(--h);
  font-weight:700;
  font-size:clamp(15px,1.28vw,18.5px);
  letter-spacing:-.015em;
  line-height:1.25;
  white-space:nowrap;
}
.tile .portal{
  display:block;
  font-size:clamp(12.5px,1.02vw,14.5px);
  color:var(--muted);
  line-height:1.35;
  margin-top:2px;
  white-space:nowrap;
}
.tile .arrow{color:var(--arrow);display:grid;place-items:center;transition:transform .25s cubic-bezier(.2,.8,.25,1)}
.tile .arrow svg{width:clamp(20px,1.7vw,24px);height:clamp(20px,1.7vw,24px)}
.tile:hover .arrow{transform:translateX(4px)}

.panel-foot{
  margin-top:clamp(22px,2.6vw,34px);
  padding-top:clamp(18px,2.1vw,28px);
  border-top:1px solid #EDEDF1;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:clamp(12.5px,1.05vw,14.5px);
  color:var(--muted);
}
.panel-foot .info{
  flex:none;
  width:34px;height:34px;border-radius:50%;
  background:#F4F4F6;
  display:grid;place-items:center;
  color:#8A8A93;
}
.panel-foot .info svg{width:17px;height:17px}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .main{grid-template-columns:1fr;gap:34px;padding-top:30px}
  .features{max-width:none;flex-direction:row;flex-wrap:wrap}
  .features li{flex:1 1 220px}
}
@media (max-width:640px){
  .countries{grid-template-columns:1fr}
  .features{flex-direction:column}
  .features li{flex:none}
  .features span{max-width:none}
  .brands{gap:16px}
  .scene{background-position:52% bottom}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}