/* ==========================================================================
   Taxi Vera — v3. Luz de día: crema, oliva y naranja quemado.
   Display: Chivo · Texto: Lato · Motivo: franjas diagonales de taxi.

   Fuentes auto-alojadas en /assets/fonts/ (woff2, subconjuntos latin y
   latin-ext). Sin peticiones a Google Fonts: mejor LCP y nada que consentir.
   Chivo es variable, un mismo fichero cubre de 400 a 900.
   ========================================================================== */

@font-face{font-family:'Chivo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/chivo-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chivo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/chivo-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:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/lato-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/lato-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:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/lato-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/lato-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}

:root{
  --crema:#F2EDE3;
  --crema-2:#E7E0D2;
  --oliva:#2A3420;
  --oliva-2:#3B4A2C;
  --tinta:#1E2617;
  --naranja:#C4531C;
  --naranja-2:#A8440F;
  --suave:rgba(30,38,23,.66);
  --suave-claro:rgba(242,237,227,.72);
  --linea:rgba(30,38,23,.14);

  --e-1:8px; --e-2:16px; --e-3:24px; --e-4:40px; --e-5:64px; --e-6:96px;
  --ancho:1400px;
  --lateral:clamp(20px,4vw,56px);
  --t:200ms cubic-bezier(.2,.7,.3,1);

  --verde-libre:#2E7D4F;
}

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

body{
  margin:0;background:var(--crema);color:var(--tinta);
  font:400 17px/1.62 'Lato',-apple-system,'Segoe UI',sans-serif;
  text-wrap:pretty;overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
ul{margin:0;padding:0;list-style:none}
p{margin:0}

a{color:var(--naranja);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--naranja-2)}

h1,h2,h3{
  margin:0;font-family:'Chivo','Lato',sans-serif;font-weight:900;
  line-height:.98;letter-spacing:-.03em;
}
h1{font-size:clamp(40px,7.2vw,116px);line-height:.92}
h2{font-size:clamp(30px,4.6vw,68px)}
h3{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em}

:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--lateral)}
.solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Bloques y ritmo ----------------------------------------------------- */

.bloque{position:relative;padding-block:clamp(64px,9vw,132px)}
.bloque--oliva{background:var(--oliva);color:var(--crema)}
.bloque--oliva h1,.bloque--oliva h2,.bloque--oliva h3{color:var(--crema)}
.bloque--oliva p{color:var(--suave-claro)}
.bloque--crema2{background:var(--crema-2)}

/* Separador: filete oliva con el piloto verde de «libre», como el de los
   taxis de la zona. */
.separador{
  display:flex;align-items:center;gap:var(--e-2);
  padding-inline:var(--lateral);
}
.separador::before,.separador::after{content:"";flex:1;height:2px;background:var(--tinta)}
.separador::after{flex:6}
.libre{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Chivo','Lato',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--suave);
  white-space:nowrap;
}
.libre__piloto{
  width:10px;height:10px;border-radius:2px;
  background:var(--verde-libre);
  box-shadow:0 0 0 3px rgba(46,125,79,.18);
}
@media (prefers-reduced-motion:no-preference){
  .libre__piloto{animation:latido 2.6s ease-in-out infinite}
}
@keyframes latido{
  0%,100%{box-shadow:0 0 0 3px rgba(46,125,79,.18)}
  50%{box-shadow:0 0 0 7px rgba(46,125,79,.06)}
}

.rotulo{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--e-2);
  font-family:'Chivo','Lato',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--naranja);
}
.rotulo::before{content:"";width:26px;height:3px;background:var(--naranja)}
.bloque--oliva .rotulo{color:#E4A277}
.bloque--oliva .rotulo::before{background:#E4A277}

/* --- Botones ------------------------------------------------------------- */

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:16px 32px;overflow:hidden;
  background:var(--naranja);color:var(--crema);
  border:2px solid var(--naranja);border-radius:4px;
  font-family:'Chivo','Lato',sans-serif;font-size:clamp(15px,1.2vw,17px);font-weight:700;
  letter-spacing:.02em;line-height:1;
  transition:color var(--t),background var(--t),border-color var(--t),transform var(--t);
}
.btn span{position:relative;z-index:1}
.btn::after{
  content:"";position:absolute;inset:0;z-index:0;background:var(--tinta);
  transform:translateY(101%);transition:transform 300ms cubic-bezier(.2,.7,.3,1);
}
.btn:hover{color:var(--crema);transform:translateY(-2px)}
.btn:hover::after{transform:translateY(0)}

.btn--contorno{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn--contorno:hover{color:var(--crema)}
.btn--contorno::after{background:var(--tinta)}
.bloque--oliva .btn--contorno{color:var(--crema);border-color:rgba(242,237,227,.5)}
.bloque--oliva .btn--contorno::after{background:var(--crema)}
.bloque--oliva .btn--contorno:hover{color:var(--oliva);border-color:var(--crema)}

.enlace{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Chivo','Lato',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--naranja);
}
.enlace::after{content:"";width:24px;height:2px;background:currentColor;transition:width var(--t)}
.enlace:hover::after{width:42px}
.bloque--oliva .enlace{color:#E4A277}

/* --- Cabecera ------------------------------------------------------------ */

.cabecera{position:sticky;top:0;z-index:40;background:var(--crema);border-bottom:2px solid var(--tinta)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);min-height:76px}
.marca{display:flex;align-items:center;gap:12px;color:var(--tinta)}
.marca:hover{color:var(--naranja)}
.marca__nombre{font-family:'Chivo','Lato',sans-serif;font-size:21px;font-weight:900;letter-spacing:-.02em;line-height:1}

.nav__lista{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav__lista a{
  position:relative;display:inline-block;padding:6px 0;color:var(--tinta);
  font-family:'Chivo','Lato',sans-serif;font-size:14px;font-weight:700;letter-spacing:-.01em;
}
.nav__lista a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--naranja);transition:width var(--t)}
.nav__lista a:hover::after,.nav__lista [aria-current="page"]::after{width:100%}
.nav__lista [aria-current="page"]{color:var(--naranja)}

.cabecera .btn{min-height:46px;padding:12px 24px}
.cabecera__nav .btn{display:none}

.alternador{
  display:none;width:50px;height:50px;padding:0;
  background:none;border:2px solid var(--tinta);border-radius:4px;color:var(--tinta);cursor:pointer;
}
.alternador svg{margin:auto}
.alternador .cerrar{display:none}
.alternador[aria-expanded="true"]{background:var(--tinta);color:var(--crema)}
.alternador[aria-expanded="true"] .abrir{display:none}
.alternador[aria-expanded="true"] .cerrar{display:block}

@media (max-width:1000px){
  .alternador{display:flex}
  .cabecera__cta{display:none}
  .cabecera__nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    padding:var(--e-3) var(--lateral) var(--e-4);
    background:var(--crema);border-bottom:2px solid var(--tinta);
  }
  .cabecera__nav.abierto{display:block}
  .nav__lista{flex-direction:column;align-items:stretch;gap:0}
  .nav__lista a{padding:18px 0;border-bottom:1px solid var(--linea);font-size:19px}
  .cabecera__nav .btn{display:flex;width:100%;margin-top:var(--e-3)}
}

/* --- Portada ------------------------------------------------------------- */

.portada{position:relative;padding-top:clamp(36px,5vw,72px);padding-bottom:clamp(48px,6vw,88px)}
.portada__rejilla{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1fr)}
.portada__texto{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-3)}
.portada h1{max-width:16ch}
.portada h1 em{font-style:normal;color:var(--naranja)}
.portada__texto > p{max-width:44ch;color:var(--suave);font-size:clamp(17px,1.4vw,20px)}
.portada__acciones{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-top:var(--e-1)}
.portada__datos{
  display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-2);
  font-family:'Chivo','Lato',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--suave);
}
.portada__datos span{display:flex;align-items:center;gap:8px}
.portada__datos span::before{content:"";width:8px;height:8px;background:var(--naranja);border-radius:50%}

.portada__imagenes{display:grid;gap:var(--e-2);grid-template-columns:1fr 1fr}
.ficha{position:relative;margin:0;overflow:hidden;border:2px solid var(--tinta);border-radius:6px;background:var(--crema-2)}
.ficha img{width:100%;height:clamp(220px,38vw,480px);object-fit:cover;will-change:transform}
.ficha--girada{transform:rotate(-1.6deg)}
.ficha--baja{align-self:end;transform:rotate(1.4deg)}

@media (min-width:1001px){
  .portada__rejilla{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center}
}

/* --- Dos columnas -------------------------------------------------------- */

.dos-columnas{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:minmax(0,1fr);align-items:center}
.dos-columnas__texto{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-3)}
.dos-columnas__texto p{max-width:52ch}
.dos-columnas .ficha img{height:clamp(260px,34vw,500px)}

@media (min-width:1001px){.dos-columnas{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* --- Servicios: filas con índice ---------------------------------------- */

.servicios__cabeza{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--e-3);margin-bottom:clamp(32px,4vw,56px);
}
.servicios__cabeza h2{max-width:22ch}

.servicios{border-top:2px solid var(--tinta)}
.servicio{
  position:relative;display:grid;align-items:center;gap:var(--e-2);
  grid-template-columns:auto 1fr auto;
  padding-block:clamp(20px,2.4vw,30px);
  border-bottom:2px solid var(--tinta);
  transition:background var(--t),color var(--t),padding-left var(--t);
}
.servicio__num{
  font-family:'Chivo','Lato',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.1em;color:var(--naranja);
}
.servicio h3{grid-column:2;transition:color var(--t)}
.servicio .enlace{grid-column:3}
.servicio__foto{
  position:absolute;right:clamp(80px,14vw,220px);top:50%;
  width:clamp(160px,16vw,260px);aspect-ratio:4/3;
  overflow:hidden;border-radius:6px;pointer-events:none;
  opacity:0;transform:translateY(-50%) scale(.9) rotate(-3deg);
  transition:opacity 260ms ease,transform 380ms cubic-bezier(.2,.7,.3,1);
  z-index:2;
}
.servicio__foto img{width:100%;height:100%;object-fit:cover}
.servicio:hover{background:var(--naranja);color:var(--crema);padding-left:var(--e-3)}
.servicio:hover h3{color:var(--crema)}
.servicio:hover .servicio__num,.servicio:hover .enlace{color:var(--crema)}
.servicio:hover .servicio__foto{opacity:1;transform:translateY(-50%) scale(1) rotate(-2deg)}

@media (max-width:800px){
  .servicio{grid-template-columns:auto 1fr;row-gap:var(--e-2)}
  .servicio .enlace{grid-column:2}
  .servicio__foto{display:none}
}

/* --- Panel de confianza -------------------------------------------------- */

.confianza{
  display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:minmax(0,1fr);align-items:center;
  padding:clamp(32px,5vw,80px);
  background:var(--crema);color:var(--tinta);
  border:2px solid var(--tinta);border-radius:8px;
}
.bloque--oliva .confianza h2{color:var(--tinta)}
.bloque--oliva .confianza p{color:var(--suave)}
.confianza h2{max-width:16ch}
.confianza__cuerpo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-3)}
.confianza__cuerpo p{max-width:46ch;color:var(--suave)}

@media (min-width:1001px){.confianza{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* --- Cierre -------------------------------------------------------------- */

.cierre{background:var(--naranja);color:var(--crema);text-align:center}
.cierre h2{color:var(--crema);max-width:20ch;margin-inline:auto}
.cierre p{max-width:52ch;margin-inline:auto;color:rgba(242,237,227,.82)}
.cierre__panel{display:flex;flex-direction:column;align-items:center;gap:var(--e-3)}
.cierre__telefono{
  display:inline-block;color:var(--crema);
  font-family:'Chivo','Lato',sans-serif;font-weight:900;letter-spacing:-.04em;
  font-size:clamp(44px,9vw,132px);line-height:1;
}
.cierre__telefono:hover{color:var(--tinta)}
.cierre .btn{background:var(--tinta);border-color:var(--tinta)}
.cierre .btn::after{background:var(--crema)}
.cierre .btn:hover{color:var(--tinta)}

/* --- Pie ----------------------------------------------------------------- */

.pie{background:var(--tinta);color:var(--crema)}
.pie__superior{display:grid;gap:clamp(28px,4vw,48px);grid-template-columns:minmax(0,1fr);padding-block:clamp(44px,5vw,72px)}
.etiqueta{
  margin-bottom:8px;color:rgba(242,237,227,.6);
  font-family:'Chivo','Lato',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
}
.pie h3{color:var(--crema);font-size:clamp(22px,2.2vw,30px)}
.pie h3 a{color:var(--crema)}
.pie h3 a:hover{color:#E4A277}
.pie__menu a{
  color:rgba(242,237,227,.72);
  font-family:'Chivo','Lato',sans-serif;font-size:14px;font-weight:700;
}
.pie__menu li + li{margin-top:10px}
.pie__menu a:hover{color:#E4A277}
.pie__inferior{padding-block:var(--e-3);border-top:1px solid rgba(242,237,227,.14)}
.pie__inferior p{color:rgba(242,237,227,.6);font-size:12px;letter-spacing:.12em;text-transform:uppercase}

@media (min-width:760px){.pie__superior{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --- WhatsApp ------------------------------------------------------------ */

.whatsapp{
  position:fixed;right:20px;bottom:20px;z-index:45;
  display:flex;align-items:center;justify-content:center;width:58px;height:58px;
  background:var(--tinta);color:var(--crema);border:2px solid var(--crema);border-radius:50%;
  box-shadow:0 10px 26px rgba(30,38,23,.28);transition:transform var(--t),background var(--t);
}
.whatsapp:hover{transform:translateY(-3px);background:var(--naranja);color:var(--crema)}

/* --- Cursor -------------------------------------------------------------- */

.cursor{
  position:fixed;top:0;left:0;z-index:60;
  width:22px;height:22px;margin:-11px 0 0 -11px;
  background:var(--naranja);border-radius:50%;
  pointer-events:none;opacity:0;mix-blend-mode:multiply;
  transition:width 180ms ease,height 180ms ease,margin 180ms ease,opacity 180ms ease,background 180ms ease;
}
.cursor.activo{opacity:1}
.cursor.crece{width:86px;height:86px;margin:-43px 0 0 -43px;mix-blend-mode:normal}
.cursor__texto{
  display:grid;place-items:center;width:100%;height:100%;
  color:var(--crema);font-family:'Chivo','Lato',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity 150ms ease;
}
.cursor.crece .cursor__texto{opacity:1}

@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* --- Movimiento ---------------------------------------------------------- */

/* Las animaciones de entrada solo se activan si el JS ha arrancado
   (`.js-listo` lo pone main.js en <html> antes de pintar). Sin JavaScript
   —o si el script falla— el contenido se ve, en vez de quedarse en
   opacity:0 para siempre. Importa para accesibilidad y para el rastreo. */
@media (prefers-reduced-motion:no-preference){
  .revela{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
  .revela > span{display:inline-block;transform:translateY(105%);transition:transform 720ms cubic-bezier(.16,.84,.24,1)}
  .visible .revela > span{transform:translateY(0)}

  .js-listo .sube{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)}
  .js-listo .sube.visible{opacity:1;transform:none}
  .js-listo .ficha--girada.sube.visible{transform:rotate(-1.6deg)}
  .js-listo .ficha--baja.sube.visible{transform:rotate(1.4deg)}
}

/* ==========================================================================
   Páginas interiores (v3)
   ========================================================================== */

.portada-interior{padding-block:clamp(44px,6vw,96px)}
.portada-interior h1{max-width:24ch;font-size:clamp(36px,5.6vw,88px)}
.portada-interior__entrada{max-width:62ch;margin-top:var(--e-3);color:var(--suave);font-size:clamp(17px,1.4vw,20px)}
.portada-interior__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3);margin-top:var(--e-4)}

.entrada{max-width:68ch;margin-top:var(--e-3);color:var(--suave);font-size:clamp(17px,1.3vw,19px)}
.bloque--oliva .entrada{color:var(--suave-claro)}

/* Servicios detallados */
.detalles{display:grid;gap:clamp(32px,4vw,56px);grid-template-columns:minmax(0,1fr);margin-top:clamp(36px,4vw,64px)}
.detalle{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-2)}
.detalle .ficha{width:100%;margin-bottom:var(--e-1)}
.detalle .ficha img{height:clamp(220px,24vw,320px)}
.detalle__num{
  font-family:'Chivo','Lato',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.18em;color:var(--naranja);
}
.detalle p{max-width:56ch;color:var(--suave)}

@media (min-width:900px){
  .detalles{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}
}

.lista-marca{margin-top:var(--e-1)}
.lista-marca li{position:relative;padding-left:22px;color:var(--suave);font-size:16px}
.lista-marca li + li{margin-top:8px}
.lista-marca li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:2px;background:var(--naranja);
}

/* Columna invertida en escritorio */
@media (min-width:1001px){
  .dos-columnas--invertido .ficha{order:-1}
}

/* Cifras */
.cifras{display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,48px);margin-top:var(--e-2)}
.cifra strong{
  display:block;font-family:'Chivo','Lato',sans-serif;font-weight:900;
  font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-.03em;
}
.cifra span{
  color:var(--suave);font-family:'Chivo','Lato',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.bloque--oliva .cifra span{color:var(--suave-claro)}

.destacado{
  font-family:'Chivo','Lato',sans-serif;font-size:clamp(19px,1.8vw,24px);font-weight:700;
  letter-spacing:-.02em;
}
.bloque--oliva .destacado{color:var(--crema)}

/* Galería */
.galeria{display:grid;gap:var(--e-2);grid-template-columns:minmax(0,1fr);margin-top:clamp(32px,4vw,56px)}
.galeria .ficha img{height:clamp(220px,20vw,280px)}
.galeria .ficha:nth-child(3n+1){transform:rotate(-1deg)}
.galeria .ficha:nth-child(3n){transform:rotate(.9deg)}

@media (min-width:700px){.galeria{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1001px){.galeria{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Datos de contacto */
.datos{display:flex;flex-direction:column;width:100%;margin-top:var(--e-2);border-top:2px solid var(--tinta)}
.dato{padding-block:var(--e-3);border-bottom:2px solid var(--tinta)}
.dato h3{font-size:clamp(21px,2.2vw,30px)}
.dato h3 a{color:var(--naranja)}
.dato h3 a:hover{color:var(--tinta)}
.dato .etiqueta{color:var(--suave)}

/* Formulario */
.formulario-rejilla{
  display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:minmax(0,1fr);
  align-items:stretch;margin-top:clamp(32px,4vw,56px);
}
.formulario{
  display:grid;gap:var(--e-3);align-content:start;
  padding:clamp(24px,2.6vw,36px);
  background:var(--crema-2);border:2px solid var(--tinta);border-radius:8px;
}
.formulario__fila{display:grid;gap:var(--e-3);grid-template-columns:minmax(0,1fr)}
.campo{display:flex;flex-direction:column;gap:8px}
.campo label{font-family:'Chivo','Lato',sans-serif;font-size:14px;font-weight:700}
.obligatorio{color:var(--naranja)}
.campo input,.campo textarea{
  width:100%;padding:13px 14px;
  background:var(--crema);color:var(--tinta);
  border:2px solid var(--tinta);border-radius:4px;
  font:inherit;font-size:16px;
  transition:border-color var(--t),box-shadow var(--t);
}
.campo input:hover,.campo textarea:hover{border-color:var(--naranja)}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--naranja);box-shadow:0 0 0 3px rgba(196,83,28,.18)}
.campo textarea{min-height:150px;resize:vertical}
.consentimiento{display:flex;align-items:flex-start;gap:10px;color:var(--suave);font-family:'Lato',sans-serif;font-size:15px;font-weight:400}
.consentimiento input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--naranja)}
.formulario .btn{justify-self:start}

.mapa{overflow:hidden;min-height:340px;border:2px solid var(--tinta);border-radius:8px}
.mapa iframe{display:block;width:100%;height:100%;min-height:340px;border:0}

@media (min-width:620px){.formulario__fila{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1001px){.formulario-rejilla{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}

/* ==========================================================================
   Añadidos a la maqueta v3
   ========================================================================== */

/* --- Páginas legales -----------------------------------------------------
   El diseño no traía maqueta para texto largo. Se construye con los mismos
   tokens: medida de lectura corta, jerarquía clara y el filete naranja del
   resto del sitio. */

.legal{padding-block:clamp(48px,6vw,96px)}
.legal__cuerpo{max-width:74ch}
.legal__cuerpo > * + *{margin-top:var(--e-3)}
.legal__cuerpo h2{margin-top:var(--e-5);font-size:clamp(24px,2.8vw,38px)}
.legal__cuerpo h3,
.legal__cuerpo h4{margin-top:var(--e-4);font-size:clamp(19px,1.9vw,25px);letter-spacing:-.02em}
.legal__cuerpo h2:first-child,
.legal__cuerpo h3:first-child,
.legal__cuerpo h4:first-child{margin-top:0}
.legal__cuerpo p{color:var(--suave)}
.legal__cuerpo a{text-decoration:underline;text-underline-offset:3px}
.legal__cuerpo ul{margin-top:var(--e-2)}
.legal__cuerpo li{position:relative;padding-left:22px;color:var(--suave)}
.legal__cuerpo li + li{margin-top:10px}
.legal__cuerpo li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--naranja)}
.legal__actualizado{
  margin-top:var(--e-5);padding-top:var(--e-3);border-top:2px solid var(--tinta);
  font-family:'Chivo','Lato',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--suave);
}

/* --- Formulario: estados de envío (Web3Forms) ---------------------------- */

/* Trampa antispam. Oculta a la vista y a los lectores de pantalla, pero
   rellenable por un bot que complete todos los campos del formulario. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.campo__error{
  min-height:1.2em;color:var(--naranja-2);font-size:14px;font-weight:700;
}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"]{border-color:var(--naranja-2)}

.aviso{
  padding:var(--e-3);border:2px solid var(--tinta);border-radius:6px;
  background:var(--crema);
}
.aviso h3{font-size:clamp(19px,1.8vw,24px)}
.aviso p{margin-top:10px;color:var(--suave)}
.aviso--ok{border-color:var(--verde-libre);background:rgba(46,125,79,.08)}
.aviso--error{border-color:var(--naranja);background:rgba(196,83,28,.08)}
.aviso__telefono{
  display:inline-block;margin-top:var(--e-2);
  font-family:'Chivo','Lato',sans-serif;font-weight:900;letter-spacing:-.03em;
  font-size:clamp(30px,4vw,46px);line-height:1;color:var(--naranja);
}
.aviso__telefono:hover{color:var(--tinta)}
.aviso[hidden]{display:none}

/* --- 404 ------------------------------------------------------------------ */

.error404{padding-block:clamp(64px,10vw,140px);text-align:center}
.error404__codigo{
  display:block;font-family:'Chivo','Lato',sans-serif;font-weight:900;
  font-size:clamp(72px,16vw,200px);line-height:.9;letter-spacing:-.05em;
  color:var(--naranja);
}
.error404 h1{margin-top:var(--e-3);font-size:clamp(30px,4.6vw,60px)}
.error404 p{max-width:52ch;margin:var(--e-3) auto 0;color:var(--suave)}
.error404__acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-2);margin-top:var(--e-4)}
.error404__enlaces{margin-top:var(--e-5)}
.error404__enlaces ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-3)}

/* --- Detalles finos ------------------------------------------------------- */

/* Las imágenes van envueltas en <picture> para servir WebP con respaldo.
   El wrapper no debe alterar la caja: las reglas de altura siguen viviendo
   en el <img>. Solo .servicio__foto necesita que el wrapper se estire,
   porque ahí la altura la fija el contenedor con aspect-ratio. */
picture{display:block}
.servicio__foto picture{width:100%;height:100%}

/* ==========================================================================
   Opiniones: recogida y publicación
   ========================================================================== */

/* --- Campo de valoración -------------------------------------------------
   Cinco radios de verdad, no un widget de JS: funciona con teclado, con
   lector de pantalla y sin JavaScript. Van en el DOM de 5 a 1 y se pintan
   con row-reverse, que es lo que permite iluminar «hasta la que marcas»
   con un simple selector de hermanos. */

.estrellas-campo{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.estrellas-campo input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
.estrellas-campo label{
  cursor:pointer;font-size:30px;line-height:1;color:var(--linea);
  transition:color var(--t),transform var(--t);
}
.estrellas-campo label:hover{transform:scale(1.12)}
.estrellas-campo input:checked ~ label,
.estrellas-campo label:hover,
.estrellas-campo label:hover ~ label{color:var(--naranja)}
.estrellas-campo input:focus-visible + label{outline:3px solid var(--naranja);outline-offset:3px}

/* --- Opiniones publicadas ------------------------------------------------ */

.opiniones{
  display:grid;gap:var(--e-2);grid-template-columns:minmax(0,1fr);
  margin-top:clamp(32px,4vw,56px);
}
.opinion{
  display:flex;flex-direction:column;gap:var(--e-2);
  padding:clamp(22px,2.4vw,32px);
  background:var(--crema-2);border:2px solid var(--tinta);border-radius:8px;
}
.opinion__estrellas{color:var(--naranja);font-size:15px;letter-spacing:.3em;line-height:1}
.opinion blockquote{
  margin:0;font-family:'Chivo','Lato',sans-serif;
  font-size:clamp(17px,1.4vw,20px);font-weight:400;line-height:1.42;letter-spacing:-.015em;
}
.opinion__firma{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:auto;
  padding-top:var(--e-2);border-top:1px solid var(--linea);
}
.opinion__firma cite{
  font-family:'Chivo','Lato',sans-serif;font-size:15px;font-weight:700;font-style:normal;
}
.opinion__meta{color:var(--suave);font-size:14px}

@media (min-width:760px){.opiniones{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.opiniones{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Estado inicial: todavía no hay ninguna publicada. */
.opiniones-vacio{
  margin-top:clamp(32px,4vw,56px);padding:clamp(24px,3vw,40px);
  background:var(--crema-2);border:2px dashed var(--linea);border-radius:8px;
}
.opiniones-vacio p{max-width:60ch;color:var(--suave)}

/* --- Piezas de formulario que estrena la página de opiniones -------------- */

.campo fieldset,
fieldset.campo{margin:0;padding:0;border:0}
.campo__leyenda{
  padding:0;margin-bottom:10px;
  font-family:'Chivo','Lato',sans-serif;font-size:14px;font-weight:700;
}
.campo__opcional{color:var(--suave);font-weight:400}
.formulario__fila--dos{grid-template-columns:minmax(0,1fr)}

@media (min-width:620px){
  .formulario__fila--dos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- Selector de idioma --------------------------------------------------- */

.idioma{
  display:inline-flex;align-items:center;gap:2px;margin:0;
  font-family:'Chivo','Lato',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.06em;
}
.idioma a{
  display:inline-block;padding:6px 8px;border-radius:4px;color:var(--suave);
  transition:color var(--t),background var(--t);
}
.idioma a:hover{color:var(--naranja);background:var(--crema-2)}
.idioma a[aria-current="true"]{color:var(--tinta);background:var(--crema-2)}
.idioma span{color:var(--linea)}

/* En escritorio va fuera del menú desplegable; en móvil, dentro. */
.idioma--escritorio{display:none}
@media (min-width:1001px){
  .cabecera__nav .idioma{display:none}
  .idioma--escritorio{display:inline-flex;margin-left:auto}
}
@media (max-width:1000px){
  .cabecera__nav .idioma{margin-top:var(--e-3)}
}