/* Page-specific overrides for explore-spanish-culture-and-study-locations landing */
/* Online parity: hero encaje, section card look, calc sticky, spacing premium      */

/* Italiana font — matches online hero H1 */
@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');

/* ===================================================================
   HERO — encaje bajo header fijo + overlay más oscuro
=================================================================== */

.sta-page-hero {
  margin-top: -108px !important;
  border-radius: 0 0 40px 40px !important;
}

.sta-page-hero:not(.sta-page-hero--no-image) {
  background:
    linear-gradient(to bottom, rgba(28,20,11,0.50) 0%, rgba(28,20,11,0.50) 100%),
    var(--sta-page-hero-image),
    linear-gradient(135deg, #4d8440 0%, #3d7031 40%, #1f2a20 100%) !important;
  background-position: center 72% !important;
  background-size: cover !important;
}

/* Hero H1 — matches online: Italiana 50px weight 500 */
.sta-page-hero__title {
  font-family: "Italiana", "Playfair Display", serif !important;
  font-size: 50px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
}

.sta-page-hero__intro {
  background: rgba(25,26,24,0.35) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.15) !important;
}

/* ===================================================================
   SECTION CONTAINERS — card look en secciones de contenido
   (hero y contact son full-width y no reciben este tratamiento)
=================================================================== */

.sta-explore-online,
.sta-explore-help,
.sta-explore-exp,
.sta-explore-fit,
.sta-explore-faq,
.sta-explore-costcalc {
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
  border: 1px solid #E9E5E1;
  background: #FAF9F7;
}

/* ===================================================================
   WHY TEXT — frosted glass más suave, igual que online
=================================================================== */

.sta-explore-why__text {
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  background: rgba(255,255,255,0.78) !important;
}

/* ===================================================================
   CIUDAD CARDS — aspect ratio 16:10 responsivo (igual que online)
=================================================================== */

.sta-explore-city__figure {
  min-height: 0 !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
}

.sta-explore-city__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* CTA mantiene fondo oscuro semi-transparente en hover (igual que online) */
.sta-explore-city__link:hover .sta-explore-city__cta {
  background: rgba(0,0,0,0.38) !important;
}

/* ===================================================================
   HELP / EXPERIENCE / FIT — cards beige con sombra suave
=================================================================== */

.sta-explore-help__card,
.sta-explore-exp__card,
.sta-explore-fit__item {
  background: #EEE7DC !important;
  border: 1px solid #E9E5E1 !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.06) !important;
}

.sta-explore-help__card h3,
.sta-explore-exp__card h3,
.sta-explore-fit__item h3 {
  color: #3D7031 !important;
  font-weight: 800 !important;
}

/* ===================================================================
   FAQ — sin icono +/-, hover con colores del tema
=================================================================== */

/* Ocultar el icono +/- del componente */
.sta-explore-faq summary::after {
  display: none !important;
}

.sta-explore-faq summary {
  padding: 22px 28px !important;
  font-weight: 700 !important;
  color: #C3A890 !important;
  border-radius: 16px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

/* Hover sobre el summary */
.sta-explore-faq summary:hover {
  background: #EEE7DC !important;
  color: #3D7031 !important;
}

/* Item abierto: summary con fondo verde suave */
.sta-explore-faq details[open] > summary {
  background: rgba(61,112,49,0.08) !important;
  color: #3D7031 !important;
  border-radius: 16px 16px 0 0 !important;
}

/* ===================================================================
   CALCULADORA — result sticky, inputs beige, total grande
=================================================================== */

.sta-explore-costcalc__result {
  position: sticky !important;
  top: 24px !important;
  z-index: 20 !important;
}

.sta-explore-costcalc .sta-field input,
.sta-explore-costcalc .sta-field select {
  border-radius: 14px !important;
  border: 1px solid #E9E5E1 !important;
  padding: 16px 18px !important;
  background: #FAF9F7 !important;
}

/* Corrige selector: el elemento real es .sta-total__value */
.sta-explore-costcalc .sta-total__value {
  font-size: clamp(40px, 5vw, 64px) !important;
  font-weight: 900 !important;
  color: #3D7031 !important;
}

/* ===================================================================
   CONTACTO FINAL — fondo beige, layout limpio, botón verde
=================================================================== */

.sta-contact {
  background: #EEE7DC !important;
}

.sta-contact__lottie {
  width: 100% !important;
  max-width: 420px !important;
}

/* Quitar borde del fieldset de email */
.sta-contact .wpforms-field-email fieldset {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Todos los campos: full width, apilados verticalmente */
.sta-contact .wpforms-field {
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

.sta-contact .wpforms-one-half,
.sta-contact .wpforms-first {
  width: 100% !important;
  float: none !important;
}

/* Label encima del input, con asterisco rojo */
.sta-contact .wpforms-field-label {
  display: block !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #2f2f2f !important;
  margin-bottom: 6px !important;
}

.sta-contact .wpforms-required-label {
  color: #d94f4f !important;
  margin-left: 3px !important;
}

/* Inputs full width, bordes suaves, sin max-width */
.sta-contact .wpforms-form input[type="text"],
.sta-contact .wpforms-form input[type="email"],
.sta-contact .wpforms-form input[type="tel"],
.sta-contact .wpforms-form textarea,
.sta-contact .wpforms-form select {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  background: #fff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sta-contact .wpforms-form input:focus,
.sta-contact .wpforms-form textarea:focus {
  border-color: #3D7031 !important;
  box-shadow: 0 0 0 3px rgba(61,112,49,0.12) !important;
  outline: none !important;
}

/* Email: los dos inputs lado a lado con gap */
.sta-contact .wpforms-field-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.sta-contact .wpforms-field-row-block {
  width: 100% !important;
  float: none !important;
}

/* Sublabels ocultos (ya los hay como placeholder) */
.sta-contact .wpforms-field-sublabel,
.sta-contact .wpforms-sublabel-hide {
  display: none !important;
}

/* Textarea */
.sta-contact .wpforms-form textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* GDPR: descripción con tamaño razonable */
.sta-contact .wpforms-field-description {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: rgba(0,0,0,0.55) !important;
  margin-top: 8px !important;
}

/* Botón verde de marca */
.sta-contact .wpforms-submit {
  background: #3D7031 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 14px 36px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.sta-contact .wpforms-submit:hover {
  background: #2a5022 !important;
  filter: none !important;
}

@media (max-width: 600px) {
  .sta-contact .wpforms-field-row {
    grid-template-columns: 1fr !important;
  }
}

/* ===================================================================
   GRIDS RESPONSIVOS
=================================================================== */

@media (min-width: 992px) {
  .sta-explore-city__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
  }

  .sta-explore-help__grid,
  .sta-explore-exp__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .sta-explore-online,
  .sta-explore-help,
  .sta-explore-exp,
  .sta-explore-fit,
  .sta-explore-faq,
  .sta-explore-costcalc {
    border-radius: 18px;
  }
}