/* =========================================================
   Rediseño oct-2026 · Fase 1 — paleta y sombras unificadas
   Un solo acento (#356ea6) con sus tonos + grises tintados de navy.
   Solo color y sombra: no toca layout, tipografía ni textos.
   ========================================================= */
html:root{
  --cm-blue:#356ea6;
  --cm-blue-700:#2a5885;
  --cm-blue-800:#1f4468;
  --cm-blue-300:#7fa6cc;
  --cm-blue-50:#eaf3fb;
  --cm-ink:#16263a;
  --cm-text:#3a4654;
  --cm-muted:#51606d;
  --cm-line:#e3eaf1;
  --cm-surface:#f3f7fb;
  --cm-shadow-sm:0 2px 8px -2px rgba(22,38,58,.10), 0 0 0 1px rgba(22,38,58,.03);
  --cm-shadow-md:0 12px 30px -12px rgba(22,38,58,.20);
  --cm-shadow-lg:0 22px 50px -18px rgba(16,36,62,.42);

  /* Tema padre mybooking: su azul por defecto (#2193F2) pasa a ser el de marca.
     Afecta también al embudo /seleccionar/ y /confirmar/. */
  --brand-primary:var(--cm-blue);
  --brand-primary-light:var(--cm-blue-300);
  --brand-primary-dark:var(--cm-blue-800);
  --wp--preset--color--primary:var(--cm-blue);
  --wp--preset--color--primary-light:var(--cm-blue-300);
  --wp--preset--color--primary-dark:var(--cm-blue-800);
  --footer-color-link-hover:var(--cm-blue);
  --home-topbar-bg:var(--cm-blue);
  --topbar-bg:var(--cm-blue);
  --selector-sticky-bg:var(--cm-blue);
  --navbar-link-color:var(--cm-ink);
}

/* Buscador de reserva (mybooking): grises neutros → grises de la paleta */
.mybooking-selector .mb-form-control,
.mb-form-control{ background-color:var(--cm-surface) !important; border-color:var(--cm-line) !important; color:var(--cm-ink); }
.mb-form-control:focus{ border-color:var(--cm-blue) !important; box-shadow:0 0 0 3px rgba(53,110,166,.18) !important; outline:none; }
.mybooking-selector label{ color:var(--cm-ink) !important; }
html .mybooking-selector form input:not([type="submit"]),
html .mybooking-selector form select{ border-color:var(--cm-line) !important; }
html .mybooking-selector form input[disabled]:not([type="submit"]),
html .mybooking-selector form select[disabled],
.mb-form-control:disabled, .mb-form-control[disabled]{ background-color:#e9eef4 !important; border-color:var(--cm-line) !important; color:var(--cm-muted) !important; }
.snackbar{ background-color:var(--cm-ink) !important; }
.snackbar-close{ background-color:var(--cm-blue-800) !important; }

/* Reseñas de Google (Trustindex): texto navy y sombras tintadas */
.ti-widget .ti-name,
.ti-widget .ti-rating,
.ti-widget .ti-rating-text strong,
.ti-widget .ti-review-text,
.ti-widget .ti-review-content{ color:var(--cm-ink) !important; }
.ti-widget .ti-inner{ box-shadow:var(--cm-shadow-sm) !important; }
html body .ti-widget[data-layout-id] .ti-tooltip,
html body .ti-widget[data-layout-id] .ti-verified-tooltip,
.ti-widget .ti-tooltip,
.ti-widget .ti-verified-tooltip{ background-color:var(--cm-ink) !important; box-shadow:var(--cm-shadow-md) !important; }
/* Texto de los tooltips en blanco (la regla de arriba oscurece .ti-name y sus hijos) */
.ti-widget .ti-tooltip, .ti-widget .ti-tooltip *,
.ti-widget .ti-verified-tooltip, .ti-widget .ti-verified-tooltip *{ color:#fff !important; }

/* Landings de país (.cm-mkt): grises propios → los de la paleta */
.cm-mkt{ color:var(--cm-ink); }
.cm-mkt-sub, .cm-mkt-card p, .cm-mkt-faq p{ color:var(--cm-muted); }
.cm-mkt-info li{ color:var(--cm-text); }
.cm-mkt-card, .cm-mkt-faq details{ border-color:var(--cm-line); }
.cm-mkt-card{ box-shadow:var(--cm-shadow-sm); }
.cm-mkt-step, .cm-mkt-info{ background:var(--cm-surface); }
.cm-mkt-hero{ background:linear-gradient(135deg,var(--cm-blue),var(--cm-blue-800)); }
.cm-mkt-faq summary, .cm-mkt-cta{ color:var(--cm-ink); }
.cm-mkt-final{ background:var(--cm-ink); }


/* =========================================================
   Rediseño oct-2026 · Fase 2 — escala tipográfica
   3 niveles de título (sección / secundario / tarjeta), un peso y un
   tracking por nivel. Textos con peso 400 y ancho de lectura.
   No cambia ningún texto: solo tamaño, peso, interlineado y ancho.
   ========================================================= */
html:root{
  --cm-fs-display:clamp(2.25rem, 1.35rem + 2.6vw, 3.5rem);   /* 36 → 56px */
  --cm-fs-h2:clamp(1.625rem, 1.2rem + 1.25vw, 2.375rem);     /* 26 → 38px */
  --cm-fs-h2-sm:clamp(1.375rem, 1.15rem + .7vw, 1.75rem);    /* 22 → 28px */
  --cm-fs-h3:clamp(1.125rem, 1.05rem + .25vw, 1.25rem);      /* 18 → 20px */
  --cm-fs-lead:clamp(1.0625rem, 1rem + .25vw, 1.1875rem);    /* 17 → 19px */
  --cm-font-head:"Poppins", sans-serif;
}

/* Global: titulares equilibrados y párrafos sin palabras sueltas */
h1,
h2,
h3,
h4 { text-wrap:balance; }
p, li{ text-wrap:pretty; }

/* «Explora Madrid»: bloque de 1150px → dos columnas de lectura en escritorio */
/* Reseñas: cifras alineadas */
.ti-widget .ti-rating, .ti-widget .ti-rating-text{ font-variant-numeric:tabular-nums; }

/* --- Móvil --- */
/* =========================================================
   Rediseño oct-2026 · Fase 3 — tarjetas, radios y layout
   Fuera el patrón «borde + sombra + blanco»: paneles tintados,
   listas sin caja y un layout asimétrico. Solo 3 radios + píldora.
   ========================================================= */
html:root{
  --cm-r-lg:20px;   /* paneles y contenedores */
  --cm-r-md:14px;   /* tarjetas y bloques internos */
  --cm-r-sm:10px;   /* campos, iconos, insignias */
}

/* --- «¿Por qué alquilar…?» (57303c80): título fijo a la izquierda + lista a la derecha --- */
/* --- Pasos 1-2-3 (cmsteps01): sin tarjetas, unidos por una línea --- */
.cm-steps-grid{ position:relative; }
.cm-steps-grid > div{
  background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  padding:34px 20px 0 !important; position:relative; z-index:1;
}
.cm-steps-grid > div > span:first-child{ top:0 !important; box-shadow:0 0 0 8px #fff; z-index:2; }
.cm-steps-grid > div > div{ margin-top:14px !important; }
.cm-steps-grid > div > div{ border-radius:var(--cm-r-md) !important; }
@media (min-width:768px){
  .cm-steps-grid::before{
    content:""; position:absolute; z-index:0; top:15px; left:16.66%; right:16.66%;
    border-top:2px dashed rgba(53,110,166,.28);
  }
}
@media (max-width:767px){
  .cm-steps-grid > div{ padding:34px 8px 0 !important; }
}

/* --- Dos columnas SEO (9ed3e94 / d4f6ac2): panel tintado en vez de cristal sobre blanco --- */
/* --- «Explora Madrid» (15e317): mismo panel tintado --- */
/* --- Radios unificados en piezas sueltas --- */
.mb-form-control,
html .mybooking-selector form input:not([type="submit"]),
html .mybooking-selector form select{ border-radius:var(--cm-r-sm) !important; }
.ti-widget .ti-inner{ border-radius:var(--cm-r-md) !important; }

/* Móvil: menos hueco entre reseñas y columnas SEO; títulos de sección más compactos */
/* =========================================================
   Rediseño oct-2026 · Fase 4 — estados e interacción
   Una sola curva/duración, hover y pulsado en botones, foco visible
   para teclado y respeto a «reducir movimiento».
   ========================================================= */
html:root{
  --cm-ease:cubic-bezier(.2,.7,.2,1);
  --cm-dur:200ms;
  --cm-focus:var(--cm-blue);
  --cm-z-skip:1000;
}

/* --- Saltar al contenido --- */
.cm-skip-link{
  position:fixed; left:16px; top:-80px; z-index:var(--cm-z-skip);
  background:var(--cm-ink); color:#fff !important; text-decoration:none;
  padding:12px 18px; border-radius:var(--cm-r-sm);
  font:600 15px/1 "Inter", sans-serif;
  box-shadow:var(--cm-shadow-md);
  transition:top var(--cm-dur) var(--cm-ease);
}
.cm-skip-link:focus{ top:12px; outline:2px solid #fff; outline-offset:2px; }
#cm-contenido:focus{ outline:none; }

/* --- Foco visible (solo teclado) --- */
:where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"]), input[type="submit"], input[type="button"]):focus-visible{
  outline:2px solid var(--cm-focus) !important;
  outline-offset:3px !important;
}
/* Sobre fondo oscuro, foco blanco */
.cm-footer,
.cm-topbar,
.cm-mkt-hero,
.cm-mkt-final { --cm-focus:#fff; }
.cm-search-facade { --cm-focus:var(--cm-blue); }
/* Campos: anillo propio (Fase 1) en vez de outline */
.mb-form-control:focus-visible, select:focus-visible, input[type="text"]:focus-visible{ outline:none !important; }

/* --- Transición común --- */
.mybooking-selector_button,
.mb-button,
.cm-mobile-cta a,
.cm-footer__cbtn,
.cm-hd-wa,
.cm-search-facade,
.cm-sf__btn,
.cm-footer a,
.cm-topbar a,
.cm-feat-grid a,
.cky-btn,
.ti-widget .ti-next,
.ti-widget .ti-prev {
  transition:background-color var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease),
             border-color var(--cm-dur) var(--cm-ease), box-shadow var(--cm-dur) var(--cm-ease),
             text-decoration-color var(--cm-dur) var(--cm-ease), opacity var(--cm-dur) var(--cm-ease),
             transform var(--cm-dur) var(--cm-ease) !important;
}

/* --- Botones principales: hover (sube 1px + tono) y pulsado (se hunde) --- */
.mybooking-selector_button:hover,
.mb-button:hover,
.cm-mobile-cta__btn:hover,
.cm-mobile-cta__call:hover {
  background-color:var(--cm-blue-700) !important;
  transform:translateY(-1px);
  box-shadow:0 10px 22px -10px rgba(16,36,62,.5) !important;
}
.mybooking-selector_button, .mb-button{ background-color:var(--cm-blue) !important; border-color:transparent !important; }
.cm-mobile-cta__wa:hover{ filter:brightness(.95); transform:translateY(-1px); }
.cm-search-facade:hover .cm-sf__btn{ filter:brightness(1.08); }
.cm-search-facade:active{ transform:scale(.99); }

.mybooking-selector_button:active,
.mb-button:active,
.cm-mobile-cta a:active,
.cm-footer__cbtn:active,
.cm-hd-wa:active,
.cky-btn:active,
.cm-footer a[href*="apps.apple"]:active,
.cm-footer a[href*="play.google"]:active {
  transform:translateY(0) scale(.97) !important;
  transition-duration:80ms !important;
}

/* Insignias de App Store / Google Play */
.cm-footer a[href*="apps.apple"]:hover,
.cm-footer a[href*="play.google"]:hover { transform:translateY(-2px); opacity:.92; }

/* Flechas del carrusel de reseñas */
.ti-widget .ti-next:hover, .ti-widget .ti-prev:hover{ transform:scale(1.06); }

/* Botones del aviso de cookies: mismo azul de marca */
.cky-btn-accept{ background-color:var(--cm-blue) !important; border-color:var(--cm-blue) !important; }
.cky-btn-accept:hover{ background-color:var(--cm-blue-700) !important; border-color:var(--cm-blue-700) !important; }
.cky-btn-reject, .cky-btn-customize{ color:var(--cm-blue) !important; border-color:var(--cm-blue) !important; }
.cky-btn-reject:hover, .cky-btn-customize:hover{ background-color:var(--cm-blue-50) !important; }

/* --- Reducir movimiento --- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto !important; }
  *, *::before, *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .mybooking-selector_button:hover,
.mb-button:hover,
.cm-mobile-cta a:hover { transform:none !important; }
}


/* =========================================================
   Rediseño oct-2026 · Fase 5 — móvil primero
   Home más corta en móvil (carrusel, línea de tiempo, «Leer más»),
   animaciones al hacer scroll, barra inferior de cristal y hero
   móvil con profundidad. Sin JS todo se ve completo y estático.
   ========================================================= */

/* --- Animaciones al entrar en pantalla (solo si el JS las activa) --- */
html.cm-js .cm-reveal{
  opacity:0; translate:0 18px;
  transition:opacity .6s var(--cm-ease), translate .6s var(--cm-ease);
  transition-delay:var(--cm-delay, 0ms);
}
html.cm-js .cm-reveal.is-in{ opacity:1; translate:0 0; }

/* --- «Leer más» en textos largos (solo si el JS lo activa) --- */
html.cm-js .cm-clamp{
  max-height:var(--cm-clamp-h, 11.5em); overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(#000 62%, transparent);
          mask-image:linear-gradient(#000 62%, transparent);
  transition:max-height .45s var(--cm-ease);
}
html.cm-js .cm-clamp.is-open{ max-height:var(--cm-open-h, 4000px); -webkit-mask-image:none; mask-image:none; }
.cm-readmore{
  display:inline-flex; align-items:center; gap:6px; margin:10px 0 0;
  background:none; border:0; padding:6px 0; cursor:pointer;
  font:600 15px/1.2 "Inter", sans-serif; color:var(--cm-blue);
}
.cm-readmore::after{
  content:""; width:8px; height:8px; margin-top:-3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform var(--cm-dur) var(--cm-ease);
}
.cm-readmore[aria-expanded="true"]::after{ transform:rotate(-135deg); margin-top:3px; }

/* --- Coche del hero: entra deslizándose (usa `translate`, que no pisa los transform !important previos) --- */
@keyframes cm-car-in{ from{ translate:48px 0; } to{ translate:0 0; } }
.cm-hero-car{ animation:cm-car-in .9s var(--cm-ease) .15s both; }

@media (max-width:767px){

/* …y sus 4 paneles como carrusel deslizable con la siguiente tarjeta asomando */
        .cm-dots{ display:flex; justify-content:center; gap:8px; margin:14px 0 0; }
  .cm-dots span{
    width:7px; height:7px; border-radius:999px; background:var(--cm-line);
    transition:width var(--cm-dur) var(--cm-ease), background-color var(--cm-dur) var(--cm-ease);
  }
  .cm-dots span.is-on{ width:22px; background:var(--cm-blue); }

  /* Pasos 1-2-3: línea de tiempo vertical compacta (número a la izquierda, texto a la derecha) */
  .cm-steps-grid{ gap:0 !important; padding-left:4px; }
  .cm-steps-grid::before{
    content:""; position:absolute; z-index:0;
    left:19px; top:18px; bottom:24px; border-left:2px dashed rgba(53,110,166,.28);
  }
  .cm-steps-grid > div{
    display:grid !important; grid-template-columns:32px minmax(0,1fr); column-gap:16px;
    text-align:left !important; padding:0 0 22px !important;
  }
  .cm-steps-grid > div > span:first-child{
    position:static !important; transform:none !important; left:auto !important; top:auto !important;
    grid-row:1 / span 2; align-self:start;
  }
  .cm-steps-grid > div > div{ display:none !important; }
  .cm-steps-grid h3{ margin:4px 0 4px !important; }
  .cm-steps-grid p{ margin:0 !important; }

  /* Barra inferior: cristal esmerilado y se esconde mientras el buscador está a la vista */
  .cm-mobile-cta{
    background:rgba(255,255,255,.78) !important;
    -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
    border-top:1px solid rgba(22,38,58,.06);
    box-shadow:0 -10px 30px -12px rgba(16,36,62,.25) !important;
    transition:transform .35s var(--cm-ease), opacity .35s var(--cm-ease);
  }
  body.cm-search-visible .cm-mobile-cta{ transform:translateY(110%); opacity:0; pointer-events:none; }

/* Tarjeta del buscador con borde de luz */
  .cm-search-facade{
    border:1px solid transparent !important;
    background:linear-gradient(#fff,#fff) padding-box,
               linear-gradient(140deg, rgba(255,255,255,.95), rgba(127,166,204,.55) 55%, rgba(255,255,255,.9)) border-box !important;
    box-shadow:0 24px 48px -22px rgba(0,10,25,.65), 0 0 0 6px rgba(255,255,255,.06) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  html.cm-js .cm-reveal{ opacity:1 !important; translate:none !important; }
  .cm-hero-car{ animation:none !important; }
}

/* ---------- ESCRITORIO ---------- */
@keyframes cm-drop{ from{ opacity:0; translate:0 8px; } to{ opacity:1; translate:0 0; } }

/* ---------- MÓVIL / TABLET ---------- */
@media (max-width:1024px){
  html.cm-menu-open, html.cm-menu-open body{ overflow:hidden !important; }
  html.cm-menu-open .cm-mobile-cta{ transform:translateY(110%); opacity:0; pointer-events:none; }

}
/* =========================================================
   ÁREA DE CLIENTE en la cabecera (16/10/2026) → clientes.carmove.es
   Escritorio: pastilla con icono y texto, entre WhatsApp y «Reserva ahora».
   Tablet y móvil: solo el icono, junto al menú.
   ========================================================= */
.cm-hd-cli {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 16px; border-radius: 999px;
    border: 1px solid #e0e8f0; background: #fff;
    color: #16263a !important; font-weight: 500; font-size: 15px; line-height: 1;
    text-decoration: none !important; white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.cm-hd-cli:hover, .cm-hd-cli:focus-visible { border-color: #356ea6; color: #356ea6 !important; }
.cm-hd-cli svg { display: block; flex: 0 0 auto; color: #356ea6; }
@media (max-width: 1024px) {
    .cm-hd-cli { width: 42px; padding: 0; justify-content: center; }
    .cm-hd-cli-txt { display: none; }
}