/*
Theme Name: Taxi Sevilla Online
Theme URI: https://taxisevilla.online
Description: Tema para servicios de taxi con reservas por WhatsApp, aviso de protección de datos, banner de cookies y textos legales generados a partir de tus datos. Sin dependencias externas.
Version: 1.13.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taxi-sevilla
Tags: business, custom-colors, custom-logo, custom-menu, responsive-layout, translation-ready
*/

/* ═══════════════════════════════════════════════════════════
   ESTILOS · plantilla estilo Disney+
   Los colores salen de las variables que escribe app.js
   a partir de CONFIG.tema (o del panel 🎨).
   ═══════════════════════════════════════════════════════════ */

:root{
  --c-bg:#0f1014;
  --c-bg2:#1a1d29;
  --c-nav:#0e0f13;
  --c-text:#f9f9f9;
  --c-muted:#a0a3ad;
  --c-primary:#0063e5;
  --c-primary2:#0483ee;
  --c-border:rgba(249,249,249,.3);
  --fuente:'Inter';
  --radio:8px;
  --card-w:305px;
  --zoom:1.08;
  --nav-h:70px;
  /* Tonos que cambian solos entre el modo oscuro y el claro.
     Sin ellos, los botones dibujados con blancos fijos desaparecían
     sobre fondos claros y solo se veía su texto. */
  --c-linea:rgba(255,255,255,.08);
  --c-contorno:rgba(255,255,255,.22);
  --c-relleno:rgba(255,255,255,.08);
  --c-relleno2:rgba(255,255,255,.16);
  --c-sobre-primario:#14130a;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  /* Degradado general de la web.
     Va aquí, en el fondo del propio body, y no en una capa aparte por
     encima: así, si le pones una imagen de fondo al sitio —en Elementor ·
     Ajustes del sitio · Fondo, o en el Personalizador—, esa imagen sustituye
     al degradado en vez de quedarse escondida detrás de él. */
  background:linear-gradient(180deg,var(--c-bg) 0%,var(--c-bg2) 100%) var(--c-bg) fixed;
  color:var(--c-text);
  font-family:var(--fuente),'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ══════════ NAV ══════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  min-height:var(--nav-h);
  background:transparent;
  transition:background .35s ease, box-shadow .35s ease;
}
.nav.solida{background:var(--c-nav);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav__inner{
  height:var(--nav-h);
  display:flex;align-items:center;gap:26px;
  padding:0 clamp(16px,3vw,44px);
}
.nav__logo{
  font-weight:800;font-size:26px;letter-spacing:-.5px;flex-shrink:0;
  transition:transform .2s;
}
.nav__logo span{
  background:linear-gradient(90deg,var(--c-primary),var(--c-primary2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav__logo:hover{transform:scale(1.05)}

.nav__menu{display:flex;align-items:center;gap:22px;flex:1}
.nav__item{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--c-text);opacity:.9;padding:6px 0;position:relative;
  transition:opacity .2s;
}
.nav__item svg{width:18px;height:18px;flex-shrink:0}
.nav__item::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--c-text);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nav__item:hover{opacity:1}
.nav__item:hover::after{transform:scaleX(1)}

.nav__right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.nav__icon{width:34px;height:34px;padding:7px;border-radius:50%;opacity:.85;transition:.2s}
.nav__icon:hover{opacity:1;background:rgba(255,255,255,.1)}
.nav__avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary2));
  font-size:13px;font-weight:700;color:#fff;
  border:2px solid transparent;transition:.2s;
}
.nav__avatar:hover{border-color:var(--c-text);transform:scale(1.06)}

/* buscador */
.buscador{
  position:absolute;top:var(--nav-h);left:0;right:0;
  background:var(--c-nav);padding:0 clamp(16px,3vw,44px);
  max-height:0;overflow:hidden;transition:max-height .3s ease, padding .3s ease;
}
.buscador.abierto{max-height:90px;padding:16px clamp(16px,3vw,44px)}
.buscador__caja{
  display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:40px;padding:10px 18px;
}
.buscador__caja svg{width:20px;height:20px;opacity:.7;flex-shrink:0}
.buscador__caja input{
  flex:1;background:none;border:0;outline:none;color:var(--c-text);font-size:15px;
}
.buscador__caja button{font-size:24px;line-height:1;opacity:.6}
.buscador__caja button:hover{opacity:1}

/* ══════════ HERO ══════════ */
.hero{
  position:relative;
  height:clamp(460px,82vh,860px);
  margin-bottom:-70px;
}
.hero__slides{position:absolute;inset:0;overflow:hidden}
.hero__slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.1s ease, transform 7s linear;
}
.hero__slide.activo{opacity:1;transform:scale(1)}
.hero__degradado{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.65) 35%,rgba(0,0,0,0) 70%);
}
.hero__degradado-inf{
  position:absolute;left:0;right:0;bottom:0;height:55%;
  background:linear-gradient(180deg,rgba(15,16,20,0) 0%,var(--c-bg) 92%);
}
.hero__info{
  position:relative;z-index:3;
  max-width:640px;
  padding:0 clamp(16px,3vw,52px);
  height:100%;display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--nav-h);
}
.hero__etiqueta{
  display:inline-block;width:fit-content;
  font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--c-text);
  background:linear-gradient(90deg,var(--c-primary),var(--c-primary2));
  padding:5px 12px;border-radius:4px;margin-bottom:16px;
}
.hero__titulo{
  font-size:clamp(38px,5.6vw,76px);font-weight:800;line-height:1.03;
  letter-spacing:-1.5px;margin-bottom:16px;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.hero__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:13px;color:var(--c-muted);margin-bottom:14px;font-weight:500;
}
.hero__meta span:not(:last-child)::after{content:'·';margin-left:10px;opacity:.6}
.hero__desc{
  font-size:clamp(14px,1.15vw,17px);line-height:1.55;color:#e3e4e8;
  margin-bottom:26px;max-width:520px;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.hero__botones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero__puntos{
  position:absolute;bottom:96px;right:clamp(16px,3vw,52px);z-index:4;
  display:flex;gap:9px;
}
.punto{
  width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);
  transition:.25s;
}
.punto.activo{background:var(--c-text);width:26px;border-radius:5px}

/* animación de entrada del hero */
.aparece{animation:sube .7s cubic-bezier(.2,.7,.3,1) both}
.aparece:nth-child(2){animation-delay:.06s}
.aparece:nth-child(3){animation-delay:.12s}
.aparece:nth-child(4){animation-delay:.18s}
.aparece:nth-child(5){animation-delay:.24s}
@keyframes sube{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ══════════ BOTONES ══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 26px;border-radius:4px;
  font-size:14px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  transition:transform .18s ease, background .2s, border-color .2s;
}
.btn:hover{transform:scale(1.04)}
.btn--primario{background:var(--c-text);color:#111}
.btn--primario:hover{background:#fff}
.btn--fantasma{background:var(--c-relleno);border:1.5px solid var(--c-contorno);color:var(--c-text);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--fantasma:hover{background:var(--c-relleno2);border-color:var(--c-text)}
.btn--redondo{
  width:46px;height:46px;padding:0;border-radius:50%;
  border:1.5px solid var(--c-border);background:rgba(255,255,255,.08);
  font-size:22px;font-weight:400;backdrop-filter:blur(6px);
}
.btn--redondo:hover{border-color:var(--c-text);background:rgba(255,255,255,.2)}
.ico-play{width:16px;height:16px;fill:currentColor;stroke:none}
.btn--mini{padding:8px 12px;font-size:11px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:6px}
.btn--mini:hover{background:rgba(255,255,255,.2)}
.btn--peligro:hover{background:#7a1220;border-color:#b3202f}

/* ══════════ SERVICIOS DESTACADOS (carrusel) ══════════ */
.marcas__wrap{position:relative;z-index:5;margin:20px 0 48px}
.marcas{
  --vis:5;                                  /* cuántos se ven a la vez */
  --hueco:clamp(8px,1vw,18px);
  display:flex;gap:var(--hueco);
  padding:18px clamp(16px,3vw,52px);margin:-18px 0;
  overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  scroll-padding-inline:clamp(16px,3vw,52px);
  scrollbar-width:none;
}
.marcas::-webkit-scrollbar{display:none}
.marca{
  flex:0 0 calc((100% - (var(--vis) - 1) * var(--hueco)) / var(--vis));
  scroll-snap-align:start;
  position:relative;aspect-ratio:16/9;border-radius:var(--radio);
  border:2px solid rgba(255,255,255,.22);overflow:hidden;
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s;
}
.marca::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.25);transition:.3s}
.marca span{
  position:relative;z-index:2;
  font-size:clamp(11px,1.2vw,17px);font-weight:800;letter-spacing:3px;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.marca:hover{
  transform:scale(1.06);border-color:rgba(255,255,255,.8);
  box-shadow:0 12px 34px rgba(0,0,0,.6);
}
.marca:hover::before{background:rgba(0,0,0,.05)}

/* ══════════ FILAS ══════════ */
.fila{margin-bottom:38px;position:relative}
.fila__titulo{
  font-size:clamp(16px,1.5vw,21px);font-weight:700;letter-spacing:.2px;
  padding:0 clamp(16px,3vw,52px);margin-bottom:12px;
  display:flex;align-items:center;gap:10px;
}
.fila__titulo::after{
  content:'Ver todo';font-size:11px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--c-muted);opacity:0;transform:translateX(-8px);
  transition:.25s;
}
.fila:hover .fila__titulo::after{opacity:1;transform:none}

.fila__wrap{position:relative}
.pista{
  align-items:flex-start;
  display:flex;gap:clamp(8px,.9vw,16px);
  padding:26px clamp(16px,3vw,52px);margin:-26px 0;
  overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  scroll-padding-inline:clamp(16px,3vw,52px);
  scrollbar-width:none;
}
.pista::-webkit-scrollbar{display:none}

.tarjeta{
  /* respeta el ancho elegido en el panel, pero nunca ocupa toda la pantalla */
  flex:0 0 min(var(--card-w), 72vw);
  scroll-snap-align:start;
  border-radius:var(--radio);
  overflow:hidden;position:relative;
  border:2px solid transparent;
  background:#181a22;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s;
  cursor:pointer;
}
.tarjeta img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.tarjeta--poster{flex-basis:min(calc(var(--card-w) * .58), 46vw)}
.tarjeta--poster img{height:auto;aspect-ratio:2/3}
.tarjeta:hover{
  transform:scale(var(--zoom));
  border-color:rgba(255,255,255,.85);
  box-shadow:0 16px 40px rgba(0,0,0,.7);
  z-index:4;
}
.tarjeta__insignia{
  position:absolute;top:8px;left:8px;z-index:3;
  font-size:9px;font-weight:800;letter-spacing:1.6px;
  padding:4px 8px;border-radius:3px;
  background:linear-gradient(90deg,var(--c-primary),var(--c-primary2));
  color:#fff;
}
.tarjeta__pie{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:26px 12px 10px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.88));
  opacity:0;transform:translateY(8px);transition:.3s;
}
.tarjeta:hover .tarjeta__pie{opacity:1;transform:none}
.tarjeta__pie h4{font-size:13px;font-weight:700;margin-bottom:2px}
.tarjeta__pie p{font-size:11px;color:var(--c-muted)}

/* flechas */
.flecha{
  position:absolute;top:0;bottom:0;width:clamp(34px,3.4vw,60px);z-index:6;
  background:rgba(10,11,15,.72);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;opacity:0;transition:opacity .25s;
}
.flecha svg{width:26px;height:26px;stroke-width:2.4}
.flecha--izq{left:0;border-radius:0 var(--radio) var(--radio) 0}
.flecha--der{right:0;border-radius:var(--radio) 0 0 var(--radio)}
.fila__wrap:hover .flecha,.js-carrusel:hover .flecha{opacity:1}
.flecha:hover{background:rgba(10,11,15,.92)}
.flecha[disabled]{opacity:0!important;pointer-events:none}

/* rejilla de resultados */
.resultados{padding:calc(var(--nav-h) + 30px) clamp(16px,3vw,52px) 60px}
.rejilla{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  padding:0 clamp(16px,3vw,52px) 10px;
}
.rejilla .tarjeta{flex:none;width:100%}
.vacio{padding:0 clamp(16px,3vw,52px);color:var(--c-muted);font-size:15px}

/* ══════════ PIE ══════════ */
.pie{
  margin-top:60px;padding:52px clamp(16px,3vw,52px) 40px;
  background:rgba(0,0,0,.35);border-top:1px solid rgba(255,255,255,.07);
}
.pie__cols{
  display:grid;gap:32px;max-width:1200px;margin:0 auto 34px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.pie__col h5{
  font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  margin-bottom:14px;color:var(--c-text);
}
.pie__col a{display:block;font-size:13px;color:var(--c-muted);padding:5px 0;transition:color .2s}
.pie__col a:hover{color:var(--c-text)}
.pie__abajo{
  max-width:1200px;margin:0 auto;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--c-muted);
}
.pie__logo{font-size:22px;font-weight:800}
.pie__logo span{background:linear-gradient(90deg,var(--c-primary),var(--c-primary2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ══════════ MODAL ══════════ */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
.modal__fondo{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);animation:fade .25s}
.modal__caja{
  position:relative;width:min(820px,100%);max-height:90vh;overflow:auto;
  background:#14161e;border-radius:12px;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 80px rgba(0,0,0,.8);
  animation:sube .3s cubic-bezier(.2,.7,.3,1);
  scrollbar-width:thin;
}
.modal__arte{position:relative;aspect-ratio:16/9}
.modal__arte img{width:100%;height:100%;object-fit:cover}
.modal__arte-deg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,30,0) 40%,#14161e 100%)}
.modal__cerrar{
  position:absolute;top:14px;right:14px;z-index:5;
  width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.6);
  font-size:24px;line-height:1;
}
.modal__cerrar:hover{background:rgba(0,0,0,.9)}
.modal__cuerpo{padding:0 30px 30px;margin-top:-52px;position:relative;z-index:3}
.modal__cuerpo h2{font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-.5px;margin-bottom:10px}
.modal__meta{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--c-muted);margin-bottom:14px}
.modal__meta span:not(:last-child)::after{content:'·';margin-left:10px;opacity:.6}
.modal__cuerpo p{font-size:15px;line-height:1.6;color:#dcdde3;margin-bottom:22px}
.modal__acciones{display:flex;flex-wrap:wrap;gap:12px}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:900px){
  .nav__menu{display:none}
  .marcas{--vis:3}
  /* alto automático: el texto del hero nunca se solapa con las marcas */
  .hero{height:auto;min-height:clamp(480px,78vh,760px)}
  .hero__info{padding-top:calc(var(--nav-h) + 46px);padding-bottom:110px}
  .hero__degradado{background:linear-gradient(180deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.85) 100%)}
  .hero__puntos{bottom:80px;left:clamp(16px,3vw,52px);right:auto}
}
@media (max-width:560px){
  .marcas{--vis:2}
  .hero__botones .btn{padding:11px 18px;font-size:12px}
  .modal__cuerpo{padding:0 18px 24px}
  }
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ── modo claro (botón 🌙 de la barra) ── */
body.claro{
  --c-bg:#f4f5f8;--c-bg2:#e6e8ef;--c-nav:#ffffff;
  --c-text:#14161c;--c-muted:#5c606c;--c-border:rgba(20,22,28,.3);
  /* en claro los contornos y rellenos pasan a ser oscuros */
  --c-linea:rgba(20,22,28,.10);
  --c-contorno:rgba(20,22,28,.22);
  --c-relleno:rgba(20,22,28,.05);
  --c-relleno2:rgba(20,22,28,.11);
  --c-sobre-primario:#14130a;
}
body.claro .flecha{background:rgba(255,255,255,.85);color:#14161c}
body.claro .btn--primario{background:#14161c;color:#fff}
body.claro .modal__caja{background:#fff;color:#14161c}
body.claro .modal__arte-deg{background:linear-gradient(180deg,rgba(255,255,255,0) 40%,#fff 100%)}
body.claro .modal__cuerpo p{color:#3a3d47}
body.claro .pie{background:rgba(0,0,0,.04)}
body.claro .tarjeta{background:#dcdee6}

/* ═══════════════════════════════════════════════════════════
   BLOQUE TAXI · teléfono, reserva, legales y consentimiento
   ═══════════════════════════════════════════════════════════ */

/* ── teléfono en la barra ── */
.nav__tel{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;letter-spacing:.3px;
  padding:8px 14px;border-radius:40px;
  border:1px solid var(--c-contorno);background:var(--c-relleno);
  transition:.2s;white-space:nowrap;
}
.nav__tel svg{width:17px;height:17px;color:var(--c-primary)}
.nav__tel:hover{background:var(--c-relleno2);border-color:var(--c-primary)}
.btn--nav{padding:10px 20px;font-size:12px}
.ico{width:16px;height:16px;flex-shrink:0}

/* ── botones extra ── */
.btn--ancho{width:100%}
.btn--wa{background:#25d366;color:#06280f}
.btn--wa:hover{background:#31e775}
/* pareja de botones (llamar + WhatsApp), la usa el shortcode [ts_botones] */
.reserva__contacto{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn--texto{background:none;color:var(--c-muted);text-transform:none;letter-spacing:0;font-weight:500;padding:8px}
.btn--texto:hover{color:var(--c-text);text-decoration:underline}
.btn--mini2{padding:10px 16px;font-size:12px;border-radius:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.btn--mini2:hover{background:rgba(255,255,255,.2)}

/* ── enlaces que abren textos legales ── */
.enlace-legal{
  display:inline;padding:0;font:inherit;color:var(--c-primary);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.enlace-legal:hover{color:var(--c-primary2)}

/* ══════════ PIE (ampliado) ══════════ */
.pie__col--contacto{grid-column:span 1}
.pie__lema{font-size:13px;color:var(--c-muted);line-height:1.6;margin:10px 0 14px}
.pie__col a.pie__tel{display:block;font-size:20px;font-weight:800;color:var(--c-primary);margin-bottom:4px;padding:0}
.pie__col a.pie__tel:hover{color:var(--c-primary2)}
.pie__col a.pie__mail{display:block;font-size:13px;color:var(--c-muted);padding:0}
.pie__col a.pie__mail:hover{color:var(--c-text)}
.pie__aviso{font-size:11px;max-width:520px;opacity:.75;line-height:1.5}

/* ══════════ MODAL DE TEXTOS LEGALES ══════════ */
/* por encima de la puerta de consentimiento (z-index 200) y del banner (150),
   para poder leer la política antes de aceptarla */
#modalLegal{z-index:260}
.modal__caja--texto{width:min(760px,100%)}
.legal{padding:34px clamp(20px,3vw,38px) 38px}
.legal h2{font-size:clamp(21px,2.4vw,28px);font-weight:800;margin-bottom:20px;letter-spacing:-.4px}
.legal p{font-size:14px;line-height:1.65;color:#d3d4da;margin-bottom:13px}
.legal b{color:var(--c-text)}
.legal ul{margin:0 0 14px 20px}
.legal li{font-size:14px;line-height:1.6;color:#d3d4da;margin-bottom:5px}
.tabla-legal{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:12.5px}
.tabla-legal th,.tabla-legal td{
  border:1px solid rgba(255,255,255,.14);padding:8px 10px;text-align:left;vertical-align:top;
}
.tabla-legal th{background:rgba(255,255,255,.07);font-weight:700}
.tabla-legal td{color:#c9cad0}

/* ══════════ MENÚ HAMBURGUESA (móvil) ══════════ */

/* el botón de las tres rayas: oculto en escritorio, en línea con el resto */
.nav__burger{
  display:none;
  width:38px;height:34px;flex-shrink:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-radius:8px;border:1px solid var(--c-contorno);background:var(--c-relleno);
}
.nav__burger-linea{
  display:block;width:18px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .25s ease, opacity .2s ease;
}
.nav__burger.abierto .nav__burger-linea:nth-child(2){transform:translateY(7px) rotate(45deg)}
.nav__burger.abierto .nav__burger-linea:nth-child(3){opacity:0}
.nav__burger.abierto .nav__burger-linea:nth-child(4){transform:translateY(-7px) rotate(-45deg)}

/* el panel */
body.menu-abierto{overflow:hidden}
.menumovil{position:fixed;inset:0;z-index:85}
.menumovil__fondo{
  position:absolute;inset:0;
  background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:fade .2s;
}
.menumovil__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(360px,88vw);
  background:var(--c-nav);
  border-left:1px solid var(--c-linea);
  box-shadow:-18px 0 44px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.menumovil.abierto .menumovil__panel{transform:none}

.menumovil__cabeza{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--c-linea);flex-shrink:0;
}
.menumovil__marca{font-size:20px;font-weight:800;letter-spacing:-.5px}
.menumovil__marca span{
  background:linear-gradient(90deg,var(--c-primary),var(--c-primary2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.menumovil__cerrar{width:36px;height:36px;padding:7px;border-radius:50%;flex-shrink:0}
.menumovil__cerrar:hover{background:var(--c-relleno2)}

.menumovil__cuerpo{flex:1;overflow-y:auto;padding:10px 18px 18px;-webkit-overflow-scrolling:touch}
.menumovil__enlace{
  display:block;padding:13px 0;
  border-bottom:1px solid var(--c-linea);
  font-size:15px;font-weight:600;color:var(--c-text);text-decoration:none;
}
.menumovil__enlace:hover,.menumovil__enlace:focus-visible{color:var(--c-primary)}

.menumovil__titulo{
  font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--c-muted);margin:22px 0 12px;
}
/* los destinos van en pastillas que se reparten en varias líneas */
.menumovil__destinos{display:flex;flex-wrap:wrap;gap:8px}
.menumovil__destinos .destino{flex:0 1 auto;max-width:100%;font-size:12.5px;padding:7px 14px}

.menumovil__pie{
  padding:16px 18px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--c-linea);flex-shrink:0;
  display:flex;flex-direction:column;gap:10px;
}
.menumovil__contacto{display:flex;gap:8px}
.menumovil__contacto .btn{flex:1 1 0;min-width:0;justify-content:center;padding:12px 8px;font-size:12px}

/* ══════════ BANNER DE COOKIES ══════════ */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  padding:14px;animation:subeBanner .4s cubic-bezier(.2,.7,.3,1);
}
@keyframes subeBanner{from{transform:translateY(110%)}to{transform:none}}
.cookies__caja{
  max-width:1080px;margin:0 auto;
  background:#15161c;border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:18px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.cookies__texto h4{font-size:15px;font-weight:700;margin-bottom:6px}
.cookies__texto p{font-size:13px;line-height:1.55;color:var(--c-muted)}
.cookies__opciones{display:grid;gap:9px;margin:14px 0 4px;padding:14px;border-radius:10px;background:rgba(255,255,255,.05)}
.ck{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.5;color:#c9cad0;cursor:pointer}
.ck input{width:16px;height:16px;margin-top:1px;accent-color:var(--c-primary);flex-shrink:0}
.ck b{color:var(--c-text)}
.cookies__botones{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:14px}
/* el botón de aceptar mantiene el color de marca pese a .btn--mini2 */
.cookies__botones .btn--primario{background:var(--c-primary);color:#14130a;border-color:transparent}
.cookies__botones .btn--primario:hover{background:var(--c-primary2)}
.cookies__mas{display:block;margin-top:10px;font-size:12px;text-align:right;width:100%}

/* ══════════ RESPONSIVE DEL BLOQUE TAXI ══════════ */
@media (max-width:1080px){
  .nav__tel span{display:none}
  .nav__tel{padding:9px}
}
@media (max-width:860px){}
@media (max-width:560px){  .cookies__botones{justify-content:stretch}
  .cookies__botones .btn{flex:1}
  .btn--nav{padding:9px 14px}
}

/* ── ajustes del modo claro para el bloque taxi ── */
body.claro .nav__tel{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.15)}
body.claro .legal p,body.claro .legal li,body.claro .tabla-legal td{color:#3a3d47}
body.claro .tabla-legal th,body.claro .tabla-legal td{border-color:rgba(0,0,0,.15)}
body.claro .tabla-legal th{background:rgba(0,0,0,.05)}
body.claro .cookies__caja{background:#fff;border-color:rgba(0,0,0,.12);color:#14161c}
body.claro .cookies__texto p,body.claro .ck{color:#4a4d57}
body.claro .cookies__opciones{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1)}
body.claro .btn--mini2{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.15)}

/* ═══════════════════════════════════════════════════════════
   AJUSTES PROPIOS DE WORDPRESS
   ═══════════════════════════════════════════════════════════ */

/* barra de administración */
.admin-bar .nav{top:32px}
@media (max-width:782px){.admin-bar .nav{top:46px}}

/* menú generado por WordPress */
.nav__menu ul{list-style:none;display:flex;align-items:center;gap:22px;margin:0;padding:0}
.nav__menu li{position:relative}
.nav__menu a{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--c-text);opacity:.9;padding:6px 0;position:relative;transition:opacity .2s;
}
.nav__menu a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c-text);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav__menu a:hover{opacity:1}
.nav__menu a:hover::after{transform:scaleX(1)}
.nav__menu .sub-menu{
  display:none;position:absolute;top:100%;left:0;min-width:200px;
  background:var(--c-nav);border:1px solid rgba(255,255,255,.12);border-radius:8px;
  padding:8px;flex-direction:column;gap:4px;box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.nav__menu li:hover>.sub-menu{display:flex}
.nav__menu .sub-menu a{text-transform:none;letter-spacing:.2px;padding:8px 10px;border-radius:6px}
.nav__menu .sub-menu a:hover{background:rgba(255,255,255,.08)}

/* logotipo por imagen */
.nav__logo img,.custom-logo{max-height:44px;width:auto;display:block}

/* páginas y entradas */
.pagina{padding:calc(var(--nav-h) + 46px) clamp(16px,3vw,52px) 60px}
.pagina__caja{
  max-width:820px;margin:0 auto;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:calc(var(--radio) + 6px);padding:clamp(24px,4vw,48px);
}
.pagina h1{font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-.8px;margin-bottom:8px}
.pagina .fecha{font-size:12px;color:var(--c-muted);margin-bottom:24px;display:block}
.pagina .contenido>*{margin-bottom:16px}
.pagina .contenido h2{font-size:clamp(19px,2.2vw,25px);font-weight:800;margin:28px 0 12px}
.pagina .contenido h3{font-size:17px;font-weight:700;margin:22px 0 10px}
.pagina .contenido p,.pagina .contenido li{font-size:15px;line-height:1.7;color:#d3d4da}
.pagina .contenido ul,.pagina .contenido ol{margin-left:22px}
.pagina .contenido a:not(.btn){color:var(--c-primary);text-decoration:underline;text-underline-offset:2px}
.pagina .contenido .modal__acciones{margin-top:26px}
.pagina .contenido img{border-radius:var(--radio);height:auto}
.pagina .contenido blockquote{
  border-left:3px solid var(--c-primary);padding-left:16px;margin-left:0;color:var(--c-muted);font-style:italic;
}
.pagina .contenido table{width:100%;border-collapse:collapse;font-size:13.5px;display:block;overflow-x:auto}
.pagina .contenido th,.pagina .contenido td{border:1px solid rgba(255,255,255,.14);padding:9px 11px;text-align:left}
.pagina .contenido th{background:rgba(255,255,255,.07)}
.volver{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-size:13px;color:var(--c-primary)}
.volver:hover{text-decoration:underline}

/* 404 */
.error404 .pagina__caja{text-align:center}
.error404 .grande{font-size:clamp(60px,12vw,120px);font-weight:800;line-height:1;color:var(--c-primary)}

/* accesibilidad: saltar al contenido */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--c-primary);color:#14130a;padding:12px 18px;font-weight:700;border-radius:0 0 8px 0;
}
.saltar:focus{left:0}

/* foco visible en todo el tema */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--c-primary);outline-offset:2px;
}

/* clases de alineación de WordPress */
.alignleft{float:left;margin:0 20px 16px 0}
.alignright{float:right;margin:0 0 16px 20px}
.aligncenter{display:block;margin:0 auto 16px}
.wp-caption{max-width:100%}
.wp-caption-text,.screen-reader-text{font-size:12px;color:var(--c-muted)}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* modo claro para lo añadido */
body.claro .pagina__caja{background:#fff;border-color:rgba(0,0,0,.1)}
body.claro .pagina .contenido p,body.claro .pagina .contenido li{color:#3a3d47}
body.claro .nav__menu .sub-menu{background:#fff;border-color:rgba(0,0,0,.12)}
body.claro .pagina .contenido th,body.claro .pagina .contenido td{border-color:rgba(0,0,0,.15)}

/* paneles de texto del carrusel (uno por diapositiva) */
.hero__panel{display:flex;flex-direction:column;align-items:flex-start}
.hero__desc p{margin:0}

/* el título de la tarjeta es h3 en las plantillas de WordPress */
.tarjeta__pie h3{font-size:13px;font-weight:700;margin-bottom:2px}

/* ═══════════════════════════════════════════════════════════
   BARRA DE DESTINOS (bajo el logotipo)
   ═══════════════════════════════════════════════════════════ */
:root{--destinos-h:0px}
body.ts-con-destinos{--destinos-h:56px}

/* La barra vive dentro de una cabecera que arriba del todo es transparente.
   Sin fondo propio, los botones quedaban invisibles sobre la foto del carrusel
   y en el modo claro, y solo se leía el texto. Por eso ahora se pinta siempre
   y usa las variables de color en vez de blancos fijos. */
.destinos{
  background:var(--c-nav);
  border-top:1px solid var(--c-linea);
}

/* Arriba del todo la cabecera es transparente: la barra se vela un poco
   para que se lea sobre la foto del carrusel, sin taparla del todo. */
.nav:not(.solida) .destinos{
  background:rgba(10,10,12,.58);
  background:color-mix(in srgb, var(--c-nav) 78%, transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
body.claro .nav:not(.solida) .destinos{background:rgba(255,255,255,.78)}
body.claro .nav:not(.solida) .destinos{background:color-mix(in srgb, var(--c-nav) 78%, transparent)}
.destinos__inner{
  display:flex;align-items:center;gap:14px;
  padding:8px clamp(16px,3vw,44px) 10px;
}
.destinos__titulo{
  font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--c-muted);flex-shrink:0;
}
.destinos__wrap{position:relative;flex:1;min-width:0}
.destinos__pista{
  display:flex;gap:8px;padding:3px 0;
  overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;scroll-padding-inline:4px;
  scrollbar-width:none;
}
.destinos__pista::-webkit-scrollbar{display:none}
.destino{
  flex:0 0 auto;scroll-snap-align:start;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:7px 17px;border-radius:40px;line-height:1.2;
  border:1px solid var(--c-contorno);background:var(--c-relleno);
  color:var(--c-text);
  font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.destino:hover,.destino:focus-visible{
  background:var(--c-primary);color:var(--c-sobre-primario);border-color:transparent;
  transform:translateY(-1px);
}
.destino.activo{background:var(--c-primary);color:var(--c-sobre-primario);border-color:transparent}

/* flechas pequeñas de la barra de destinos */
.flecha--mini{width:34px;border-radius:0}
.flecha--mini svg{width:19px;height:19px}
.flecha--mini.flecha--izq{background:linear-gradient(90deg,var(--c-nav) 45%,rgba(0,0,0,0))}
.flecha--mini.flecha--der{background:linear-gradient(270deg,var(--c-nav) 45%,rgba(0,0,0,0))}
.flecha--mini:hover{color:var(--c-primary)}
/* en modo claro las flechas grandes se pintan blancas: las mini conservan
   su degradado para que se fundan con la barra */
body.claro .flecha--mini.flecha--izq{background:linear-gradient(90deg,var(--c-nav) 45%,rgba(0,0,0,0));color:var(--c-text)}
body.claro .flecha--mini.flecha--der{background:linear-gradient(270deg,var(--c-nav) 45%,rgba(0,0,0,0));color:var(--c-text)}

/* el carrusel principal deja sitio a las dos filas de la cabecera */
.hero__info{padding-top:calc(var(--nav-h) + var(--destinos-h))}

/* en pantallas pequeñas el hero crece y necesita algo más de margen */
@media (max-width:900px){
  .hero__info{
    padding-top:calc(var(--nav-h) + var(--destinos-h) + 46px);
    padding-bottom:110px;
  }
}

/* ═══════════════════════════════════════════════════════════
   AJUSTES DE ESCRITORIO Y DE MÓVIL
   ═══════════════════════════════════════════════════════════ */

/* escritorio: más aire entre las columnas y los enlaces del pie */
@media (min-width:901px){
  .pie{padding-top:64px}
  .pie__cols{
    gap:44px 64px;
    grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
    margin-bottom:44px;
  }
  .pie__col--contacto{min-width:245px}   /* la columna de contacto, más ancha */
  .pie__col h5{margin-bottom:18px}
  .pie__col a{padding:8px 0;font-size:13.5px}
  .pie__abajo{padding-top:32px;gap:24px}
}

/* móvil: «Llamar ahora» y «WhatsApp» comparten línea */
@media (max-width:560px){
  .reserva__contacto{flex-wrap:nowrap;gap:8px}
  .reserva__contacto .btn{
    flex:1 1 0;min-width:0;
    padding:12px 8px;font-size:11px;letter-spacing:.2px;gap:6px;
  }
  .reserva__contacto .btn .ico{width:15px;height:15px}

  .destinos__inner{gap:10px;padding-bottom:10px}
  .destinos__titulo{font-size:10px;letter-spacing:1.6px}
  .destino{padding:6px 14px;font-size:12px}
}

/* ═══════════════════════════════════════════════════════════
   TUS BARRAS DE BOTONES ([ts_barra])
   Se crean en «Taxi Sevilla › Barras de botones». Todo se dibuja
   con las variables de color, para que valgan igual en oscuro
   y en claro y encima de cualquier fondo.
   ═══════════════════════════════════════════════════════════ */
.tsbarra{
  --tsb-vis:var(--tsb-elegidas,5);     /* tarjetas visibles en el mosaico */
  --tsb-hueco:clamp(8px,1vw,16px);
  padding:14px clamp(16px,3vw,44px);
}
.tsbarra__inner{display:flex;align-items:center;gap:14px;min-width:0}
.tsbarra__titulo{
  font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--c-muted);flex-shrink:0;
}
.tsbarra__wrap{position:relative;flex:1;min-width:0}
.tsbarra__pista{display:flex;gap:10px;padding:3px 0;min-width:0}

/* una sola línea, con flechas */
.tsbarra--carrusel .tsbarra__pista{
  overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;scroll-padding-inline:4px;
  scrollbar-width:none;
}
.tsbarra--carrusel .tsbarra__pista::-webkit-scrollbar{display:none}
.tsbarra--carrusel .tsboton{flex:0 0 auto;scroll-snap-align:start}

/* los que no caben pasan a la línea siguiente */
.tsbarra--filas .tsbarra__pista{flex-wrap:wrap}

/* alineación */
.tsbarra--centro .tsbarra__inner{justify-content:center}
.tsbarra--centro .tsbarra__wrap{flex:0 1 auto}
.tsbarra--centro .tsbarra__pista{justify-content:center}
.tsbarra--derecha .tsbarra__inner{justify-content:flex-end}
.tsbarra--derecha .tsbarra__wrap{flex:0 1 auto}
.tsbarra--derecha .tsbarra__pista{justify-content:flex-end}

/* ── el botón ── */
.tsboton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 20px;border-radius:40px;line-height:1.25;
  border:1px solid var(--c-contorno);background:var(--c-relleno);
  color:var(--c-text);text-decoration:none;
  font-size:14px;font-weight:600;white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.tsboton:hover,.tsboton:focus-visible{
  background:var(--c-primary);color:var(--c-sobre-primario);
  border-color:transparent;transform:translateY(-1px);
}

/* el botón marcado como «destacado», en cualquier estilo */
.tsboton--destacado{
  background:linear-gradient(90deg,var(--c-primary),var(--c-primary2));
  color:var(--c-sobre-primario);border-color:transparent;font-weight:700;
}
.tsboton--destacado:hover{filter:brightness(1.08);color:var(--c-sobre-primario)}

/* ── estilos ── */
.tsbarra--solido .tsboton{
  background:linear-gradient(90deg,var(--c-primary),var(--c-primary2));
  color:var(--c-sobre-primario);border-color:transparent;
}
.tsbarra--solido .tsboton:hover{filter:brightness(1.08)}
.tsbarra--solido .tsboton--destacado{
  background:var(--c-text);color:var(--c-bg);
}

.tsbarra--contorno .tsboton{
  background:none;border:2px solid var(--c-primary);color:var(--c-text);
}
.tsbarra--contorno .tsboton:hover{background:var(--c-primary);color:var(--c-sobre-primario)}

.tsbarra--tarjeta .tsboton{border-radius:var(--radio)}

.tsbarra--texto .tsboton{
  background:none;border-color:transparent;padding:8px 10px;
  color:var(--c-muted);border-radius:0;
}
.tsbarra--texto .tsboton:hover{
  background:none;color:var(--c-text);transform:none;text-decoration:underline;
}
.tsbarra--texto .tsboton--destacado{color:var(--c-primary)}

/* ── ICONOS ──
   Valen para las pastillas, para el mosaico y para la barra de destinos. */
.tsboton__icono{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex-shrink:0;
}
.tsboton__icono svg{width:100%;height:100%;stroke-width:1.8}
.tsboton__icono--imagen img{width:100%;height:100%;object-fit:contain;display:block}
.tsboton__icono--simbolo{font-size:16px;line-height:1;font-style:normal}
.tsboton__texto{min-width:0}

/* ── MOSAICO: las tarjetas grandes, al estilo de la fila de marcas de Disney+ ──
   Cada tarjeta ocupa la parte que le toca del ancho, según cuántas hayas
   dicho que se vean a la vez, y lleva su icono encima del nombre. */
.tsbarra--mosaico .tsbarra__pista,
.destinos--mosaico .destinos__pista{gap:var(--tsb-hueco,clamp(8px,1vw,16px))}

.tsbarra--mosaico .tsboton,
.destinos--mosaico .destino{
  flex:0 0 calc((100% - (var(--tsb-vis) - 1) * var(--tsb-hueco,clamp(8px,1vw,16px))) / var(--tsb-vis));
  aspect-ratio:16/10;
  flex-direction:column;justify-content:center;gap:10px;
  padding:12px 10px;border-radius:var(--radio);
  border:2px solid var(--c-contorno);
  background:linear-gradient(155deg,var(--c-bg2) 0%,var(--c-bg) 100%);
  white-space:normal;text-align:center;overflow:hidden;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tsbarra--mosaico .tsboton:hover,.tsbarra--mosaico .tsboton:focus-visible,
.destinos--mosaico .destino:hover,.destinos--mosaico .destino:focus-visible{
  transform:scale(1.06);
  border-color:var(--c-text);
  background:linear-gradient(155deg,var(--c-bg2) 0%,var(--c-bg) 100%);
  color:var(--c-text);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.tsbarra--mosaico .tsboton__icono,
.destinos--mosaico .tsboton__icono{
  width:clamp(24px,2.6vw,40px);height:clamp(24px,2.6vw,40px);
  color:var(--c-primary);
}
.tsbarra--mosaico .tsboton__icono svg,
.destinos--mosaico .tsboton__icono svg{stroke-width:1.5}
.tsbarra--mosaico .tsboton__icono--simbolo,
.destinos--mosaico .tsboton__icono--simbolo{font-size:clamp(22px,2.4vw,34px)}
.tsbarra--mosaico .tsboton__texto,
.destinos--mosaico .tsboton__texto{
  font-size:clamp(10px,.95vw,13px);font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;line-height:1.25;
  overflow-wrap:anywhere;
}

/* la tarjeta destacada se pinta con el color de marca */
.tsbarra--mosaico .tsboton--destacado{
  background:linear-gradient(155deg,var(--c-primary),var(--c-primary2));
  color:var(--c-sobre-primario);border-color:transparent;
}
.tsbarra--mosaico .tsboton--destacado .tsboton__icono{color:var(--c-sobre-primario)}
.tsbarra--mosaico .tsboton--destacado:hover{
  background:linear-gradient(155deg,var(--c-primary),var(--c-primary2));
  color:var(--c-sobre-primario);border-color:var(--c-text);
}

/* en modo claro el degradado del fondo sería casi blanco: se le da cuerpo */
body.claro .tsbarra--mosaico .tsboton,
body.claro .destinos--mosaico .destino,
body.claro .tsbarra--mosaico .tsboton:hover,
body.claro .destinos--mosaico .destino:hover{
  background:linear-gradient(155deg,#ffffff 0%,#e9ebf2 100%);
}
body.claro .tsbarra--mosaico .tsboton:hover,
body.claro .destinos--mosaico .destino:hover{box-shadow:0 12px 26px rgba(20,22,28,.16)}

/* dentro de la cabecera el mosaico se queda en tarjetas pequeñas, para no
   convertir la barra superior en media pantalla */
.destinos--mosaico .destinos__inner{align-items:flex-start}
.nav .destinos--mosaico .destino,
.nav .tsbarra--mosaico .tsboton{aspect-ratio:16/9;max-height:92px}

/* ── tamaños ── */
.tsbarra--pequeno .tsboton{padding:7px 15px;font-size:12.5px}
.tsbarra--pequeno .tsbarra__pista{gap:8px}
.tsbarra--grande .tsboton{padding:14px 30px;font-size:16px}
.tsbarra--grande .tsbarra__pista{gap:12px}

/* ── flechas: aquí son botones redondos, porque la barra puede estar
      sobre cualquier fondo y el degradado de la cabecera no valdría ── */
.tsbarra .flecha--mini{
  top:50%;bottom:auto;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;
  background:var(--c-relleno2);border:1px solid var(--c-contorno);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.tsbarra .flecha--mini.flecha--izq{left:-6px}
.tsbarra .flecha--mini.flecha--der{right:-6px}
.tsbarra .flecha--mini:hover{background:var(--c-primary);color:var(--c-sobre-primario)}
body.claro .tsbarra .flecha--mini{background:var(--c-relleno2);color:var(--c-text)}

/* ── colocación automática ── */

/* dentro de la cabecera se comporta como la barra de destinos */
.nav .tsbarra{padding:8px clamp(16px,3vw,44px) 10px;background:var(--c-nav)}
.nav:not(.solida) .tsbarra{
  background:rgba(10,10,12,.58);
  background:color-mix(in srgb, var(--c-nav) 78%, transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}

/* al empezar el contenido: la cabecera es fija, así que la barra se aparta
   ella sola, y al contenido que va detrás se le quita el hueco repetido */
.tsbarra-zona--bajo-cabecera{padding-top:var(--nav-h)}
body.ts-con-destinos .tsbarra-zona--bajo-cabecera{padding-top:calc(var(--nav-h) + var(--destinos-h))}
.tsbarra-zona--bajo-cabecera + .pagina{padding-top:24px}
.tsbarra-zona--bajo-cabecera + .hero .hero__info{padding-top:40px}
.tsbarra-zona--bajo-cabecera + .resultados{padding-top:24px}
.tsbarra-zona--bajo-cabecera + .pagina--libre,
body.ts-con-destinos .tsbarra-zona--bajo-cabecera + .pagina--libre{padding-top:0}

/* antes del pie */
.tsbarra-zona--sobre-pie{padding:10px 0 46px}

@media (max-width:560px){
  .tsbarra{padding:12px clamp(14px,4vw,24px)}
  .tsbarra__inner{gap:10px}
  .tsbarra__titulo{font-size:10px;letter-spacing:1.6px}
  .tsboton{padding:8px 16px;font-size:13px}
  .tsbarra--grande .tsboton{padding:12px 22px;font-size:14.5px}
}

/* dentro de Elementor la barra no pone márgenes laterales propios */
.elementor-widget-shortcode .tsbarra{padding-inline:0}

/* ═══════════════════════════════════════════════════════════
   COMPATIBILIDAD CON ELEMENTOR
   ═══════════════════════════════════════════════════════════ */

/* páginas diseñadas libremente: sin caja ni márgenes del tema */
.pagina--libre{
  padding:var(--nav-h) 0 0;
  max-width:none;
}
body.ts-con-destinos .pagina--libre{padding-top:calc(var(--nav-h) + var(--destinos-h))}

/* cuando una sección del tema se inserta dentro de un contenedor de
   Elementor, se quitan los márgenes laterales para que encaje dentro */
.elementor-widget-shortcode .fila__titulo,
.elementor-widget-shortcode .pista,
.elementor-widget-shortcode .marcas,
.elementor-widget-shortcode .destinos__inner{
  padding-inline:0;
  scroll-padding-inline:0;
}
.elementor-widget-shortcode .fila{margin-bottom:0}
.elementor-widget-shortcode .marcas__wrap{margin:0}
.elementor-widget-shortcode .hero{margin-bottom:0}
.elementor-widget-shortcode .hero__info{padding-top:0}
.elementor-widget-shortcode .destinos{border:0}

/* dentro de Elementor el carrusel principal no necesita ocupar toda la
   altura de la pantalla */
.elementor-widget-shortcode .hero{height:clamp(380px,55vh,620px)}

/* ── el carrusel, a todo lo ancho en escritorio ──
   Elementor centra el contenido en una caja estrecha (1140 px de serie), y
   ahí dentro el carrusel se queda con dos franjas de fondo a los lados. En
   escritorio se sale de esa caja y ocupa el ancho de la ventana.

   El ancho se calcula descontando la barra de desplazamiento, porque 100vw
   sí la incluye y si no aparecería un scroll horizontal de unos 15 px. Las
   dos medidas las escribe app.js: --ts-scrollbar y --ts-caja.

   El texto no se va con la foto: se queda dentro de una caja del mismo ancho
   que la de Elementor, para seguir alineado con el resto de la página. */
@media (min-width:901px){
  .elementor-widget-shortcode .hero{
    --ts-ventana:calc(100vw - var(--ts-scrollbar,0px));
    width:var(--ts-ventana);
    max-width:none;
    margin-left:calc(50% - var(--ts-ventana) / 2);
    margin-right:calc(50% - var(--ts-ventana) / 2);
  }
  .elementor-widget-shortcode .hero__info{
    width:min(var(--ts-caja,1140px), 100% - 2 * clamp(16px,3vw,52px));
    max-width:none;
    margin-inline:auto;
    padding-inline:0;
  }
  .elementor-widget-shortcode .hero__panel{max-width:640px}
  .elementor-widget-shortcode .hero__puntos{right:calc((100% - var(--ts-caja,1140px)) / 2)}
}

/* el editor de Elementor necesita ver los elementos que el tema oculta */
.elementor-editor-active .flecha{opacity:1}
.elementor-editor-active .tarjeta__pie{opacity:1;transform:none}

/* los textos del tema no heredan tipografías raras dentro de Elementor */
.elementor-widget-shortcode .btn{text-decoration:none}

/* ═══════════════════════════════════════════════════════════
   MÓVIL Y TABLETA
   Este bloque va el último a propósito: manda sobre los ajustes
   anteriores sin tener que subir la especificidad de nadie.
   ═══════════════════════════════════════════════════════════ */

@media (max-width:900px){

  /* ── cabecera: marca, teléfono, Reservar y hamburguesa en una sola línea ── */
  .nav__inner{gap:10px;padding:0 clamp(12px,3vw,20px)}
  .nav__logo{
    font-size:19px;letter-spacing:-.4px;
    flex:0 1 auto;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .nav__logo:hover{transform:none}
  .nav__logo img,.custom-logo{max-height:34px}

  .nav__right{gap:8px;margin-left:auto}
  .nav__tel{padding:8px}                 /* solo el icono */
  .btn--nav{padding:9px 14px;font-size:11px;letter-spacing:.4px}

  /* el avatar no cabe en el móvil */
  .nav__avatar{display:none}

  .nav__burger{display:flex}

  /* ── carrusel: pegado a la cabecera y más bajo ──
     Ocupaba el 70 % de la pantalla del móvil, y sumando la cabecera fija no
     quedaba sitio para nada más. También se rebaja la altura que se le pone
     dentro de Elementor, que si no manda por ser más específica. */
  .hero,
  .elementor-widget-shortcode .hero{
    height:auto;
    min-height:clamp(330px,50vh,470px);
    margin-bottom:-50px;
  }
  .hero__info{
    justify-content:flex-start;
    padding-top:calc(var(--nav-h) + var(--destinos-h) + 18px);
    padding-bottom:78px;
  }
  .hero__puntos{bottom:58px;left:clamp(16px,3vw,52px);right:auto}
}

/* ── etiquetas de destino: que quepan en cualquier pantalla ── */
@media (max-width:640px){
  /* con el dedo se desliza mejor que con las flechas, y así el carril
     aprovecha todo el ancho de la pantalla */
  .destinos .flecha--mini,.tsbarra .flecha--mini{display:none}

  .destinos__inner{gap:10px;padding:8px clamp(12px,4vw,20px) 10px}
  .destinos__titulo,.tsbarra__titulo{font-size:10px;letter-spacing:1.4px}
  .destinos__pista,.tsbarra--carrusel .tsbarra__pista{gap:7px}

  .destino,.tsboton{
    max-width:calc(100vw - 56px);
    overflow:hidden;text-overflow:ellipsis;
    padding:7px 13px;font-size:12.5px;
  }
  .tsbarra{padding:12px clamp(12px,4vw,20px)}
  .tsbarra--grande .tsboton{padding:11px 18px;font-size:14px}

  /* las barras de varias líneas se centran solas si no caben */
  .tsbarra--filas .tsbarra__pista{gap:7px}
}

/* ── textos del carrusel en pantallas estrechas ── */
@media (max-width:560px){
  .hero,
  .elementor-widget-shortcode .hero{min-height:clamp(300px,46vh,410px)}
  .hero__info{padding-top:calc(var(--nav-h) + var(--destinos-h) + 12px);padding-bottom:70px}
  .hero__etiqueta{font-size:10px;letter-spacing:1.6px;margin-bottom:10px;padding:4px 10px}
  .hero__titulo{
    font-size:clamp(24px,6.8vw,32px);letter-spacing:-.8px;margin-bottom:10px;
    overflow-wrap:anywhere;
  }
  .hero__desc{font-size:13.5px;margin-bottom:16px}
  .hero__meta{font-size:12px;gap:8px;margin-bottom:10px}
  .hero__puntos{bottom:52px}
}

/* ── la marca contra los tres controles de la derecha ──
   «TAXISEVILLA.ONLINE» son 18 caracteres, y a 360 px no caben en la misma
   línea que el teléfono, «Reservar» y el menú: el nombre se cortaba y los
   botones quedaban aplastados contra el borde. La solución es dibujar la
   segunda palabra más pequeña y estrechar los tres controles, no seguir
   bajando el tamaño de todo el título. Medido: a 360 px el nombre entra
   completo y los tres siguen visibles. */
@media (max-width:560px){
  .nav__inner{gap:8px;padding:0 12px}
  .nav__right{gap:6px}

  .nav__logo{font-size:18px;letter-spacing:-.6px}
  /* las dos palabras de la marca, del mismo tamaño: encoger solo la segunda
     dejaba «TAXI» grande y «SEVILLA» diminuto */
  .nav__logo span{font-size:inherit;letter-spacing:inherit}
  /* si la marca es una imagen, tampoco puede comerse la fila */
  .nav__logo img,.custom-logo{max-height:30px;max-width:150px;object-fit:contain}

  .nav__tel{width:31px;height:31px;padding:7px;justify-content:center}
  .btn--nav{padding:9px 12px;font-size:10.5px;letter-spacing:.2px}
  .nav__burger{width:34px;height:32px}
}

/* en los móviles más estrechos la marca se reduce entera, sin partirla */
@media (max-width:340px){
  .nav__logo{font-size:16px}
  .nav__logo img,.custom-logo{max-width:120px}
}

/* ── pie: en móvil una columna por fila, sin solapes ── */
@media (max-width:700px){
  .pie{margin-top:40px;padding:36px clamp(16px,4vw,24px) 30px}
  .pie__cols{grid-template-columns:1fr;gap:26px;margin-bottom:26px}
  .pie__col--contacto{min-width:0}
  .pie__logo{font-size:20px}
  .pie__col h5{margin-bottom:10px}
  .pie__col a{padding:6px 0}
  /* el correo es lo que más se salía de la caja */
  .pie__col a.pie__mail{overflow-wrap:anywhere}
  .pie__col a.pie__tel{font-size:19px}
  .pie__abajo{flex-direction:column;align-items:flex-start;gap:10px;padding-top:20px}
  .pie__aviso{max-width:none}
}

/* en escritorio el panel no existe: el menú de la barra ya lleva los enlaces */
@media (min-width:901px){
  .menumovil{display:none}
}

/* nombres largos de rutas y servicios dentro de sus tarjetas */
@media (max-width:640px){
  .marca span{
    letter-spacing:1.4px;line-height:1.25;text-align:center;
    padding:0 8px;overflow-wrap:anywhere;
  }
  .tarjeta__pie h3,.modal__cuerpo h2{overflow-wrap:anywhere}
  .fila__titulo{font-size:16px}
}

/* en móvil la cabecera es algo más baja: todo lo que la calcula usa
   esta variable, así que el carrusel y las páginas suben con ella */
@media (max-width:560px){
  :root{--nav-h:60px}
  .nav__logo img,.custom-logo{max-height:30px}
}

/* ── mosaico: cuántas tarjetas caben de verdad en cada pantalla ──
   El número que eliges en el panel vale para escritorio; aquí abajo el
   propio tema lo baja, y deja media tarjeta asomando para que se vea que
   la fila sigue. */
.destinos--mosaico{--tsb-vis:var(--tsb-elegidas,5);--tsb-hueco:clamp(8px,1vw,16px)}

@media (max-width:1080px){
  .tsbarra--mosaico,.destinos--mosaico{--tsb-vis:min(var(--tsb-elegidas,5),4)}
}
@media (max-width:900px){
  .tsbarra--mosaico,.destinos--mosaico{--tsb-vis:3.2}
}
@media (max-width:640px){
  .tsbarra--mosaico,.destinos--mosaico{--tsb-vis:2.3;--tsb-hueco:8px}
  /* aquí el nombre manda sobre el icono: se le da algo más de sitio */
  .tsbarra--mosaico .tsboton,.destinos--mosaico .destino{
    aspect-ratio:5/4;padding:10px 8px;gap:8px;
  }
  .tsbarra--mosaico .tsboton__texto,.destinos--mosaico .tsboton__texto{
    font-size:10.5px;letter-spacing:.8px;
  }
  /* el mosaico no se corta con puntos suspensivos: el texto va en dos líneas */
  .destinos--mosaico .destino,.tsbarra--mosaico .tsboton{
    max-width:none;overflow:hidden;text-overflow:clip;
  }
}
@media (max-width:400px){
  .tsbarra--mosaico,.destinos--mosaico{--tsb-vis:2.1}
}

/* con el texto dentro de su propio span, el corte por puntos suspensivos
   tiene que pedirse ahí, no en el botón */
@media (max-width:640px){
  .destino:not(.destino--mosaico) .tsboton__texto,
  .tsbarra:not(.tsbarra--mosaico) .tsboton__texto{
    overflow:hidden;text-overflow:ellipsis;
  }
  .destinos--mosaico .tsboton__texto,.tsbarra--mosaico .tsboton__texto{
    overflow:visible;text-overflow:clip;
  }
}

/* aviso de las barras: solo lo ve quien puede administrar la web */
.tsbarra-aviso{
  max-width:820px;margin:16px auto;padding:14px 18px;
  border-radius:10px;line-height:1.55;font-size:13.5px;
  background:rgba(242,183,5,.12);border:1px solid rgba(242,183,5,.45);
  color:var(--c-text);
}
.tsbarra-aviso a{color:var(--c-primary);text-decoration:underline;text-underline-offset:2px}

/* ═══════════════════════════════════════════════════════════
   SECCIONES LIBRES
   Comparten bloque con el carrusel (.hero), así que miden
   exactamente lo mismo. Aquí solo se corrige lo que fuera de la
   portada no tiene sentido —el hueco de la cabecera fija y el
   solape con la fila siguiente— y se añaden las variantes de
   alto, posición del texto y fondo.
   ═══════════════════════════════════════════════════════════ */
.hero--libre{margin-bottom:0}
.hero--libre .hero__info{padding-top:0;padding-bottom:0;justify-content:center}
.hero--libre .hero__panel{width:100%}
/* el h1 es el de la página; el de la sección va un punto por debajo */
.hero--libre .hero__titulo{font-size:clamp(30px,4.4vw,60px)}

/* alto · sin clase de alto, el mismo que el carrusel */
.hero.hero--alto-media{height:clamp(340px,55vh,620px)}
.hero.hero--alto-baja{height:clamp(240px,34vh,420px)}
.hero.hero--alto-pantalla{height:100vh}

/* posición del texto */
.hero--alineado-centro .hero__info{max-width:none;align-items:center}
.hero--alineado-centro .hero__panel{align-items:center;text-align:center;max-width:760px;margin-inline:auto}
.hero--alineado-centro .hero__desc{margin-left:auto;margin-right:auto}
.hero--alineado-centro .hero__meta,
.hero--alineado-centro .hero__botones{justify-content:center}
.hero--alineado-centro .hero__degradado{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.72))}

.hero--alineado-derecha .hero__info{max-width:none;align-items:flex-end}
.hero--alineado-derecha .hero__panel{align-items:flex-end;text-align:right;max-width:640px}
.hero--alineado-derecha .hero__desc{margin-left:auto}
.hero--alineado-derecha .hero__meta,
.hero--alineado-derecha .hero__botones{justify-content:flex-end}
.hero--alineado-derecha .hero__degradado{background:linear-gradient(270deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.65) 35%,rgba(0,0,0,0) 70%)}

/* fondo */
.hero--fondo-oscuro .hero__degradado{background:rgba(0,0,0,.55)}
.hero--fondo-limpio .hero__degradado{background:none}
.hero--sin-corte .hero__degradado-inf{display:none}

/* con la caja marcada, el texto se alinea con el resto de la página */
@media (min-width:901px){
  .hero--libre.hero--caja .hero__info{
    width:min(var(--ts-caja,1140px), 100% - 2 * clamp(16px,3vw,52px));
    max-width:none;margin-inline:auto;padding-inline:0;
  }
}

/* en pantallas pequeñas la sección crece con su texto, igual que el carrusel */
@media (max-width:900px){
  .hero.hero--libre{height:auto;min-height:clamp(330px,50vh,470px)}
  .hero.hero--alto-media{min-height:clamp(300px,44vh,430px)}
  .hero.hero--alto-baja{min-height:clamp(220px,32vh,340px)}
  .hero.hero--alto-pantalla{min-height:80vh}
  .hero--libre .hero__info{padding-top:34px;padding-bottom:34px}

  /* a la derecha no cabe: en móvil todo se lee mejor alineado a la izquierda */
  .hero--alineado-derecha .hero__info{align-items:flex-start}
  .hero--alineado-derecha .hero__panel{align-items:flex-start;text-align:left}
  .hero--alineado-derecha .hero__meta,
  .hero--alineado-derecha .hero__botones{justify-content:flex-start}
  .hero--alineado-derecha .hero__degradado,
  .hero--alineado-centro .hero__degradado{background:linear-gradient(180deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,.85) 100%)}
}

/* icono opcional de los botones de una sección */
.hero__botones .ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}
.hero__botones .ico--imagen img{width:100%;height:100%;object-fit:contain;display:block}
.hero__botones .ico--simbolo{width:auto;height:auto;font-size:15px;line-height:1;font-style:normal}

/* el titular de una sección, ajustado a las pantallas pequeñas */
@media (max-width:900px){
  .hero--libre .hero__titulo{font-size:clamp(26px,6.2vw,40px);letter-spacing:-1px}
}
@media (max-width:560px){
  .hero--libre .hero__titulo{font-size:clamp(24px,6.8vw,32px);letter-spacing:-.8px;overflow-wrap:anywhere}
}

/* las secciones no se mueven: la animación de entrada del texto y el zoom
   lento de la foto se quedan solo en el carrusel */
.hero--libre .hero__slide{opacity:1;transform:none;transition:none}
.hero--libre .aparece{animation:none}

/* ═══════════════════════════════════════════════════════════
   PREGUNTAS FRECUENTES
   Se abren y se cierran con <details>, cosa del navegador: sin
   JavaScript, y con el teclado funcionan igual.
   ═══════════════════════════════════════════════════════════ */
.faq{
  max-width:900px;margin:0 auto;
  padding:clamp(28px,5vw,56px) clamp(16px,3vw,24px);
}
.faq__titulo{
  font-size:clamp(22px,2.6vw,34px);font-weight:800;letter-spacing:-.6px;
  margin-bottom:22px;
}
.faq__lista{display:grid;gap:10px}
.faq__item{
  border:1px solid var(--c-linea);
  border-radius:var(--radio);
  background:var(--c-relleno);
  overflow:hidden;
  transition:border-color .2s;
}
.faq__item:hover,
.faq__item[open]{border-color:var(--c-contorno)}
.faq__pregunta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;cursor:pointer;list-style:none;
  font-size:15.5px;font-weight:700;line-height:1.4;
}
/* el triángulo de serie del navegador sobra: ya hay flecha propia */
.faq__pregunta::-webkit-details-marker{display:none}
.faq__pregunta::marker{content:''}
.faq__pregunta:focus-visible{outline:2px solid var(--c-primary);outline-offset:-2px}
.faq__flecha{
  width:18px;height:18px;flex-shrink:0;
  color:var(--c-primary);transition:transform .25s;
}
.faq__item[open] .faq__flecha{transform:rotate(180deg)}
.faq__respuesta{
  padding:0 18px 18px;
  color:var(--c-muted);font-size:14.5px;line-height:1.6;
}
.faq__respuesta p{margin-bottom:12px}
.faq__respuesta > *:last-child{margin-bottom:0}
.faq__respuesta a{color:var(--c-primary);text-decoration:underline;text-underline-offset:2px}

@media (max-width:560px){
  .faq{padding-inline:clamp(12px,4vw,18px)}
  .faq__pregunta{padding:14px 15px;font-size:14.5px}
  .faq__respuesta{padding:0 15px 15px;font-size:14px}
}

/* botones de una sección: se pueden colocar aparte del texto. Al ser una
   fila dentro de una columna, hay que estirarla para que la colocación se
   note; si no, la fila mide lo que miden los botones. */
.hero--libre .hero__botones--izquierda,
.hero--libre .hero__botones--centro,
.hero--libre .hero__botones--derecha{width:100%;align-self:stretch}
.hero--libre .hero__botones--izquierda{justify-content:flex-start}
.hero--libre .hero__botones--centro{justify-content:center}
.hero--libre .hero__botones--derecha{justify-content:flex-end}

/* Sección diseñada con Elementor: manda tu diseño, así que el tema no le
   pone ni franja ni caja; solo la deja a todo lo ancho. */
.seccion-libre{position:relative;width:100%}
.seccion-libre > *:last-child{margin-bottom:0}

/* ── secciones: el texto, arriba, en el medio o abajo ──
   La franja centra su contenido de serie; estas clases lo suben o lo
   bajan sin tocar nada más. Llevan .hero--libre delante para ganarle a
   la colocación que trae el carrusel. */
.hero--libre.hero--vertical-arriba .hero__info{justify-content:flex-start;padding-top:clamp(14px,2.5vh,32px)}
.hero--libre.hero--vertical-centro .hero__info{justify-content:center}
.hero--libre.hero--vertical-abajo .hero__info{justify-content:flex-end;padding-bottom:clamp(28px,6vh,72px)}

/* ── secciones: la altura escrita a mano ──
   El valor lo pone la sección en --ts-alto. En pantallas pequeñas deja de
   ser una altura fija y pasa a ser un mínimo, para que el texto nunca se
   quede sin sitio. */
.hero.hero--alto-personalizado{height:var(--ts-alto,clamp(460px,82vh,860px))}

@media (max-width:900px){
  .hero.hero--alto-personalizado{height:auto;min-height:var(--ts-alto,clamp(330px,50vh,470px))}
}

/* La zona de texto de una sección ocupa toda la franja, sea cual sea su
   alto. Sin esto, cuando el alto es un mínimo —en móvil, o con una medida
   escrita a mano— la zona medía solo lo que mide el texto y colocarlo
   arriba o abajo no cambiaba nada. */
.hero--libre{display:flex;flex-direction:column}
.hero--libre .hero__info{flex:1 1 auto;height:auto}

/* Si la portada que has escrito tú empieza con una franja a todo lo ancho
   —el carrusel o una sección—, no hace falta dejarle hueco a la cabecera:
   la franja pasa por debajo, igual que en la portada del tema. */
.pagina--libre:has(> .hero:first-child),
.pagina--libre:has(> .seccion-libre:first-child){padding-top:0}

/* ── el texto del carrusel, pegado arriba ──
   Antes iba centrado en la franja. Ahora arranca justo debajo de la
   cabecera y de la barra de destinos, con el hueco mínimo para que no se
   toquen. La cuenta se hace sola: si apagas la barra de destinos su alto
   es 0 y el texto sube otro tanto.

   Las secciones no se enteran de esto: cada una manda con su propio
   ajuste de «Texto, a lo alto», que tiene más peso. */
.hero__info{
  justify-content:flex-start;
  padding-top:calc(var(--nav-h) + var(--destinos-h) + 10px);
}

@media (max-width:900px){
  .hero__info{padding-top:calc(var(--nav-h) + var(--destinos-h) + 8px)}
}

@media (max-width:560px){
  .hero__info{padding-top:calc(var(--nav-h) + var(--destinos-h) + 6px)}
}

/* Una sección puesta como primera cosa de la portada pasa por debajo de la
   cabecera fija. Si además lleva el texto arriba, ahí sí hace falta dejarle
   el hueco de la cabecera y de la barra de destinos, o el titular quedaría
   tapado. En cualquier otro sitio de la página no hace falta. */
.pagina--libre > .hero--vertical-arriba:first-child .hero__info{
  padding-top:calc(var(--nav-h) + var(--destinos-h) + 10px);
}

/* ── secciones en móvil: el texto, aún más arriba ──
   En una pantalla pequeña cada píxel de arriba se nota, así que el hueco
   deja de depender del alto de la pantalla y pasa a ser un valor corto y
   fijo. La sección que va la primera de la portada mantiene el hueco de la
   cabecera —si no, el titular quedaría debajo de ella—, pero también más
   ajustado. */
@media (max-width:900px){
  .hero--libre.hero--vertical-arriba .hero__info{padding-top:10px}
  .pagina--libre > .hero--vertical-arriba:first-child .hero__info{
    padding-top:calc(var(--nav-h) + var(--destinos-h) + 4px);
  }
}

@media (max-width:560px){
  .hero--libre.hero--vertical-arriba .hero__info{padding-top:8px}
}

/* ── una sección dentro de su contenedor de Elementor ──
   De serie la sección se sale de la caja y ocupa toda la ventana. Con
   «No salirse del contenedor» se queda dentro, y entonces el fondo, el
   ancho y los márgenes que le pongas al contenedor en Elementor se ven,
   porque la sección ya no los tapa ni los desborda. */
.elementor-widget-shortcode .hero.hero--ancho-caja{
  width:auto;
  max-width:100%;
  margin-left:0;
  margin-right:0;
}

/* Fondo «sin»: la sección no pinta nada detrás, así que se ve lo que haya
   debajo. Es lo que hace que el fondo puesto en Elementor mande. */
.hero--fondo-sin{background:transparent}