/* Tejeda Towing · estilos compartidos por index.html (EN) y es/index.html (ES)
   Idea: el riel negro de la plataforma de la grúa, con su rotulación western en blanco,
   es la pieza que ordena la página. Blanco de las grúas, negro del riel, rojo del escudo.
   Rye solo en el riel; Archivo (ancha y pesada, como el "TEJEDA" del escudo) en todo lo demás. */
html,body{background:#FFFFFF;color:#14171A}
:root{
  --white:#FFFFFF;
  --chrome:#E7EAED;
  --steel:#55606A;
  --ink:#14171A;
  --black:#000000;
  --red:#D0151C;
  --red-deep:#A50E14;
  --red-lit:#F0353A;   /* rojo sobre negro */
  --amber:#F6A313;     /* luces del riel */
  --wrap:1320px;
  --gut:clamp(20px,4vw,56px);
  --rail:"Rye","Rockwell","Georgia",serif;
  --sans:"Archivo","Arial Narrow",Arial,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.dark :focus-visible{outline-color:var(--white)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-70px;z-index:100;background:var(--black);color:var(--white);padding:12px 16px}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Titulares */
h2{font-stretch:118%;font-weight:800;font-size:clamp(30px,3.7vw,54px);line-height:1.04;letter-spacing:-.012em;text-wrap:balance}
h3{font-stretch:112%;font-weight:800;font-size:22px;line-height:1.2}
.lead{font-size:clamp(18px,1.5vw,21px);max-width:58ch}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 24px;border:2px solid var(--black);border-radius:3px;font-stretch:108%;font-weight:700;font-size:18px;line-height:1.15;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}
.btn svg{width:21px;height:21px;flex:none}
.btn-call{background:var(--red);border-color:var(--red);color:var(--white)}
.btn-call:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn-line{background:var(--white);color:var(--black)}
.btn-line:hover{background:var(--black);color:var(--white)}
.dark .btn-line{background:transparent;border-color:var(--white);color:var(--white)}
.dark .btn-line:hover{background:var(--white);color:var(--black)}
.textlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:16px;text-underline-offset:4px}
.textlink svg{width:18px;height:18px;flex:none}

/* Cabecera */
.top{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:2px solid var(--black)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:68px}
.mark{display:inline-flex;flex-direction:column;align-items:stretch;text-decoration:none;line-height:1;padding-block:8px;margin-right:auto}
.mark b{font-stretch:125%;font-weight:900;font-size:24px;letter-spacing:.02em;color:var(--black)}
.mark span{margin-top:3px;background:var(--red);color:var(--white);font-stretch:125%;font-weight:800;font-size:10.5px;letter-spacing:.34em;text-align:center;padding:3px 0 2px .34em}
.nav{display:flex;gap:26px}
.nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:16px;text-decoration:none}
.nav a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.top .btn{min-height:46px;padding:8px 18px;font-size:17px}
.lang{display:inline-flex;align-items:center;gap:2px;font-weight:700;font-size:15px}
.lang a,.lang span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;text-decoration:none}
.lang span{background:var(--black);color:var(--white);min-height:30px;min-width:38px;border-radius:2px}
.lang a:hover{text-decoration:underline}
.dark .lang span{background:var(--white);color:var(--black)}

/* El riel */
.rail{position:relative;background:var(--black);color:var(--white);border-top:4px solid #2B2E31;border-bottom:4px solid #2B2E31}
.rail::before,.rail::after{content:"";position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px #3A2A08,0 0 14px rgba(246,163,19,.55)}
.rail::before{left:clamp(10px,1.6vw,22px)}
.rail::after{right:clamp(10px,1.6vw,22px)}
.rail .wrap{padding-block:clamp(16px,2vw,24px);padding-inline:max(var(--gut),44px)}
.rail-text{font-family:var(--rail);font-weight:400;font-stretch:100%;text-transform:uppercase;letter-spacing:.03em;line-height:1.12;font-size:clamp(29px,4.5vw,62px);text-wrap:balance}

/* Portada */
.hero{display:flex;flex-direction:column}
.hero-photo{order:1;background:var(--chrome)}
.hero-photo img{width:100%;aspect-ratio:3;max-height:50vh;object-fit:cover;object-position:50% 64%}
.hero .rail{order:2}
.offer{order:3;display:grid;grid-template-columns:1fr auto;gap:28px 64px;align-items:center;padding-block:clamp(24px,2.4vw,34px) clamp(40px,5vw,72px)}
.offer>*{min-width:0}
.pay strong{display:block;font-stretch:125%;font-weight:900;font-size:clamp(40px,5.4vw,78px);line-height:.98;letter-spacing:-.02em;color:var(--red);white-space:nowrap}
.pay span{display:block;margin-top:10px;font-weight:600;font-size:clamp(17px,1.4vw,20px)}
.offer .lead{margin-top:10px;color:var(--steel)}
.actions{display:flex;flex-direction:column;gap:12px;min-width:300px}
.actions .textlink{align-self:center}

/* Secciones */
.band{padding-block:clamp(64px,8.5vw,124px)}
.band.grey{background:var(--chrome)}

/* Cómo funciona: es una secuencia de verdad, por eso lleva números */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(32px,4vw,56px);counter-reset:paso}
.steps li{counter-increment:paso;display:flex;flex-direction:column}
.step-vis{position:relative;aspect-ratio:4/3;background:var(--chrome);display:flex;align-items:center;padding:7%;overflow:hidden}
.step-vis.photo{padding:0}
.step-vis.photo img{width:100%;height:100%;object-fit:cover}
.bubble{position:relative;max-width:78%;border-radius:20px;overflow:hidden}
.bubble.out{margin-left:auto;border-bottom-right-radius:5px;border:5px solid var(--red)}
.bubble.out img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bubble.in{background:var(--black);color:var(--white);border-bottom-left-radius:5px;padding:16px 22px;max-width:none;white-space:nowrap;font-weight:600;font-size:clamp(18px,1.6vw,23px);line-height:1.3}
.blank{display:inline-block;width:3.2em;border-bottom:3px solid var(--red-lit);margin-left:.15em;transform:translateY(-2px)}
.steps h3{display:flex;gap:14px;align-items:baseline;margin-top:20px}
.steps h3::before{content:counter(paso);font-stretch:125%;font-weight:900;font-size:44px;line-height:.9;color:var(--red)}
.steps p{margin-top:8px;color:var(--steel);max-width:38ch;text-wrap:pretty}
.send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:clamp(32px,4vw,52px)}

/* Qué compra */
.buys-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 56px;align-items:end}
.buys{display:grid;grid-template-columns:minmax(0,1.52fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(14px,1.6vw,22px);margin-top:clamp(32px,4vw,56px)}
.buys figure{display:flex;flex-direction:column;min-height:0}
.buys figure:first-child{grid-row:1 / 3}
.buys img{width:100%;flex:1;min-height:0;object-fit:cover;aspect-ratio:3/2}
.buys figure:first-child img{aspect-ratio:auto}
.buys figcaption{padding-top:10px;font-weight:700;font-size:17px;line-height:1.3}

/* El dueño */
.owner{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.owner img{width:100%;aspect-ratio:5/4;object-fit:cover}
.owner .lead{margin-top:18px}
.facts{margin-top:28px;border-top:2px solid var(--black)}
.facts div{display:grid;grid-template-columns:9.5em 1fr;gap:16px;padding-block:13px;border-bottom:1px solid #C9CED3}
.facts dt{font-weight:700}
.facts dd a{text-underline-offset:4px}

/* Zona */
.area{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.area .lead{margin-top:18px}
.area .note{margin-top:14px;color:var(--steel);font-size:16px}
.cities{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.cities li{border:2px solid var(--black);padding:6px 12px;font-weight:700;font-size:16px}
.has-map .cities{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%)}
.map{width:100%;aspect-ratio:1/1.02;max-height:680px;background:var(--chrome);border:2px solid var(--black);z-index:0}
.map .leaflet-tile-pane{filter:grayscale(1) contrast(.92) brightness(1.06)}
.map .leaflet-control-attribution{font:500 12px/1.4 var(--sans);background:rgba(255,255,255,.88);padding:2px 7px}
.leaflet-tooltip.zona{background:var(--black);color:var(--white);border:0;border-radius:2px;box-shadow:none;padding:3px 8px;font:700 14px/1.2 var(--sans);font-stretch:108%}
.leaflet-tooltip.zona::before{display:none}

/* Cierre */
.close{background:var(--black);color:var(--white)}
.close .rail{border-color:#2B2E31}
.close-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(44px,6vw,88px)}
.close .rail-text{font-size:clamp(26px,3.5vw,48px)}
.bignum{display:inline-block;font-stretch:125%;font-weight:900;font-size:clamp(34px,9.6vw,60px);line-height:1.3;letter-spacing:-.01em;color:var(--red-lit);text-decoration:none;white-space:nowrap;-webkit-text-stroke:1.5px var(--white);paint-order:stroke fill}
.bignum:hover{color:var(--white)}
.close p{margin-top:16px;color:#D5D9DD;max-width:46ch}
.close .actions{flex-direction:row;flex-wrap:wrap;margin-top:28px;min-width:0}
.close .actions .textlink{align-self:auto}
.close img{width:100%;aspect-ratio:4/3;object-fit:cover;border:4px solid #2B2E31}

/* Pie */
.foot{background:var(--black);color:#D5D9DD;border-top:1px solid #33373B;font-size:16px}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px;padding-block:22px 26px}
.foot b{color:var(--white);font-stretch:118%;font-weight:800}
.foot a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}
.foot .lang{margin-left:auto}
.foot .lang a{color:var(--white)}

/* Barra fija en móvil */
.callbar{display:none}

/* Entrada: la plataforma se extiende, una sola vez */
@keyframes rail-out{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero .rail{animation:rail-out .7s cubic-bezier(.2,.8,.2,1) both}
.hero .rail-text{animation:rise .5s .45s ease-out both}

@media (min-width:900px){
  .bignum{font-size:clamp(48px,5.3vw,80px)}
}
@media (max-width:1100px){
  .nav{display:none}
}
@media (max-width:899px){
  body{font-size:17px}
  .foot .wrap{padding-bottom:96px}
  .top{position:static}
  .top .wrap{min-height:60px;gap:10px}
  .top .btn{display:none}
  .mark b{font-size:21px}
  .hero .rail{order:1}
  .offer{order:2;grid-template-columns:1fr;padding-bottom:28px}
  .hero-photo{order:3}
  .hero-photo img{aspect-ratio:4/3;max-height:none;object-position:50% 50%}
  .pay strong{font-size:clamp(27px,8.9vw,64px)}
  .actions{min-width:0}
  .steps{grid-template-columns:1fr;gap:36px}
  .step-vis{aspect-ratio:16/10}
  .step-vis:not(.photo){aspect-ratio:auto;padding:22px 20px}
  .bubble{max-width:64%}
  .buys-head,.owner,.area,.close-grid{grid-template-columns:1fr}
  .buys{grid-template-columns:1fr}
  .buys figure:first-child{grid-row:auto}
  .buys figure:first-child img{aspect-ratio:4/3}
  .facts div{grid-template-columns:7.5em 1fr}
  .map{aspect-ratio:4/5}
  .close .actions{flex-direction:column}
  .close .actions .textlink{align-self:center}
  .foot .lang{margin-left:0}
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--black);border-top:3px solid #2B2E31;transition:transform .25s}
  .callbar.is-away{transform:translateY(110%)}
  .callbar .btn{min-height:52px;padding:10px 12px;font-size:17px;flex:1}
  .callbar .btn-call{flex:1.6}
  .callbar .btn-line{background:var(--white);border-color:var(--white);color:var(--black)}
  .callbar .btn-icon{flex:0 0 54px;padding:0;background:transparent;border-color:#6B737A;color:var(--white)}
}
@media (max-width:359px){
  .rail .wrap{padding-inline:36px}
  .rail-text{font-size:25px}
  .btn{font-size:16.5px;padding-inline:14px}
  .mark b{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero .rail,.hero .rail-text{animation:none}
  .btn,.callbar{transition:none}
}