/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

a{
	text-decoration:none;
}
.menu-tarifas{
	border: 2px solid #fff ;
}
/* ===================================================================
   PARKING LA GESTA · CSS personalizado (v3 — fiel al diseño original)
   Pegar en: Apariencia → Personalizar → CSS adicional
   -------------------------------------------------------------------
   Las páginas ya traen las clases puestas (pl-cards, pl-features,
   pl-cta-olive, pl-dashed-box...), así que solo hay que pegar esto.
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Roboto+Slab:wght@400;500;600;700&display=swap');

:root {
  --pl-dark:        #2B323B;   /* cabecera, pie y tarjetas (slate oscuro) */
  --pl-card-bg:     #2B323B;
  --pl-olive:       #8C8E5B;   /* botones sólidos, hero y bandas CTA */
  --pl-olive-hover: #787A4A;
  --pl-accent:      #A0A26D;   /* precio, enlaces y aro sobre tarjeta */
  --pl-heading:     #2F3940;   /* titulares de sección (serif oscuro) */
  --pl-text:        #4A4A4A;
  --pl-light-bg:    #F3F3F3;
  --pl-white:       #FFFFFF;
  --pl-radius:      10px;
  --pl-gap:         18px;
  --pl-font-head:   'Roboto Slab', Georgia, serif;
  --pl-font-body:   'Montserrat', Helvetica, Arial, sans-serif;
}

/* ===================================================================
   TIPOGRAFÍA (serif, como el original)
   Recomendado: definir estas mismas fuentes en GeneratePress → Tipografía
=================================================================== */
body { font-family: var(--pl-font-body); color: var(--pl-text); }
h1, h2, h3, h4, h5, h6 { font-family: var(--pl-font-head); color: var(--pl-heading); }
a { color: var(--pl-olive); }
a:hover { color: var(--pl-olive-hover); }

/* ===================================================================
   1. TARJETAS OSCURAS (clase pl-cards en el grupo)
=================================================================== */
.pl-cards .wp-block-columns { gap: var(--pl-gap); margin-bottom: var(--pl-gap); align-items: stretch; }
.pl-cards .wp-block-column {
  background: var(--pl-card-bg);
  border-radius: var(--pl-radius);
  padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; color: var(--pl-white);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pl-cards .wp-block-column:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.pl-cards .wp-block-column:empty { background: none; padding: 0; }

.pl-cards .wp-block-column h3 { color: var(--pl-white); margin: 0 0 6px; font-size: 1.25rem; }
.pl-cards .wp-block-column h3 + p {
  color: rgba(255,255,255,.55); font-size: .9rem; margin: 0 0 18px; min-height: 2.6em;
}

/* PRECIO dentro de un ARO DE PUNTOS (el H2 de la tarjeta) */
.pl-cards .wp-block-column h2 {
  color: var(--pl-accent);
  font-size: 1.3rem; font-weight: 400;
  width: 120px; height: 120px;
  border: 1px dashed var(--pl-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 4px auto 18px; flex: 0 0 auto;
}
.pl-cards .wp-block-column h2 + p { color: rgba(255,255,255,.78); font-size: .9rem; margin: 0 0 16px; }

/* "Más información" como enlace de texto oliva */
.pl-cards .wp-block-column .wp-block-buttons { margin-top: auto; justify-content: center; }
.pl-cards .wp-block-column .wp-block-button__link {
  background: transparent !important; color: var(--pl-accent) !important;
  padding: 6px 0 !important; min-height: 0; font-size: .9rem; border-radius: 0;
  font-family: var(--pl-font-body);
}
.pl-cards .wp-block-column .wp-block-button__link:hover { text-decoration: underline; transform: none; }

/* ===================================================================
   2. BOTONES GENERALES (oliva sólido, como hero)
=================================================================== */
.wp-block-button__link, .wp-block-button .wp-element-button {
  background-color: var(--pl-olive); color: var(--pl-white);
  border-radius: var(--pl-radius); padding: 12px 28px; font-weight: 400;
  min-height: 44px; font-family: var(--pl-font-head);
  transition: background-color .2s ease, transform .2s ease;
}
.wp-block-button__link:hover, .wp-block-button .wp-element-button:hover {
  background-color: var(--pl-olive-hover); transform: translateY(-1px);
}

/* ===================================================================
   3. HÉROE (bloque Portada / Cover)
=================================================================== */
.wp-block-cover h1 { font-size: 3.4rem; font-weight: 400; color: #fff !important; margin-bottom: .2em; }
.wp-block-cover p  { font-size: 1.15rem; color: #fff; }
.wp-block-cover .wp-block-buttons { margin-top: 22px; }

/* ===================================================================
   4. CARACTERÍSTICAS HOME (clase pl-features)
   Estructura de columnas. Las columnas se estiran a la misma altura
   (por defecto) y, dentro de cada una, las tarjetas se reparten el
   alto con flex:1 → las 4 tarjetas quedan iguales. Fondo gris claro.
=================================================================== */
.pl-features.has-background { background-color: #ECEEEA !important; } /* gris clarito */

.pl-features .wp-block-columns { gap: 24px; margin-top: 34px; align-items: stretch; }
.pl-features .wp-block-column { display: flex; flex-direction: column; gap: 24px; }

.pl-features .pl-feature {
  position: relative;
  flex: 1;                      /* reparte el alto → tarjetas iguales */
  margin: 0;
  background: var(--pl-white);
  border: 1px solid #E2E4DC;
  border-radius: var(--pl-radius);
  padding: 28px 28px 28px 80px;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  transition: box-shadow .25s ease, transform .25s ease;
}
.pl-features .pl-feature:hover { box-shadow: 0 12px 28px rgba(0,0,0,.10); transform: translateY(-3px); }
.pl-features .pl-feature h4 { color: var(--pl-heading); margin: 0 0 .4em; font-size: 1.2rem; }
.pl-features .pl-feature p { color: var(--pl-text); font-size: .95rem; margin: 0; }

/* Icono (etiqueta <i> de Font Awesome) arriba a la izquierda */
.pl-features .pl-feature .pl-feat-icon {
  position: absolute; left: 28px; top: 28px;
  font-size: 1.8rem; line-height: 1; color: var(--pl-olive);
  width: 1.8rem; text-align: center;
}
.pl-features .pl-feature .pl-feat-icon svg { width: 1.8rem; height: 1.8rem; }

/* ===================================================================
   5. CARACTERÍSTICAS "NUESTRO PARKING" (clase pl-icongrid)
   Filas de iconos+etiqueta. El eyebrow va con la clase pl-eyebrow.
=================================================================== */
.pl-eyebrow { color: var(--pl-olive); font-style: italic; text-align: center; margin: 0 0 -.2em; }
.pl-icongrid .wp-block-column { text-align: center; padding: 10px; }
.pl-icongrid .wp-block-column p { font-size: .9rem; color: var(--pl-text); }
.pl-icongrid h3 { text-align: center; }

/* ===================================================================
   6. BANDAS CTA EN OLIVA (clase pl-cta-olive)
=================================================================== */
.pl-cta-olive { background-color: var(--pl-olive) !important; }
.pl-cta-olive h2, .pl-cta-olive h3, .pl-cta-olive p { color: var(--pl-white) !important; }
.pl-cta-olive .wp-block-button__link {
  background: transparent !important; border: 1px solid rgba(255,255,255,.8);
  color: #fff !important;
}
.pl-cta-olive .wp-block-button__link:hover { background: rgba(255,255,255,.12) !important; }

/* CTA con foto de fondo (Cover): el texto y el botón ya van en blanco */
.wp-block-cover.pl-cta-photo .wp-block-button__link {
  background: transparent !important; border: 1px solid rgba(255,255,255,.8);
}

/* ===================================================================
   7. CAJA "SOLICITA INFORMACIÓN" (clase pl-info-box) — página Abonos
=================================================================== */
.pl-info-box {
  background: #ECEEEA;
  border-radius: var(--pl-radius);
  padding: 34px;
}
.pl-info-box .wp-block-image img { border-radius: var(--pl-radius); }
@media (max-width: 767px) { .pl-info-box { padding: 24px; } }

/* ===================================================================
   8. FAQs (acordeón con bloque Detalles, clase pl-faqs en la sección)
=================================================================== */
.pl-faqs.has-background { background-color: #ECEEEA !important; }
.pl-faqs > .wp-block-details:first-of-type,
.pl-faqs .wp-block-details { 
  background: var(--pl-white);
  border: 1px solid #E2E4DC;
  border-radius: var(--pl-radius);
  margin-bottom: 14px;
  padding: 2px 26px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.pl-faqs .wp-block-details[open] { box-shadow: 0 10px 26px rgba(0,0,0,.08); border-color: #D6D9CE; }
.pl-faqs .wp-block-details summary {
  cursor: pointer; font-family: var(--pl-font-head); font-size: 1.12rem;
  color: var(--pl-heading); padding: 18px 0 18px 46px;
  list-style: none; position: relative;
}
.pl-faqs .wp-block-details summary::-webkit-details-marker { display: none; }
.pl-faqs .wp-block-details summary::before {
  content: "+"; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 1px solid var(--pl-olive); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  color: var(--pl-olive); transition: background-color .2s ease, color .2s ease;
}
.pl-faqs .wp-block-details[open] summary::before,
.pl-faqs .wp-block-details summary:hover::before { content: "+"; background: var(--pl-olive); color: #fff; }
.pl-faqs .wp-block-details[open] summary::before { content: "–"; }
.pl-faqs .wp-block-details p { color: var(--pl-text); padding-bottom: 8px; margin: 0 0 8px; }

/* ===================================================================
   9. IMÁGENES y MAPA
=================================================================== */
.wp-block-image img { border-radius: var(--pl-radius); }

/* ===================================================================
   10. RESPONSIVE
=================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .pl-cards .wp-block-columns { flex-wrap: wrap; }
  .pl-cards .wp-block-columns > .wp-block-column { flex-basis: calc(50% - var(--pl-gap)) !important; flex-grow: 0; }
  .pl-cards .wp-block-column:empty { display: none; }
}
@media (max-width: 767px) {
  .pl-cards .wp-block-column { padding: 28px 20px; }
  .pl-cards .wp-block-column h2 { width: 110px; height: 110px; }
  .pl-cards .wp-block-column h3 + p { min-height: 0; }
  .wp-block-group.alignfull[style*="padding-top"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  .wp-block-cover { min-height: 60vh !important; }
  .wp-block-cover h1 { font-size: 2.1rem; }
}

/* ===================================================================
   11. CABECERA OSCURA (opcional — mejor hacerlo en el Personalizador)
   Descomenta si la cabecera sale clara y el logo blanco no se ve.
=================================================================== */
/*
.site-header, .main-navigation { background-color: var(--pl-dark); }
.main-navigation .main-nav ul li a { color: #fff; font-family: var(--pl-font-head); }
.main-navigation .main-nav ul li a:hover { color: var(--pl-accent); }
*/

/* ===================================================================
   12. CARRUSEL (Splide) — se activa en los grupos con clase pl-carousel
   Requiere el snippet de pie de página (carrusel-footer-snippet.html)
=================================================================== */
.pl-carousel .splide { padding: 4px 44px 44px; }
.pl-splide .splide__list { align-items: stretch; }
.pl-splide .splide__slide { display: flex; height: auto; }
.pl-splide .splide__slide > .wp-block-column { width: 100%; }
.pl-splide .splide__arrow {
  background: var(--pl-olive); opacity: 1; width: 2.4em; height: 2.4em; border-radius: 50%;
}
.pl-splide .splide__arrow:hover { background: var(--pl-olive-hover); }
.pl-splide .splide__arrow:disabled { opacity: .35; }
.pl-splide .splide__arrow svg { fill: #fff; height: 1em; width: 1em; }
.pl-splide .splide__pagination { bottom: -.2em; }
.pl-splide .splide__pagination__page { background: #c7c7c7; opacity: 1; }
.pl-splide .splide__pagination__page.is-active { background: var(--pl-olive); transform: scale(1.3); }
@media (max-width: 767px) { .pl-carousel .splide { padding: 4px 8px 40px; } }

/* ===================================================================
   13. PIE DE PÁGINA (Element de GeneratePress con clase pl-footer)
=================================================================== */
.site-info { display: none; }   /* oculta la barra de copyright por defecto de GP */

.pl-footer { background-color: var(--pl-dark); }
.pl-footer, .pl-footer p { color: rgba(255,255,255,.85); }
.pl-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.pl-footer a:hover { color: var(--pl-accent); }
.pl-footer .pl-footer-legal { margin: 0 0 6px; font-family: var(--pl-font-head); }
.pl-footer .pl-footer-copy { margin: 0; color: rgba(255,255,255,.45); font-size: .85rem; }
.pl-footer img { max-width: 150px; height: auto; }

/* Bloque de contacto */
.pl-footer .pl-footer-title { color: #fff; font-size: 1rem; margin: 0 0 12px; }
.pl-footer .pl-footer-contact { margin: 0 0 4px; font-size: .92rem; }
.pl-footer .pl-footer-contact a { display: inline-flex; align-items: center; gap: 9px; }
.pl-footer .pl-footer-contact i { color: var(--pl-accent); width: 16px; text-align: center; }

@media (max-width: 767px) {
  .pl-footer .wp-block-columns { gap: 22px; text-align: center; }
  .pl-footer .pl-footer-legal, .pl-footer .pl-footer-copy { text-align: center !important; }
  .pl-footer .pl-footer-contact a { justify-content: center; }
  .pl-footer figure.wp-block-image { margin-left: auto; margin-right: auto; }
}

/* ===================================================================
   14. FORMULARIO DE CONTACTO (Contact Form 7)
   La clase pl-form va dentro de la plantilla del formulario (CF7).
=================================================================== */
.pl-form { max-width: 680px; margin: 30px auto 0; }
.pl-form p { margin: 0 0 16px; }
.pl-form input[type="text"],
.pl-form input[type="email"],
.pl-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #D9DBD4;
  border-radius: var(--pl-radius);
  background: #fff;
  font-family: var(--pl-font-body);
  font-size: 1rem;
  color: var(--pl-text);
  box-sizing: border-box;
}
.pl-form textarea { min-height: 170px; resize: vertical; }
.pl-form input:focus, .pl-form textarea:focus {
  outline: none; border-color: var(--pl-olive);
  box-shadow: 0 0 0 3px rgba(140,142,91,.15);
}
.pl-form .pl-acepto { text-align: center; font-size: .9rem; color: var(--pl-text); }
.pl-form .pl-acepto a { color: var(--pl-olive); }
.pl-form .wpcf7-submit {
  display: block; margin: 6px auto 0;
  background: var(--pl-olive); color: #fff; border: 0;
  border-radius: var(--pl-radius); padding: 13px 38px;
  font-family: var(--pl-font-head); font-size: 1rem; cursor: pointer;
  transition: background-color .2s ease;
}
.pl-form .wpcf7-submit:hover { background: var(--pl-olive-hover); }
.wpcf7 .wpcf7-spinner { margin: 12px auto 0; display: block; }

/* ===================================================================
   15. SLIDER DE BLOQUES (clase pl-slider, 1 por vista) — Nuestro parking
=================================================================== */
.pl-slider-splide { padding: 4px 50px 48px; }
.pl-slider-splide .splide__slide { display: block; height: auto; }
.pl-slider-splide .wp-block-columns { margin: 0; }
@media (max-width: 767px) { .pl-slider-splide { padding: 4px 6px 44px; } }

/* Iconos de las rejillas Plazas / Funcionamiento / Servicios */
.pl-icongrid .pl-grid-icon {
  display: block; text-align: center;
  font-size: 2rem; line-height: 1; color: var(--pl-olive); margin: 0 auto 10px;
}
.pl-icongrid .pl-grid-icon svg { width: 2rem; height: 2rem; }
.pl-icongrid .wp-block-column { padding: 14px 10px; }