/* ============================================================================
   rcsp-maqueta.css
   1 tokens · 2 tipografia del contenido · 3 secciones · 4 componentes · 5 escala

   Se carga la ultima de la cola (prioridad 999 en wp_enqueue_scripts).
   Los !important estan justificados uno a uno: el tema declara sus reglas con
   !important y sin eso no hay forma de unificar nada.
   ============================================================================ */

/* 1 ── TOKENS ────────────────────────────────────────────────────────────── */
:root{
  --rcsp-verde:#43823C;      /* principal del tema, medido: 8 usos           */
  --rcsp-verde-osc:#346735;  /* hover y estado activo                        */
  --rcsp-lima:#B1E357;       /* acento; con texto blanco da 1,6:1, no se usa
                                como fondo de texto blanco                   */
  --rcsp-tinta:#000;
  --rcsp-gris:#5d5d5d;       /* metadatos: fechas, "basado en N resenas"     */
  --rcsp-linea:#e0e4e0;
  --rcsp-fondo:#fff;
  --rcsp-fondo-2:#f4f7f3;
  --rcsp-radio:10px;
  --rcsp-radio-btn:7.5px;    /* radio real de los botones del tema           */
  --rcsp-sombra:0 2px 8px rgba(0,0,0,.10);
  --rcsp-t:160ms ease;
  --rcsp-f-tit:"BauhausBuglerBold",sans-serif;
  --rcsp-f-txt:"superagothic-regular",sans-serif;
  --rcsp-txt:15px;
  --rcsp-txt-lh:25px;
  --rcsp-tactil:44px;        /* area tactil minima                           */
}

/* 2 ── TIPOGRAFIA DEL CONTENIDO ──────────────────────────────────────────── */
/* La causa real del "parece hecha a cachos": el editor unas veces envuelve el
   texto en <p> y otras lo deja en un <div> pelado. Las reglas del tema cuelgan
   todas de `p`, asi que el <div> no hereda nada y cae a Work Sans 25px morado.
   Se declara el canon en el CONTENEDOR y en su prole directa, que cubre los
   dos casos con una regla en vez de con veinticinco parches. */
.bloque_seo .texto,
.bloque_seo .texto > div,
.bloque_seo .texto p,
.bloque_seo .texto li,
.texto_texto .texto,
.texto_texto .texto > div,
.texto_texto .texto p{
  font-family:var(--rcsp-f-txt);
  font-size:var(--rcsp-txt);
  line-height:var(--rcsp-txt-lh);
  color:var(--rcsp-tinta);
}
/* Los enlaces conservan su color; solo se les quita el tamano heredado. */
.bloque_seo .texto a,.texto_texto .texto a{font-size:inherit;line-height:inherit}

/* Ritmo vertical. El preflight de Tailwind declara p{margin:0} y ninguna hoja
   posterior lo repone: hoy el unico aire entre parrafos son unos <p>&nbsp;</p>
   sueltos. Con esto el aire lo da el CSS y el separador deja de hacer falta.
   Especificidad (0,2,1) contra (0,0,1) del preflight: gana sin !important. */
.bloque_seo .texto p,
.texto_texto .texto p,
.rcsp-collap-cuerpo p{margin:0 0 16px}
.bloque_seo .texto p:last-child,
.texto_texto .texto p:last-child,
.rcsp-collap-cuerpo p:last-child{margin-bottom:0}
.bloque_seo .texto ul,.bloque_seo .texto ol,
.rcsp-collap-cuerpo ul,.rcsp-collap-cuerpo ol{margin:8px 0 16px}

/* Encabezados de bloque de contenido: una sola caja alta y un solo peso.
   Se limita a .bloque_seo y .titulo2 para no tocar el H1 del hero ni los
   titulares de las secciones con maqueta propia. */
/* !important obligatorio: c14.css declara body h2{font-size:40px!important}.
   clamp() unifica los 40, 55 y 60px medidos en una sola escala que ademas
   baja sola en movil, sin necesidad de media queries. */
.bloque_seo .titulo h2,
.bloque_seo .titulo2 h2,
.texto_texto .titulo2 h2,
.section-cta-banner .titulo2 h2{
  font-family:var(--rcsp-f-tit)!important;
  font-size:clamp(28px,3.6vw,55px)!important;
  line-height:1.1!important;
  text-transform:uppercase!important;
  color:var(--rcsp-tinta)!important;
}

/* 3 ── CORRECCIONES POR SECCION ──────────────────────────────────────────── */

/* 3.1 Preguntas frecuentes + formulario verde.
   .faqs y .contact son hermanos dentro de un contenedor flex sin anchos: el
   formulario se queda el ancho y ademas se estira a la altura del acordeon,
   que es el hueco vacio debajo del formulario. Una reja explicita de dos
   columnas con align-items:start resuelve las dos cosas. */
/* Todo cuelga de .faq-contact__wrapper, NO de .section-faq-contact: la seccion
   existe en 6 paginas pero el wrapper de dos columnas solo en 4 (home ES y EN,
   nosotros ES y EN). En ofertas ES y EN el bloque va suelto y debe quedarse
   exactamente como esta hoy. */
.faq-contact__wrapper{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:start;
  max-width:1360px;
  margin:0 auto;
  padding:0 16px;
}
/* El wrapper tiene TRES hijos visibles, no dos: ademas del acordeon y del
   formulario cuelga un .rcsp-collap (el desplegable de "donde estamos"). Sin
   esto, el autoplacement lo mete en la segunda columna y parte el bloque. */
.faq-contact__wrapper > *{grid-column:1/-1}
.faq-contact__wrapper .faqs,
.faq-contact__wrapper .faqs > div,
.faq-contact__wrapper section.contact{
  width:100%!important;   /* bs.css fija .col-12.col-xl-9 a width:75% */
  max-width:none!important;
  min-width:0;
}
.faq-contact__wrapper section.contact{align-self:start}
@media (min-width:1200px){
  .faq-contact__wrapper{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .faq-contact__wrapper > .faqs{grid-column:1}
  .faq-contact__wrapper > section.contact{grid-column:2}
}

/* 3.2 El titular de la columna de preguntas. Ya no lleva un <p> dentro (lo
   arregla el PHP), pero el tema le da 42px, que en media columna sigue siendo
   demasiado. !important: c15.css declara .titulogeneral{font-size:22px!important}
   y .faqs .titulogeneral{width:100%!important}. */
/* Al sacar el <p> de dentro del <h2> (lo hace el PHP) se pierden dos reglas
   del tema que colgaban del parrafo, no del encabezado: el uppercase de
   c15.css .faqs .titulogeneral p, y su alineacion. Se reponen aqui. */
.faqs .titulogeneral,
.faq-contact__wrapper .titulogeneral{
  font-family:var(--rcsp-f-tit)!important;
  font-size:clamp(24px,2.4vw,32px)!important;
  line-height:1.15!important;
  text-transform:uppercase!important;
  text-align:left!important;
  width:100%!important;
  margin:0 0 20px;
}

/* 3.3 El mapa del bloque de contacto no trae ni width ni height. */
.section-faq-contact .contact__map{width:100%}
.section-faq-contact .contact__map iframe{
  display:block;width:100%;height:260px;border:0;border-radius:var(--rcsp-radio);
}

/* 3.4 Bloque de aeropuerto. El tema declara .texto_imagen .imagen{width:50%
   !important} y luego intenta apilar en una media query SIN !important, que
   pierde siempre. Resultado: dos columnas de 187px en un movil. */
@media (max-width:991.98px){
  .section-airport .texto_imagen{flex-direction:column!important;overflow:visible!important}
  .section-airport .texto_imagen .imagen,
  .section-airport .texto_imagen .texto{width:100%!important;max-width:100%!important}
  .section-airport .texto_imagen .texto{padding:20px 0 0!important}
}

/* 3.5 La barra flotante mide 65px. NO se toca el body: la navegacion del pie
   ya reserva 72px por debajo en las 22 paginas, que la cubren de sobra. Dos
   mecanismos para lo mismo es peor que uno. */

/* 4 ── COMPONENTES ───────────────────────────────────────────────────────── */

/* 4.1 Acordeon reutilizable. Lo monta maqueta.js convirtiendo un titular en
   <button> de verdad y su hermano en panel plegable. */
.rcsp-acc__btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:var(--rcsp-tactil);padding:10px 0;margin:0;
  background:none;border:0;border-bottom:1px solid var(--rcsp-linea);
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.rcsp-acc__btn::after{
  content:"+";flex:0 0 24px;text-align:center;
  color:var(--rcsp-verde);font-family:var(--rcsp-f-tit);font-size:22px;line-height:1;
}
.rcsp-acc__btn[aria-expanded="true"]::after{content:"\2013"}
.rcsp-acc__btn:hover{border-bottom-color:var(--rcsp-verde)}
.rcsp-acc__btn:focus-visible{outline:2px solid var(--rcsp-verde);outline-offset:2px}

/* El selector lleva .fila_iconos_horizontal delante a proposito: sobre el
   panel hay una regla del tema (c15.css) con display:none!important y
   especificidad (0,2,0). Entre dos !important gana la especificidad, no el
   orden, asi que un .rcsp-acc__panel suelto (0,1,0) PERDERIA y el texto se
   quedaria oculto del todo. Con la clase del contenedor son (0,3,0).
   0fr a 1fr abre con transicion sin inventarse una altura maxima. */
.fila_iconos_horizontal .texto_icono.rcsp-acc__panel{
  display:grid!important;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows var(--rcsp-t),visibility var(--rcsp-t);
}
.rcsp-acc__panel > *{overflow:hidden;min-height:0}
.fila_iconos_horizontal .rcsp-acc.is-open > .texto_icono.rcsp-acc__panel{
  grid-template-rows:1fr;visibility:visible;
}

/* 4.2 Las seis tarjetas de iconos.
   La descripcion queda VISIBLE si el JavaScript no llega a ejecutarse: es
   contenido indexable, no decoracion. Solo cuando el script la convierte en
   panel (:not(.rcsp-acc__panel) deja de cumplirse) pasa a plegarse. */
.fila_iconos_horizontal .texto_icono:not(.rcsp-acc__panel){display:block!important}
.fila_iconos_horizontal .texto_icono p{
  font-family:var(--rcsp-f-txt);
  font-size:var(--rcsp-txt);
  line-height:var(--rcsp-txt-lh);
  color:var(--rcsp-tinta);
  margin:10px 0 0;
}
.fila_iconos_horizontal .titulo_icono{
  font-size:16px!important;   /* c15.css lo fija a 14px!important bajo 500px */
  line-height:22px;
}

/* 4.3 Desplegable rcsp-collap.
   El mecanismo (max-height + clase .rcsp-abierto) lo gobierna el JavaScript
   que ya existe y NO se toca: aqui solo se arregla la flecha, que medía
   10x8px, y la maqueta del interior, que no tenia ninguna. */
/* Alineacion. Los desplegables cuelgan de contenedores distintos (unos de
   .content_page a ancho completo, otros de .texto ya indentado) y las flechas
   salian a alturas de sangrado distintas: una pegada al borde de la ventana y
   otra a 69px. Se les da a todos la misma columna que al texto del tema. */
.content_page > .rcsp-collap,
.section__wrapper > .rcsp-collap{
  max-width:1360px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;
  box-sizing:border-box;
}
.rcsp-collap-flecha{
  display:grid!important;place-items:center;
  margin-left:0!important;   /* el mu-plugin le pone un margin-left en linea */
  width:var(--rcsp-tactil)!important;height:var(--rcsp-tactil)!important;
  margin:4px 0!important;
  border:0!important;background:var(--rcsp-fondo-2)!important;
  border-radius:var(--rcsp-radio-btn);
  color:var(--rcsp-verde);opacity:1!important;cursor:pointer;
  transition:background-color var(--rcsp-t);
}
.rcsp-collap-flecha::after{
  content:"+";font-family:var(--rcsp-f-tit);font-size:22px;line-height:1;
}
.rcsp-collap-flecha:hover{background:var(--rcsp-linea)!important}
.rcsp-collap-flecha:focus-visible{outline:2px solid var(--rcsp-verde);outline-offset:2px}
.rcsp-collap.rcsp-abierto > .rcsp-collap-flecha{transform:none!important}
.rcsp-collap.rcsp-abierto > .rcsp-collap-flecha::after{content:"\2013"}

/* El interior venia sin ancho, sin alineacion y sin tipografia, y ademas
   anida un .container dentro de otro, que lo estrecha un 10% y lo descentra
   respecto al texto de fuera. */
/* El reset de anchos se acota a los desplegables que van DENTRO de .texto:
   son los que anidan un .container dentro de otro. Los que envuelven una
   seccion entera necesitan conservar su contenedor. */
.rcsp-collap-cuerpo,
.texto > .rcsp-collap .rcsp-collap-cuerpo .section__wrapper,
.texto > .rcsp-collap .rcsp-collap-cuerpo .container,
.texto > .rcsp-collap .rcsp-collap-cuerpo .content.container{
  width:100%!important;max-width:100%!important;
  margin-left:0!important;margin-right:0!important;
  padding-left:0!important;padding-right:0!important;
}
.rcsp-collap-cuerpo .section,
.rcsp-collap-cuerpo .bloque_seo{padding:0}
.rcsp-collap-cuerpo .content{padding:12px 0 0}
/* El texto de dentro salia a font-weight 300 mientras el de fuera va a 500:
   por eso se leia lavado. Y como las lineas van separadas solo por <br>, sin
   parrafos, quedaban pegadas. Se iguala el peso y se le da aire al <br>. */
.rcsp-collap-cuerpo,
.rcsp-collap-cuerpo > div,
.rcsp-collap-cuerpo .texto,
.rcsp-collap-cuerpo .texto > div,
.rcsp-collap-cuerpo p,
.rcsp-collap-cuerpo li{
  font-family:var(--rcsp-f-txt)!important;
  font-size:var(--rcsp-txt)!important;
  line-height:var(--rcsp-txt-lh)!important;
  font-weight:500!important;
  color:var(--rcsp-tinta)!important;
  text-align:left!important;
}
/* Las negritas del original se conservan: no se les toca el peso. */
.rcsp-collap-cuerpo b,
.rcsp-collap-cuerpo strong{font-weight:700!important}
/* Aire entre las lineas separadas por <br>, que es como viene escrito el texto. */
.rcsp-collap-cuerpo br{content:"";display:block;margin-bottom:12px}
/* El mecanismo del mu-plugin solo recorta con max-height, asi que el contenido
   plegado sigue siendo enfocable con el tabulador y visible para un lector de
   pantalla. Dos lineas lo sacan del arbol sin tocar su JavaScript. */
.rcsp-collap:not(.rcsp-abierto) > .rcsp-collap-cuerpo{visibility:hidden}
.rcsp-collap.rcsp-abierto > .rcsp-collap-cuerpo{visibility:visible}
.rcsp-collap-cuerpo ul{list-style:disc;padding-left:20px;margin:8px 0}
.rcsp-collap-cuerpo li{display:list-item}

/* 4.4 Preguntas frecuentes del tema: el titulo va a 13px en todo lo que baja
   de 1024px, contra los 15px del canon. */
@media (max-width:1024px){
  .faqs .titulo_faq,
  .faqs .titulo_faq h3,
  .faqs .border_custom_faqs{font-size:15px!important;line-height:23px!important}
}

/* 4.5 WIDGET DE RESENAS DE GOOGLE (RichPlugins)
   Los nombres de las variables NO son una suposicion: estan tomados de la
   personalizacion que wikirentacar.es tiene en produccion sobre este mismo
   plugin (bloque <style id="wiki-resenas-v2">). Por eso el color, las
   estrellas, los puntos y las flechas se pintan POR VARIABLE, sin !important.
   Solo lo llevan las propiedades que el plugin declara el mismo con
   !important: padding, margin, border, border-radius y flex. */
.section-feedback .wp-gr.rpi{
  --rcsp-verde-lavado:#eef4ed;
  --ambar:#f5a623;              /* la estrella se lee como nota, no como marca */
  --text-color:var(--rcsp-tinta);
  --head-based-color:var(--rcsp-tinta);
  --powered-color:#7b867b;
  font-family:var(--rcsp-f-txt);
  color:var(--rcsp-tinta);
}

/* Ficha del negocio */
.section-feedback .wp-gr.rpi .grw-row{gap:28px;align-items:stretch!important}
.section-feedback .wp-gr.rpi .grw-header{
  flex:0 0 300px!important;max-width:300px;box-sizing:border-box;
  margin:8px 0;padding:28px 22px 26px!important;
  background:var(--rcsp-verde-lavado);
  border:0!important;border-radius:20px!important;
}
.section-feedback .wp-gr.rpi .grw-header .grw-header-inner{
  --dir:column;--align:center;--gap:0px;
  justify-content:center;height:100%;text-align:center;
}
.section-feedback .wp-gr.rpi .grw-header .grw-img-wrap{--img-size:64px;margin-bottom:12px}
.section-feedback .wp-gr.rpi .grw-img-wrap::before{box-shadow:none!important}
/* Doble aro: blanco y verde, como en Wiki. */
.section-feedback .wp-gr.rpi .grw-header .grw-img{
  border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px #fff,0 0 0 5px var(--rcsp-verde);
}
.section-feedback .wp-gr.rpi .grw-header .wp-google-name{
  font-family:var(--rcsp-f-tit);font-size:12px!important;font-weight:400!important;
  line-height:1.3;letter-spacing:.14em;text-transform:uppercase;
}
.section-feedback .wp-gr.rpi .grw-header .rpi-stars{
  --star-size:22px;--star-gap:3px;--rating-scale:2.2;
  --star-color:var(--ambar);--rpi-star-color:var(--ambar);
  --rpi-rating-color:var(--rcsp-tinta);--head-grade-weight:400;
  height:auto!important;margin:2px 0 0;line-height:1;
}
.section-feedback .wp-gr.rpi .grw-header .wp-google-based{font-size:15px;line-height:1.3}
.section-feedback .wp-gr.rpi .grw-header .wp-google-powered{font-size:11px;line-height:1.2}
/* Boton en pildora. La G se queda: indica donde se deja la resena, igual que
   el "powered by Google", que es atribucion que exige el plugin. */
.section-feedback .wp-gr.rpi .grw-header .wp-google-wr{width:100%;justify-content:center;padding-top:12px}
.section-feedback .wp-gr.rpi .wp-google-wr a{
  display:inline-flex;align-items:center;gap:8px;
  min-height:var(--rcsp-tactil);padding:11px 20px!important;
  border-radius:999px!important;
  background:var(--rcsp-verde)!important;color:#fff!important;
  font-family:var(--rcsp-f-tit);font-size:14px;line-height:1;text-decoration:none;
  transition:opacity var(--rcsp-t);
}
.section-feedback .wp-gr.rpi .wp-google-wr a:hover{opacity:.85;color:#fff!important}

/* Tarjetas de resena */
.section-feedback .wp-gr.rpi .grw-content{flex:1 1 auto!important;min-width:0}
.section-feedback .wp-gr.rpi .rpi-slides{margin:0 20px}
.section-feedback .wp-gr.rpi .grw-review{padding:6px!important}
.section-feedback .wp-gr.rpi .grw-review-inner.grw-backgnd{--rev-color:#fff}
.section-feedback .wp-gr.rpi .grw-review-inner{
  --gap:14px;position:relative;overflow:hidden;
  margin:0!important;padding:24px 24px 22px!important;
  border:1px solid #e1eae1!important;border-radius:16px!important;
  box-shadow:0 6px 18px rgb(34 51 34 / .07);
  background-image:linear-gradient(180deg,#fff0 62%,var(--rcsp-verde-lavado) 100%)!important;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
/* Cinta superior de color: es lo que le da el aire de Wiki. */
.section-feedback .wp-gr.rpi .grw-review-inner::before{
  content:'';position:absolute;left:0;top:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--rcsp-verde),var(--rcsp-lima));
}
@media (hover:hover){
  .section-feedback .wp-gr.rpi .grw-review-inner:hover{
    border-color:var(--rcsp-verde)!important;
    box-shadow:0 6px 16px rgb(67 130 60 / .18);
    transform:translateY(-3px);
  }
}
.section-feedback .wp-gr.rpi .grw-review .grw-img-wrap{--img-size:46px}
.section-feedback .wp-gr.rpi .grw-review .rpi-stars{
  --star-size:18px;--star-gap:2px;
  --star-color:var(--ambar);--rpi-star-color:var(--ambar);
}
/* Doble clase para ganarle al azul que trae el plugin. */
.wp-gr.rpi.rpi .wp-google-name,
.wp-gr.rpi.rpi a.wp-google-name,
.wp-gr.rpi.rpi .wp-google-name a{color:var(--rcsp-tinta)!important}
.section-feedback .wp-gr.rpi .grw-img{border-radius:50%;object-fit:cover}
.section-feedback .wp-gr.rpi .wp-google-text{
  font-family:var(--rcsp-f-txt);font-size:var(--rcsp-txt);
  line-height:var(--rcsp-txt-lh);color:var(--rcsp-tinta);
}

/* Flechas y puntos del carrusel */
.section-feedback .wp-gr.rpi .rpi-ltgt{
  --slider-btn-size:18px;--slider-btn-color:var(--rcsp-verde-osc);--slider-btn-bg:#fff;
  --slider-btn-shadow:0 4px 14px rgba(34,51,34,.16);
  min-width:var(--rcsp-tactil);min-height:var(--rcsp-tactil);
  display:flex;align-items:center;justify-content:center;
  border:1px solid #e1eae1!important;border-radius:999px!important;opacity:1;
}
.section-feedback .wp-gr.rpi .rpi-ltgt:hover{
  --slider-btn-color:#fff;--slider-btn-bg:var(--rcsp-verde);
  border-color:var(--rcsp-verde)!important;
}
.section-feedback .wp-gr.rpi .rpi-ltgt:focus-visible{outline:2px solid var(--rcsp-verde-osc);outline-offset:2px}
.section-feedback .wp-gr.rpi .rpi-dots-wrap{
  --slider-dot-size:10px;--slider-dot-gap:8px;
  --slider-dot-color:var(--rcsp-verde);--slider-act-dot-color:var(--rcsp-verde-osc);
}
.section-feedback .wp-gr.rpi .rpi-dots .rpi-dot{border-radius:50%!important;transform:none!important}

/* La G de cada tarjeta no es una imagen: es un <svg> con <use> a un sprite.
   Se esconde el svg entero y el favicon se pinta en un ::after del contenedor,
   que es como lo resuelve wikirentacar.es en produccion. */
.section-feedback .wp-gr .grw-review-inner > svg,
.section-feedback .wp-gr .grw-review-inner svg{display:none!important}
.section-feedback .wp-gr .grw-review-inner::after{
  content:"";position:absolute;top:16px;right:16px;width:22px;height:22px;z-index:2;
  pointer-events:none;
  background:url(https://rentacarsanpedro.com/wp-content/uploads/2026/07/icono-sanpedro-512-150x150.png) center/contain no-repeat;
}
/* El avatar de la ficha lo sirve el plugin cacheado en uploads: se tapa igual. */
.section-feedback .wp-gr .grw-header .grw-img-wrap{
  background:#fff url(https://rentacarsanpedro.com/wp-content/uploads/2026/07/icono-sanpedro-512-150x150.png) center/72% no-repeat!important;
  border-radius:50%!important;overflow:hidden!important;
}
.section-feedback .wp-gr .grw-header .grw-img{visibility:hidden!important}

@media (prefers-reduced-motion:reduce){
  .section-feedback .wp-gr.rpi .grw-review-inner,
  .section-feedback .wp-gr.rpi .rpi-ltgt,
  .section-feedback .wp-gr.rpi .wp-google-wr a{transition:none!important}
  .section-feedback .wp-gr.rpi .grw-review-inner:hover{transform:none}
}
@media (max-width:767px){
  .section-feedback .wp-gr.rpi .grw-row{flex-direction:column;gap:16px}
  .section-feedback .wp-gr.rpi .grw-header{flex:0 0 100%!important;max-width:none}
  .section-feedback .wp-gr.rpi .rpi-slides{margin:0 14px}
  .section-feedback .wp-gr.rpi .grw-review-inner{padding:18px 18px 16px!important}
}

/* 5 ── ESCALA RESPONSIVE ─────────────────────────────────────────────────── */
/* Entre 501 y 1024px el tema deja un hueco: los titulares de bloque no
   escalan porque su unica media query es a 500px o a 770px. */
@media (max-width:991.98px){
  .faq-contact__wrapper{display:block}
  .faq-contact__wrapper .faqs{margin-bottom:32px}
}
@media (max-width:768px){
  .fila_iconos_horizontal{flex-wrap:wrap}
  .fila_iconos_horizontal .row-item{flex:0 0 100%!important;max-width:100%!important}
  .section-faq-contact .contact__map iframe{height:200px}
}
@media (max-width:600px){
  .faq-contact__wrapper{gap:24px;padding:0 12px}
}

/* 6 ── CINTA DE SERVICIOS ────────────────────────────────────────────────── */
/* El tema la trae como carrusel Splide quieto. maqueta.js le pinta encima una
   cinta que se desliza sola y aqui se esconde el carrusel. Mismo patron que
   usa wikirentacar.es en produccion, con la paleta de esta web. */
.bloqueinicio-slider.rcsp-tira-on .splide__track,
.bloqueinicio-slider.rcsp-tira-on .splide__arrows,
.bloqueinicio-slider.rcsp-tira-on .splide__pagination{display:none!important}
.bloqueinicio-slider.rcsp-tira-on{overflow:visible;padding:14px 0 12px}

.rcsp-tira{
  position:relative;overflow:hidden;
  /* difuminado en los dos bordes, para que no aparezcan de golpe */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.rcsp-tira__pista{display:flex;width:max-content;will-change:transform}
/* Cada mitad lleva su propio hueco final: si no, la costura del salto a -50%
   mide distinto que los huecos de dentro y se ve el tiron. */
.rcsp-tira__lista{
  display:flex;align-items:center;gap:14px;
  margin:0;padding:6px 7px;padding-right:21px;list-style:none;
}
.rcsp-tira__item{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px 9px 10px;border-radius:999px;
  background:#fff;border:1px solid #e1e8e1;
  box-shadow:0 4px 12px rgb(34 51 34 / .06);
  color:var(--rcsp-tinta);font-family:var(--rcsp-f-tit);font-size:14px;line-height:1;
  white-space:nowrap;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .35s,color .35s,box-shadow .35s,border-color .35s;
}
.rcsp-tira__item img{
  width:20px;height:20px;box-sizing:content-box;padding:6px;
  border-radius:50%;background:var(--rcsp-verde-lavado,#eef4ed);flex:0 0 auto;
  transition:background-color .35s,transform .35s;
}
.rcsp-tira__item p{margin:0;font:inherit;color:inherit}
/* El destacado que va rotando. */
.rcsp-tira__item.is-foco{
  background:linear-gradient(165deg,var(--rcsp-verde),var(--rcsp-verde-osc));
  border-color:var(--rcsp-verde-osc);
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 12px 24px -8px rgb(67 130 60 / .6);
}
/* El texto va dentro de un <p> al que el tema le pone color propio: no basta
   con el color:inherit del contenedor, hay que decirselo al parrafo. */
.rcsp-tira__item.is-foco,
.rcsp-tira__item.is-foco p{color:#fff!important}
.rcsp-tira__item.is-foco img{background:#fff;transform:rotate(-8deg) scale(1.08)}

@media (prefers-reduced-motion:no-preference){
  .rcsp-tira__pista{animation:rcsp-tira-mueve 64s linear infinite}
  @keyframes rcsp-tira-mueve{to{transform:translateX(-50%)}}
  .rcsp-tira:hover .rcsp-tira__pista,
  .rcsp-tira:focus-within .rcsp-tira__pista{animation-play-state:paused}
}
/* Sin movimiento: la cinta se convierte en una rejilla centrada y legible. */
@media (prefers-reduced-motion:reduce){
  .rcsp-tira{-webkit-mask-image:none;mask-image:none}
  .rcsp-tira__pista{width:auto;flex-wrap:wrap;justify-content:center}
  .rcsp-tira__lista--copia{display:none}
  .rcsp-tira__lista{flex-wrap:wrap;justify-content:center}
}

/* 7 ── LOGOTIPO COMO BOTON ───────────────────────────────────────────────── */
/* Al dejar de ser un <a> hereda la caja de un boton: hay que devolverlo a como
   se veia, y darle foco visible, que un <a> lo traia de serie. */
.rcsp-logo-btn{
  display:block;padding:0;margin:0;border:0;background:none;
  font:inherit;color:inherit;text-align:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.rcsp-logo-btn img{display:block}
.rcsp-logo-btn:focus-visible{outline:2px solid var(--rcsp-verde);outline-offset:4px;border-radius:var(--rcsp-radio-btn)}

/* 8 ── RESENAS: MISMO ALTO Y "LEER MAS" ──────────────────────────────────── */
/* El plugin mete el texto en una caja con scroll interno: salen barritas grises
   dentro de cada tarjeta y las resenas largas no se pueden leer enteras. Se
   cambia el scroll por un recorte a N lineas con su boton de "leer mas", que es
   como lo resuelve wikirentacar.es. */
.section-feedback .wp-gr.rpi{--rcsp-rv-lineas:4}

/* Fuera el scroll interno del plugin. OJO: no basta con overflow:visible.
   El plugin le da a esa caja un alto fijo (unos 100px), asi que el texto se
   salia por debajo y aterrizaba ENCIMA del boton "leer mas". Tiene que poder
   crecer: height:auto ademas de quitar el tope. */
.section-feedback .wp-gr.rpi .grw-scroll{
  overflow:visible!important;
  height:auto!important;max-height:none!important;min-height:0!important;
}
/* Todas las tarjetas con el mismo alto util, tengan texto largo, corto o nada. */
.section-feedback .wp-gr.rpi .grw-review-inner{
  display:flex!important;flex-direction:column;
}
.section-feedback .wp-gr.rpi .wp-google-feedback{
  flex:1 1 auto;display:flex;flex-direction:column;
}
.section-feedback .wp-gr.rpi .grw-review .wp-google-text{
  display:-webkit-box!important;-webkit-box-orient:vertical;
  -webkit-line-clamp:var(--rcsp-rv-lineas);
  overflow:hidden;padding:0!important;
  /* Sin min-height: una resena sin comentario no debe reservar cuatro lineas
     en blanco. El carrusel ya iguala el alto de todas las diapositivas. */
  font-family:var(--rcsp-f-txt);font-size:var(--rcsp-txt);
  line-height:var(--rcsp-txt-lh);color:var(--rcsp-tinta);
}
/* Cuando hay boton, el recorte pasa a altura maxima para poder animarlo. */
.section-feedback .wp-gr.rpi .wp-google-feedback.rcsp-rv-mas .wp-google-text{
  display:block!important;-webkit-line-clamp:none;
  max-height:calc(var(--rcsp-rv-lineas) * var(--rcsp-txt-lh));
}
.section-feedback .wp-gr.rpi .wp-google-feedback.rcsp-rv-mas.is-open .wp-google-text{
  max-height:none;min-height:0;
}
/* No basta con soltar el texto: la tarjeta tiene alto fijo (el carrusel iguala
   las diapositivas) y overflow:hidden, asi que recorta igual. Al abrir, el
   JavaScript marca la tarjeta y la diapositiva para que puedan crecer. */
.section-feedback .wp-gr.rpi .grw-review-inner.rcsp-rv-abierta,
.section-feedback .wp-gr.rpi .rpi-slide.rcsp-rv-abierta,
.section-feedback .wp-gr.rpi .grw-review.rcsp-rv-abierta{
  overflow:visible!important;height:auto!important;max-height:none!important;
}
.section-feedback .wp-gr.rpi .rcsp-rv-abierta .wp-google-feedback,
.section-feedback .wp-gr.rpi .rcsp-rv-abierta .grw-scroll{
  height:auto!important;max-height:none!important;flex:0 0 auto!important;
}
/* Resenas sin comentario: se quita la caja vacia para que no sumen altura. */
.section-feedback .wp-gr.rpi .wp-google-feedback:empty,
.section-feedback .wp-gr.rpi .wp-google-text:empty{display:none!important}
.section-feedback .wp-gr.rpi .rcsp-rv-toggle{
  align-self:flex-start;margin:10px 0 0;padding:0;border:0;background:none;
  font-family:var(--rcsp-f-tit);font-size:14px;line-height:1.2;
  color:var(--rcsp-verde-osc);text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;
}
.section-feedback .wp-gr.rpi .rcsp-rv-toggle:hover{color:var(--rcsp-verde)}
.section-feedback .wp-gr.rpi .rcsp-rv-toggle:focus-visible{
  outline:2px solid var(--rcsp-verde);outline-offset:2px;border-radius:4px;
}

/* 9 ── ENTRADILLA PLEGABLE ENCIMA DEL BUSCADOR ───────────────────────────── */
/* La entradilla se dibujaba ENCIMA del formulario porque script#wrc-fit le
   ponia al buscador un margin-bottom de -120px. Ese script ya no se sirve
   (rcsp_maq_quita_ajuste_buscador), asi que aqui se fija el hueco a mano. */
.wrc-bs{margin-bottom:26px!important}

/* Misma reticula que el resto de la web. El tema usa el .container de
   Bootstrap: 1320px de contenido con 20px de aire a cada lado. Con
   max-width 1320+40 y padding de 20 sale la misma vertical a cualquier
   ancho y sin media queries. Comprobado: a 1425px el texto va de x=53 a
   x=1373 y a 375px de x=20 a x=355, clavado con el H1 y la parrilla de
   coches. (Ojo: los bloques .bloque_seo .content llevan max-width:90% y
   se quedan en 1283 -> la web tiene DOS retículas, esta es la buena.) */
.rcsp-intro{max-width:1360px;margin:0 auto 6px;padding:0 20px;box-sizing:border-box}

/* Flecha calcada de wikirentacar.es (.wiki-seo-arrow, medida en produccion):
   boton de ancho completo y sin fondo, con un triangulo de 8px pegado a la
   izquierda. Es una entradilla, no lleva rotulo ni encabezado. */
.rcsp-intro__btn{
  display:block;width:100%;margin:0 0 6px;padding:6px 0;
  background:none;border:0;cursor:pointer;text-align:left;
}
.rcsp-intro__btn svg{
  display:block;width:8px;height:8px;fill:var(--rcsp-lima-osc,#5BA654);
  transition:transform var(--rcsp-t);
}
.rcsp-intro__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.rcsp-intro__btn:hover svg{fill:var(--rcsp-verde)}
.rcsp-intro__btn:focus-visible{outline:2px solid var(--rcsp-verde);outline-offset:2px}

.rcsp-intro__p{display:none;padding:0 0 8px}
.rcsp-intro.is-open .rcsp-intro__p{display:block}
.rcsp-intro__p p{
  margin:0;
  font-family:var(--rcsp-f-txt);font-size:var(--rcsp-txt);line-height:var(--rcsp-txt-lh);
  color:var(--rcsp-tinta);
  /* El tema justifica el texto del contenido y a este ancho abre rios. */
  text-align:left;
}
@media(max-width:600px){
  .wrc-bs{margin-bottom:18px!important}
}

/* 10 ── CARRUSEL DE RESENAS EN MOVIL ─────────────────────────────────────── */
/* .grw-row es un flex con wrap y alto limitado: por debajo de 900px el
   carrusel se iba a una SEGUNDA COLUMNA, fuera de la pantalla. Medido a 375px:
   scrollWidth 706 (331px de scroll lateral). Con display:block se apilan. */
@media(max-width:900px){
  .wp-gr.rpi .grw-row{display:block!important;height:auto!important;max-height:none!important}
  .wp-gr.rpi .grw-row>*{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
  }
}

/* 11 ── PRIMERA SECCION: LAS TRES TARJETAS, COMO EN WIKIRENTACAR ─────────── */
/* Valores medidos uno a uno sobre wikirentacar.es en produccion (21/09/2026).
   Aqui la tarjeta acababa en un "+" de 40x24 con las esquinas de arriba
   redondeadas, pegado al borde: se veia cortado. En Wiki es un circulo de 44
   que cuelga por debajo del borde, y por eso la caja reserva 26px abajo. */
.fila_iconos .icono-box{padding:0 0 26px!important}

.fila_iconos .icono-box .icono{
  width:124px!important;height:124px!important;
  border:1px solid #d7e7d7!important;
  box-shadow:0 10px 24px rgba(34,51,34,.12)!important;
  position:relative!important;z-index:2!important;
}
.fila_iconos .icono-box .icono img{padding:24px!important}

.fila_iconos .icono-box .contenedoricono{
  background:linear-gradient(165deg,#4CAF50 0%,#2E7D32 100%)!important;
  border-radius:24px!important;
  padding:58px 24px 36px!important;
  box-shadow:0 18px 36px -14px rgba(46,125,50,.6)!important;
}
.fila_iconos .icono-box .subtitulo{
  font-family:"SuperaGothic-ExtraBold",sans-serif!important;
  font-size:17px!important;line-height:22px!important;
  color:#fff!important;text-transform:uppercase!important;
}

/* La linea de debajo del titulo pasa a ser pastilla, como en Wiki. */
.fila_iconos .icono-box .texto>p{
  display:inline-flex!important;align-items:center!important;gap:8px;
  margin:0!important;padding:7px 14px 7px 12px!important;
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:12.5px!important;
  color:#fff!important;font-size:14px!important;line-height:25px!important;
  text-align:left!important;
}
.fila_iconos .icono-box .texto>p::before{
  content:"";flex:0 0 auto;width:14px;height:25px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
/* El texto que se despliega NO lleva pastilla. */
.fila_iconos .icono-box .texto-expandible p{
  display:block!important;background:none!important;border:0!important;
  padding:0!important;border-radius:0!important;text-align:center!important;
}
.fila_iconos .icono-box .texto-expandible p::before{content:none!important}
/* El contenedor era relative y el boton se posicionaba contra EL, no contra
   la tarjeta: al abrirse se montaba encima de la ultima linea de texto. */
.fila_iconos .icono-box .texto-expandible-container{padding-top:6px!important;position:static!important}
.fila_iconos .icono-box .texto-expandible{padding-bottom:6px!important}

.fila_iconos .icono-box .expand-button{
  width:var(--rcsp-tactil)!important;height:var(--rcsp-tactil)!important;
  border-radius:50%!important;
  left:50%!important;right:auto!important;bottom:-22px!important;
  transform:translateX(-22px)!important;
  background:#fff!important;color:#2E7D32!important;
  font-family:"superagothic-bold",sans-serif!important;font-size:20px!important;
  box-shadow:0 8px 18px rgba(34,51,34,.18),0 0 0 4px rgba(255,255,255,.7)!important;
}

/* 12 ── NADA DE TEXTO JUSTIFICADO ────────────────────────────────────────── */
/* El tema justifica los parrafos del contenido a 1283px de ancho y se abren
   rios de espacio en blanco. Wiki no justifica nunca: centra. */
.bloque_seo .texto p,
.bloque_seo .texto li,
.bloque_seo .section__content p,
.bloque_seo .texto div{text-align:center!important}

/* 13 ── LA CINTA RESERVA SU ALTO ─────────────────────────────────────────── */
/* maqueta.js monta la cinta a partir de las diapositivas DESPUES de cargar.
   Hasta que la monta, el contenedor mide menos y todo lo de debajo da un salto.
   Era el unico CLS que quedaba en la portada: 0,0517 medido a 390px, todo
   atribuido al primer bloque de debajo. Medido despues de montarla: 90px. */
.bloqueinicio-slider{min-height:90px}

/* 14 ── UNA SOLA RETICULA ────────────────────────────────────────────────── */
/* La home tenia CUATRO margenes izquierdos distintos para bloques de ancho
   completo (medido a 1425px: x=53, 71, 40 y 137). El grueso del tema usa el
   .container de Bootstrap (1320px de contenido, x=53), pero .bloque_seo .content
   lleva max-width:90% y se quedaba en 1283 (x=71): 6 bloques y 4 titulares
   desalineados con la parrilla de coches y con el H1.
   Con max-width 1320+40 y 20px de aire sale la misma vertical a cualquier ancho
   y sin media queries. Comprobado: 1425px -> 53..1373 · 375px -> 20..355. */
.bloque_seo .content.container{
  max-width:1360px!important;width:auto!important;
  margin-left:auto!important;margin-right:auto!important;
  padding-left:20px!important;padding-right:20px!important;
  box-sizing:border-box!important;
}

/* 15 ── LISTAS CON VIÑETA ────────────────────────────────────────────────── */
/* El tema dejaba los <li> sin marca y parecian lineas sueltas. La lista va en
   inline-block para que el bloque quede centrado pero los renglones alineados
   a la izquierda, que es como se lee una lista. */
.bloque_seo .texto ul{
  list-style:disc!important;display:inline-block!important;
  text-align:left!important;margin:16px auto 0!important;padding:0 0 0 22px!important;
}
.bloque_seo .texto ul li{
  list-style:disc!important;display:list-item!important;
  text-align:left!important;margin:0 0 4px!important;
}
.bloque_seo .texto ul li::marker{color:var(--rcsp-verde)}

/* Parrafos del contenido: separados, no pegados. */
.bloque_seo .texto p{margin:0 0 12px!important}
.bloque_seo .texto p:last-of-type{margin-bottom:0!important}

/* 16 ── TITULAR Y CUERPO SON LA MISMA SECCION ────────────────────────────── */
/* El titular con subtitulo y su texto viven en dos .bloque_seo distintos, y
   cada uno mete 30px de relleno: entre el subtitulo y la primera linea habia
   70px de aire (10 de margen + 30 + 30). Los marca el plugin en PHP. */
.bloque_seo.rcsp-cab{padding-bottom:0!important}
.bloque_seo.rcsp-cab .subtitulo{margin-bottom:0!important}
.bloque_seo.rcsp-cuerpo{padding-top:14px!important}

/* 17 ── PLEGABLE DENTRO DE UNA SECCION ───────────────────────────────────── */
/* Reaprovecha el boton y el panel de la entradilla, pero sin ancho propio: ya
   va dentro de .bloque_seo .content, que pone la reticula. El encabezado se
   queda FUERA del plegable y siempre visible. */
.rcsp-plega{margin:0}
.rcsp-plega .rcsp-intro__btn{margin:0 0 4px}
.rcsp-plega .rcsp-intro__p{padding:0}
.rcsp-plega.is-open .rcsp-intro__p{display:block}

/* 18 ── BLOQUE texto_texto: MISMO TRATO QUE EL RESTO ─────────────────────── */
/* Esta seccion no es un .bloque_seo, asi que se quedaba fuera de las reglas de
   parrafos y viñetas. Mismos valores para que no cante. */
.texto_texto .texto p{margin:0 0 12px!important}
.texto_texto .texto p:last-of-type{margin-bottom:0!important}
.texto_texto .texto ul{
  list-style:disc!important;display:inline-block!important;
  text-align:left!important;margin:4px auto 12px!important;padding:0 0 0 22px!important;
}
.texto_texto .texto ul li{
  list-style:disc!important;display:list-item!important;
  text-align:left!important;margin:0 0 4px!important;
}
.texto_texto .texto ul li::marker{color:var(--rcsp-verde)}
/* Al abrirse, el ultimo parrafo quedaba pegado a la tarjeta de la comparativa
   (medido: 0px de hueco). */
.texto_texto .rcsp-plega.is-open .rcsp-intro__p{padding-bottom:28px}

/* 19 ── SELLOS DE CONFIANZA DEL BUSCADOR ─────────────────────────────────── */
/* Medidos sobre .wiki-buscar__confianza de wikirentacar.es en produccion. */
.rcsp-sellos{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;
  padding:12px 12px 0;color:#fff;
  font-family:var(--rcsp-f-txt);font-size:14px;line-height:1.4;
}
.rcsp-sellos span{
  display:flex;align-items:center;gap:7px;
  border-radius:999px;padding:2px 8px;color:#fff;
}
.rcsp-sellos .is-luz{background:rgba(255,255,255,.16)}
.rcsp-sellos svg{flex:0 0 auto}

/* 20 ── "¿COMO FUNCIONA?" EN LA VENTANA ──────────────────────────────────── */
/* Al crear los p.option se activa una regla vieja del sitio
   (style#wiki-extra-css): p:has(+ p.option){display:none}, que esconde el
   parrafo de "Solo dinos el coche que necesitas...". En wikirentacar.es ese
   parrafo SI se ve, asi que se devuelve. */
/* Mismo selector y mismos !important que la regla vieja: a igual
   especificidad manda el orden, y su <style> va despues de esta hoja.
   Con html delante gana por especificidad y ya no depende del orden. */
html body .formulario-rent-subtitulo p:has(+ p.option){display:block!important}

/* 21 ── LA "i" NO SE CORTA ───────────────────────────────────────────────── */
/* El boton va en absolute con top:-25px para asomar por encima de la banda
   verde, pero el tema le pone overflow:hidden al envoltorio y lo cortaba por
   la mitad: .section__wrapper:has(.formulario-more-info){overflow:hidden}.
   Comprobado al quitarlo: ni scrollWidth ni alto de pagina cambian, o sea que
   ese recorte no estaba tapando nada mas. */
html body .section__wrapper:has(.formulario-more-info){overflow:visible!important}

/* 22 ── LAS DOS TARJETAS DE BENEFICIOS ───────────────────────────────────── */
/* Iban con max-width:90% y justify-content:space-around, o sea arrancaban en
   x=130 mientras el texto de arriba arranca en x=53: por eso se veian
   descolocadas. Ahora comparten la reticula y el ancho. */
.beneficios-container{
  max-width:1360px!important;width:auto!important;margin:0 auto!important;
  padding:0 20px!important;box-sizing:border-box!important;
  justify-content:space-between!important;align-items:stretch!important;
  /* En movil el tema lo pasa a columna y entonces el flex-basis de las
     tarjetas se aplica al ALTO: salian de 320px con el texto flotando en
     medio. En fila envuelta se apilan igual pero miden lo que ocupan. */
  flex-direction:row!important;flex-wrap:wrap!important;gap:24px!important;
}
.beneficios-container .beneficio-card{
  flex:1 1 320px!important;height:auto!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
/* La negrita no se veia: el texto va en "superagothic-regular", que no tiene
   corte negrita, asi que un font-weight:700 no cambiaba nada. Hay que cambiar
   de familia, no de peso. */
.beneficios-container .beneficio-texto{
  font-family:"superagothic-bold",sans-serif!important;
  font-size:15px!important;line-height:24px!important;margin:0!important;
}
.beneficios-container .beneficio-texto strong{
  font-family:"SuperaGothic-ExtraBold",sans-serif!important;font-weight:400!important;
}

/* Parrafos del plegable un poco mas juntos: "parece un libro". */
.rcsp-plega .rcsp-intro__p p{margin:0 0 8px!important}

/* 23 ── AIRE DEBAJO DE LAS DOS TARJETAS ──────────────────────────────────── */
/* Medido: 0px entre el borde de las tarjetas y la seccion siguiente. El resto
   de la pagina usa 56px entre bloque y titular (buscador -> primer H2). */
.beneficios-container{margin-bottom:56px!important}

/* 24 ── BLOQUE DE TEXTO CON IMAGEN (aeropuerto) ──────────────────────────── */
/* Todos los <p> tenian margin-bottom:0, asi que parrafos y lista salian
   pegados. La viñeta la pone el tema con li::before{content:"• "}, asi que
   aqui NO se toca list-style: si se pone disc salen dos puntos. */
.texto_imagen .texto p{margin:0 0 12px!important}
.texto_imagen .texto ul{margin:4px 0 16px!important;padding:0 0 0 6px!important}
.texto_imagen .texto ul li{margin:0 0 6px!important}

/* 25 ── RESEÑAS: LOS CUATRO AL MISMO NIVEL ───────────────────────────────── */
/* Como en alquilercochesmarbella.com. La ficha de la izquierda medía 389px y
   las tarjetas 262: se quedaban cortas. Ahora estiran hasta el alto de la
   fila y las cuatro terminan en la misma linea (389 vs 393). */
.section-feedback .wp-gr.rpi .grw-row{align-items:stretch!important;gap:28px!important}
.section-feedback .wp-gr.rpi .grw-row .grw-header{align-self:stretch!important}
.section-feedback .wp-gr.rpi .grw-header .grw-header-inner{
  height:100%!important;justify-content:center!important;
}
.section-feedback .wp-gr.rpi .grw-content-inner{
  height:100%!important;display:flex!important;align-items:stretch!important;
}
.section-feedback .wp-gr.rpi .rpi-slides{align-items:stretch!important}
.section-feedback .wp-gr.rpi .rpi-slide{display:flex!important;height:auto!important}
.section-feedback .wp-gr.rpi .grw-review-inner{height:100%!important}

/* 26 ── EL MAPA, REDONDEADO ──────────────────────────────────────────────── */
/* El iframe traia border-radius:10px pero su contenedor iba a radio 0 con
   overflow:hidden, o sea que lo recortaba en cuadrado. La banda verde de
   encima ya va a 20px arriba: el mapa cierra la tarjeta por abajo. */
.contact__map{border-radius:0 0 20px 20px!important;overflow:hidden!important}
.contact__map iframe{
  border-radius:0!important;display:block!important;
  width:100%!important;height:100%!important;position:absolute!important;inset:0!important;
}

/* 27 ── FLECHAS FUERA DE LAS TARJETAS Y RESEÑAS SIN TEXTO ────────────────── */
/* Al estirar las tarjetas, el carril pasó a ocupar todo el ancho y las flechas
   (absolutas, left:0 / right:0) quedaban ENCIMA de la primera y la ultima.
   Con un pasillo de 46px a cada lado se quedan en su hueco; el padding no
   mueve a un hijo en absolute con left:0, que es justo lo que interesa. */
.section-feedback .wp-gr.rpi .grw-content-inner{padding:0 46px!important;box-sizing:border-box!important}
.section-feedback .wp-gr.rpi .rpi-ltgt{z-index:3!important}

/* De las 10 reseñas, 3 son 5 estrellas SIN comentario. Con las tarjetas ya
   estiradas se veian como cajas en blanco y sin "Leer más" porque no hay nada
   que leer. Se ocultan: quedan 7 y la nota y el recuento del panel no cambian,
   salen del agregado de Google. */
.section-feedback .wp-gr.rpi .rpi-slide:has(.wp-google-feedback:empty){display:none!important}

/* 28 ── CAJA VERDE DE CONTACTO ───────────────────────────────────────────── */
/* El tema justifica este texto y a este ancho abre rios; ademas los parrafos
   iban sin margen. */
.contact__content p{
  margin:0 0 12px!important;text-align:left!important;
  font-size:var(--rcsp-txt)!important;line-height:var(--rcsp-txt-lh)!important;
}
.contact__content p:last-child{margin-bottom:0!important}

/* 29 ── NOSOTROS: ULTIMA SECCION APILADA ────────────────────────────────── */
/* Medido a 1440px antes de tocar nada: el texto iba a 18px cuando TODA la
   pagina va a 15/25, y su H2 a 51,84px contra los 25px del H2 de la caja
   verde que tenia al lado. Ademas .faq-contact__wrapper es un flex con
   items-center, asi que la columna de texto (749 de alto) flotaba en mitad de
   la de contacto (1260).
   En dos columnas el titulo no cabia en un renglon: a 24px pide 793px y la
   columna daba 633. Apilado si cabe, porque pasa a disponer de los 1320 de la
   reticula. El cuerpo escala a 2,7vw, mas despacio que el ancho, asi que
   aguanta en un renglon a cualquier medida por encima de 992. */
@media (min-width:992px){
  html body .section-faq-contact .faq-contact__wrapper{
    display:block!important;max-width:1360px!important;
    margin:0 auto!important;padding:0 20px!important;box-sizing:border-box!important;
  }
  html body .section-faq-contact .faq-contact__wrapper > .bloque_seo{
    width:100%!important;max-width:none!important;margin:0 0 48px!important;
  }
  html body .section-faq-contact .faq-contact__wrapper > section.contact{
    width:100%!important;max-width:840px!important;margin:0 auto!important;
  }
  html body .section-faq-contact .bloque_seo .content.container{padding:0!important}
  html body .section-faq-contact .bloque_seo .titulo h2{
    font-size:clamp(24px,2.7vw,38px)!important;line-height:1.15!important;margin:0 0 20px!important;
  }
}
/* A 1320 de ancho un renglon de 15px son 180 caracteres: ilegible. El texto se
   queda en la medida de lectura aunque el bloque ocupe toda la reticula. */
html body .section-faq-contact .bloque_seo .texto{max-width:900px!important;margin:0 auto!important}
html body .section-faq-contact .bloque_seo .texto p{
  font-size:var(--rcsp-txt)!important;line-height:var(--rcsp-txt-lh)!important;
  margin:0 0 14px!important;
}
html body .section-faq-contact .bloque_seo .texto p:last-child{margin-bottom:0!important}

/* 30 ── NOSOTROS NO JUSTIFICA TAMPOCO ────────────────────────────────────── */
/* La primera seccion seguia justificada a 590px de ancho, que es donde peor
   se nota: rios de blanco en casi todos los renglones. */
html body .texto_imagen .texto p,
html body .texto_imagen .texto li{text-align:left!important}

/* 31 ── PIE: TRES FILETES, DOS DE ELLOS PEGADOS ──────────────────────────── */
/* Medido: lineas a y=8900 (borde superior de .imagenesfooter), y=9105 (su
   borde inferior) y y=9207 (el de .container.columna2). Entre las dos ultimas
   quedaban 102px sin nada dentro: dos rayas paralelas y aire. Se quita la
   redundante y el filete de abajo sube a pegarse a los sellos. */
html body .imagenesfooter{border-bottom:0!important;padding-bottom:0!important}
html body .container.columna2{padding-bottom:28px!important}

/* 32 ── BLOQUES DE LA FASE A: EL AIRE LO PONE EL VECINO ─────────────────── */
/* Estos bloques llegan con padding "0 30px" y su .bloque_seo ya aporta 30
   arriba y 30 abajo. Darles ademas padding propio sumaba a los 75px de la
   seccion de al lado: 161px de blanco entre dos parrafos. Se dejan a cero y
   se recorta el padding del vecino, que es de donde sale el hueco de verdad. */
html body section[class*="rcsp-fa-"]{padding-top:0!important;padding-bottom:0!important}
html body section[class*="rcsp-fa-"] + section{padding-top:36px!important}
html body section:has(+ section[class*="rcsp-fa-"]){padding-bottom:36px!important}

/* La lista que monta rcsp_maq_formatea_fase_a: centrada como bloque pero con
   los renglones alineados, que es como se lee una lista. */
html body section[class*="rcsp-fa-"] .texto ul{
  list-style:disc!important;display:inline-block!important;text-align:left!important;
  margin:14px auto 0!important;padding:0 0 0 22px!important;max-width:900px!important;
}
html body section[class*="rcsp-fa-"] .texto li{
  list-style:disc!important;display:list-item!important;text-align:left!important;
  margin:0 0 6px!important;font-size:var(--rcsp-txt)!important;line-height:var(--rcsp-txt-lh)!important;
}
html body section[class*="rcsp-fa-"] .texto li::marker{color:var(--rcsp-verde)}

/* 33 ── EL BANNER DE EXTRAS NI JUSTIFICA NI SE PEGA ──────────────────────── */
/* Su unico parrafo iba justificado a 1009px de ancho: rios en casi todos los
   renglones, y ademas pegado a la pastilla de "Todo esto viene incluido". */
html body .section-cta-banner .section__wrapper > div > p{
  text-align:center!important;max-width:900px!important;margin:0 auto!important;
  font-size:var(--rcsp-txt)!important;line-height:var(--rcsp-txt-lh)!important;
}
/* El aire hasta la pastilla lo pone ella, no el parrafo: en /ofertas/ el texto
   no cuelga de .section__wrapper sino de .bloque_seo, asi que con el margen en
   el parrafo la pastilla se quedaba pegada (medido: 0px). */
/* .texto_texto es un flex en fila cuyos dos hijos ENVUELVEN: el texto arriba
   y la pastilla debajo, pegada a ras (medido: 0px). Lo que separa filas de un
   flex envuelto es row-gap, no un margen en el contenedor, que moveria el
   bloque entero sin abrir hueco entre las dos. */
html body .section-cta-banner .texto_texto{
  margin-top:40px!important;flex-wrap:wrap!important;row-gap:40px!important;
}

/* 34 ── LAS NEGRITAS NO SE VEIAN ─────────────────────────────────────────── */
/* El cuerpo va en superagothic-regular y esa familia NO tiene cara negrita:
   un font-weight:700 no pinta nada. Los diez <strong> del banner de extras
   estaban ahi y se leian igual que el resto. Hay que cambiar de FAMILIA.
   Las tarjetas de beneficios no entran aqui: llevan su propia regla (22). */
html body .bloque_seo strong, html body .bloque_seo b,
html body .section-cta-banner strong, html body .section-cta-banner b,
html body .texto_imagen strong, html body .texto_imagen b,
html body .texto_texto strong, html body .texto_texto b,
html body .latest-text strong, html body .latest-text b,
html body .contact__content strong, html body .contact__content b{
  font-family:"superagothic-bold",sans-serif!important;font-weight:400!important;
}

/* 35 ── TODOS LOS H2 CON EL MISMO REPUESTO ──────────────────────────────── */
/* Unos declaran "BauhausBuglerBold" a secas y otros "BauhausBuglerBold,
   sans-serif". Mientras la fuente se descarga, los primeros caen a la fuente
   por omision del navegador y los segundos a sans-serif: durante ese rato un
   encabezado se ve distinto del de al lado. Mismo repuesto para todos. */
html body .bloque_seo h2,
html body section h2{font-family:"BauhausBuglerBold",sans-serif!important}

/* El titulo iba pegado a su primer parrafo en los bloques que eran
   desplegables: el margen lo ponia el envoltorio del desplegable. */
html body .bloque_seo .titulo{margin-bottom:18px!important}

/* 36 ── LA NEGRITA NO DEBE ENTRAR EN LOS ENCABEZADOS ────────────────────── */
/* El titulo del bloque de resenas viene como <h2><b>...</b></h2>, y la regla
   34 le cambiaba la familia a superagothic-bold: ese encabezado se veia con
   otra letra que sus vecinos, que no llevan <b> dentro. Se le devuelve la del
   h2. Hace falta repetir el contenedor con clase en cada selector porque
   "html body h2 b" (0,0,4) PIERDE contra "html body .bloque_seo b" (0,1,3):
   una clase pesa mas que cuatro elementos. */
html body .bloque_seo :is(h1,h2,h3,h4,h5,h6) :is(b,strong),
html body .section-cta-banner :is(h1,h2,h3,h4,h5,h6) :is(b,strong),
html body .texto_imagen :is(h1,h2,h3,h4,h5,h6) :is(b,strong),
html body .texto_texto :is(h1,h2,h3,h4,h5,h6) :is(b,strong),
html body .latest-text :is(h1,h2,h3,h4,h5,h6) :is(b,strong),
html body .contact__content :is(h1,h2,h3,h4,h5,h6) :is(b,strong){
  font-family:inherit!important;font-weight:inherit!important;
}