/* ============================
   MOBILE ONLY (<= 767px)
============================ */
@media (max-width: 907px){

  .module-landing .module-landing-in .module-landing-in-title h2{
    padding-top: -150px !important;
    margin-bottom: -100px !important;
  }

  /* FIX sintaxis + más robusto */
  h2.module-landing-in-title.h1,
  .module-landing-in-title h2.h1,
  .module-landing-in-title .h1{
    font-size: 5.5em !important;
  }


 
	
}



/* =============================================
   PARKIT FIXES - SEO audit (Apr 2026)
   ============================================= */

/* 1. Remove red outline from module2 on homepage */
body.home .module.module2 {
  outline: none !important;
}

/* 2. Dropdown submenu for header navigation */
header .header-in .header-menu ul li.menu-item-has-children {
  position: relative;
}
header .header-in .header-menu ul li.menu-item-has-children > .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1230;
  padding: 0;
  border-radius: 0;
  min-width: 220px;
  display: none;
  flex-direction: column;
  z-index: 1000;
  list-style: none;
  border: none;
  box-shadow: none;
}
/* Invisible bridge so hover doesn't break */
header .header-in .header-menu ul li.menu-item-has-children::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 12px;
  display: none;
}
header .header-in .header-menu ul li.menu-item-has-children:hover::after {
  display: block;
}
header .header-in .header-menu ul li.menu-item-has-children:hover > .sub-menu {
  display: flex;
  margin-top: 8px;
}
/* Reset ALL inherited styles on submenu items */
header .header-in .header-menu .sub-menu li,
header .header-in .header-menu .sub-menu li:last-child,
header .header-in .header-menu .sub-menu li:first-child {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  list-style: none !important;
}
header .header-in .header-menu .sub-menu li a,
header .header-in .header-menu .sub-menu li:last-child a,
header .header-in .header-menu .sub-menu li:first-child a {
  display: block !important;
  padding: 0.7rem 1.5rem !important;
  background: #1a1230 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: none !important;
  white-space: nowrap;
  font-size: 0.9em;
  color: rgba(255,255,255,0.85) !important;
  transition: background 0.15s, color 0.15s;
}
header .header-in .header-menu .sub-menu li a:hover,
header .header-in .header-menu .sub-menu li:last-child a:hover {
  background: #2a1f45 !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* 3. Module2 content blocks - fix font sizes (body is 6.25px due to 62.5% trick) */
.module2 {
  outline: none !important;
  padding: 4rem 2rem !important;
  text-align: left !important;
  font-size: 1.6rem !important;
  line-height: 1.7 !important;
}
/* First module2 = "Plazas limitadas" banner — centered, compact */
.module2:first-of-type {
  text-align: center !important;
  padding: 1.8rem 2rem !important;
}
.module2 .module2-in {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.6rem;
}
.module2 h2 {
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  margin: 2.5rem 0 1rem !important;
  line-height: 1.3 !important;
}
.module2 h2:first-child {
  margin-top: 0 !important;
}
.module2 p {
  font-size: 1.6rem !important;
  line-height: 1.75 !important;
  margin: 0.8rem 0 !important;
}
.module2 ul {
  padding-left: 2rem !important;
  margin: 1.2rem 0 !important;
  list-style: disc !important;
}
.module2 ul li {
  font-size: 1.6rem !important;
  margin: 0.5rem 0 !important;
  line-height: 1.65 !important;
}
.module2 strong, .module2 b {
  font-weight: 700;
}
.module2 a {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .module2 {
    padding: 5rem 4rem !important;
  }
  .module2 .module2-in {
    max-width: 960px;
  }
  .module2 h2 {
    font-size: 2.8rem !important;
  }
}

/* 4. Footer - column distribution + swap cols 3 & 4 (SÓLO desktop ≥908px).
      Antes esta regla aplicaba globalmente y rompía mobile (4 columnas
      estrechas con palabras quebradas + logo cortado). */
@media (min-width: 908px) {
  footer .footer-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }
  footer .footer-in .footer-in-col:nth-child(1) {
    flex: 0 0 auto;
    order: 1;
    margin-right: 5rem;
  }
  footer .footer-in .footer-in-col:nth-child(2) {
    flex: 1 1 22%;
    order: 2;
  }
  footer .footer-in .footer-in-col:nth-child(3) {
    flex: 1 1 18%;
    order: 4;
  }
  footer .footer-in .footer-in-col:nth-child(4) {
    flex: 1 1 28%;
    order: 3;
  }
}


/* 5. CTA button contrast on purple gradient (module1) */
.module1 .btn.btn-primary,
.module1-in-left-cta .btn.btn-primary,
.module1-in-left-cta-mobile .btn.btn-primary {
  background: #fff !important;
  color: #29194D !important;
  font-weight: 700 !important;
  padding: 0.85rem 2.2rem !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
.module1 .btn.btn-primary:hover,
.module1-in-left-cta .btn.btn-primary:hover,
.module1-in-left-cta-mobile .btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.2);
  background: #f0f0f0 !important;
}


/* =============================================
   PARKIT FIXES — Mobile booking (May 2026)
   ============================================= */

/* 6. jQuery UI datepicker (mobile + desktop).
      El widget local de reservas (#ppwidget__parkingdate / #ppwidget__returndate)
      usa jQuery UI datepicker, que pinta un único <div id="ui-datepicker-div"> en <body>.
      Sin overrides el smoothness por defecto se combina con `.ui-widget {font-size:0.8em}`
      del plugin parkingpro → datepicker estrecho (~136px), cabeceras descolocadas,
      table-layout roto. Fix: reasentar layout de tabla en TODOS los viewports y dar
      sizing apropiado por media query. */

/* 6a. Layout estructural y reset cromático — aplica a mobile y desktop. */
#ui-datepicker-div.ui-datepicker,
body > .ui-datepicker {
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #d1d1d1 !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
  z-index: 1000000 !important;
  font-family: "Albert Sans", sans-serif !important;
}
.ui-datepicker table {
  width: 100% !important;
  table-layout: fixed !important;
  display: table !important;
  margin: 0 !important;
  border-collapse: collapse !important;
}
.ui-datepicker thead { display: table-header-group !important; }
.ui-datepicker tbody { display: table-row-group !important; }
.ui-datepicker tr    { display: table-row !important; }
.ui-datepicker th,
.ui-datepicker td {
  display: table-cell !important;
  width: calc(100% / 7) !important;
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  border: 0 !important;
  background: transparent !important;
  float: none !important;
  box-sizing: border-box !important;
}
.ui-datepicker th {
  font-weight: 600 !important;
  color: #29194D !important;
  padding: 0.3em 0 !important;
}
.ui-datepicker td a,
.ui-datepicker td span {
  display: block !important;
  line-height: 1.4 !important;
  text-align: center !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #29194D !important;
}
.ui-datepicker td a:hover,
.ui-datepicker td a.ui-state-active,
.ui-datepicker td .ui-state-active,
.ui-datepicker td a.ui-state-highlight,
.ui-datepicker td .ui-state-highlight {
  background: #6e3aff !important;
  color: #fff !important;
}
.ui-datepicker td.ui-datepicker-unselectable span {
  color: #b9b9b9 !important;
  background: transparent !important;
}
.ui-datepicker .ui-datepicker-header {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
}
.ui-datepicker .ui-datepicker-title {
  text-align: center !important;
  font-weight: 600 !important;
  color: #29194D !important;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
}
.ui-datepicker .ui-datepicker-prev { left: 4px !important; }
.ui-datepicker .ui-datepicker-next { right: 4px !important; }

/* 6b. Sizing mobile (≤907px). */
@media (max-width: 907px) {
  #ui-datepicker-div.ui-datepicker,
  body > .ui-datepicker {
    width: 90vw !important;
    max-width: 340px !important;
    left: 5vw !important;
    right: auto !important;
    padding: 0.6em !important;
  }
  .ui-datepicker table { font-size: 1.4rem !important; }
  .ui-datepicker td a,
  .ui-datepicker td span {
    padding: 0.55em 0 !important;
    min-height: 36px !important;
  }
  .ui-datepicker .ui-datepicker-header { padding: 0.4em 0 !important; }
  .ui-datepicker .ui-datepicker-title {
    line-height: 36px !important;
    margin: 0 2.5em !important;
    font-size: 1.5rem !important;
  }
  .ui-datepicker .ui-datepicker-prev,
  .ui-datepicker .ui-datepicker-next {
    width: 36px !important;
    height: 36px !important;
  }
}

/* 6c. Sizing desktop (≥908px). */
@media (min-width: 908px) {
  #ui-datepicker-div.ui-datepicker,
  body > .ui-datepicker {
    width: 300px !important;
    max-width: 300px !important;
    padding: 0.8em !important;
  }
  .ui-datepicker table { font-size: 1.4rem !important; }
  .ui-datepicker td a,
  .ui-datepicker td span {
    padding: 0.5em 0 !important;
    min-height: 34px !important;
  }
  .ui-datepicker .ui-datepicker-header { padding: 0.4em 0 !important; }
  .ui-datepicker .ui-datepicker-title {
    line-height: 32px !important;
    margin: 0 2.5em !important;
    font-size: 1.5rem !important;
  }
  .ui-datepicker .ui-datepicker-prev,
  .ui-datepicker .ui-datepicker-next {
    width: 32px !important;
    height: 32px !important;
  }
}

/* 7. Header /reservar/ en mobile + cabeceras del module6.
      El template page-reservar.php tiene un <h1> (header) y un <h2 class="h1"> dentro
      de .module6 ("Reserva tu plaza cubierta y segura con Parkit") que en mobile
      salen desmedidos y empujan el iframe del booking abajo, rompiendo usabilidad.
      Acotamos tamaño/line-height de ambos, permitimos wrap, y forzamos el iframe
      a 100% width / min-height razonable. */
@media (max-width: 907px) {
  .p-reservar__header {
    padding: 1.5rem 1.5rem 0.5rem !important;
    text-align: center;
  }
  /* H1 verdadero del header /reservar/ — máxima especificidad para batir cualquier !important del tema */
  body.page-template-page-reservar .p-page.p-reservar .p-reservar__header h1,
  body.page-template-page-reservar header.p-reservar__header h1,
  html body .p-reservar__header h1 {
    font-size: 1.8rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 700 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  /* H2 con clase .h1 del .module6 — máxima especificidad */
  body.page-template-page-reservar .p-page.p-reservar .module6 h2.h1,
  body.page-template-page-reservar .p-page.p-reservar .module6 .h1,
  body.page-template-page-reservar .p-page.p-reservar h2.h1,
  body.page-template-page-reservar .p-page.p-reservar .h1,
  html body .p-page.p-reservar h2.h1,
  html body .p-page.p-reservar .h1 {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    font-weight: 700 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  .p-page.p-reservar .module6 {
    padding: 1.5rem 1.5rem !important;
  }
  .p-page.p-reservar .module6-in {
    text-align: center;
  }
  #parkingpro_booking_widgets_iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 600px;
    display: block !important;
    border: 0;
  }
}

/* 8. Sticky header conflict en /reservar/ mobile.
      El <header> del tema es position: sticky; top: 0; z-index: 10. Dentro del
      iframe externo de parkos hay su PROPIO sticky (la barra "Importe total
      de la reserva"). Como el iframe tiene scrolling="no" y height fijo, su
      sticky se evalúa contra el viewport de la página padre — choca con el
      header de Parkit creando solapamiento al scrollear.
      Decisión UX (sólo /reservar/ y sólo mobile): desactivar el sticky del
      header en esa página. Patrón estándar en booking flows: el sticky del
      proveedor del booking debe quedar como única referencia fija. */
@media (max-width: 907px) {
  body.page-template-page-reservar header {
    position: static !important;
    top: auto !important;
  }
}

/* 9. FOOTER mobile — apilar columnas y resetear cualquier flex/grid heredado.
      Belt-and-suspenders por si el tema vuelve a meter grid o algo. */
@media (max-width: 907px) {
  footer .footer-in {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
    max-width: 100% !important;
  }
  footer .footer-in .footer-in-col,
  footer .footer-in .footer-in-col:nth-child(1),
  footer .footer-in .footer-in-col:nth-child(2),
  footer .footer-in .footer-in-col:nth-child(3),
  footer .footer-in .footer-in-col:nth-child(4) {
    flex: none !important;
    order: 0 !important;
    grid-column: auto !important;
    margin: 0 0 2.4rem 0 !important;
    width: 100% !important;
  }
  footer .footer-in .footer-in-col:last-child {
    margin-bottom: 0 !important;
  }
  footer .footer-in .footer-in-col ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
}

/* 10. MENÚ HAMBURGUESA mobile abierto — reformulación UX.
      Antes: items con font-size ~4rem rompían líneas; "Parking Aeropuerto
      Barcelona" se partía en 3; CTA Reservar suelto sin destacar.
      Decisión UX: tipografía 2rem (legible y compacta), separadores sutiles,
      sub-menús inline (en mobile no hay hover), CTA Reservar como pill destacado. */
@media (max-width: 1199.98px) {
  header .header-in .header-menu {
    padding: 5rem 2rem 3rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  header .header-in .header-menu .menu-main-menu-container {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  header .header-in .header-menu ul#menu-main-menu {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  header .header-in .header-menu ul#menu-main-menu > li.menu-item {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 0 !important;
    text-align: center !important;
    list-style: none;
  }
  header .header-in .header-menu ul#menu-main-menu > li.menu-item > a {
    display: block !important;
    padding: 1.4rem 1rem !important;
    font-size: 2rem !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    color: #fff !important;
    border: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    word-break: normal;
    overflow-wrap: break-word;
  }
  /* Sub-menús: inline, indentados, en mobile (no usamos hover) */
  header .header-in .header-menu ul#menu-main-menu > li.menu-item-has-children > .sub-menu {
    display: block !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 0 1rem 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    border: 0 !important;
  }
  header .header-in .header-menu ul#menu-main-menu > li.menu-item-has-children > .sub-menu li,
  header .header-in .header-menu ul#menu-main-menu > li.menu-item-has-children > .sub-menu li:last-child,
  header .header-in .header-menu ul#menu-main-menu > li.menu-item-has-children > .sub-menu li:first-child {
    border: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  header .header-in .header-menu ul#menu-main-menu > li.menu-item-has-children > .sub-menu li a {
    display: block !important;
    padding: 0.6rem 1rem !important;
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.75) !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
  }
  /* Último item del menú (Reservar) → CTA pill destacado */
  header .header-in .header-menu ul#menu-main-menu > li.menu-item:last-child {
    border-bottom: 0 !important;
    margin: 2rem 0 0 0 !important;
    text-align: center !important;
  }
  header .header-in .header-menu ul#menu-main-menu > li.menu-item:last-child > a {
    display: inline-block !important;
    background-color: #7a4ce6 !important;
    color: #fff !important;
    padding: 1.2rem 3.5rem !important;
    border-radius: 100px !important;
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    border: 1px solid transparent !important;
  }
  header .header-in .header-menu ul#menu-main-menu > li.menu-item:last-child > a:hover {
    background-color: #fff !important;
    color: #7a4ce6 !important;
    border-color: #7a4ce6 !important;
  }
}

/* 11. Landings .p-front-page-content — padding lateral + max-width GLOBAL.
      Antes: solo T1 (10274)/T2 (10280) tenían padding inline; el resto
      (10001 Parking Aeropuerto, 10003 Aparcacoches/Valet, etc.) tenía el
      texto pegado al borde del navegador en desktop y mobile. Además, las
      imágenes con width inline desbordan en mobile generando scroll
      horizontal. Estilos globales más override de imágenes. */
.p-front-page-content {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  box-sizing: border-box;
}
@media (min-width: 908px) {
  .p-front-page-content {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }
}
@media (max-width: 907px) {
  .p-front-page-content > * {
    max-width: 100% !important;
  }
  /* Imágenes nunca desbordan en mobile */
  main img,
  .p-front-page-content img,
  .p-front-page-content .wp-image-10204,
  body img.alignnone {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin-left: auto;
    margin-right: auto;
  }
  /* Suprimir scroll horizontal accidental a nivel de body/main en mobile.
     overflow-x: clip evita el bug del position:sticky que rompe con hidden. */
  html, body {
    overflow-x: clip !important;
    max-width: 100%;
  }
  #main, main {
    overflow-x: clip !important;
    max-width: 100vw;
  }
}

/* 12. FAQ Accordion (.pk-faq-q / .pk-faq-a).
      JS del tema convierte <h3>+<p> en <button class="pk-faq-q"> +
      <div class="pk-faq-a">. Sin CSS propio el botón hereda del UA y los <h3>
      del tema padre, quedando enorme en mobile. Estilos accordion completos
      (desktop + mobile) con indicador +/− accesible y tap targets ≥44px. */
.pk-faq-item {
  border: 1px solid rgba(41, 25, 77, 0.12);
  border-radius: 0.8rem;
  margin: 0 0 0.8rem 0;
  overflow: hidden;
  background: #fff;
}
.pk-faq-item.is-open {
  border-color: rgba(41, 25, 77, 0.35);
  box-shadow: 0 2px 10px rgba(41, 25, 77, 0.08);
}
.pk-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 1.4rem 1.6rem;
  font-family: inherit;
  font-weight: 600;
  color: #29194d;
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pk-faq-q::after {
  content: '+';
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
  color: #7a4ce6;
  flex-shrink: 0;
  transition: transform 0.2s ease, content 0s;
}
.pk-faq-item.is-open .pk-faq-q::after {
  content: '−';
}
.pk-faq-q:hover,
.pk-faq-q:focus-visible {
  background: rgba(122, 76, 230, 0.05);
  outline: none;
}
.pk-faq-a {
  display: none;
  padding: 0 1.6rem 1.4rem 1.6rem;
  color: #2b2540;
  line-height: 1.55;
}
.pk-faq-a > * { margin: 0 0 0.6rem; }
.pk-faq-a > *:last-child { margin-bottom: 0; }
.pk-faq-a p { margin: 0; }

/* Tamaños tipográficos por viewport. */
@media (min-width: 908px) {
  .pk-faq-q { font-size: 2.2rem; padding: 1.8rem 2.4rem; }
  .pk-faq-a { font-size: 1.8rem; padding: 0 2.4rem 1.8rem 2.4rem; }
  .pk-faq-q::after { font-size: 2.6rem; }
}
@media (max-width: 907px) {
  .pk-faq-q { font-size: 1.8rem; }
  .pk-faq-a { font-size: 1.6rem; }
  .pk-faq-q::after { font-size: 2rem; }
}