/* =========================================================
   VOQUI CONSULTORES — HOJA DE ESTILOS
   -----------------------------------------------------------
   Está organizada en bloques, de arriba hacia abajo:
   1. Variables (colores, tipografía) — CAMBIA AQUÍ para
      modificar la paleta o las fuentes en todo el sitio.
   2. Reset básico
   3. Utilidades (container, botones)
   4. Header / nav
   5. Hero
   6. Divisores de curvas de nivel
   7. Servicios
   7b. Sectores
   8. Nosotros
   9. Contacto
   10. Footer
   11. Responsive (celular)
   ========================================================= */

/* ---------- 1. VARIABLES ---------- */
:root {
  /* Paleta oficial Voqui, en tonos pastel */
  --color-bg:        #F1FBF7;  /* fondo general, blanco con tinte menta */
  --color-surface:   #FFFFFF;  /* tarjetas y formulario */
  --color-ink:       #105157;  /* verde-azulado oscuro Voqui — texto principal, topbar */
  --color-ink-soft:  #4F787C;  /* variante suave del ink, para texto secundario */

  --color-sage:      #92F5BA;  /* menta pastel Voqui — decorativo, fondos suaves */
  --color-sage-dark: #36BB84;  /* verde Voqui — botones, links, acentos activos */
  --color-slate:     #88E5C3;  /* menta pastel alterna Voqui — acentos secundarios */

  --color-border:    #D8EFE6;

  /* Tipografía: Arial para todo lo formal/estructural, Times New Roman como acompañamiento */
  --font-display: Arial, Helvetica, sans-serif;
  --font-body:    'Times New Roman', Times, serif;

  --container-width: 1120px;
  --radius: 14px;
}

/* ---------- 2. RESET BÁSICO ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Evita que el menú "sticky" (que se queda pegado arriba) tape el inicio
   de cada sección al hacer clic en un link del menú (#inicio, #servicios, etc.) */
#inicio, #servicios, #equipo, #mision-vision, #proyectos, #contacto {
  scroll-margin-top: 90px;
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .logo, .btn, .eyebrow, .stat-number, nav a {
  font-family: var(--font-display);
}

h1, h2, h3 { line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--color-slate);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 3. UTILIDADES ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sage-dark);
  margin-bottom: 12px;
}
.eyebrow-lg { font-size: 0.9rem; }

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--color-sage-dark);
  color: #fff;
}
.btn-primary:hover { background: var(--color-ink); }

.btn-ghost {
  background: transparent;
  border-color: var(--color-sage-dark);
  color: var(--color-sage-dark);
}
.btn-ghost:hover { background: var(--color-sage-dark); color: #fff; }

/* ---------- 4. HEADER / NAV ---------- */
.top-accent-line { display: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 245, 240, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header::before {
  content: "";
  display: block;
  height: 6px;
  background: rgba(16, 81, 87, 0.85);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}

.logo {
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-dot { color: var(--color-sage-dark); }
.logo-img {
  height: 42px;
  width: auto;
  display: block;
}

.main-nav { display: flex; gap: 26px; }
.main-nav a {
  font-size: 0.85rem;
  font-weight: 500;
  position: relative;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0%;
  height: 2px;
  background: var(--color-sage-dark);
  transition: width 0.2s ease;
}
.main-nav a:hover::after { width: 100%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-ink);
}

/* ---------- 5. HERO ---------- */
.hero {
  padding: 90px 0 40px;
  text-align: center;
}

.hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 24px;
}

.hero-lead {
  font-size: 1.15rem;
  color: var(--color-ink-soft);
  max-width: 560px;
  margin: 0 auto 36px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* ---------- 5b. CARRUSEL (reutilizado por el hero y por el blog compacto) ---------- */
.hero-carousel { padding: 70px 0 0; }

.hero-static { padding: 0; }
.hero-static-image {
  position: relative;
  height: 400px;
  background-size: cover;
  background-position: center;
  /* Borde a borde de la pantalla, igual que las barras de título */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.hero-static-caption {
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: rgba(16, 81, 87, 0.85);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  padding: 10px 24px;
  box-sizing: border-box;
}

.carousel { position: relative; }
.carousel-track {
  display: flex;
  overflow: hidden;
  border-radius: var(--radius);
  scroll-behavior: smooth;
}
.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  position: relative;
  color: inherit;
  display: block;
  height: 460px;
  background-size: cover;
  background-position: center;
}
.carousel-slide .photo-placeholder {
  aspect-ratio: 21/9;
  border-radius: 0;
  opacity: 0.55;
}
.carousel-caption {
  position: absolute;
  left: 24px;
  bottom: 20px;
  background: rgba(16, 81, 87, 0.75);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  padding: 14px 22px;
  border-radius: 8px;
  max-width: 90%;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--color-ink);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(16, 81, 87, 0.2);
}
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
.carousel-arrow:hover { background: var(--color-sage-dark); color: #fff; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.carousel-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--color-border);
  cursor: pointer;
  padding: 0;
}
.carousel-dots button.active { background: var(--color-sage-dark); }

/* ---------- 6. DIVISORES DE CURVAS DE NIVEL ---------- */
.section-divider { line-height: 0; }
.section-divider svg { width: 100%; height: 40px; }
.section-divider path { fill: var(--color-surface); }
.section-divider.flip { transform: rotate(180deg); }

/* ---------- 7. SERVICIOS ---------- */
.services {
  background: var(--color-bg);
  padding: 70px 0 0;
}

.services h2 {
  max-width: 600px;
  margin-bottom: 48px;
}

/* ---------- 6b. TÍTULOS DE SECCIÓN EN BARRA (Servicios, Equipo, Misión y Visión, Proyectos, Noticias) ---------- */
.section-title-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #9CBABA;
  margin-bottom: 70px;
  min-height: 56px;
  /* Rompe el ancho del .container para llegar de borde a borde de la pantalla */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.section-title-bar h2 {
  color: #fff;
  font-size: 1.7rem;
  text-align: center;
  padding: 8px 24px;
  margin: 0;
}
/* Bordes tipo "curva de nivel" arriba y abajo, con SVG real (no imagen
   de fondo) para que no aparezcan líneas raras al escalar — y cada
   título de sección puede tener su propia curva, para que no se vean
   todas idénticas. */
.stb-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 40px;
  fill: #9CBABA;
  display: block;
}
.stb-wave-top { top: -39px; }
.stb-wave-bottom { bottom: -39px; transform: scaleY(-1); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -12px rgba(35, 48, 42, 0.25);
}

.service-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-sage-dark);
  background: rgba(54, 187, 132, 0.15);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.service-card h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.service-card p {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

/* ---------- 7b. TARJETAS DE SERVICIO CON FOTO (Inicio) ---------- */
.has-photo {
  position: relative;
  background-size: cover;
  background-position: center 65%;
  min-height: 300px;
  overflow: hidden;
  padding-bottom: 14px;
}
/* Selector reforzado (dos clases) para ganarle a .service-card-link,
   que también define "display" y, al estar más abajo en el archivo,
   se lo estaba pisando. */
.has-photo.service-card-link {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,81,87,0) 0%, rgba(16,81,87,0) 40%, rgba(16,81,87,0.92) 88%);
  z-index: 0;
}
.has-photo > * { position: relative; z-index: 1; }
.has-photo .service-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(16, 81, 87, 0.8);
  color: #fff;
  font-size: 1.15rem;
  padding: 6px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.has-photo h3 { color: #fff; }
.has-photo p { color: rgba(255,255,255,0.88); }

/* ---------- 9. CONTACTO ---------- */
.contact {
  background: var(--color-ink);
  padding: 50px 0 30px;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.contact h2 {
  color: #fff;
}
.contact-info h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin-bottom: 16px;
}

.contact-lead { color: rgba(255,255,255,0.85); margin-bottom: 22px; }

.contact-details { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.contact-details li { display: flex; flex-direction: column; font-size: 1rem; color: #fff; }
.contact-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-slate);
  font-weight: 600;
  margin-bottom: 2px;
}
.contact-details a { color: #fff; }
.contact-details a:hover { color: var(--color-slate); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 10px;
  color: #fff;
}

.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-ink);
}

.contact-form textarea { resize: none; }

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-sage-dark);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #A9B8B9;
  font-style: italic;
  font-size: 0.85rem;
}

.form-submit-row {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.form-note { font-size: 0.85rem; color: var(--color-slate); min-height: 1.2em; margin-top: 8px; text-align: center; }

/* ---------- 10. FOOTER ---------- */
.site-footer {
  padding: 22px 0;
  background: var(--color-ink);
}

.footer-inner {
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 0.85rem;
  color: #FFFFFF;
}

/* ---------- 11b. NAV ACTIVA (página actual) ---------- */
.main-nav a.active {
  color: var(--color-sage-dark);
}
.main-nav a.active::after {
  width: 100%;
}

/* ---------- 12. PAGE HERO (encabezado de páginas internas) ---------- */
.page-hero {
  padding: 70px 0 50px;
}
.page-hero h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: 16px;
  max-width: none;
}
.page-lead {
  font-size: 1.1rem;
  color: var(--color-ink-soft);
  max-width: 640px;
}

/* ---------- 13. TARJETAS DE SERVICIO COMO LINKS (home + servicios.html) ---------- */
.service-card-link {
  display: block;
  color: inherit;
}
.service-more {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-sage-dark);
}
.see-all {
  margin-top: 36px;
}

/* ---------- 14. CTA BANNER (franja de llamada a la acción) ---------- */
.cta-banner {
  background: var(--color-sage-dark);
  color: #fff;
  padding: 64px 0;
}
.cta-banner-inner {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.cta-banner h2 { color: #fff; margin-bottom: 12px; }
.cta-banner p { color: rgba(255,255,255,0.85); margin-bottom: 28px; }
.cta-banner .btn-primary {
  background: #fff;
  color: var(--color-sage-dark);
}
.cta-banner .btn-primary:hover { background: var(--color-bg); }

/* ---------- 15. PÁGINA DE DETALLE DE SERVICIO ---------- */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--color-sage-dark); }
.breadcrumb a:hover { text-decoration: underline; }

.service-tag-lg {
  font-size: 1rem;
  margin-bottom: 16px;
}

/* ---------- 15b. BANNER CON FOTO (heros de servicio con imagen) ---------- */
.has-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 110px 0 70px;
  overflow: hidden;
}
.has-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,81,87,0.45) 0%, rgba(16,81,87,0.88) 100%);
  z-index: 0;
}
.has-banner .container { position: relative; z-index: 1; }
.has-banner .breadcrumb { color: rgba(255,255,255,0.75); }
.has-banner .breadcrumb a { color: #fff; }
.has-banner .service-tag-lg { background: rgba(255,255,255,0.18); color: #fff; }
.has-banner h1 { color: #fff; }
.has-banner .page-lead { color: rgba(255,255,255,0.9); }

.service-detail { padding: 20px 0 80px; background: var(--color-surface); }

.service-detail-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: start;
}

.service-detail-text p {
  margin-bottom: 18px;
  color: var(--color-ink-soft);
  text-align: justify;
}
.service-detail-text h3 {
  font-size: 1.1rem;
  color: var(--color-ink);
  margin: 24px 0 10px;
}
.service-detail-text ul {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--color-ink-soft);
}
.service-detail-text li { margin-bottom: 8px; }
.service-detail-text li::marker { color: var(--color-slate); }
.service-detail-text strong { color: var(--color-ink); }

.service-detail-side {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  position: sticky;
  top: 100px;
}
.service-detail-side h3 { font-size: 1rem; margin-bottom: 16px; }

.service-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.service-bullets li {
  padding-left: 20px;
  position: relative;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}
.service-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-sage);
}

.service-nav { padding: 20px 0 80px; }
.service-nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--color-border);
  padding-top: 28px;
}
.service-nav-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-sage-dark);
}
.service-nav-link:hover { text-decoration: underline; }
.service-nav-center { color: var(--color-ink-soft); }

/* ---------- 12. BARRA SUPERIOR ---------- */
.topbar {
  background: rgba(16, 81, 87, 0.85);
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 24px;
  flex-wrap: wrap;
  gap: 6px;
}
.topbar-contact { display: flex; gap: 20px; }
.topbar-contact a:hover { color: var(--color-slate); }

/* ---------- 13. PHOTO PLACEHOLDER (reutilizado por el carrusel y por Proyectos) ---------- */
.photo-placeholder {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--color-sage) 0%, var(--color-slate) 100%);
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-placeholder span {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  opacity: 0;
}

/* ---------- 15. EQUIPO (4 por fila, círculos chicos) ---------- */
.team-section { padding: 70px 0 0; background: var(--color-bg); }
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}
/* Fila de 3 (arriba), centrada, con tarjetas del mismo ancho que las
   de la fila de 4 (abajo), para que ambas filas se vean parejas. */
.team-grid-row3 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px 24px;
  margin-bottom: 32px;
}
.team-grid-row3 .team-card { flex: 0 0 calc((100% - 72px) / 4); }
.team-card { text-align: center; color: inherit; display: block; }
a.team-card { transition: transform 0.15s ease; }
a.team-card:hover { transform: translateY(-3px); }
.team-photo {
  width: 130px;
  height: 130px;
  margin: 0 auto 16px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-sage) 0%, var(--color-slate) 100%);
  opacity: 0.5;
}
.team-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.team-role { font-size: 0.92rem; color: var(--color-ink-soft); }
.team-more {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-sage-dark);
}
a.team-card:hover .team-more { text-decoration: underline; }

.team-card-empty { opacity: 0.55; }
.team-photo-empty {
  background: none;
  border: 2px dashed var(--color-border);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-sage-dark);
}

/* Página individual de cada persona del equipo */
.member-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}
.member-photo {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-sage) 0%, var(--color-slate) 100%);
  opacity: 0.5;
}
.member-detail { padding: 10px 0 90px; }
.member-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.member-detail-grid h3 {
  font-size: 1rem;
  color: var(--color-sage-dark);
  margin-bottom: 12px;
}
.member-detail-grid p { color: var(--color-ink-soft); }

/* ---------- 16. MISIÓN Y VISIÓN ---------- */
.mission-vision { padding: 70px 0 0; }

/* ---------- BENEFICIOS PARA COLABORADORES/AS (reemplaza Misión y Visión) ---------- */
.colab-benefits { padding: 70px 0 70px; }
.colab-benefits-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 44px;
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: center;
}
.colab-benefits-text p { color: var(--color-ink-soft); margin-bottom: 14px; }
.colab-benefits-text p:last-child { margin-bottom: 0; }
.colab-benefits-photo {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #105157;
  background-image: url('Fotos/vaina-blanca.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55% auto;
  display: block;
}
@media (max-width: 760px) {
  .colab-benefits-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 32px 24px;
  }
  .colab-benefits-photo { order: -1; }
}
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
}
.mv-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
}
.mv-card h3 {
  font-size: 1.1rem;
  color: var(--color-sage-dark);
  margin-bottom: 14px;
}
.mv-card p { color: var(--color-ink-soft); }

/* ---------- 17. PROYECTOS: IMAGEN + LISTA + SATISFACCIÓN (misma sección) ---------- */
.projects { padding: 70px 0 0; }
.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: start;
  margin-top: 28px;
}
.projects-side-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 615px; /* misma altura fija que .map-interactive, en píxeles */
}
.trust-block {
  margin-top: auto;
  height: 331px;
  padding: 16px 0;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}
.projects-map-col { position: relative; }
.map-interactive {
  position: relative;
  /* La imagen del mapa es angosta y alta (456x877), igual que Chile.
     Ancho y alto FIJOS en píxeles (no con aspect-ratio) para poder darle
     esta misma altura, en números, a la columna de al lado y que sus
     bordes de abajo calcen exactamente. */
  width: 320px;
  height: 615px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.map-region {
  position: absolute;
  background: rgba(54, 187, 132, 0.001); /* casi invisible, pero clickeable */
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.map-region:hover,
.map-region.active {
  background: rgba(54, 187, 132, 0.15);
  outline: 1.5px dashed var(--color-sage-dark);
}

/* Puntito rojo: aparece solo cuando la región está seleccionada/hover */
.map-region-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #dc2626;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.map-region:hover .map-region-dot,
.map-region.active .map-region-dot {
  opacity: 1;
}

/* Panel de información AL LADO del mapa (fijo, no flotante) */
.map-info-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  height: 260px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.map-info-placeholder {
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  font-style: italic;
}
.map-info-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 10px;
}
.map-info-panel ul {
  list-style: none;
  /* Alto fijo — si los proyectos no caben, aparece scroll en vez de que
     el panel crezca sin límite (como una tabla con scroll interno). */
  max-height: 165px;
  overflow-y: auto;
  padding-right: 6px;
}
.map-info-panel li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.map-info-panel li:last-child { border-bottom: none; }
.map-item-year {
  flex: 0 0 auto;
  width: 92px;
  text-align: center;
  font-weight: 600;
  color: var(--color-ink);
}
.map-item-desc { flex: 1; }

.projects-list {
  list-style: none;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.projects-list li {
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
}
.projects-list strong { color: var(--color-ink); }

.testimonial-list {
  /* Alto máximo con scroll interno — si hay muchos testimonios, se
     desplazan adentro en vez de estirar toda la página. */
  max-height: 250px;
  overflow-y: auto;
  margin-top: 8px;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
}
.stars { color: var(--color-sage-dark); font-size: 1.1rem; margin-bottom: 10px; letter-spacing: 2px; }
.testimonial-card p { font-style: italic; color: var(--color-ink-soft); margin-bottom: 12px; }
.testimonial-author { font-size: 0.85rem; font-weight: 600; color: var(--color-sage-dark); }

/* ---------- 19. MAPA DE CONTACTO (Google Maps) ---------- */
.map-embed {
  margin-top: 24px;
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: var(--radius);
  display: block;
}

/* ---------- 20. BLOG — archivo completo (blog.html) ---------- */
.blog { padding: 30px 0 90px; }
.blog-grid { display: flex; flex-direction: column; gap: 16px; }
.blog-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 26px;
  scroll-margin-top: 140px;
}
.blog-meta {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-sage-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.blog-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.blog-category {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
}
.blog-category-residuos {
  background: rgba(234, 179, 8, 0.18);
  color: #92700a;
}
.blog-category-aridos {
  background: rgba(59, 130, 246, 0.15);
  color: #1d4ed8;
}
.blog-category-normativa {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}
.blog-category-proyectos {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}
.blog-category-cambio-climatico {
  background: rgba(147, 51, 234, 0.15);
  color: #7e22ce;
}
.blog-card h2 { font-size: 1.2rem; margin: 8px 0 10px; }
.blog-excerpt { color: var(--color-ink-soft); margin-bottom: 10px; }
.blog-card summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-sage-dark);
}
.blog-full { margin-top: 14px; }
.blog-full p { margin-bottom: 12px; color: var(--color-ink-soft); }

/* ---------- 20b. BLOG COMPACTO (carrusel, en index.html) ---------- */
.blog-compact { padding: 70px 0 70px; }
.blog-compact-head { margin-bottom: 20px; }
.blog-compact-actions { text-align: center; margin-top: 32px; margin-bottom: 0; }

.blog-fixed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 860px) {
  .blog-fixed-grid { grid-template-columns: 1fr; }
}
.blog-slide {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}
.blog-slide h3 { font-size: 1.05rem; margin: 8px 0 10px; }
.blog-slide .blog-excerpt { font-size: 0.9rem; }
.blog-slide .service-more { margin-top: auto; padding-top: 8px; }

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 860px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-inner { grid-template-columns: 1fr; }
  .service-detail-inner { grid-template-columns: 1fr; }
  .service-detail-side { position: static; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid-row3 .team-card { flex: 0 0 calc((100% - 24px) / 2); }
  .projects-grid { grid-template-columns: 1fr; }
  .projects-side-col { height: auto; }
  .member-detail-grid { grid-template-columns: 1fr; }
  .topbar-inner { justify-content: center; text-align: center; }
}

@media (max-width: 980px) {
  .main-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--color-bg);
    flex-direction: column;
    padding: 16px 24px 24px;
    display: none;
    border-bottom: 1px solid var(--color-border);
  }
  .main-nav.open { display: flex; }
  .nav-toggle { display: flex; }
}

@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .hero { padding: 90px 0 70px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid-row3 .team-card { flex: 0 0 calc((100% - 24px) / 2); }
  .member-header { flex-direction: column; text-align: center; }
  .carousel-page { grid-template-columns: 1fr; }
}

/* ---------- 21. SOSTENIBILIDAD Y RSE (página nueva) ---------- */
.sustainability-hero { padding: 90px 0 40px; }
.sustainability-hero-inner { max-width: none; }
.sustainability-hero h1 {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  text-align: justify;
  margin-bottom: 18px;
}
.sustainability-hero .page-lead {
  text-align: justify;
  margin-bottom: 26px;
  font-size: 1rem;
}
.sustainability-hero .hero-actions { justify-content: flex-start; }

.policies { padding: 40px 0 70px; }
.policy-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.policy-card {
  display: block;
  text-align: center;
  padding: 36px 26px;
  border-radius: var(--radius);
  color: #fff;
  transition: transform 0.15s ease;
}
.policy-card:hover { transform: translateY(-4px); }
.policy-card-dark { background: var(--color-ink); }
.policy-card-mid { background: var(--color-sage-dark); }
.policy-card-light { background: var(--color-sage); color: var(--color-ink); }

.policy-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.policy-icon svg { width: 30px; height: 30px; }
.policy-card-dark .policy-icon { color: var(--color-ink); }
.policy-card-mid .policy-icon,
.policy-card-light .policy-icon { color: var(--color-sage-dark); }

.policy-card h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.policy-card p {
  font-size: 0.9rem;
  opacity: 0.92;
  margin-bottom: 22px;
}
.policy-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.policy-detail { padding: 50px 0; }

/* Vainas decorativas (Programa de Integridad) — misma imagen a cada
   lado, alta (llena el alto del bloque de texto) pero SIN estirar: se
   fija el alto y el ancho queda en "auto" para que el navegador
   respete la proporción real de la imagen. La de la derecha va
   reflejada en espejo con CSS (no hay que subir dos archivos
   distintos). EDITAR AQUÍ: para usarla en otra sección, agrégale la
   clase "policy-detail-vine" a esa <section> y copia los dos
   <img class="vine-deco ..."> dentro. */
.policy-detail-vine { position: relative; overflow: hidden; }
.policy-detail-vine .container { position: relative; z-index: 1; }
.vine-deco {
  position: absolute;
  top: 0;
  width: 120px;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.vine-deco-left { left: 0; }
.vine-deco-right { right: 0; transform: scaleX(-1); }

@media (max-width: 960px) {
  .vine-deco { display: none; }
}
.policy-detail h2 {
  font-size: 1.6rem;
  color: var(--color-ink);
  margin-bottom: 16px;
}
.policy-detail p {
  color: var(--color-ink-soft);
  max-width: 760px;
  margin-bottom: 16px;
}
.policy-detail p:last-child { margin-bottom: 0; }

/* Contenido estructurado dentro de .policy-detail (Política Ambiental):
   subtítulos, listas y mini-encabezados en negrita antes de una lista.
   Van alineados a la izquierda aunque el resto del bloque esté
   centrado, porque una lista con viñetas centrada es difícil de leer. */
.policy-detail h3 {
  font-size: 1.15rem;
  color: var(--color-sage-dark);
  max-width: 760px;
  margin: 28px auto 12px;
}
.policy-detail ul {
  text-align: left;
  max-width: 760px;
  margin: 0 auto 20px;
  padding-left: 22px;
  color: var(--color-ink-soft);
}
.policy-detail li { margin-bottom: 8px; }
.policy-detail li::marker { color: var(--color-slate); }
.policy-detail p.policy-subhead {
  text-align: left;
  max-width: 760px;
  margin: 0 auto 4px;
  color: var(--color-ink);
}

/* Lista de "Nuestros compromisos específicos" — cada categoría es un
   punto de la lista (con el mismo punteo normal recoloreado que el
   resto), con su propia lista de detalles anidada debajo. */
.policy-list-leaf > li > strong { color: var(--color-sage-dark); }
.policy-list-leaf > li { margin-bottom: 20px; }
.policy-list-leaf ul {
  max-width: none;
  margin: 8px 0 0;
  padding-left: 20px;
}

@media (max-width: 860px) {
  .policy-cards { grid-template-columns: 1fr; }
}

/* ---------- 22. BENEFICIOS (home) ---------- */
.benefits {
  background: var(--color-bg);
  padding: 0 0 70px;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
/* .benefit-card reutiliza el look de .has-photo (mismas tarjetas con foto
   de Servicios), solo se ajusta la altura porque aquí son 2 columnas
   anchas en vez de 3. */
.benefit-card {
  min-height: 260px;
}
.benefits-actions {
  text-align: center;
  margin-top: 32px;
}

@media (max-width: 640px) {
  .benefits-grid { grid-template-columns: 1fr; }
}

/* ---------- 23. CÓDIGO DE DESCUENTO — SOLO PLATAFORMA (beneficios.html) ---------- */
.discount-banner {
  max-width: 640px;
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.discount-banner h3 { font-size: 1.1rem; margin-bottom: 10px; }
.discount-banner > p {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  margin-bottom: 18px;
}
/* Oculta la flechita nativa de <details> y usa el summary como botón */
.discount-details summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
}
.discount-details summary::-webkit-details-marker { display: none; }
.discount-details summary::marker { content: ""; }

.discount-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.discount-form label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 8px;
  color: var(--color-ink);
}
.discount-form input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-ink);
}
.discount-form input:focus { border-color: var(--color-sage-dark); }
.discount-form input::placeholder {
  color: #A9B8B9;
  font-style: italic;
  font-size: 0.85rem;
}
.discount-form button {
  margin-top: 12px;
  display: block;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}
.discount-note {
  font-size: 0.8rem;
  color: var(--color-sage-dark);
  min-height: 1.2em;
  margin-top: 6px;
  text-align: center;
}