:root {
  --primary: #5C8A3A;
  --dark: #2D4A2B;
  --accent: #E89B4C;
  --cream: #FAF7F2;
  --white: #FFFFFF;
  --text: #2B2B2B;
  --muted: #6B6B6B;
  --border: #E8E4DD;
  --header-h: 78px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }   /* fuerza el atributo hidden incluso cuando lo sobrescribe display:flex u otros */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--dark);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
}
p { color: var(--muted); line-height: 1.7; }
strong { color: inherit; font-weight: 700; }
button { font-family: inherit; cursor: pointer; }

/* ========== HEADER ========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  display: flex;
  align-items: center;
}
.site-header .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.site-logo img { height: 42px; width: auto; display: block; }
.site-nav { display: flex; gap: 8px; align-items: center; }
.site-nav a {
  padding: 8px 14px;
  color: var(--text);
  font-weight: 500;
  font-size: 15px;
  border-radius: 8px;
  transition: all .2s;
}
.site-nav a:hover { color: var(--primary); background: var(--cream); }
.site-nav a.active { color: var(--primary); }
.site-nav .nav-cta {
  background: var(--primary);
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  margin-left: 8px;
}
.site-nav .nav-cta:hover { background: var(--dark); color: white; }
.nav-toggle { display: none; background: none; border: none; padding: 10px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--dark); margin: 5px 0; transition: .3s; }

/* ========== LAYOUT HELPERS ========== */
.section { padding: 100px 32px; }
.section.cream { background: var(--cream); }
.section.dark { background: var(--dark); color: white; }
.section.dark h1, .section.dark h2, .section.dark h3 { color: white; }
.boxed { max-width: 1200px; margin: 0 auto; }
.boxed.narrow { max-width: 900px; }
.row { display: flex; flex-wrap: wrap; gap: 40px; }
.row.center { align-items: center; }
.row.between { justify-content: space-between; }
.row.gap-sm { gap: 22px; }
.row.gap-lg { gap: 60px; }
.col { display: flex; flex-direction: column; gap: 16px; }
.w-25 { flex: 0 1 calc(25% - 18px); }
.w-31 { flex: 0 1 calc(33.333% - 16px); min-width: 280px; }
.w-33 { flex: 0 1 calc(33.333% - 16px); min-width: 280px; }
.w-44 { flex: 0 1 calc(44% - 30px); min-width: 300px; }
.w-48 { flex: 0 1 calc(50% - 12px); min-width: 280px; }
.svc-col { flex: 0 1 calc(25% - 18px); min-width: 200px; }
.w-50 { flex: 0 1 calc(50% - 20px); min-width: 280px; }
.w-52 { flex: 0 1 calc(56% - 30px); min-width: 320px; }
.w-58 { flex: 0 1 calc(58% - 20px); min-width: 320px; }
.w-38 { flex: 0 1 calc(38% - 20px); min-width: 280px; }

/* ========== TYPOGRAPHY ========== */
.eyebrow {
  font-family: 'Poppins', sans-serif;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 14px;
}
.eyebrow.accent { color: var(--accent); }
.eyebrow.muted { color: var(--muted); }
.h1 { font-size: 58px; line-height: 1.05; color: var(--dark); }
.h2 { font-size: 42px; line-height: 1.15; color: var(--dark); }
.h3 { font-size: 22px; line-height: 1.3; color: var(--dark); font-weight: 700; }
.h4 { font-size: 20px; line-height: 1.3; color: var(--dark); font-weight: 700; }
.center { text-align: center; }
.lead { font-size: 18px; line-height: 1.65; color: var(--text); }
.lead.muted { color: var(--muted); }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 50px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: all .25s ease;
  border: 2px solid transparent;
  line-height: 1.2;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--dark); color: white; transform: translateY(-1px); }
.btn-accent { background: var(--accent); color: white; }
.btn-accent:hover { background: #D8893B; transform: translateY(-1px); color: white; }
.btn-outline { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-outline:hover { background: var(--primary); color: white; }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }

/* ========== HERO ========== */
.hero { background: var(--cream); padding: 100px 32px; }
.hero .h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 32px; }
.hero img.hero-img {
  border-radius: 28px;
  aspect-ratio: 4/3;
  object-fit: cover;
  box-shadow: 0 24px 60px rgba(45,74,43,0.15);
  width: 100%;
}
.trust {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--muted);
  margin-top: 28px;
}
.avatars { display: flex; flex-shrink: 0; }
.avatars img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid white; object-fit: cover; }
.avatars img + img { margin-left: -12px; }

/* ========== STATS STRIP ========== */
.stats { background: var(--dark); padding: 64px 32px; color: white; }
.stat { text-align: center; display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.stat .num {
  font-family: 'Poppins', sans-serif;
  font-size: 56px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.stat .label { color: white; font-size: 15px; font-weight: 500; }

/* ========== SPLIT ========== */
.split { display: flex; flex-wrap: wrap; align-items: center; gap: 60px; }
.split .img-col, .split .text-col { flex: 0 1 calc(48% - 30px); min-width: 300px; }
.split img { border-radius: 24px; aspect-ratio: 4/3; object-fit: cover; box-shadow: 0 20px 50px rgba(45,74,43,0.12); width: 100%; }
.split .h2 { margin-bottom: 16px; }
.split p { margin-bottom: 14px; }
.split p:last-of-type { margin-bottom: 24px; }

/* ========== SERVICE CARDS ========== */
.service-card {
  background: white;
  padding: 22px;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(45,74,43,0.08);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  transition: transform .25s, box-shadow .25s;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(45,74,43,0.14); }
.service-card img { aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; width: 100%; }
.service-card .h3 { margin-bottom: 0; }
.service-card p { font-size: 15px; line-height: 1.6; flex: 1; margin: 0; }

/* ========== ICONBOX (3 motivos) ========== */
.iconbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 16px;
}
.iconbox .icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
}
.iconbox.accent .icon { background: #FCE9D5; color: var(--accent); }
.iconbox h4 { font-size: 20px; }
.iconbox p { font-size: 15px; }

/* ========== GALLERY ========== */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery img {
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 24px;
  width: 100%;
  transition: transform .3s;
}
.gallery img:hover { transform: scale(1.02); }

/* ========== TESTIMONIALS ========== */
.testi {
  background: var(--white);
  padding: 36px 32px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  box-shadow: 0 10px 26px rgba(45,74,43,0.07), 0 3px 8px rgba(45,74,43,0.04);
  border-top: 4px solid var(--accent);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.testi:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(45,74,43,0.12), 0 6px 14px rgba(45,74,43,0.06);
}
.testi .stars { color: var(--accent); font-size: 15px; letter-spacing: 4px; line-height: 1; }
.testi .quote-mark {
  font-family: Georgia, serif;
  font-size: 100px;
  color: var(--primary);
  line-height: 0.5;
  font-weight: 700;
  opacity: 0.18;
  position: absolute;
  top: 50px;
  right: 28px;
  pointer-events: none;
  user-select: none;
}
.testi .quote { font-size: 16px; line-height: 1.75; color: var(--text); margin: 0; font-weight: 500; position: relative; z-index: 1; }
.testi .author { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.testi .author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.testi .author .name { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--dark); font-size: 16px; line-height: 1.2; }
.testi .author .role { color: var(--muted); font-size: 13px; line-height: 1.3; margin-top: 4px; }

/* ========== TESTIMONIOS · SECCIÓN ========== */
.testi-section {
  position: relative;
  background: var(--white);
}
.testi-section .testi-section-head { text-align: center; margin-bottom: 50px; }

/* ========== CARRUSEL INFINITO ========== */
.testi-carousel {
  position: relative;
  padding: 8px 0;
}
.carousel-viewport {
  overflow: hidden;
  padding: 20px 12px 36px;
  /* Fundido sutil en los bordes para que los cards no se "corten" duros */
  mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
}
.carousel-track {
  display: flex;
  gap: 22px;
  transition: transform .65s cubic-bezier(.4,.14,.3,1);
  will-change: transform;
}
.testi-slide {
  flex: 0 0 calc(33.333% - 14.66px);
  display: flex;
  min-width: 0;
}
.testi-slide > .testi { width: 100%; }
@media (max-width: 900px) {
  .testi-slide { flex: 0 0 calc(50% - 11px); }
}
@media (max-width: 600px) {
  .testi-slide { flex: 0 0 100%; }
  .carousel-viewport { mask-image: none; -webkit-mask-image: none; padding: 14px 6px 28px; }
}

/* Flechas a izq/der, círculo flotante */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--dark);
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 10px 28px rgba(45,74,43,0.14);
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  padding: 0;
  line-height: 1;
}
.carousel-prev { left: -22px; }
.carousel-next { right: -22px; }
.carousel-arrow:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  box-shadow: 0 14px 32px rgba(92,138,58,0.45);
  transform: translateY(-50%) scale(1.08);
}
.carousel-arrow:active { transform: translateY(-50%) scale(0.96); }
@media (max-width: 1100px) {
  .carousel-prev { left: 8px; }
  .carousel-next { right: 8px; }
}
@media (max-width: 600px) {
  /* Flechas debajo del carrusel, centradas */
  .testi-carousel { padding: 8px 0 68px; }
  .carousel-arrow {
    top: auto;
    bottom: 0;
    transform: none;
    width: 44px;
    height: 44px;
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(45,74,43,0.15);
  }
  .carousel-prev { left: 50%; margin-left: -52px; }
  .carousel-next { right: 50%; margin-right: -52px; left: auto; }
  .carousel-arrow:hover { transform: scale(1.06); }
  .carousel-arrow:active { transform: scale(0.94); }
}

/* "Leer más" button dentro del testi */
.testi-more {
  background: none;
  border: none;
  color: var(--primary);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
  transition: color .2s;
  letter-spacing: 0.3px;
}
.testi-more::after { content: ' →'; display: inline-block; transition: transform .2s; }
.testi-more:hover { color: var(--dark); }
.testi-more:hover::after { transform: translateX(4px); }

/* ========== REVEAL ON SCROLL ========== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ========== MODAL TESTIMONIO ========== */
.testi-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.testi-modal[hidden] { display: none !important; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45,74,43,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: stFadeIn .2s ease;
  cursor: pointer;
}
.modal-card {
  position: relative;
  background: var(--white);
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 48px 40px 36px;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  z-index: 1;
  border-top: 4px solid var(--accent);
  animation: stModalIn .25s cubic-bezier(.16,.84,.44,1);
}
@keyframes stFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes stModalIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream);
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  line-height: 1;
  padding: 0;
}
.modal-close:hover { background: var(--primary); color: var(--white); transform: rotate(90deg); }
.modal-stars { color: var(--accent); font-size: 17px; letter-spacing: 4px; margin-bottom: 16px; line-height: 1; }
.modal-quote {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 28px;
  font-weight: 500;
}
.modal-author {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.modal-author img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.modal-author .name { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--dark); font-size: 17px; line-height: 1.2; }
.modal-author .role { color: var(--muted); font-size: 14px; line-height: 1.3; margin-top: 4px; }

/* ========== TRUST LOGOS ========== */
.logos { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; }
.logos img { max-height: 52px; flex: 0 0 auto; opacity: 0.55; filter: grayscale(1); transition: all .25s; }
.logos img:hover { opacity: 1; filter: grayscale(0); }

/* ========== BLOG (cargado dinámicamente) ========== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(45,74,43,0.1); }
.post-card a { color: inherit; text-decoration: none; display: block; }
.post-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.post-card .body { padding: 22px; }
.post-card .cat {
  color: var(--accent);
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  display: block;
}
.post-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--dark);
  line-height: 1.35;
}
.post-card .excerpt { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
.post-card .read-more { color: var(--primary); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; }
.blog-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 14px;
}
.blog-loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin-left: 10px;
  vertical-align: middle;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== CTA BANNER ========== */
.cta-banner {
  padding: 80px 32px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.cta-banner::before { content: ''; position: absolute; inset: 0; background: rgba(45,74,43,0.55); }
.cta-banner .boxed { position: relative; z-index: 1; }
.cta-card {
  background: rgba(45,74,43,0.92);
  border-radius: 28px;
  padding: 64px;
  text-align: center;
  color: white;
}
.cta-card h2 { color: white; font-size: 40px; margin-bottom: 14px; }
.cta-card p { color: #E4ECDC; font-size: 18px; margin-bottom: 28px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ========== FOOTER ========== */
.site-footer {
  background: var(--dark);
  color: #B5C5AC;
  padding: 70px 32px 30px;
}
.site-footer .container { max-width: 1280px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 50px;
}
.site-footer h4 {
  color: white;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 18px;
}
.site-footer .footer-brand p { color: #B5C5AC; font-size: 14px; line-height: 1.7; margin: 14px 0 0; }
.site-footer .footer-logo { height: 42px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.92; }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer ul a, .site-footer .contact-info a { color: #B5C5AC; text-decoration: none; font-size: 14px; transition: color .2s; }
.site-footer ul a:hover, .site-footer .contact-info a:hover { color: var(--accent); }
.contact-info { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  transition: all .2s;
}
.socials a:hover { background: var(--accent); color: white; transform: translateY(-2px); }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
}
.footer-legal .legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal .legal-links a { color: #B5C5AC; text-decoration: none; }
.footer-legal .legal-links a:hover { color: white; }
.acred-strip {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 22px 24px;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  margin-bottom: 40px;
}
.acred-strip .acred-label {
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-right: 6px;
}
.acred-strip .acred-logos { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.acred-strip .acred-logos img {
  height: 56px;
  width: auto;
  background: white;
  padding: 6px 10px;
  border-radius: 10px;
  display: block;
}

/* ========== WHATSAPP FLOATING BUTTON ========== */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  background: #25D366;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,0.4), 0 4px 12px rgba(0,0,0,0.15);
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 32px rgba(37,211,102,0.5), 0 6px 16px rgba(0,0,0,0.2);
  color: white;
}
.whatsapp-float svg { width: 32px; height: 32px; fill: white; position: relative; z-index: 2; }
.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.6;
  z-index: 0;
  animation: wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.wa-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--dark);
  color: white;
  padding: 9px 16px;
  border-radius: 30px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  letter-spacing: 0.3px;
}
.wa-tooltip::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--dark);
}
.whatsapp-float:hover .wa-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ========== UTILITIES desktop / móvil ========== */
.hide-mobile { display: inline; }
.show-mobile { display: none; }
.blog-cta-mobile { display: none; }
@media (max-width: 600px) {
  .hide-mobile { display: none; }
  .show-mobile { display: inline; }
}

/* ========== RESPONSIVE ========== */

/* ----- ≤ 980 px (tablet y móvil grande) ----- */
@media (max-width: 980px) {
  .section, .hero { padding: 60px 22px; }
  .h1 { font-size: 36px !important; }
  .h2 { font-size: 28px; }
  .hero, .split { gap: 30px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .row { gap: 22px; }
  .row.gap-lg { gap: 30px; }
  .cta-card { padding: 40px 28px; }
  .cta-card h2 { font-size: 28px; }

  /* CLAVE: quito el min-width de TODAS las columnas anchas, si no se desbordan
     o crean ese efecto de "no ocupar el ancho disponible" en móvil */
  .w-31, .w-33, .w-44, .w-48, .w-50, .w-52, .w-58, .w-38,
  .split .img-col, .split .text-col {
    min-width: 0 !important;
    flex: 0 1 100% !important;
  }

  /* Si en un split la columna de texto va primero en el HTML (Metodología, p.ej.),
     en móvil seguimos mostrando la imagen ARRIBA para consistencia visual */
  .split .text-col:first-child { order: 2; }
  .split .img-col:last-child   { order: 1; }

  /* Servicios 2 en 2 */
  .svc-col { flex: 0 1 calc(50% - 11px) !important; min-width: 130px !important; }

  /* HERO: en móvil PRIMERO se ve la imagen, luego el texto */
  .hero .w-52 { order: 2; }
  .hero .w-44 { order: 1; }

  /* Hero: dos botones lado a lado en móvil */
  .hero-ctas { flex-wrap: nowrap; gap: 10px; }
  .hero-ctas .btn {
    flex: 1 1 0;
    padding: 12px 16px;
    font-size: 13px;
    justify-content: center;
    text-align: center;
    min-width: 0;
    white-space: nowrap;
  }

  /* Quiénes Somos: botón "Conoce al equipo" centrado en móvil.
     Para que align-self funcione, .text-col tiene que ser flex container */
  .split .text-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .split .text-col .btn { align-self: center; margin-top: 10px; }

  /* Blog: la cabecera se centra (eyebrow + h2). El botón de la cabecera
     se OCULTA en móvil y aparece UN ÚNICO botón debajo del grid */
  .blog-head { text-align: center; gap: 16px; }
  .blog-head .col { align-items: center !important; }
  .blog-head .eyebrow, .blog-head .h2 { text-align: center; width: 100%; }
  .blog-cta-col { display: none; }
  .blog-cta-mobile {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }

  /* Mobile burger nav */
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    gap: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 32px; border-radius: 0; width: 100%; }
  .site-nav .nav-cta {
    margin: 14px 32px 6px;
    padding: 13px 24px;
    text-align: center;
    border-radius: 50px;
    width: auto;          /* corrige el "Mi cuenta" demasiado ancho */
    align-self: stretch;  /* ocupa el ancho disponible menos los márgenes */
  }
}

/* ----- ≤ 600 px (móvil) ----- */
@media (max-width: 600px) {
  /* Sección general más compacta */
  .section, .hero { padding: 50px 20px; }

  /* Hero */
  .hero { padding-top: 30px; }      /* 50 → 30 (quito 20px arriba) */
  .hero .trust { font-size: 13px; }
  .hero img.hero-img {
    height: 150px;                  /* imagen más bajita en móvil */
    aspect-ratio: auto;             /* anulo el 4/3 del desktop */
    object-fit: cover;
  }

  /* Servicios cards: padding, fuentes y botones más pequeños para que el texto
     y los botones quepan en 2 columnas sin romper línea de forma fea */
  .service-card { padding: 16px; gap: 10px; }
  .service-card .h3 { font-size: 17px; line-height: 1.25; }
  .service-card p { font-size: 13.5px; line-height: 1.5; }
  .service-card .btn {
    padding: 10px 14px;
    font-size: 12.5px;
    letter-spacing: 0.2px;
    gap: 4px;
    align-self: stretch;
    justify-content: center;
  }

  /* Testimonios cards más estrechos por dentro */
  .testi { padding: 28px 22px; }
  .testi .quote-mark { font-size: 70px; top: 32px; right: 18px; }
  .testi .author img { width: 46px; height: 46px; }
  .testi-section .testi-section-head { margin-bottom: 32px; }

  /* Modal testimonio */
  .testi-modal { padding: 14px; }
  .modal-card { padding: 38px 22px 26px; max-height: 92vh; }
  .modal-quote { font-size: 15px; }
  .modal-author img { width: 48px; height: 48px; }

  /* Por qué elegirnos — compacto */
  .iconbox { gap: 10px; padding: 4px 8px; }
  .iconbox .icon { width: 54px; height: 54px; font-size: 24px; }
  .iconbox h4 { font-size: 18px; }
  .iconbox p { font-size: 14px; }

  /* Logos colaboradores */
  .logos { gap: 22px; justify-content: center; }
  .logos img { max-height: 36px; }

  /* Acreditaciones del footer */
  .acred-strip { padding: 18px 16px; gap: 14px; }
  .acred-strip .acred-label { font-size: 11px; text-align: center; margin-right: 0; }
  .acred-strip .acred-logos { gap: 10px; }
  .acred-strip .acred-logos img { height: 46px; padding: 5px 8px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer { padding: 50px 22px 24px; }

  /* Header padding */
  .site-header .container { padding: 0 20px; }

  /* WhatsApp flotante */
  .whatsapp-float { width: 56px; height: 56px; bottom: 18px; right: 18px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
  .wa-tooltip { display: none; }

  /* CTA banner */
  .cta-banner { padding: 50px 20px; }
  .cta-card { padding: 36px 22px; }
  .cta-card h2 { font-size: 26px; }
  .cta-card p { font-size: 16px; }
}

/* ----- ≤ 380 px (móviles muy pequeños) ----- */
@media (max-width: 380px) {
  .section, .hero { padding: 44px 18px; }
  .h1 { font-size: 30px !important; }
  .testi { padding: 24px 18px; }
  .svc-col { min-width: 120px !important; }
}



/* === build-nosotros.py :: page_hero_css === */
/* ========== PAGE HERO (cabecera de página interior) ========== */
.page-hero {
  background: var(--dark);
  background-image:
    linear-gradient(rgba(45,74,43,0.55), rgba(45,74,43,0.85)),
    url('https://images.unsplash.com/photo-1583337130417-3346a1be7dee?auto=format&fit=crop&w=2000&q=85');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 130px 32px 110px;
  text-align: center;
  position: relative;
}
.page-hero .eyebrow { color: var(--accent); margin-bottom: 18px; }
.page-hero .page-h1 {
  color: white;
  font-size: 54px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 auto 20px;
  max-width: 900px;
}
.page-hero .page-lead {
  color: #E4ECDC;
  font-size: 18px;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.65;
}
@media (max-width: 980px) {
  .page-hero { padding: 90px 22px 80px; }
  .page-hero .page-h1 { font-size: 36px; }
}
@media (max-width: 600px) {
  .page-hero { padding: 60px 20px 50px; }
  .page-hero .page-h1 { font-size: 28px; }
  .page-hero .page-lead { font-size: 16px; }
}

/* ========== ACREDITACIONES BADGES (Centro homologado ANACP) ========== */
.acred-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-top: 12px;
}
.acred-badges img {
  height: 100px;
  width: auto;
  transition: transform .25s ease;
}
.acred-badges img:hover { transform: scale(1.06); }
@media (max-width: 600px) {
  .acred-badges { gap: 20px; }
  .acred-badges img { height: 70px; }
}



/* === build-por-que-elegirnos.py :: extra_css === */
/* ========== PAGE HERO (cabecera de página interior) ========== */
.page-hero {
  background: var(--dark);
  background-image:
    linear-gradient(rgba(45,74,43,0.55), rgba(45,74,43,0.85)),
    url('https://images.unsplash.com/photo-1548199973-03cce0bbc87b?auto=format&fit=crop&w=2000&q=85');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 130px 32px 110px;
  text-align: center;
  position: relative;
}
.page-hero .eyebrow { color: var(--accent); margin-bottom: 18px; }
.page-hero .page-h1 {
  color: white;
  font-size: 54px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 auto 20px;
  max-width: 900px;
}
.page-hero .page-lead {
  color: #E4ECDC;
  font-size: 18px;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.65;
}
@media (max-width: 980px) {
  .page-hero { padding: 90px 22px 80px; }
  .page-hero .page-h1 { font-size: 36px; }
}
@media (max-width: 600px) {
  .page-hero { padding: 60px 20px 50px; }
  .page-hero .page-h1 { font-size: 28px; }
  .page-hero .page-lead { font-size: 16px; }
}

/* ========== MOTIVOS GRID ========== */
.motivos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.motivo-card {
  position: relative;
  background: var(--white);
  padding: 28px 26px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  border: 1px solid var(--border);
  transition: transform .25s, background .25s, box-shadow .25s;
  overflow: hidden;
}
.motivo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(45,74,43,0.10);
}
.motivo-card::before {
  content: attr(data-num);
  position: absolute;
  top: 16px;
  right: 22px;
  font-family: 'Poppins', sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: rgba(45,74,43,0.08);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color .25s;
  pointer-events: none;
}
.motivo-card:hover::before { color: rgba(232,155,76,0.45); }
.motivo-card .motivo-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--cream);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 4px;
}
.motivo-card .motivo-icon.accent { background: #FCE9D5; color: var(--accent); }
.motivo-card h3 {
  font-size: 17px;
  color: var(--dark);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.motivo-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 980px) {
  .motivos-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 540px) {
  .motivos-grid { grid-template-columns: 1fr; }
}

/* ========== SeQura section ========== */
.sequra-example {
  background: var(--cream);
  border-left: 4px solid var(--accent);
  padding: 16px 20px;
  border-radius: 10px;
  margin: 8px 0 28px;     /* margen abajo amplio para separar del botón */
}
.sequra-example-label {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.sequra-example p {
  font-size: 14.5px;
  color: var(--text);
  margin: 0;
  line-height: 1.7;
}
.sequra-example-sub {
  font-size: 13px;
  color: var(--muted);
  display: inline-block;
  margin-top: 2px;
}

.sequra-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 50px;
}
.sequra-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--white);
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--border);
}
.sequra-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.sequra-step h4 {
  font-size: 15px;
  color: var(--dark);
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
}
.sequra-step p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .sequra-steps { grid-template-columns: 1fr; gap: 12px; margin-top: 30px; }
}

/* Visually hidden (a11y) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



/* === build-cursos-y-formacion.py :: extra_css === */
/* ========== PAGE HERO ========== */
.page-hero {
  background: var(--dark);
  background-image:
    linear-gradient(rgba(45,74,43,0.55), rgba(45,74,43,0.85)),
    url('https://images.unsplash.com/photo-1543466835-00a7907e9de1?auto=format&fit=crop&w=2000&q=85');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 130px 32px 110px;
  text-align: center;
  position: relative;
}
.page-hero .eyebrow { color: var(--accent); margin-bottom: 18px; }
.page-hero .page-h1 {
  color: white;
  font-size: 54px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 auto 20px;
  max-width: 900px;
}
.page-hero .page-lead {
  color: #E4ECDC;
  font-size: 18px;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.65;
}
@media (max-width: 980px) {
  .page-hero { padding: 90px 22px 80px; }
  .page-hero .page-h1 { font-size: 36px; }
}
@media (max-width: 600px) {
  .page-hero { padding: 60px 20px 50px; }
  .page-hero .page-h1 { font-size: 28px; }
  .page-hero .page-lead { font-size: 16px; }
}

/* ========== MODALIDADES ========== */
.modalidades-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.modalidad-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s;
  height: 100%;
}
.modalidad-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(45,74,43,0.10);
}
.modalidad-card .modalidad-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}
.modalidad-content {
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.modalidad-content h3 {
  font-size: 22px;
  color: var(--dark);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.modalidad-content > p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.modalidad-features {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.modalidad-features li {
  font-size: 14px;
  color: var(--text);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.modalidad-features li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: var(--primary);
  font-weight: 700;
}
.modalidad-content .btn { align-self: flex-start; margin-top: 6px; }
@media (max-width: 980px) {
  .modalidades-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ========== PROGRAMA (lista de bullets) ========== */
.programa-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.programa-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text);
}
.programa-list li::before {
  content: '';
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background-color: var(--primary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><ellipse cx='5' cy='8' rx='2' ry='2.5'/><ellipse cx='9' cy='4' rx='2' ry='2.5'/><ellipse cx='15' cy='4' rx='2' ry='2.5'/><ellipse cx='19' cy='8' rx='2' ry='2.5'/><path d='M12 8.5c-3.5 0-6 3.2-6 6.7s2.5 5.3 6 5.3 6-.8 6-5.3-2.5-6.7-6-6.7z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><ellipse cx='5' cy='8' rx='2' ry='2.5'/><ellipse cx='9' cy='4' rx='2' ry='2.5'/><ellipse cx='15' cy='4' rx='2' ry='2.5'/><ellipse cx='19' cy='8' rx='2' ry='2.5'/><path d='M12 8.5c-3.5 0-6 3.2-6 6.7s2.5 5.3 6 5.3 6-.8 6-5.3-2.5-6.7-6-6.7z'/></svg>") center / contain no-repeat;
  margin-top: 0;
}
.programa-list li > span { flex: 1; }
.programa-list li > span strong { color: var(--dark); display: block; margin-bottom: 2px; font-weight: 700; }

/* ========== FAQ ACCORDION ========== */
.faq-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: border-color .25s, box-shadow .25s;
  overflow: hidden;
}
.faq-item[open] {
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(45,74,43,0.06);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 28px 20px 24px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: var(--primary);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .25s;
}
.faq-item[open] summary::after { content: '−'; }
.faq-answer {
  padding: 0 24px 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.faq-answer p { margin: 0; }

/* Visually hidden (a11y) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .faq-item summary { font-size: 15px; padding: 16px 20px; }
  .faq-answer { padding: 0 20px 18px; font-size: 14.5px; }
}



/* === build-blog.py :: extra_css === */
/* ========== PAGE HERO ========== */
.page-hero {
  background: var(--dark);
  background-image:
    linear-gradient(rgba(45,74,43,0.55), rgba(45,74,43,0.85)),
    url('https://images.unsplash.com/photo-1601758228041-f3b2795255f1?auto=format&fit=crop&w=2000&q=85');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 130px 32px 110px;
  text-align: center;
  position: relative;
}
.page-hero .eyebrow { color: var(--accent); margin-bottom: 18px; }
.page-hero .page-h1 {
  color: white;
  font-size: 54px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 auto 20px;
  max-width: 900px;
}
.page-hero .page-lead {
  color: #E4ECDC;
  font-size: 18px;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.65;
}
@media (max-width: 980px) {
  .page-hero { padding: 90px 22px 80px; }
  .page-hero .page-h1 { font-size: 36px; }
}
@media (max-width: 600px) {
  .page-hero { padding: 60px 20px 50px; }
  .page-hero .page-h1 { font-size: 28px; }
  .page-hero .page-lead { font-size: 16px; }
}

/* ========== CHIPS de categorías ========== */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  min-height: 42px;
}
.cat-chip {
  padding: 9px 18px;
  border-radius: 30px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: 0.2px;
}
.cat-chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.cat-chip.active { background: var(--primary); color: var(--white); border-color: var(--primary); }
.cat-chips-loading {
  font-size: 13.5px;
  color: var(--muted);
}

/* ========== GRID DE POSTS ========== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  min-height: 200px;
}
.post-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(45,74,43,0.10);
}
.post-card a {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.post-card img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: var(--cream);
  display: block;
}
.post-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.post-card .post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* categoría izquierda, fecha derecha */
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: nowrap;
}
.post-card .cat {
  color: var(--accent);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.post-card time {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.post-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.35;
  margin: 0;
}
.post-card p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.post-card .read-more {
  color: var(--primary);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  margin-top: 6px;
}

/* Estados (cargando / vacío) */
.blog-loading,
.blog-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 15px;
}
.blog-loading::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin-left: 10px;
  animation: spin .8s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.load-more-wrap {
  text-align: center;
  margin-top: 50px;
}

/* Botón "Cargar más" en estado loading */
.load-more-wrap .btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
}
.load-more-wrap .btn.is-loading .arrow { display: none; }
.load-more-wrap .btn.is-loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  animation: spin .7s linear infinite;
}

@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
}


/* === POST-SPECIFIC (plugin singletrack-blog) === */

/* PAGE/POST HERO genérico (la imagen viene inline por post) */
.post-hero {
  background: var(--dark);
  background-size: cover;
  background-position: center;
  color: white;
  padding: 100px 32px 80px;
  text-align: center;
  position: relative;
}
.post-hero .post-cat-link {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 18px;
  color: var(--accent);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: opacity .2s;
}
.post-hero .post-cat-link:hover { opacity: 0.8; }
.post-hero .post-title {
  font-family: 'Poppins', sans-serif;
  color: white;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 auto 22px;
  max-width: 850px;
  letter-spacing: -0.015em;
}
.post-hero .post-meta {
  color: #E4ECDC;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.post-hero .post-meta time { font-weight: 600; }
.post-hero .post-meta .dot { opacity: 0.55; }
@media (max-width: 980px) {
  .post-hero { padding: 70px 22px 60px; }
  .post-hero .post-title { font-size: 32px; }
}
@media (max-width: 600px) {
  .post-hero { padding: 50px 20px 40px; }
  .post-hero .post-title { font-size: 26px; }
  .post-hero .post-meta { font-size: 13px; gap: 8px; }
}

/* CONTENIDO con prose styling - 880px (igual que .boxed.narrow) */
.post-article {
  background: var(--white);
  padding: 60px 32px;
}
.post-content {
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text);
}
.post-content > *:first-child { margin-top: 0 !important; }
.post-content > *:last-child  { margin-bottom: 0 !important; }
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6,
.post-content .elementor-heading-title {
  font-family: 'Poppins', sans-serif !important;
  color: var(--dark) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  background: transparent !important;
  text-transform: none !important;
}
/* También fuerzo párrafos y links a nuestra tipografía/color */
.post-content p, .post-content li, .post-content span {
  font-family: 'Inter', sans-serif !important;
}
.post-content p, .post-content li {
  color: var(--text) !important;
}
.post-content a {
  color: var(--primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.post-content h2 { font-size: 32px; margin: 60px 0 18px; }
.post-content h3 { font-size: 24px; margin: 44px 0 14px; font-weight: 700; }
.post-content h4 { font-size: 19px; margin: 32px 0 10px; font-weight: 700; }
.post-content h5 { font-size: 16px; margin: 24px 0 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--primary); }
.post-content p { margin-bottom: 22px; }
.post-content a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.post-content a:hover { color: var(--dark); }
.post-content strong { font-weight: 700; color: var(--dark); }
.post-content em { font-style: italic; }
.post-content blockquote {
  margin: 36px 0;
  padding: 22px 26px;
  border-left: 4px solid var(--accent);
  background: var(--cream);
  border-radius: 6px;
  font-style: italic;
  font-size: 17.5px;
  color: var(--text);
}
.post-content blockquote p { margin-bottom: 12px; }
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content ul, .post-content ol { margin: 20px 0 24px 26px; padding-left: 0; }
.post-content li { margin-bottom: 10px; line-height: 1.7; }
.post-content img { max-width: 100%; height: auto; border-radius: 16px; margin: 36px 0; display: block; }
.post-content figure { margin: 36px 0; }
.post-content figure img { margin: 0; }
.post-content figcaption { font-size: 14px; color: var(--muted); text-align: center; margin-top: 12px; font-style: italic; }
.post-content code { background: var(--cream); padding: 2px 7px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 0.92em; color: var(--dark); }
.post-content pre { background: var(--dark); color: #E4ECDC; padding: 22px 26px; border-radius: 14px; overflow-x: auto; margin: 28px 0; font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.65; }
.post-content pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.post-content hr { border: 0; height: 1px; background: var(--border); margin: 50px 0; }
.post-content table { width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 15px; }
.post-content th, .post-content td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; }
.post-content th { background: var(--cream); font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--dark); }
.post-content .wp-block-image, .post-content .wp-caption { margin: 36px auto; max-width: 100%; }
.post-content .wp-block-image img { margin: 0; }
.post-content .alignleft { float: left; margin: 6px 24px 18px 0; max-width: 50%; }
.post-content .alignright { float: right; margin: 6px 0 18px 24px; max-width: 50%; }
.post-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.post-content .wp-block-embed, .post-content .wp-block-video, .post-content iframe[src*="youtube"], .post-content iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16/9; border-radius: 16px; margin: 32px 0; border: 0; }

@media (max-width: 600px) {
  .post-article { padding: 40px 20px; }
  .post-content { font-size: 16px; line-height: 1.75; }
  .post-content h2 { font-size: 26px; margin: 44px 0 14px; }
  .post-content h3 { font-size: 21px; margin: 32px 0 12px; }
  .post-content h4 { font-size: 18px; margin: 24px 0 10px; }
}

/* SHARE BUTTONS */
.post-share-section { background: var(--cream); padding: 36px 32px; }
.post-share { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.post-share .share-label { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); margin-right: 8px; }
.share-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--dark); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; text-decoration: none; position: relative; padding: 0; }
.share-btn:hover { background: var(--primary); color: var(--white); border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(92,138,58,0.25); }
.share-btn svg { width: 18px; height: 18px; fill: currentColor; }
.share-copy-feedback { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--dark); color: var(--white); font-size: 11px; padding: 5px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; font-family: 'Poppins', sans-serif; font-weight: 600; }
.share-copy-feedback::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--dark); }
.share-btn.copied .share-copy-feedback { opacity: 1; }
@media (max-width: 600px) {
  .post-share-section { padding: 28px 20px; }
  .post-share .share-label { width: 100%; text-align: center; margin: 0 0 6px; }
}

/* RELATED POSTS */
.post-related-section { background: var(--white); padding: 80px 32px; }
@media (max-width: 600px) { .post-related-section { padding: 50px 20px; } }

/* === DEFENSIVE: oculta el entry-title de Astra (o otros temas) si lo inyectan === */
.entry-title, .entry-header, .ast-archive-description, .ast-pagination,
.ast-author-details, .ast-post-format-image, .post-navigation, .nav-links {
  display: none !important;
}

/* ============================================================
   NEUTRALIZAR CONTENEDORES DE ELEMENTOR DENTRO DEL CONTENIDO
   Si el post fue editado con Elementor, sus divs (.elementor-section, 
   .elementor-column, etc.) traen estilos inline y clases con padding/flex
   que rompen el prose. Las hacemos transparentes para que sólo se vea el
   contenido (h2, p, img, ul...) con nuestro prose CSS.
   ============================================================ */
.post-content .elementor,
.post-content .elementor-section,
.post-content .elementor-section-wrap,
.post-content .elementor-container,
.post-content .elementor-row,
.post-content .elementor-column,
.post-content .elementor-column-wrap,
.post-content .elementor-widget,
.post-content .elementor-widget-wrap,
.post-content .elementor-widget-container,
.post-content .elementor-element,
.post-content [data-element_type],
.post-content [data-elementor-type] {
  all: unset !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
  position: static !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Pero los párrafos, headings, imágenes y listas DENTRO heredan el prose */
.post-content .elementor-widget-text-editor p,
.post-content .elementor-widget-heading h1,
.post-content .elementor-widget-heading h2,
.post-content .elementor-widget-heading h3,
.post-content .elementor-widget-heading h4,
.post-content .elementor-heading-title {
  all: revert;
  font-family: 'Poppins', sans-serif;
}
.post-content .elementor-widget-image img,
.post-content .elementor-widget-image-box img {
  all: revert;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 36px 0;
  display: block;
}
.post-content .elementor-widget-button .elementor-button {
  all: revert;
}


/* ============================================================
   PÁGINA DE CONTACTO · Single Track Redesign
   ============================================================ */

/* --- Layout de 2 columnas: formulario + info --- */
.contacto-main { padding: 90px 32px; }
.contacto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.contacto-form-col .eyebrow { color: var(--primary); }
.contacto-form-col .h2 { margin: 8px 0 14px; }
.contacto-form-col p.muted,
.contacto-info-col p.muted,
.contacto-map-section p.muted {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 auto 24px;
  max-width: 640px;
}
.contacto-form-wrap { margin-top: 28px; }

/* --- Tarjeta de información --- */
.contacto-info-card {
  background: var(--cream);
  border: 1px solid #E8E1D2;
  border-radius: 20px;
  padding: 36px 32px;
  position: sticky;
  top: 100px;
}
.contacto-info-title {
  font-size: 22px;
  color: var(--dark);
  margin: 0 0 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}
.contacto-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contacto-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.ci-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--primary);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ci-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
/* Todos los iconos comparten el mismo verde primario para consistencia */
.ci-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.ci-value {
  display: block;
  font-size: 16px;
  color: var(--dark);
  line-height: 1.55;
  font-weight: 500;
}
.ci-value.link {
  color: var(--primary);
  text-decoration: none;
  transition: color .2s ease;
}
.ci-value.link:hover { color: var(--dark); text-decoration: underline; }
.ci-meta {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.contacto-info-cta { margin-top: 28px; }
.btn-block { display: inline-flex; justify-content: center; width: 100%; }

/* --- Mapa --- */
.contacto-map-section { padding: 90px 32px; }
.contacto-map {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  line-height: 0;
  background: #e8e8e8;
}
.contacto-map iframe { display: block; }


/* --- Aviso fallback cuando WPForms no está activo --- */
.form-fallback {
  background: #FFF7E8;
  border: 1px solid #F4D9A7;
  border-radius: 14px;
  padding: 20px 22px;
  color: var(--dark);
  line-height: 1.6;
}
.form-fallback.admin-notice {
  background: #FDEDED;
  border-color: #F5BFBF;
}
.form-fallback a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
}
.form-fallback code {
  background: rgba(0,0,0,0.06);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
}

/* ============================================================
   ESTILOS PARA EL FORMULARIO DE WPFORMS
   Sobreescribe el look por defecto de WPForms para que case con el rediseño.
   Estructura del HTML que genera WPForms:
     .wpforms-container
       form.wpforms-form
         .wpforms-field-container
           .wpforms-field.wpforms-field-name
             label.wpforms-field-label
             .wpforms-field-row
               input.wpforms-field-medium ...
         .wpforms-submit-container
           button.wpforms-submit
   ============================================================ */

/* Contenedor general */
.wpforms-container {
  font-family: 'Inter', sans-serif;
  max-width: none;
  margin: 0;
}
.wpforms-container form { margin: 0; }
.wpforms-container .wpforms-field-container { margin-bottom: 0; }
.wpforms-container .wpforms-head-container { margin-bottom: 20px; }

/* Cada campo del formulario */
.wpforms-container .wpforms-field {
  padding: 0 !important;
  margin: 0 0 20px !important;
  clear: both;
}

/* Etiquetas (labels) */
.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-label-inline,
.wpforms-container legend.wpforms-field-label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--dark) !important;
  margin: 0 0 8px !important;
  letter-spacing: 0.01em !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.4 !important;
}
.wpforms-container .wpforms-field-sublabel {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 4px 0 0 !important;
}

/* Required marker (asterisco) */
.wpforms-container .wpforms-required-label {
  color: #B0414A !important;
  margin-left: 4px;
}

/* Description debajo del label */
.wpforms-container .wpforms-field-description {
  font-size: 13px !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  margin: 6px 0 0 !important;
  line-height: 1.5 !important;
  font-style: normal !important;
}

/* Inputs */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="url"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container input[type="password"],
.wpforms-container input[type="date"],
.wpforms-container input[type="time"],
.wpforms-container input[type="datetime-local"],
.wpforms-container input[type="search"],
.wpforms-container select,
.wpforms-container textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: var(--cream) !important;
  border: 1.5px solid #E0DAC9 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--dark) !important;
  line-height: 1.5 !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Tamaños small/medium/large que define WPForms — los normalizamos al 100% */
.wpforms-container .wpforms-field-small,
.wpforms-container .wpforms-field-medium,
.wpforms-container .wpforms-field-large {
  max-width: 100% !important;
  width: 100% !important;
}

.wpforms-container textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: var(--primary) !important;
  background: white !important;
  box-shadow: 0 0 0 4px rgba(92, 138, 58, 0.12) !important;
  outline: none !important;
}

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder { color: #9AA59A !important; opacity: 1 !important; }

/* Filas (rows) para campos en columnas */
.wpforms-container .wpforms-field-row { margin: 0 -8px !important; display: flex; flex-wrap: wrap; }
.wpforms-container .wpforms-field-row-block {
  padding: 0 8px !important;
  box-sizing: border-box;
  flex: 1 1 0%;
  min-width: 0;
}
@media (max-width: 600px) {
  .wpforms-container .wpforms-field-row-block { flex: 1 1 100%; margin-bottom: 14px; }
}

/* Checkboxes y radios */
.wpforms-container ul.wpforms-field-required,
.wpforms-container .wpforms-field-checkbox ul,
.wpforms-container .wpforms-field-radio ul,
.wpforms-container .wpforms-field-gdpr-checkbox ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 6px 0 0 !important;
}
.wpforms-container .wpforms-field-checkbox li,
.wpforms-container .wpforms-field-radio li,
.wpforms-container .wpforms-field-gdpr-checkbox li {
  display: flex !important;
  align-items: flex-start !important;
  margin: 6px 0 !important;
  font-size: 14px !important;
  color: var(--dark) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
.wpforms-container .wpforms-field-checkbox input[type="checkbox"],
.wpforms-container .wpforms-field-radio input[type="radio"],
.wpforms-container .wpforms-field-gdpr-checkbox input[type="checkbox"] {
  margin: 3px 10px 0 0 !important;
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.wpforms-container .wpforms-field-checkbox label,
.wpforms-container .wpforms-field-radio label,
.wpforms-container .wpforms-field-gdpr-checkbox label {
  font-weight: 400 !important;
  margin: 0 !important;
  font-size: 14px !important;
  cursor: pointer;
}

/* Botón de envío */
.wpforms-container .wpforms-submit-container {
  margin-top: 8px !important;
  padding: 0 !important;
  text-align: left !important;
}
.wpforms-container button.wpforms-submit,
.wpforms-container input[type="submit"].wpforms-submit {
  background: var(--primary) !important;
  color: white !important;
  border: 0 !important;
  padding: 14px 32px !important;
  border-radius: 999px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .2s ease, transform .15s ease !important;
  min-width: 200px;
  width: auto !important;
  height: auto !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.wpforms-container button.wpforms-submit:hover,
.wpforms-container input[type="submit"].wpforms-submit:hover {
  background: var(--dark) !important;
  transform: translateY(-1px);
}
.wpforms-container button.wpforms-submit:disabled,
.wpforms-container input[type="submit"].wpforms-submit:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Spinner de WPForms */
.wpforms-container .wpforms-submit-spinner {
  margin-left: 12px;
  vertical-align: middle;
  width: 18px;
  height: 18px;
}

/* Mensaje de confirmación de envío exitoso */
.wpforms-confirmation-container,
.wpforms-confirmation-container-full,
div[id^="wpforms-confirmation"] {
  background: #EFF7E8 !important;
  border: 1.5px solid #5C8A3A !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  color: #3D5C26 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  margin: 0 0 20px !important;
}
.wpforms-confirmation-container p:last-child,
div[id^="wpforms-confirmation"] p:last-child { margin-bottom: 0 !important; }

/* Errores generales en cabecera del form */
.wpforms-container .wpforms-error-container {
  background: #FDEDED !important;
  border: 1.5px solid #D85555 !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  color: #7A2424 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 0 20px !important;
}

/* Error inline por campo */
.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error,
.wpforms-container .wpforms-error-msg {
  color: #B0414A !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  margin: 6px 0 0 !important;
  display: block !important;
}
.wpforms-container .wpforms-field-error input,
.wpforms-container .wpforms-field-error select,
.wpforms-container .wpforms-field-error textarea,
.wpforms-container input.wpforms-error,
.wpforms-container select.wpforms-error,
.wpforms-container textarea.wpforms-error {
  border-color: #E8A4A4 !important;
  background: #FDF5F5 !important;
}

/* Page breaks / multi-page progress */
.wpforms-container .wpforms-page-indicator {
  background: var(--cream) !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  margin-bottom: 24px !important;
}

/* ============================================================
   RESPONSIVE PÁGINA DE CONTACTO
   ============================================================ */
@media (max-width: 980px) {
  .contacto-main { padding: 60px 22px; }
  .contacto-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contacto-info-card {
    position: static;
    padding: 28px 22px;
  }
  .contacto-map-section { padding: 60px 22px; }
}
@media (max-width: 600px) {
  .contacto-main { padding: 50px 18px; }
  .contacto-grid { gap: 36px; }
  .contacto-form-col .h2 { font-size: 26px; }
  .contacto-info-title { font-size: 18px; }
  .ci-icon { flex-basis: 38px; width: 38px; height: 38px; border-radius: 10px; }
  .ci-icon svg { width: 18px; height: 18px; }
  .ci-value { font-size: 15px; }
  .wpforms-container input[type="text"],
  .wpforms-container input[type="email"],
  .wpforms-container input[type="url"],
  .wpforms-container input[type="tel"],
  .wpforms-container input[type="number"],
  .wpforms-container select,
  .wpforms-container textarea { padding: 12px 14px !important; font-size: 14px !important; }
  .wpforms-container button.wpforms-submit,
  .wpforms-container input[type="submit"].wpforms-submit { width: 100% !important; }
  .contacto-map iframe { height: 320px !important; }
}

/* Sobreescribe estilos que pueda inyectar Astra/Elementor en el form */
.singletrack-contacto .entry-title,
.singletrack-contacto .entry-header,
.singletrack-contacto .ast-archive-description { display: none !important; }

/* ============================================================
   DEFENSIVO: oculta cualquier bloque de Elementor que se cuele
   en la página de contacto. El plugin ya hace dequeue del CSS de
   Elementor, pero el HTML puede seguir presente (Elementor mete
   wrappers vía filtros). Lo neutralizamos por completo.
   ============================================================ */
.singletrack-contacto .elementor,
.singletrack-contacto [data-elementor-type],
.singletrack-contacto .elementor-section,
.singletrack-contacto .elementor-section-wrap,
.singletrack-contacto .elementor-container,
.singletrack-contacto .elementor-row,
.singletrack-contacto .elementor-column,
.singletrack-contacto .elementor-element,
.singletrack-contacto .elementor-widget,
.singletrack-contacto .elementor-widget-wrap,
.singletrack-contacto .elementor-inner,
.singletrack-contacto .elementor-edit-area-active {
  display: none !important;
}

/* Pero el shortcode de WPForms (que sale del template, no de
   Elementor) sí debe seguir visible incluso si Elementor lo
   envuelve por accidente */
.singletrack-contacto .contacto-form-wrap .wpforms-container,
.singletrack-contacto .contacto-form-wrap .wpforms-container * {
  display: revert !important;
}
.singletrack-contacto .contacto-form-wrap .wpforms-container { display: block !important; }
.singletrack-contacto .contacto-form-wrap .wpforms-field { display: block !important; }