/*
Theme Name: Taxis Marugán (Child)
Template: twentytwentyone
Version: 1.0.0
Text Domain: taxismarugan-child
*/

/* =====================
   Variables (tema claro)
===================== */
:root{
  --tm-bg: #f7f8fa;
  --tm-surface: #ffffff;

  --tm-text: #000000;
  --tm-muted: #000000;
  

  --tm-brand: #f7c948;     /* amarillo taxi */
  --tm-brand-2: #ffd86b;

  --tm-border: #e5e7eb;
  --tm-card: #ffffff;

  --tm-radius: 16px;
  --tm-shadow: 0 10px 30px rgba(0,0,0,.08);

  --tm-max: 1200px;
  --tm-focus: 0 0 0 3px rgba(247,201,72,.45);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--tm-bg);
  color:var(--tm-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.6;
  overflow-x: hidden;
  overflow-y: auto;
}

a{ color:inherit; text-decoration:none; }
a:hover{ color:#111827; }

/* =====================
   Logo
===================== */
.tm-brand img{
  display: block;
  max-height: 48px;
  width: auto;
}

/* Ajuste en móvil */
@media (max-width: 600px){
  .tm-brand img{
    max-height: 40px;
  }
}

.tm-footer__logo{
  max-width: 180px;
  height: auto;
  margin-bottom: 14px;
}


/* Accesibilidad */
:focus-visible{
  outline:none;
  box-shadow:var(--tm-focus);
  border-radius:6px;
}

/* =====================
   Layout
===================== */
.tm-container{
  max-width:var(--tm-max);
  margin:0 auto;
  padding:0 20px;
}

.tm-section{
  padding:64px 0;
}

@media (max-width: 600px){
  .tm-section{
    padding:48px 0;
  }
}

.tm-section .tm-card{
  max-width:720px;
  margin: 0 auto;
}


.tm-section--alt{
  background:#f1f5f9;
}

/* =====================
   HEADER
===================== */
.tm-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--tm-border);
}

.tm-header__inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  height:72px;
}

/* Logo */
.tm-brand{
  font-weight:900;
  font-size:20px;
  letter-spacing:.4px;
  white-space:nowrap;
}

/* Navegación centrada */
.tm-nav{
  display:flex;
  justify-content:center;
  gap:28px;
}

.tm-nav a{
  font-weight:600;
  color:var(--tm-muted);
}

.tm-nav a:hover,
.tm-nav a[aria-current="page"]{
  color:var(--tm-text);
}

/* Teléfonos */
.tm-cta{
  display:flex;
  gap:12px;
}

.tm-phone{
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  border:1px solid var(--tm-border);
  background:#fff;
}

.tm-phone--main{
  background:linear-gradient(180deg, var(--tm-brand-2), var(--tm-brand));
  border:none;
}

/* =====================
   Hero layout avanzado
===================== */
.tm-hero{
  margin: 10px 0;
}
.tm-hero__layout{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:60px;
  align-items:center;
}

@media (max-width: 900px){
  .tm-hero__layout{
    grid-template-columns:1fr;
    gap:40px;
  }
}

.tm-hero__content{
  max-width:640px;
}

.tm-hero__list{
  margin:24px 0;
  padding-left:18px;
  color:var(--tm-muted);
}

.tm-hero__list li{
  margin-bottom:8px;
}

.tm-hero__cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* Columna visual */
.tm-hero__visual{
  display:flex;
  justify-content:center;
}

.tm-hero__mock{
  width:100%;
  max-width:420px;
  height:360px;
  border-radius:24px;
  background:
    linear-gradient(135deg, rgba(247,201,72,.25), rgba(247,201,72,.05));
  box-shadow: var(--tm-shadow);
}


@media (max-width: 900px){
  .tm-hero__visual{
    order:-1;
  }
}


/* =====================
   UI
===================== */
.tm-badge-pill{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(247,201,72,.25);
  font-weight:700;
  font-size:13px;
  margin-bottom:18px;
}

.tm-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 22px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--tm-brand-2), var(--tm-brand));
  font-weight:800;
  color:#111;
}

.tm-btn--ghost{
  background:#fff;
  border:1px solid var(--tm-border);
}

/* =====================
   GRID / CARDS
===================== */
.tm-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

@media (max-width: 900px){
  .tm-grid{ grid-template-columns:1fr; }
}

.tm-card{
  background:var(--tm-card);
  border-radius:var(--tm-radius);
  padding:28px;
  box-shadow:var(--tm-shadow);
}

.tm-card strong{
  font-size:18px;
}

.tm-card p{
  margin-top:10px;
  color:var(--tm-muted);
}

/* =====================
   Servicios
===================== */
.tm-section__header{
  max-width:640px;
  margin: 0 auto 40px;
  text-align: center;
}

.tm-section__lead{
  margin-top:14px;
  color:var(--tm-muted);
  font-size:18px;
}

.tm-services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

@media (max-width: 900px){
  .tm-services{
    grid-template-columns:1fr;
  }
}

.tm-service-card{
  background:var(--tm-card);
  border-radius:var(--tm-radius);
  padding:32px 28px;
  box-shadow:var(--tm-shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}

.tm-service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.tm-service-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  background:linear-gradient(180deg, var(--tm-brand-2), var(--tm-brand));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111;
  margin-bottom:18px;
}

.tm-service-card h3{
  margin:0 0 10px;
  font-size:20px;
}

.tm-service-card p{
  margin:0;
  color:var(--tm-muted);
  line-height:1.6;
}

/* =====================
   Por qué elegirnos
===================== */
.tm-reasons{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}

@media (max-width: 1000px){
  .tm-reasons{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width: 600px){
  .tm-reasons{
    grid-template-columns:1fr;
  }
}

.tm-reason-card{
  text-align:center;
  padding:36px 26px;
  border-radius:var(--tm-radius);
  background:var(--tm-card);
  box-shadow:var(--tm-shadow);
  opacity:0;
  transform: translateY(20px);
  animation: tm-fade-up .6s ease forwards;
}

/* Escalonado suave */
.tm-reason-card:nth-child(1){ animation-delay:.05s; }
.tm-reason-card:nth-child(2){ animation-delay:.15s; }
.tm-reason-card:nth-child(3){ animation-delay:.25s; }
.tm-reason-card:nth-child(4){ animation-delay:.35s; }

.tm-reason-icon{
  width:64px;
  height:64px;
  margin:0 auto 18px;
  border-radius:50%;
  background:linear-gradient(180deg, var(--tm-brand-2), var(--tm-brand));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111;
}

.tm-reason-card h3{
  margin:0 0 10px;
  font-size:20px;
}

.tm-reason-card p{
  margin:0;
  color:var(--tm-muted);
  line-height:1.6;
}

/* Hover sutil */
.tm-reason-card{
  transition: transform .25s ease, box-shadow .25s ease;
}

.tm-reason-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0,0,0,.14);
}

.tm-reason-card:hover .tm-reason-icon{
  transform: translateY(-3px);
  transition: transform .25s ease;
}


/* =====================
   Zonas de servicio
===================== */
.tm-zones{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:48px;
  align-items:start;
}

@media (max-width: 900px){
  .tm-zones{
    grid-template-columns:1fr;
    gap:32px;
  }
}

.tm-zones__content p{
  margin-bottom:16px;
  color:var(--tm-muted);
  line-height:1.7;
}

.tm-zones__cta{
  margin-top:24px;
}

/* Lista de zonas */
.tm-zones__list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.tm-zone{
  padding:10px 16px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--tm-border);
  font-weight:600;
  font-size:14px;
  box-shadow: var(--tm-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.tm-zone:hover{
  transform: translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
}

/* =====================
   CTA final
===================== */
.tm-cta-final{
  background: linear-gradient(
    180deg,
    rgba(247,201,72,.25),
    rgba(247,201,72,.15)
  );
}

.tm-cta-final__box{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  background:#fff;
  border-radius:var(--tm-radius);
  padding:64px 32px;
  box-shadow:var(--tm-shadow);
}

.tm-cta-final__box h2{
  margin:0 0 18px;
  font-size:clamp(28px, 3vw, 36px);
}

.tm-cta-final__text{
  margin:0 auto 32px;
  max-width:600px;
  font-size:18px;
  color:var(--tm-muted);
}

.tm-cta-final__actions{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

/* =====================
   Footer
===================== */
.tm-footer{
  background:#0f172a;
  color:#e5e7eb;
}

.tm-footer__main{
  padding:80px 0;
}

.tm-footer__grid{
  display:grid;
  grid-template-columns:2fr 1fr 1.5fr;
  gap:48px;
}

@media (max-width: 900px){
  .tm-footer__grid{
    grid-template-columns:1fr;
    gap:40px;
  }
}

.tm-footer__logo{
  font-size:22px;
  font-weight:900;
  display:block;
  margin-bottom:14px;
}

.tm-footer__brand p{
  max-width:420px;
  color:#cbd5f5;
}

.tm-footer__nav strong,
.tm-footer__contact strong{
  display:block;
  margin-bottom:12px;
  font-size:16px;
}

.tm-footer__nav ul{
  list-style:none;
  padding:0;
  margin:0;
}

.tm-footer__nav li{
  margin-bottom:8px;
}

.tm-footer__nav a{
  color:#cbd5f5;
}

.tm-footer__nav a:hover{
  color:#fff;
}

.tm-footer__contact a{
  color:#fff;
  font-weight:700;
}

.tm-footer__zone{
  margin-top:14px;
  color:#cbd5f5;
  font-size:14px;
}

/* Banda Kit Digital */
.tm-footer__kit{
  background:#fff;
  padding:12px 0;
  text-align:center;
}

.tm-footer__kit img{
  width: 60%;
}

/* Copyright */
.tm-footer__copy{
  text-align:center;
  font-size:14px;
  color:#94a3b8;
  padding:18px 12px;
  background:#020617;
}

/* =====================
   Botón flotante llamar (FIX DEFINITIVO)
===================== */
.tm-call-float{
  position: fixed !important;
  inset: auto 18px 18px auto;
  z-index: 2147483647; /* máximo posible */
  display: block !important;
  pointer-events: auto;
}

.tm-call-float a{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--tm-brand-2), var(--tm-brand));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 18px 40px rgba(247,201,72,.45);
  text-decoration: none;
  animation: tm-pulse 2s infinite;
}

/* Animación */
@keyframes tm-pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.12); }
  100%{ transform:scale(1); }
}


/* =====================
   Animaciones sutiles
===================== */

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Entrada de servicios ---------- */
.tm-service-card{
  opacity: 0;
  transform: translateY(20px);
  animation: tm-fade-up .6s ease forwards;
}

/* Escalonado automático */
.tm-service-card:nth-child(1){ animation-delay:.05s; }
.tm-service-card:nth-child(2){ animation-delay:.12s; }
.tm-service-card:nth-child(3){ animation-delay:.19s; }
.tm-service-card:nth-child(4){ animation-delay:.26s; }
.tm-service-card:nth-child(5){ animation-delay:.33s; }
.tm-service-card:nth-child(6){ animation-delay:.40s; }

/* Keyframes */
@keyframes tm-fade-up{
  to{
    opacity:1;
    transform: translateY(0);
  }
}

/* ---------- Hover refinado ---------- */
.tm-service-card{
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.tm-service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0,0,0,.14);
}

/* Icono con micro movimiento */
.tm-service-icon{
  transition: transform .25s ease;
}

.tm-service-card:hover .tm-service-icon{
  transform: translateY(-3px);
}

@media (max-width: 1200px){
  body{ padding-bottom: 90px; }
}


/* =====================
   Servicios - página
===================== */
.tm-services--vertical{
  display:flex;
  flex-direction:column;
  gap:32px;
}

.tm-service-block{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:24px;
  align-items:flex-start;
  background:#fff;
  padding:32px;
  border-radius:var(--tm-radius);
  box-shadow:var(--tm-shadow);
}

@media (max-width: 700px){
  .tm-service-block{
    grid-template-columns:1fr;
  }
}

.tm-service-block h2{
  margin:0 0 10px;
  font-size:22px;
}

.tm-service-block p{
  margin:0;
  color:var(--tm-muted);
}

/* =====================
   Servicios grid (cards)
===================== */
.tm-services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

@media (max-width: 1000px){
  .tm-services-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .tm-services-grid{
    grid-template-columns:1fr;
  }
}

.tm-service-card{
  background:#fff;
  border-radius:var(--tm-radius);
  padding:32px 26px;
  box-shadow:var(--tm-shadow);
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .25s ease, box-shadow .25s ease;
  min-height:260px; /* sensación de card cuadrada */
}

.tm-service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 48px rgba(0,0,0,.14);
}

.tm-service-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  background:linear-gradient(180deg, var(--tm-brand-2), var(--tm-brand));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}

.tm-service-card h3{
  margin:0;
  font-size:20px;
}

.tm-service-card p{
  margin:0;
  color:var(--tm-muted);
  line-height:1.6;
}


/* =====================
   Coches
===================== */
.tm-cars-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

@media (max-width: 1000px){
  .tm-cars-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width: 600px){
  .tm-cars-grid{
    grid-template-columns:1fr;
  }
}

.tm-car-card{
  background:#fff;
  border-radius:var(--tm-radius);
  overflow:hidden;
  box-shadow:var(--tm-shadow);
}

.tm-car-card img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

.tm-car-card figcaption{
  padding:14px;
  font-size:14px;
  color:var(--tm-muted);
}

/* Estado sin imágenes */
.tm-car-empty{
  background:#fff;
  border-radius:var(--tm-radius);
  padding:40px;
  box-shadow:var(--tm-shadow);
  color:var(--tm-muted);
}

/* =====================
   Características coches
===================== */
.tm-car-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

@media (max-width: 1000px){
  .tm-car-features{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width: 600px){
  .tm-car-features{
    grid-template-columns:1fr;
  }
}

.tm-feature-card{
  background:#fff;
  border-radius:var(--tm-radius);
  padding:32px 26px;
  box-shadow:var(--tm-shadow);
  text-align:left;
  transition:transform .25s ease, box-shadow .25s ease;
}

.tm-feature-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 48px rgba(0,0,0,.14);
}

.tm-feature-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  background:linear-gradient(180deg, var(--tm-brand-2), var(--tm-brand));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin-bottom:16px;
}

.tm-feature-card h3{
  margin:0 0 10px;
  font-size:18px;
}

.tm-feature-card p{
  margin:0;
  color:var(--tm-muted);
  line-height:1.6;
}


/* =====================
   Contacto
===================== */
.tm-contact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

@media (max-width: 900px){
  .tm-contact-grid{
    grid-template-columns:1fr;
  }
}

.tm-contact-card{
  background:#fff;
  border-radius:var(--tm-radius);
  padding:32px;
  box-shadow:var(--tm-shadow);
  text-align:center;
}

.tm-contact-icon{
  width:56px;
  height:56px;
  margin:0 auto 16px;
  border-radius:14px;
  background:linear-gradient(180deg, var(--tm-brand-2), var(--tm-brand));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
}

.tm-contact-card h3{
  margin:0 0 10px;
}

.tm-contact-card a{
  font-weight:700;
}

/* Formulario */
.tm-form{
  max-width:720px;
  margin: 0 auto;
}

.tm-form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

@media (max-width: 600px){
  .tm-form-grid{
    grid-template-columns:1fr;
  }
}

.tm-field label{
  display:block;
  margin-bottom:6px;
  font-weight:600;
}

.tm-field input,
.tm-field textarea{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--tm-border);
  font-size:15px;
}

.tm-field textarea{
  min-height:140px;
  resize:vertical;
}

.tm-form-actions{
  margin-top:24px;
}

.tm-field select{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--tm-border);
  font-size:15px;
  background:#fff;
}

/* =====================
   Menú hamburguesa
===================== */

/* Botón */
.tm-menu-toggle{
  display:none;
  background:none;
  border:0;
  width:40px;
  height:32px;
  padding:0;
  cursor:pointer;
}

.tm-menu-toggle span{
  display:block;
  height:3px;
  background:var(--tm-text);
  margin:6px 0;
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}

/* Móvil */
@media (max-width: 900px){

  .tm-menu-toggle{
    display:block;
  }

  /* Ocultar teléfonos en móvil (ya tienes botón flotante) */
  .tm-cta{
    display:none;
  }

  /* Menú oculto por defecto */
  .tm-nav{
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    gap:0;
    padding:16px 0;
    border-bottom:1px solid var(--tm-border);
    display:none;
  }

  .tm-nav a{
    padding:14px 24px;
    font-weight:600;
  }

  /* Menú abierto */
  .tm-nav.is-open{
    display:flex;
  }

  /* Animación icono */
  .tm-menu-toggle.is-open span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
  }

  .tm-menu-toggle.is-open span:nth-child(2){
    opacity:0;
  }

  .tm-menu-toggle.is-open span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
  }
}

/* =====================
   FIX menú hamburguesa (definitivo)
===================== */

@media (max-width: 900px){

  /* Header en móvil */
  .tm-header__inner{
    grid-template-columns: auto auto;
  }

  /* Botón hamburguesa visible y clicable */
  .tm-menu-toggle{
    display:block;
    justify-self:end;
    z-index:10001;
  }

  /* Sacamos el nav del layout */
  .tm-nav{
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    display:none;
    z-index:10000;
  }

  .tm-nav.is-open{
    display:flex;
  }

  /* Ocultamos teléfonos en móvil */
  .tm-cta{
    display:none;
  }
}

/* =====================
   Legal / Accesibilidad
===================== */
.tm-legal{
  max-width: 920px;
  margin: 0 auto;
}

.tm-legal__block{
  background:#fff;
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow);
  padding: 28px;
  margin-bottom: 22px;
}

.tm-legal__block h2{
  margin: 0 0 12px;
}

.tm-legal__block h3{
  margin: 18px 0 10px;
  font-size: 18px;
}

.tm-legal__block p{
  margin: 0 0 12px;
}

.tm-legal__block ul{
  margin: 10px 0 0;
  padding-left: 18px;
}

.tm-legal__checks{
  list-style: none;
  padding-left: 0;
}

.tm-legal__checks li{
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}

.tm-legal__checks li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
}

/* =====================
   FIX VISUAL FOOTER
===================== */
.tm-footer{
  display: block;
  width: 100%;
  position: relative;
  clear: both;
  margin-top: 64px; /* ← CLAVE */
}

/* =====================
   Logo header
===================== */
.tm-brand img{
  display: block;
  max-height: 48px;
  width: auto;
}

/* Móvil */
@media (max-width: 600px){
  .tm-brand img{
    max-height: 40px;
  }
}

/* =====================
   Carrusel de coches
===================== */

.tm-cars-carousel{
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.tm-cars-carousel::-webkit-scrollbar{
  height: 8px;
}

.tm-cars-carousel::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.2);
  border-radius: 8px;
}

.tm-car-slide{
  flex: 0 0 80%;
  max-width: 80%;
  scroll-snap-align: start;
  background: #fff;
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow);
  overflow: hidden;
}

@media (min-width: 900px){
  .tm-car-slide{
    flex: 0 0 32%;
    max-width: 32%;
  }
}

.tm-car-slide img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.tm-car-slide figcaption{
  padding: 12px;
  font-size: 14px;
  color: var(--tm-text);
}