/* ============================================================
   COOPER v2 — FIXES
   ============================================================ */

/* ===== 1. Contacto: título navy ===== */
.contact-page-info .section-title { color: var(--navy); }

/* ===== HERO LOGO IMG ===== */
.hero-logo-img {
  position: absolute;
  top: var(--hero-logo-top, 10%);
  left: 50%;
  transform: translateX(-50%);
  width: var(--hero-logo-zoom-desktop, 55%);  /* parametrizable desde blueprint Hero → logo_zoom_desktop */
  max-width: 860px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  display: block;
}

/* Contenido absolute — desktop ≥1200px únicamente */
#hero .hero-content {
  position: absolute !important;
  top: var(--hero-content-top, 300px) !important;
  left: 80px !important;
  right: 80px !important;
  padding: 0 !important;
  z-index: 3 !important;
  text-align: center !important;
}
#hero .hero-title { font-weight: 700 !important; }
#hero .hero-stats { justify-content: center !important; }
#hero .hero-cta   { justify-content: center !important; }

/* ——— TABLET 768–1199px: flexbox centrado vertical (Camino B) ——— */
@media (max-width: 1199px) and (min-width: 769px) {
  #hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;  /* centrado vertical real */
    padding-top: 80px !important;          /* deja espacio para el nav fijo */
    padding-bottom: 200px !important;      /* reserva espacio para la franja ciudad */
    overflow: hidden;
  }
  .hero-logo-img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 60% !important;
    max-width: 520px !important;
    margin: 0 auto 16px !important;
    z-index: 2;
  }
  #hero .hero-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 8px 40px 0 !important;
    width: 100% !important;
    z-index: 2 !important;
  }
  #hero .hero-title {
    font-size: clamp(24px, 4vw, 40px) !important;
    line-height: 1.2 !important;
  }
  /* .hero-ciudad-bottom height ELIMINADA (1H responsive) - ahora la altura la determina la imagen natural. */
}

/* ——— MOBILE <768px: flexbox centrado vertical (Camino B) ——— */
@media (max-width: 768px) {
  #hero, #hero.hero-fullscreen, #hero.hero-compact {
    background-image: var(--hero-bg-mobile, var(--hero-bg-c1, none)) !important;
    background-size: cover !important;
    background-position: var(--hero-bg-pos-mobile, center top) !important;
    background-color: #ffffff !important;
    min-height: 100vh !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;  /* centrado vertical real */
    padding-top: 80px !important;          /* nav fijo */
    padding-bottom: 140px !important;      /* reserva para la franja ciudad */
    overflow: hidden;
  }
  .hero-logo-img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: var(--hero-logo-zoom-mobile, 90%) !important;
    max-width: 100% !important;
    margin: 0 auto 8px !important;
    z-index: 2;
    padding-top: 0 !important;
  }
  #hero .hero-content, #hero.hero-fullscreen .hero-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    padding: 16px 24px 0 !important;
    z-index: 3 !important;
    text-align: center !important;
  }
  #hero .hero-title {
    font-size: clamp(22px, 6vw, 32px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }
  .hero-title-badge {
    font-size: clamp(14px, 4vw, 18px) !important;
    padding: 8px 20px !important;
    margin-top: 12px !important;
  }
  #hero .hero-stats { justify-content: center !important; }
  #hero .hero-cta {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  /* .hero-ciudad-bottom height ELIMINADA (1H responsive) - ahora la altura la determina la imagen natural. */
  .profile-switcher {
    bottom: 12px !important;
    right: 8px !important;
    padding: 6px 10px !important;
    gap: 6px !important;
  }
  .profile-switcher-btn   { padding: 4px 10px !important; font-size: 12px !important; }
  .profile-switcher-label { font-size: 10px !important; }
}

#hero .btn-secondary {
  background: #ffffff !important;
  color: var(--navy) !important;
  border-color: #ffffff !important;
}
#hero .btn-secondary:hover {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: var(--dark) !important;
}
.hero-title-badge {
  display: inline-block;
  background: var(--azul-rafa);
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 700;
  padding: 10px 28px;
  border-radius: 6px;
  margin-top: 16px;
  letter-spacing: 0.5px;
}
body.profile-cooper2 .hero-title-badge {
  background: var(--azul-rafa);
  color: #ffffff;
}

/* ===== MOBILE NAV ===== */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  flex-shrink: 0;
}
.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}
body.profile-cooper2 .nav-toggle-bar { background: var(--navy); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  .nav-links {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 75vw;
    max-width: 300px;
    background: #ffffff;
    flex-direction: column;
    padding: 80px 32px 40px;
    gap: 8px;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0.3s;
    visibility: hidden;
    z-index: 1000;
    margin: 0;
    list-style: none;
    overflow-y: auto;
  }
  .nav-links.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
    border-bottom: 1px solid var(--gray-light);
    text-decoration: none;
  }
  .nav-links a.active { color: var(--orange); }

  /* Overlay oscuro detrás del menú */
  body.nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
  }

  /* Nav bar: logo izq, hamburguesa der */
  .site-nav {
    justify-content: space-between;
    padding: 0 16px;
  }
  .site-nav .lang-sep { display: none; }
}

/* En mobile: lang-toggle dentro del nav, ocultar el floating */
@media (max-width: 768px) {
  .lang-toggle {
    position: static !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    display: none !important;
  }
  /* Lang dentro del menú desplegable */
  .nav-lang-mobile {
    display: flex !important;
    gap: 8px;
    padding: 16px 0 8px;
    border-top: 1px solid var(--gray-light);
    margin-top: 8px;
  }
}
.nav-lang-mobile { display: none; }
.modelos-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1200px) { .modelos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .modelos-grid { grid-template-columns: 1fr; } }

/* ===== 3. btn-navy hover naranja ===== */
.btn-navy:hover { background: var(--orange) !important; color: var(--dark) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,166,35,0.35); }

/* ===== 4. Contacto página items ===== */
.contact-info-light { display: flex; flex-direction: column; gap: 24px; margin-top: 8px; }
.contact-item-light { display: flex; gap: 16px; align-items: flex-start; }
.contact-item-icon-light { font-size: 18px; width: 44px; height: 44px; min-width: 44px; background: var(--gray-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.contact-item-label { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--orange); margin-bottom: 4px; }
.dato-item a { color: var(--navy); text-decoration: underline; font-weight: 700; }
.dato-item a:hover { color: var(--orange); }

/* ===== 5. section-label naranja SIEMPRE ===== */
.section-label { color: var(--orange) !important; }

/* ===== 6. Banner ciudad fondo neutro en cooper2 ===== */
body.profile-cooper2 .section-banner-ciudad { background: var(--gray-light); }

/* ===== 7. CSS VARS PANEL ===== */
h1 { font-weight: var(--fw-title, 700) !important; }
h1 .en, h1 span.en { font-weight: 700 !important; }
h2.section-title { font-weight: var(--fw-title, 700) !important; }
h3, h4 { font-weight: var(--fw-heading, 600) !important; }
body { font-family: var(--font-body, 'Montserrat'), sans-serif; }
p, li, td, th, label, input, textarea, select, button { font-family: var(--font-body, 'Montserrat'), sans-serif; }
.hero-subtitle { font-weight: 550 !important; text-align: justify !important; }

/* ===== 8. CTA sub ===== */
.cta-sub { font-size: 20px !important; font-weight: 600 !important; color: rgba(27,43,94,0.85); line-height: 1.5; }
.cta-sub a { color: var(--navy); font-weight: 700; }

/* ===== 9. Select fondo claro ===== */
.form-group-light select, .form-group-light select option,
.contact-form-card .custom-select-wrap select,
.contact-form-card .custom-select-wrap select option {
  background: var(--white); color: var(--dark);
}
.form-group-light select:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245,166,35,0.15); }

/* ===== 10. Hero video sin línea ===== */
.hero-video-round { position: relative; overflow: hidden; }
.hero-video-round video { width: 108%; height: 108%; object-fit: cover; position: absolute; top: -4%; left: -4%; display: block; }
body.profile-cooper2 .hero-video-round { box-shadow: 0 0 0 4px rgba(245,166,35,0.15), 0 8px 24px rgba(0,0,0,0.08); }

/* ===== 11. COOPER2 — PAGE-HERO: fondo heredado de la página ===== */
/* El template pone `background-image: url(...)` inline desde hero.imagen.
   Antes forzábamos `background-image: none !important` para que se viera
   solo el cielo del windmill; ahora el windmill es opcional (toggle) y
   queremos que la imagen de fondo se aplique también en Moderno.
   Dejamos `--wm-sky` como color de fallback por si alguna página no
   define imagen. */
body.profile-cooper2 .page-hero {
  background-color: var(--wm-sky, #EEF6FF);
  overflow: hidden;
}
body.profile-cooper2 .page-hero-overlay { display: var(--hero-c2-display, block) !important; }
body.profile-cooper2 .page-hero-content h1 { color: var(--navy) !important; }
body.profile-cooper2 .page-hero-content .hero-subtitle,
body.profile-cooper2 .page-hero-content p:not(.section-label) { color: var(--gray) !important; }

/* Botones page-hero cooper2 */
body.profile-cooper2 .page-hero .btn-primary,
body.profile-cooper2 .page-hero .btn-secondary {
  background: var(--navy) !important; color: var(--white) !important; border-color: var(--navy) !important;
}
body.profile-cooper2 .page-hero .btn-primary:hover,
body.profile-cooper2 .page-hero .btn-secondary:hover {
  background: var(--orange) !important; color: var(--dark) !important; border-color: var(--orange) !important;
}

/* tech-subnav en cooper2 */
body.profile-cooper2 .page-hero .tech-subnav a {
  background: var(--navy); color: var(--white) !important; border-color: var(--navy);
}
body.profile-cooper2 .page-hero .tech-subnav a:hover,
body.profile-cooper2 .page-hero .tech-subnav a.active {
  background: var(--orange) !important; color: var(--dark) !important; border-color: var(--orange) !important;
}

body.profile-cooper2 .page-hero-content { position: relative; z-index: 2; }
body.profile-cooper2 .page-hero .hero-windmills-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; line-height: 0; pointer-events: none; }
body.profile-cooper2 .page-hero .hero-windmills-bar svg { width: 100%; height: auto; display: block; }

/* ===== 28. BANNER CIUDAD dentro del hero (home) ===== */
.hero-ciudad-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
  /* Sin height fija: la altura la determina el contenido (img a width 100% + height auto, o SVG). */
  overflow: hidden;
  display: block;
  /* Fuerza modo día — cielo blanco siempre, sin noche ni atardecer */
  --bc-sky-day:   #FFFFFF;
  --bc-sky-dusk:  #FFFFFF;
  --bc-sky-night: #FFFFFF;
  --bc-cycle-duration: 9999999s;
}
.hero-ciudad-bottom .banner-ciudad-svg {
  width: 100%;
  height: auto;
  display: block;
}
.hero-ciudad-bottom .banner-ciudad-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: unset;
}
/* Ocultar luna, estrellas y ventanas nocturnas en el hero */
.hero-ciudad-bottom .moon-cycle,
.hero-ciudad-bottom .stars,
.hero-ciudad-bottom .window-light,
.hero-ciudad-bottom .window-light-g2,
.hero-ciudad-bottom .window-light-g3,
.hero-ciudad-bottom .window-light-g4 { display: none !important; }
/* El contenido del hero queda por encima del overlay y banner */
/* (z-index gestionado en las reglas del hero arriba) */
.section-slide-producto {
  width: 100%;
  line-height: 0;
  margin: 0; padding: 0;
  background: var(--white);
}
body.profile-cooper2 .section-slide-producto { background: var(--white); }
.slide-producto-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ===== 26. HOME HERO — imagen de fondo + contenido absolute ===== */
#hero {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  background-image: var(--hero-bg-c1, none) !important;
  background-size: cover !important;
  background-position: var(--hero-bg-pos, center 30%) !important;
  background-repeat: no-repeat !important;
}
body.profile-cooper2 #hero {
  background-image: var(--hero-bg-c2, var(--hero-bg-c1, none)) !important;
  background-size: cover !important;
  background-position: var(--hero-bg-pos, center 30%) !important;
  background-color: transparent !important;
}

/* Contenido absolute — control total de posición vertical */
#hero .hero-content {
  position: absolute !important;
  top: var(--hero-content-top, 300px) !important;
  left: 80px !important;
  right: 80px !important;
  padding: 0 !important;
  z-index: 3 !important;
  text-align: center !important;
}
#hero .hero-title { font-weight: 700 !important; }
#hero .hero-stats { justify-content: center !important; }
#hero .hero-cta { justify-content: center !important; }

/* img mobile hero — ya no se usa, cubierto por el sistema de bgimage */
.hero-mobile-img { display: none !important; }
/* Overlay controlable solo en home — no afecta a otras páginas */
.hero-home-overlay {
  position: absolute;
  inset: 0;
  background: rgba(27,43,94,0.85);
  opacity: var(--hero-home-overlay-op, 0);
  z-index: 1;
  pointer-events: none;
  display: var(--hero-c1-display, block);
}
body.profile-cooper2 .hero-home-overlay {
  background: rgba(27,43,94,0.85);
  display: var(--hero-c2-display, block);
}
/* (z-index del hero-content gestionado en las reglas responsivas arriba) */
body.profile-cooper2 #hero .hero-bg-pattern { display: none !important; }
/* Sin hero-bg-pattern ni orbits en home — fondo limpio */
#hero .hero-bg-pattern,
#hero .orbit { display: none !important; }
/* Sin windmills en home cuando hay imagen de fondo */
#hero .hero-windmills-bar { display: none !important; }

/* ===== 13. datos-grid cards ===== */
.datos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.dato-item { background: var(--white); border-radius: var(--radius); padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--gray-light); border-left: 4px solid var(--orange); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.dato-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dato-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); font-family: 'Montserrat', sans-serif; }
.dato-val { font-size: var(--fs-min); font-weight: 700; color: var(--navy); font-family: 'Montserrat', sans-serif; line-height: 1.3; }
@media (max-width: 768px) { .datos-grid { grid-template-columns: 1fr 1fr; } }

/* ===== 14. COMPROMISO - estructura PPT (1H) =====
   Layout vertical:
     1. Título navy cursivo centrado (igual estilo que .section-title + italic)
     2. Badges amarillos sueltos (col-1 y col-3 de un grid 4 cols)
     3. Barra horizontal azul Rafa con 4 números gigantes blancos
     4. 4 columnas de texto debajo (título + descripción) sobre fondo claro
     5. 2 imágenes ilustrativas opcionales abajo (col 1 y col 3)
   Sección a pantalla completa, fondo blanco, distribución vertical.
   ============================================================ */
.section-compromiso {
  background: var(--white) !important;
  padding: 80px 0 40px;
  color: var(--navy);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Título: idéntico al .section-title estándar del sitio pero en cursiva.
   Override explícito para evitar uppercase heredado o letter-spacing. */
.section-compromiso .compromiso-titulo {
  text-align: center;
  font-family: 'Montserrat', sans-serif !important;
  font-style: italic !important;
  font-weight: 700 !important;            /* igual que section-title */
  font-size: 38px !important;             /* igual que section-title */
  color: var(--navy) !important;
  line-height: 1.15 !important;           /* igual que section-title */
  letter-spacing: normal !important;      /* sin apriete artificial */
  text-transform: none !important;        /* nunca uppercase */
  margin: 0 0 40px !important;
}
@media (min-width: 769px) {
  .section-compromiso .compromiso-titulo {
    font-size: 44px !important;
  }
}

/* Fila de badges amarillos */
.compromiso-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.compromiso-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFEB3B;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;                       /* negrita pronunciada */
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 2px solid var(--navy);          /* reborde navy */
  text-align: center;
  line-height: 1.25;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  align-self: end;
  margin-bottom: -16px;                   /* solapa ligeramente sobre la barra azul */
  justify-self: center;
  max-width: 100%;
  letter-spacing: 0.2px;
}
.compromiso-badge-1 { grid-column: 1; }
.compromiso-badge-2 { grid-column: 3 / span 2; }  /* extiende a col 3+4 para una sola línea como en PPT */

/* Barra horizontal con los 4 números */
.compromiso-barra {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--compromiso-bg, var(--azul-rafa, #0B76A0));
  border: none;
  box-shadow: none;
  margin: 0 auto;
  padding: 18px 0;                        /* más estrecha (antes 32px) */
  max-width: 1200px;
  border-radius: 0;
  position: relative;
  z-index: 1;
}
.compromiso-col-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 16px;
  gap: 6px;
}
.compromiso-num {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(42px, 5vw, 64px);      /* algo más pequeño para que encaje en barra estrecha */
  font-weight: 800;
  line-height: 1;
  color: var(--white);
  -webkit-text-fill-color: var(--white);
  background: none;
  animation: none;
  display: inline-flex;                   /* permite alinear texto + símbolo */
  align-items: center;
  gap: 4px;
}
.compromiso-num .compromiso-num-icon {
  font-size: 0.7em;                       /* el ⇺ un poco más pequeño que el número */
  display: inline-block;
  line-height: 1;
  font-weight: 600;
}
.compromiso-num-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}

/* Fila de textos descriptivos */
.compromiso-textos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 0 24px;
}
.compromiso-texto-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 0 8px;
}
.compromiso-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-min);
  color: var(--navy);
  line-height: 1.45;
}
.compromiso-label strong {
  display: block;
  font-weight: 700;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-min);
  line-height: 1.3;
}
.compromiso-label p {
  font-size: var(--fs-min);
  color: var(--gray);
  margin: 0;
  line-height: 1.5;
}

/* Fila de imágenes inferiores (opcional) — alineadas, más grandes */
.compromiso-imgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 24px;
  align-items: end;                       /* las dos imágenes pegadas al baseline */
}
.compromiso-img-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 220px;                      /* reserva vertical estable */
}
.compromiso-img-1 { grid-column: 1 / span 2; }   /* presa centrada sobre col 1+2 */
.compromiso-img-2 { grid-column: 3 / span 2; }   /* tendido centrado sobre col 3+4 */
.compromiso-img-wrap img {
  width: 100%;
  max-width: 480px;                       /* más grandes (antes 320) porque ocupan 2 columnas */
  height: auto;
  display: block;
  opacity: 1;
  object-fit: contain;
}

/* Responsive: tablet pasa a 2 cols, mobile a 1 col */
@media (max-width: 900px) {
  .compromiso-badges,
  .compromiso-imgs { grid-template-columns: repeat(2, 1fr); }
  .compromiso-badge-1, .compromiso-badge-2 { grid-column: auto; }
  .compromiso-img-1, .compromiso-img-2 { grid-column: auto; }

  /* Cards 2x2: cada compromiso = número sobre azul + título + texto.
     Usamos display:contents en los wrappers para que sus hijos pasen a ser
     hijos directos del grid 2x2 que definimos abajo. */
  .compromiso-barra,
  .compromiso-textos {
    display: contents;
    background: none !important;          /* el fondo azul ya no es una barra horizontal */
    padding: 0 !important;
  }

  /* Contenedor padre 2x2: rejilla de 2 columnas y filas auto.
     Cada compromiso ocupa 1 columna y 2 filas (número arriba + texto abajo).
     Se logra haciendo que cada `.compromiso-col-num` y su correspondiente
     `.compromiso-texto-col` compartan columna pero ocupen filas consecutivas. */
  .section-compromiso .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
    align-items: stretch;
  }
  .section-compromiso .container > h2.compromiso-titulo,
  .section-compromiso .container > .compromiso-badges,
  .section-compromiso .container > .compromiso-imgs {
    grid-column: 1 / -1;                  /* título, badges e imágenes ocupan ambas columnas */
  }

  /* Cada número sobre fondo azul, esquinas superiores redondeadas */
  .compromiso-col-num {
    background: var(--compromiso-bg, var(--azul-rafa, #0B76A0));
    padding: 20px 12px;
    border-radius: 8px 8px 0 0;
    margin: 0;
  }

  /* Cada texto sobre fondo blanco, esquinas inferiores redondeadas, sombra ligera */
  .compromiso-texto-col {
    background: var(--white);
    padding: 18px 16px 22px;
    border-radius: 0 0 8px 8px;
    margin: 0 0 8px;                       /* separación entre tarjetas verticales */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  /* Emparejamiento: número N va a la fila correspondiente a card N (1-2-3-4 → fila 2-3-4-5 en columnas 1-2-1-2).
     Como en móvil ya no hay barra ni textos como wrappers, el order natural en el DOM nos da:
     - .compromiso-col-num x4 → índices 1-4 dentro del grid
     - .compromiso-texto-col x4 → índices 5-8
     Usamos `grid-row` y `grid-column` explícitos para emparejarlos: */
  .compromiso-col-num:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .compromiso-col-num:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .compromiso-col-num:nth-of-type(3) { grid-column: 1; grid-row: 4; }
  .compromiso-col-num:nth-of-type(4) { grid-column: 2; grid-row: 4; }
  .compromiso-texto-col:nth-of-type(1) { grid-column: 1; grid-row: 3; }
  .compromiso-texto-col:nth-of-type(2) { grid-column: 2; grid-row: 3; }
  .compromiso-texto-col:nth-of-type(3) { grid-column: 1; grid-row: 5; }
  .compromiso-texto-col:nth-of-type(4) { grid-column: 2; grid-row: 5; }

  /* Título → fila 1, badges → entre fila 1 y 2 (margen), imágenes → fila 6 */
  .section-compromiso .compromiso-titulo { grid-row: 1; }
  .section-compromiso .compromiso-badges { grid-row: 1; margin-top: 60px; }  /* solapan sobre los números */
  .section-compromiso .compromiso-imgs { grid-row: 6; margin-top: 20px; }

  /* Tamaño números más pequeño en móvil para que entren en card */
  .compromiso-num { font-size: clamp(36px, 9vw, 52px); }
}

@media (max-width: 560px) {
  /* Ajustes finos para móvil pequeño, pero MANTENEMOS 2x2 */
  .compromiso-badges { grid-template-columns: repeat(2, 1fr); }
  .section-compromiso { padding: 60px 0 24px; }
  .compromiso-badge {
    margin-bottom: 0;
    font-size: 12px;
    padding: 8px 12px;
  }
  .compromiso-num { font-size: clamp(32px, 11vw, 44px); }
}

/* ===== 15. Nota de garantía — color según perfil ===== */
.garantia-nota { color: rgba(255,255,255,0.92); }
body.profile-cooper2 .garantia-nota { color: var(--dark) !important; }

/* ===== 16. modelo-card kva-ac naranja ===== */
.spec-row.highlight-kva { background: rgba(245,166,35,0.08); border-radius: 6px; padding: 8px 10px; border-bottom: none !important; margin: 2px 0; }
.spec-row.highlight-kva .spec-label { color: var(--orange); font-weight: 700; }
.spec-row.highlight-kva .spec-val { color: var(--orange); font-weight: 900; font-size: 18px; }

/* ===== SECTOR CARDS — nuevo diseño: icono grande + nombre + % debajo ===== */
.sector-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px 20px;
  background: var(--sector-card-bg, #ffffff);
  border-radius: var(--radius);
  border: 1px solid rgba(27,43,94,0.08);
  transition: all var(--transition);
  gap: 10px;
}
.sector-card:hover {
  border-color: var(--navy);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}
.sector-icon-large {
  font-size: 40px;
  line-height: 1;
  display: block;
}
.sector-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sector-info h4 {
  font-size: var(--fs-min);
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.sector-pct {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--orange);
}

/* ===== 18. Tecnología centrado ===== */
.tech-section-centered { text-align: center; }
.tech-section-centered .section-label { display: block; }
.tech-section-centered .section-title { margin-left: auto; margin-right: auto; }
.tech-section-centered .body-text { text-align: justify; }
.tech-science-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-top: 40px; }
.tech-electron-full { margin-top: 48px; max-width: 760px; margin-left: auto; margin-right: auto; }
.tech-electron-full img { width: 100%; height: auto; display: block; }
@media (max-width: 768px) { .tech-science-layout { grid-template-columns: 1fr; gap: 32px; } }

/* ===== 19. LOGOS STRIP (home) — 50% más grandes ===== */
.logos-strip img { max-height: 75px !important; max-width: 195px !important; }

/* ===== 20. TOOLTIP HOVER CON NOMBRE ===== */
/* Aplica al strip de home (.logo-strip-item) y al grid de clientes (.logo-card) */
.logo-strip-item,
.logo-card {
  position: relative;
}

.logo-strip-item[data-name]::after,
.logo-card[data-name]::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--navy);
  color: var(--white);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Flecha del tooltip */
.logo-strip-item[data-name]::before,
.logo-card[data-name]::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--navy);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 20;
}

.logo-strip-item[data-name]:hover::after,
.logo-strip-item[data-name]:hover::before,
.logo-card[data-name]:hover::after,
.logo-card[data-name]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Variante cooper2: tooltip en teal para contraste suave */
body.profile-cooper2 .logo-strip-item[data-name]::after,
body.profile-cooper2 .logo-card[data-name]::after {
  background: var(--navy);
}
body.profile-cooper2 .logo-strip-item[data-name]::before,
body.profile-cooper2 .logo-card[data-name]::before {
  border-top-color: var(--navy);
}

/* ===== 21. HERO OVERLAY — parametrizado desde panel ===== */
/*
  Usa color-mix() para opacidades sin necesitar hex→rgb.
  Soporte: Chrome 111+, Firefox 113+, Safari 16.2+ (2023)
  Sobreescribe el gradiente hardcoded de cooper-v2.css.
*/

/* Clásico (cooper1): overlay azul navy configurable */
.page-hero-overlay {
  display: var(--hero-c1-display, block);
  opacity: var(--page-overlay-c1-op, 1);
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--page-overlay-c1-color, #1B2B5E) 85%, transparent) 40%,
    color-mix(in srgb, var(--page-overlay-c1-color, #1B2B5E) 40%, transparent) 100%
  );
}

body.profile-cooper2 .page-hero-overlay {
  display: block !important;
  opacity: var(--page-overlay-c2-op, 1) !important;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--page-overlay-c2-color, #F5A623) 75%, transparent) 40%,
    color-mix(in srgb, var(--page-overlay-c2-color, #F5A623) 30%, transparent) 100%
  ) !important;
}

/* Ajuste de texto en cooper2 con el nuevo overlay naranja */
body.profile-cooper2 .page-hero-content h1 {
  color: var(--white) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.profile-cooper2 .page-hero-content .section-label {
  color: var(--white) !important;
}
body.profile-cooper2 .page-hero-content .hero-subtitle,
body.profile-cooper2 .page-hero-content p:not(.section-label) {
  color: rgba(255,255,255,0.9) !important;
}

/* ===== 22. HERO — imagen por perfil + layout configurable por página ===== */
/*
  El template inyecta `style="--hero-bg-c1: url(...); --hero-bg-c2: url(...);"` 
  para ofrecer imagen distinta por perfil. Si no se define imagen_cooper2, 
  el template hace fallback a la de cooper1.
*/

.page-hero {
  background-image: var(--hero-bg-c1, none);
  background-size: cover;
  background-position: center;
  position: relative;
}
body.profile-cooper2 .page-hero {
  background-image: var(--hero-bg-c2, var(--hero-bg-c1, none));
}

/* Layout: fullscreen (como el hero de Inicio) vs compact (350px fijo) */
/* En .page-hero tenemos margin-top: 72px del CSS base (para el nav fixed),
   así que restamos esa altura del 100vh para que el hero quepa justo en el
   viewport y la flecha siempre sea visible. */
.page-hero.hero-fullscreen {
  min-height: calc(100vh - 72px) !important;
  max-height: calc(100vh - 72px) !important;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.page-hero.hero-compact {
  min-height: 350px !important;
  max-height: 350px !important;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Reducir padding vertical del contenido en compact para que la flecha
   y el texto no se pisen visualmente */
.page-hero.hero-compact .page-hero-content {
  padding-top: 32px !important;
  padding-bottom: 48px !important;
}

/* En compact: subtítulo puede desbordar — lo acortamos visualmente */
.page-hero.hero-compact .hero-subtitle {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Home: aplicar layout también a #hero si trae las clases */
/* #hero usa padding-top: 72px interno (no margin), por lo que 100vh encaja
   exacto en viewport sin ajuste */
#hero.hero-fullscreen {
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden;
}
#hero.hero-compact {
  min-height: 350px !important;
  max-height: 350px !important;
  overflow: hidden;
}

/* Responsive: en mobile relajamos el max-height del fullscreen para no
   cortar contenido (la flecha puede quedar fuera, pero el contenido es
   prioritario). Compact se queda como está. */
@media (max-width: 768px) {
  .page-hero.hero-fullscreen,
  #hero.hero-fullscreen {
    max-height: none !important;
    overflow: visible;
  }
  .page-hero.hero-compact,
  #hero.hero-compact {
    max-height: 420px !important;
  }
}

/* ===== 23. SCROLL ARROW — indicador de scroll hacia la siguiente sección ===== */
.hero-scroll-arrow {
  position: absolute;
  bottom: 22px;
  left: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.12);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  animation: hero-arrow-bounce 2s ease-in-out infinite;
}
.hero-scroll-arrow svg {
  width: 22px;
  height: 22px;
  display: block;
}
.hero-scroll-arrow:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--dark);
  animation-play-state: paused;
}
@keyframes hero-arrow-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* En home cooper2 (#hero con fondo blanco): flecha navy para contraste */
body.profile-cooper2 #hero .hero-scroll-arrow {
  color: var(--navy);
  border-color: var(--navy);
  background: rgba(27,43,94,0.08);
}
body.profile-cooper2 #hero .hero-scroll-arrow:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* En home cooper1 (#hero con fondo navy): flecha blanca OK con la regla base */
/* No hace falta regla adicional */

/* ═══════════════════════════════════════════════════════════════════
   24. FORMULARIO DE CONTACTO — Grav Form plugin
   ═══════════════════════════════════════════════════════════════════
   - Ocultar honeypot (campo trampa anti-spam, invisible para humanos)
   - Mensajes de éxito/error
   - Ajustes finos sobre los estilos del plugin para que encaje con
     nuestra maquetación existente (form-group-light)
   ══════════════════════════════════════════════════════════════════ */

/* Honeypot — INVISIBLE.
   Triple capa: display:none + fuera de pantalla + visibility.
   .form-field-honeypot cubre el caso en que Grav no aplica outerclasses
   al wrapper del campo honeypot (comportamiento variable según versión). */
.hp-field,
.hp-field *,
.form-field-honeypot,
.form-field-honeypot *,
input.form-honeybear,
input[name="data[website]"] {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Mensajes de estado — éxito/error */
.contact-form-message {
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.contact-form-message::before { font-size: 20px; flex-shrink: 0; line-height: 1.4; }
.contact-form-message strong { display: block; margin-bottom: 4px; font-size: 15px; }
.contact-form-message p { margin: 0; font-size: var(--fs-min); line-height: 1.5; }

.contact-form-message-success {
  background: rgba(34,139,70,0.07);
  border: 1px solid rgba(34,139,70,0.25);
  border-left: 4px solid #228B46;
  color: #1a6a36;
}
.contact-form-message-success::before { content: '✓'; color: #228B46; }
.contact-form-message-success strong { color: #1a6a36; }

.contact-form-message-error {
  background: rgba(200,35,51,0.07);
  border: 1px solid rgba(200,35,51,0.25);
  border-left: 4px solid #C82333;
  color: #8B1A1A;
}
.contact-form-message-error::before { content: '⚠'; color: #C82333; }
.contact-form-message-error strong { color: #8B1A1A; }

/* Errores inline por campo */
.form-errors, .form-input-error {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #C82333;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

/* ── Card contenedor del formulario ── */
.contact-form-card {
  background: var(--white);
  border-radius: calc(var(--radius) * 1.5);
  padding: 40px;
  box-shadow: 0 4px 32px rgba(27,43,94,0.10);
  border: 1px solid rgba(27,43,94,0.07);
}
@media (max-width: 768px) { .contact-form-card { padding: 24px 20px; } }

/* ── Labels ── */
.contact-form .form-label,
.contact-form label:not(.form-consent label) {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 7px;
  font-family: 'Montserrat', sans-serif;
}
.contact-form .required-star { color: var(--orange); margin-left: 2px; }

/* ── Inputs, selects, textarea ── */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="number"],
.contact-form select,
.contact-form textarea {
  background: #F7F8FA;
  border: 1.5px solid rgba(27,43,94,0.12);
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--dark);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  width: 100%;
  transition: border-color 0.18s, box-shadow 0.18s;
  line-height: 1.4;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(90,95,110,0.5); font-size: 14px; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(245,166,35,0.15);
  background: var(--white);
}
.contact-form textarea { min-height: 110px; resize: vertical; }

/* ── Spacing entre campos ── */
.contact-form .form-field,
.contact-form .form-group { margin-bottom: 18px; }
.contact-form fieldset { border: 0; padding: 0; margin: 0; }

/* ── Dos columnas en desktop para nombre+empresa y email+teléfono ── */
@media (min-width: 600px) {
  .contact-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ── Captcha ── */
.form-field-basic-captcha .form-input-wrapper,
.form-field-basic_captcha .form-input-wrapper {
  display: flex; gap: 14px; align-items: center;
}
.form-field-basic-captcha img,
.form-field-basic_captcha img {
  border: 1.5px solid rgba(27,43,94,0.12);
  border-radius: 8px;
  flex-shrink: 0;
  background: #F7F8FA;
  padding: 4px 8px;
}
.form-field-basic-captcha input,
.form-field-basic_captcha input { flex: 1; max-width: 140px; }

/* ── Checkbox RGPD ── */
.form-consent .form-label,
.form-consent label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-min); line-height: 1.5; color: var(--gray);
  font-family: 'DM Sans', sans-serif; font-weight: 400;
  cursor: pointer; text-transform: none; letter-spacing: 0;
}
.form-consent input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0;
  width: 18px; height: 18px;
  accent-color: var(--orange); cursor: pointer;
}
.form-consent a { color: var(--navy); font-weight: 700; text-decoration: underline; }
.form-consent a:hover { color: var(--orange); }

/* ── Botón submit ── */
.contact-form .form-data button[type="submit"],
.contact-form button.btn-submit,
.contact-form .btn-submit-navy {
  width: 100%;
  margin-top: 6px;
  padding: 16px 24px;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.contact-form .form-data button[type="submit"]:hover,
.contact-form button.btn-submit:hover,
.contact-form .btn-submit-navy:hover {
  background: var(--orange);
  color: var(--dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,166,35,0.30);
}

/* ── Divider sutil antes del captcha y consent ── */
.contact-form .form-section-divider {
  border: none;
  border-top: 1px solid rgba(27,43,94,0.08);
  margin: 20px 0;
}

/* ===== SELECT DENTRO DE CARD — siempre dark sobre claro ===== */
/* .contact-form-card tiene fondo blanco en ambos perfiles */
.contact-form-card select {
  color: var(--dark) !important;
  background: #F7F8FA !important;
  border-color: rgba(27,43,94,0.12) !important;
}
.contact-form-card select option {
  background: #ffffff;
  color: var(--dark);
}

/* ===== SELECT PERFIL CLÁSICO (Cooper1) ===== */
body.profile-cooper1 .contact-form select,
body.profile-cooper1 select {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 15px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
body.profile-cooper1 .contact-form select option {
  background: var(--navy);
  color: var(--white);
}
body.profile-cooper1 .contact-form select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(245,166,35,0.2);
}

/* ===== SELECT PERFIL MODERNO (Cooper2) ===== */
body.profile-cooper2 .contact-form select,
body.profile-cooper2 select {
  background: var(--gray-light);
  color: var(--navy);
  border: 1px solid rgba(27,43,94,0.15);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231B2B5E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
body.profile-cooper2 .contact-form select option {
  background: var(--white);
  color: var(--navy);
}

/* ═══════════════════════════════════════════════════════════════
   25. CONTACTO — SECCIÓN REDISEÑADA v2
   ═══════════════════════════════════════════════════════════════ */

/* ── Sección contenedor ── */
.contact-section {
  background: var(--navy);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.contact-section::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(245,166,35,0.06) 0%, transparent 65%);
  pointer-events: none;
  border-radius: 50%;
}
body.profile-cooper2 .contact-section { background: var(--gray-light); }
body.profile-cooper2 .contact-section::before {
  background: radial-gradient(circle, rgba(27,43,94,0.04) 0%, transparent 65%);
}

/* ── Grid interior ── */
.contact-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ── Panel izquierdo ── */
.contact-left { position: relative; }

.contact-left-title { color: var(--white) !important; margin-bottom: 20px; }
body.profile-cooper2 .contact-left-title { color: var(--navy) !important; }

.contact-left-lead {
  font-size: var(--fs-min);
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
  margin-bottom: 44px;
  max-width: 400px;
}
body.profile-cooper2 .contact-left-lead { color: var(--gray); }

/* ── Items de contacto ── */
.contact-items-v2 { display: flex; flex-direction: column; gap: 24px; margin-bottom: 44px; }

.contact-item-v2 { display: flex; gap: 16px; align-items: flex-start; }

.contact-item-v2-icon {
  width: 46px; height: 46px; min-width: 46px;
  border-radius: 12px;
  background: rgba(245,166,35,0.10);
  border: 1px solid rgba(245,166,35,0.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.contact-item-v2:hover .contact-item-v2-icon {
  background: rgba(245,166,35,0.20);
  transform: translateY(-2px);
}
body.profile-cooper2 .contact-item-v2-icon {
  background: rgba(27,43,94,0.06);
  border-color: rgba(27,43,94,0.12);
  color: var(--navy);
}
body.profile-cooper2 .contact-item-v2:hover .contact-item-v2-icon {
  background: rgba(27,43,94,0.12);
  transform: translateY(-2px);
}

.contact-item-v2-text { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }

.contact-item-v2-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--orange);
  font-family: 'Montserrat', sans-serif;
}

.contact-item-v2-value {
  font-size: var(--fs-min);
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  font-family: 'DM Sans', sans-serif;
}
body.profile-cooper2 .contact-item-v2-value { color: var(--dark); }

.contact-item-v2-link { font-weight: 600; transition: color 0.18s; }
.contact-item-v2-link:hover { color: var(--orange) !important; }
body.profile-cooper2 .contact-item-v2-link { color: var(--navy); }

/* ── Trust stat ── */
.contact-trust-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-radius: var(--radius);
  background: rgba(245,166,35,0.07);
  border: 1px solid rgba(245,166,35,0.18);
  border-left: 3px solid var(--orange);
}
body.profile-cooper2 .contact-trust-stat {
  background: var(--white);
  border-color: rgba(27,43,94,0.09);
  border-left: 3px solid var(--orange);
  box-shadow: 0 2px 12px rgba(27,43,94,0.06);
}
.contact-trust-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 34px; font-weight: 700;
  color: var(--orange); line-height: 1; flex-shrink: 0;
}
.contact-trust-text {
  font-size: var(--fs-min);
  color: rgba(255,255,255,0.72);
  line-height: 1.4;
  font-family: 'DM Sans', sans-serif;
}
body.profile-cooper2 .contact-trust-text { color: var(--gray); }

/* ── Card del formulario ── */
.contact-form-card {
  background: var(--white) !important;
  border-radius: calc(var(--radius) * 1.5) !important;
  padding: 44px 40px !important;
  box-shadow: 0 12px 56px rgba(0,0,0,0.20) !important;
  border: none !important;
  border-top: 4px solid var(--orange) !important;
  position: relative;
}
body.profile-cooper2 .contact-form-card {
  box-shadow: 0 4px 32px rgba(27,43,94,0.10) !important;
  border: 1px solid rgba(27,43,94,0.08) !important;
  border-top: 4px solid var(--orange) !important;
}
@media (max-width: 768px) { .contact-form-card { padding: 28px 20px !important; } }

/* ── Grid 2 columnas para campos del formulario ── */
/* Los campos son hijos directos del <form> en Grav Forms 8.x */
form.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 0;
}
/* Ancho completo: usando clases reales del DOM */
form.contact-form .custom-select-wrap,
form.contact-form .full-col,
form.contact-form .form-consent,
form.contact-form .form-field-turnstile,
form.contact-form .buttons { grid-column: 1 / -1; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .contact-inner { gap: 60px; padding: 0 48px; }
}
@media (max-width: 768px) {
  .contact-section { padding: 60px 0; }
  .contact-inner { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
  .contact-left-lead { margin-bottom: 32px; }
  form.contact-form { grid-template-columns: 1fr; }
  form.contact-form .form-field-select,
  form.contact-form .form-field-textarea,
  form.contact-form .form-field-basic-captcha,
  form.contact-form .form-field-checkbox,
  form.contact-form .buttons { grid-column: 1; }
}

/* ===== 1F · Footer - informacion corporativa parametrizable ===== */
.footer-corp {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 28px;
  margin: 12px auto 4px;   /* margen inferior reducido para pegar con .footer-copy (AS) */
  max-width: 800px;
  padding: 0 20px;
}
.footer-corp-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-min);
  color: var(--gray);
  text-decoration: none;
  transition: color var(--transition);
  line-height: 1.5;
}
.footer-corp-tel,
.footer-corp-linkedin {
  cursor: pointer;
}
.footer-corp-tel:hover,
.footer-corp-linkedin:hover {
  color: var(--orange);
}
.footer-corp-linkedin svg {
  display: block;
  width: 24px;
  height: 24px;
  transition: transform var(--transition);
}
.footer-corp-linkedin:hover svg {
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .footer-corp { gap: 12px 20px; }
  .footer-corp-dir { text-align: center; }
}

/* ===== 33. CONTACTO — banner ciudad full-width fondo blanco =====
   Anula el fondo navy default de .section-banner-ciudad para que la imagen
   transparente respire sobre blanco puro, y la hace ocupar el ancho completo
   del viewport sin restos de padding del .contact-section.
   ============================================================ */
.section-banner-ciudad-contacto {
  background: #FFFFFF !important;
  width: 100%;
  margin: 0;
  padding: 24px 0;        /* aire vertical para que no quede pegado al borde superior */
  line-height: 0;          /* elimina espacio fantasma alrededor del <img> */
  display: block;
}
.section-banner-ciudad-contacto img,
.section-banner-ciudad-contacto .banner-ciudad-img,
.section-banner-ciudad-contacto .banner-ciudad-svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: none;        /* anula limites del container padre, ocupa todo el ancho */
}

/* ===== 32. OCULTAR TOGGLES TEMPORALES =====
   Profile switcher (Clásico/Moderno) y language toggle (ES/EN) ocultos por petición del AS:
   - Por defecto perfil Moderno (forzado por JS en default.html.twig).
   - Idioma inglés pendiente de traducción; oculto hasta tener contenido.
   Restauración trivial: comentar este bloque entero.
   ============================================================ */
.profile-switcher,
.lang-toggle,
.nav-lang-mobile { display: none !important; }

/* ===== 29. ELECTRONES 2-UP (comparativa libres vs Cooper) =====
   Grid de 2 columnas con caption arriba e imagen debajo.
   Sustituye al SVG único de comparativa cuando AS sube 2 imágenes parametrizables.
   ============================================================ */
.electrons-2up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;                   /* fuerza misma altura entre cards */
}
.electrons-2up-col {
  margin: 0;
  padding: 24px;
  background: var(--gray-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  height: 100%;                            /* ocupa altura del row (alineado por align-items) */
}
.electrons-2up-caption {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
  min-height: 2.6em;                       /* reserva 2 líneas para que caption corto y largo igualen altura */
  display: flex;
  align-items: flex-start;
}
.electrons-2up-caption .brand-inline,
.electrons-2up-caption em {
  color: var(--orange);
  font-style: italic;
  text-transform: none;
  font-weight: 700;
  letter-spacing: normal;
}
.electrons-2up-col img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius) - 4px);
  margin-top: auto;                        /* empuja imagen al final del card si caption es más corto */
}

@media (max-width: 768px) {
  .electrons-2up { grid-template-columns: 1fr; gap: 20px; }
  .electrons-2up-caption { min-height: auto; }
}

/* ===== 30. SUPERCONDUCTIVIDAD — fila lattice + caption + tren =====
   La imagen de la red cristalina ocupa el 45-50% del ancho del grid,
   y a la derecha aparece el caption + (opcional) tren decorativo.
   ============================================================ */
.sc-lattice-row {
  display: grid;
  grid-template-columns: 45% 1fr;
  gap: 32px;
  align-items: center;
}
.sc-lattice-img img {
  width: 100%;
  height: auto;
  display: block;
}
.sc-lattice-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.sc-lattice-caption {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-style: italic;
  color: var(--navy);
  line-height: 1.5;
  margin: 0;
  max-width: 360px;
}
.sc-lattice-tren {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  margin-left: auto;
}
@media (max-width: 768px) {
  .sc-lattice-row { grid-template-columns: 1fr; }
  .sc-lattice-side { align-items: center; text-align: center; }
  .sc-lattice-caption { max-width: 100%; text-align: center; }
}

/* ===== 31. CARTA DEL INVENTOR =====
   Layout limpio web acorde al resto de secciones:
   - Eyebrow naranja + h2 caligrafico Sacramento (similar Freestyle Script del PDF)
   - Fecha pequena italica centrada sobre el cuerpo
   - Cuerpo en N columnas (parametrizable desde blueprint, default 3), balanceadas
   - Firma + rubrica alineadas a la derecha
   - Fondo blanco (hereda de .section-white)
   ============================================================ */
.section-carta-inventor {
  padding: 100px 0;
}
.section-carta-inventor .carta-header {
  text-align: center !important;
  margin-bottom: 20px;
  display: block;
}
.section-carta-inventor .carta-header .section-label {
  text-align: center !important;
  display: block;
  width: 100%;
  font-style: italic;
}
/* Titulo — Montserrat italica, centrado junto al eyebrow. */
.section-carta-inventor .carta-header .section-title {
  text-align: center !important;
  display: block;
  width: 100%;
  margin-bottom: 0;
  font-style: italic;
}
.carta-fecha {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: var(--fs-min);
  color: var(--gray);
  margin: 0 auto 32px;
  text-align: center;            /* centrada sobre el cuerpo (no a la izquierda) */
  max-width: 1080px;
  padding: 0 8px;
}
.carta-cuerpo {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-min);
  color: var(--gray);
  line-height: 1.75;
  /* CSS multicolumn parametrizado desde blueprint via --carta-cols. Por defecto 3. */
  columns: var(--carta-cols, 3);
  column-gap: 40px;
  column-fill: balance;          /* fuerza columnas equilibradas, no llena de izq a der */
  text-align: justify;
  hyphens: auto;
}
.carta-cuerpo p {
  margin: 0 0 14px;
  break-inside: avoid-column;    /* evita que un parrafo se parta entre columnas */
}
.carta-cuerpo p:first-child { margin-top: 0; }
.carta-cuerpo strong { color: var(--navy); font-weight: 700; }
.carta-cuerpo em { color: var(--navy); font-style: italic; }

.carta-firma {
  max-width: 1080px;
  margin: 40px auto 0;
  padding: 0 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.carta-rubrica {
  max-width: 200px;
  height: auto;
  display: block;
  margin-bottom: 4px;
  /* mix-blend-mode quitado: causaba artefactos negros sobre fondo blanco si el PNG no era 100% transparente */
}
.carta-firma-nombre {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: var(--fs-min);
  color: var(--navy);
  margin: 0;
}
.carta-firma-cargo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 14px;
  color: var(--gray);
  margin: 0;
}

/* Responsive: tablet 2 cols, mobile 1 col */
@media (max-width: 1024px) {
  .carta-cuerpo { columns: 2; column-gap: 32px; }
  .carta-cuerpo-manual { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 700px) {
  .section-carta-inventor { padding: 60px 0; }
  .carta-cuerpo { columns: 1; }
  .carta-cuerpo-manual { grid-template-columns: 1fr !important; }
  .carta-fecha, .carta-firma {
    text-align: center;
    align-items: center;
  }
}

/* Modo manual: 3 textareas independientes como grid. */
.carta-cuerpo-manual {
  display: grid;
  grid-template-columns: repeat(var(--carta-cols-manual, 3), 1fr);
  column-gap: 40px;
  columns: none;                 /* anula el CSS multicolumn del modo automatico */
}
.carta-cuerpo-manual .carta-col {
  break-inside: auto;            /* sin restricciones, cada col es un bloque normal */
}
.carta-cuerpo-manual .carta-col p {
  margin: 0 0 14px;
}

/* Toggle "Tipo de letra especial": aplica Sacramento solo al cuerpo, NUNCA al titulo.
   IMPORTANTE: la regla global `p, li, td, th, label, input, textarea, select, button {
   font-family: var(--font-body) }` gana por especificidad al selector .carta-cuerpo,
   asi que apuntamos directamente a los <p> dentro del scope .carta-letra-especial,
   y forzamos con !important para batir la regla global de elementos. */
.section-carta-inventor.carta-letra-especial .carta-cuerpo,
.section-carta-inventor.carta-letra-especial .carta-cuerpo p,
.section-carta-inventor.carta-letra-especial .carta-cuerpo div,
.section-carta-inventor.carta-letra-especial .carta-cuerpo-manual,
.section-carta-inventor.carta-letra-especial .carta-cuerpo-manual p,
.section-carta-inventor.carta-letra-especial .carta-col,
.section-carta-inventor.carta-letra-especial .carta-col p,
.section-carta-inventor.carta-letra-especial .carta-fecha,
.section-carta-inventor.carta-letra-especial .carta-fecha span {
  font-family: 'Sacramento', cursive !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.3px !important;
  color: var(--navy);
  text-align: left;
  hyphens: none;
}
.section-carta-inventor.carta-letra-especial .carta-fecha,
.section-carta-inventor.carta-letra-especial .carta-fecha span {
  font-size: clamp(18px, 1.8vw, 22px) !important;
  text-align: center;
}

/* ===== 35. PIE DE PÁGINA — layout 3 columnas con imágenes laterales =====
   Bloque central como antes (logo + corp + copy + badges + legal),
   más 2 columnas decorativas a izquierda y derecha (WORLD.png + cooper-train.png).
   El tamaño del texto se controla con var(--fs-footer) parametrizable desde
   blueprint del tema (Tab Tipografía → "Tamaño de texto del pie de página").
   ============================================================ */
footer { font-size: var(--fs-footer, 14px); }
footer .footer-corp,
footer .footer-copy,
footer .footer-legal a,
footer .footer-corp-item,
footer .footer-badge-text { font-size: var(--fs-footer, 14px); }

/* Quitar margen por defecto del <p> de copyright para que pegue con .footer-corp */
footer .footer-copy { margin: 0 auto 12px; }

/* Layout footer:
   - .footer-center va como bloque normal, centrado en la pagina, max-width controlado.
   - .footer-side son DECORACION posicionada absolutamente en los bordes, NO empujan el centro.
   - Asi, por mas grande que sea WORLD o tren, el centro siempre queda fijo y centrado.
   ============================================================ */
.footer-layout {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 240px;       /* reserva vertical para que los laterales (absolute) no se salgan */
}
.footer-center {
  max-width: 720px;
  margin: 0 auto;          /* centrado real en la pagina, independiente de los laterales */
  text-align: center;
  position: relative;
  z-index: 1;
}
.footer-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
/* Lados decorativos simetricos: misma anchura de columna y ambos pegados
   al borde interior (hacia el centro), para que WORLD y tren queden equidistantes. */
.footer-side-left  { left: 0;  justify-content: flex-end;   width: 380px; }
.footer-side-right { right: 0; justify-content: flex-start; width: 380px; }

.footer-side img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.footer-side-left img  { max-height: 240px; object-position: right center; }
.footer-side-right img { max-height: 240px; object-position: left center;  }  /* tren al mismo tope que WORLD, equilibrado */

/* Badges con imagen */
.footer-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: transparent;       /* sin fondo — los badges respiran sin caja gris (peticion AS) */
  border-radius: 6px;
}
body.profile-cooper2 .footer-badge { background: transparent; }
.footer-badge img {
  max-height: 28px;
  width: auto;
  display: block;
}
.footer-badge-text {
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  color: var(--gray);
}

/* Responsive: en mobile ocultar imagenes laterales para que respire el centro */
@media (max-width: 900px) {
  .footer-side { display: none; }
  .footer-layout { min-height: 0; }
}

/* ===== 34. NOSOTROS — certs grid centrado =====
   Override del grid de 5 columnas fijas. Con flexbox las cards se centran
   horizontalmente sin importar cuántas haya (1, 2, 3, 4, 5+).
   Cada card mantiene ancho coherente (~180px) para que con 5 sigan llenando como antes.
   Mobile <768px sigue con el grid 2-cols del CSS base (no se toca).
   ============================================================ */
@media (min-width: 769px) {
  .certs-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 48px;
  }
  .certs-grid .cert-card {
    flex: 0 1 180px;       /* base 180px, no crece, puede encogerse */
    max-width: 220px;
  }
}

/* ===== 37. ICONO CONTACTO EN MENÚ + BOTÓN CONTACTO EN FOOTER =====
   El menu superior muestra un sobre a la derecha del texto solo del item Contacto.
   El footer muestra el mismo boton (texto + sobre) entre badges y enlaces legales.
   ============================================================ */
.nav-icon-contacto {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  margin-top: -2px;
  flex-shrink: 0;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.footer-contacto-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 8px;
}
.footer-contacto-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: #ffffff;
  border: 1px solid var(--gray-light, #E5E7EB);
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: var(--fs-footer, 12px);
  color: var(--navy, #1B2B5E);
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.footer-contacto-btn:hover {
  background: var(--navy, #1B2B5E);
  color: #ffffff;
  border-color: var(--navy, #1B2B5E);
}
.footer-contacto-btn svg {
  flex-shrink: 0;
}

/* Enlace Contacto dentro de footer-legal: estilo identico a los demas enlaces legales
   pero con icono de sobre pequeno al lado del texto (peticion AS). */
.footer-legal-contacto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-legal-contacto svg {
  flex-shrink: 0;
  margin-top: -1px;       /* compensa el descender de la tipografia para centrar visualmente */
}

/* ===== 36. CTA — imagen de fondo opcional =====
   Activado cuando el partial recibe bg_image_url. Crea fondo a pantalla completa
   con un overlay para asegurar legibilidad del texto blanco/oscuro encima.
   ============================================================ */
.section-cta.section-cta-bg {
  position: relative;
  background-image: var(--cta-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.section-cta.section-cta-bg .section-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27, 43, 94, 0.78), rgba(27, 43, 94, 0.62));
  z-index: 0;
}
.section-cta.section-cta-bg .cta-inner {
  position: relative;
  z-index: 1;
}
.section-cta.section-cta-bg .cta-title,
.section-cta.section-cta-bg .cta-sub,
.section-cta.section-cta-bg .cta-sub a {
  color: #ffffff;
}

/* ===== 39. EYEBROW TECH-CENTERED — respeta mayúsculas/minúsculas =====
   En .tech-section-centered (bloques de Inicio-AhorroKwh y Tecnología:
   Superconductividad, Dispositivo, Electrones) los eyebrows respetan el
   case del texto original (ej: "Ahorro kWh 6% garantizado" en lugar de
   "AHORRO KWH 6% GARANTIZADO"). Mantiene color naranja, peso 700 y tamaño.
   El letter-spacing se quita porque con minúsculas queda raro.
   El resto de eyebrows del sitio mantienen uppercase (.section-label base).
   ============================================================ */
.tech-section-centered .section-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ===== 40. FOOTER — linea 4: telefono + LinkedIn + Contacto+sobre =====
   Nueva linea entre direccion y badges (peticion AS). Estilo consistente con
   .footer-legal: enlaces gray, hover orange, separadores apagados.
   ============================================================ */
.footer-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px auto 14px;
  font-size: var(--fs-footer, 12px);
  font-family: 'Montserrat', sans-serif;
}
.footer-actions-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gray);
  text-decoration: none;
  transition: color 0.18s ease;
  line-height: 1.4;
}
.footer-actions-item:hover { color: var(--orange); }
.footer-actions-item svg { flex-shrink: 0; }
.footer-actions-linkedin svg { transition: transform 0.18s ease; }
.footer-actions-linkedin:hover svg { transform: translateY(-1px); }
.footer-actions-sep {
  color: var(--gray);
  opacity: 0.4;
}

/* Ajuste fino del interlineado de la franja final del footer (peticion AS):
   La regla base .footer-legal tiene margin-top:16px que rompe el ritmo con
   las lineas vecinas (.footer-actions y .footer-badges con ~6–8px).
   Lo bajamos a 6px para que el aire sea uniforme entre todas las lineas.
   Reducimos tambien margin-bottom de .footer-actions (14px → 6px) para que
   la separacion 4→5 sea igual que 2→3 y 3→4. */
footer .footer-legal { margin-top: 6px; }
footer .footer-badges { margin-top: 8px; }
footer .footer-actions { margin: 6px auto 6px; }

/* Logo del footer +20% (peticion AS): base 48px en cooper-v2.css → 58px aqui. */
footer .footer-logo { height: 58px; }

/* Telefono dentro de la linea 2 (copyright): mismo estilo de enlace gris+hover naranja
   que el resto de enlaces del footer, con separador atenuado. */
footer .footer-copy-sep {
  color: var(--gray);
  opacity: 0.4;
  margin: 0 4px;
}
footer .footer-copy-tel {
  color: var(--gray);
  text-decoration: none;
  transition: color 0.18s ease;
}
footer .footer-copy-tel:hover { color: var(--orange); }

/* ===== 38. NUESTRO COMPROMISO — ajuste vertical de imágenes inferiores =====
   El bloque tenía demasiado aire entre las cards de texto y las imágenes
   (presa / tendido), forzando scroll innecesario. Acercamos las imágenes
   subiendo el margin-top y reduciendo la reserva min-height, y las hacemos
   más grandes (max-width 480 → 580) para que tengan más protagonismo.
   ============================================================ */
.section-compromiso .compromiso-imgs {
  margin-top: 8px !important;    /* antes 40px — imagenes más cerca de los textos */
}
.section-compromiso .compromiso-img-wrap {
  min-height: 140px;              /* antes 220px — menos reserva vertical, más compacto */
}
.section-compromiso .compromiso-img-wrap img {
  max-width: 580px;               /* antes 480px — imágenes más grandes */
}
.section-compromiso .compromiso-textos {
  margin-top: 20px !important;    /* antes 32px — textos más cerca de la barra azul */
}

/* ===== 41. INSTALACIÓN — "Tres pasos" rediseño PPT (peticion AS) =====
   Layout 2 columnas: izquierda lista vertical de pasos con numero grande naranja
   + textos navy/gris, derecha badge amarillo + imagen decorativa (cerdito).
   El bloque vive sobre fondo blanco (no navy como antes).
   En el paso 3, el <em>...</em> que viene del campo `texto` se renderiza en
   cursiva+bold navy debajo del texto principal (estilo PPT).
   Mobile <900px: 1 columna, decoracion debajo.
   ============================================================ */

/* Titulo de la seccion en italic (estilo PPT) */
.section-title.proceso-titulo-italic {
  font-style: italic;
}

/* Override del padding global de .section-white solo para #proceso: bloque mas
   compacto para que todo el contenido quepa en una vista (peticion AS). */
.section-white#proceso { padding: 70px 0; }

/* Layout 2 columnas */
.proceso-layout-ppt {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* Columna izquierda: lista vertical de pasos */
.proceso-steps-vertical {
  display: flex;
  flex-direction: column;
  gap: 28px;                      /* antes 40px — mas compacto entre pasos (peticion AS) */
}
.proceso-step-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 20px;
  align-items: start;
}
.proceso-step-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 80px;
  font-weight: 800;
  color: var(--orange);
  line-height: 0.9;
  text-align: center;
  letter-spacing: -2px;
}
.proceso-step-body { padding-top: 8px; }
.proceso-step-titulo {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
  line-height: 1.25;
}
.proceso-step-texto {
  font-size: var(--fs-min);
  color: var(--gray);
  line-height: 1.7;
  margin: 0;
}
.proceso-step-texto strong { color: var(--navy); font-weight: 700; }
/* <em> dentro del texto del paso (frase de garantia del paso 3): italic+bold navy,
   con un poco de aire arriba para separarse del parrafo anterior. */
.proceso-step-texto em {
  display: block;
  margin-top: 12px;
  font-style: italic;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
  font-size: var(--fs-min);
}

/* Columna derecha: badge + imagen lateral, apilados verticalmente */
.proceso-decoracion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Badge amarillo con titulo pequeño arriba (2 lineas) y valor grande+icono abajo */
.proceso-badge {
  background: #FFEB3B;
  border: 3px solid var(--navy);
  border-radius: 18px;
  padding: 22px 38px;             /* antes 18 32 — mas generoso (peticion AS) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(27,43,94,0.10);
  max-width: 440px;               /* antes 360 — mas ancho (peticion AS) */
  width: 100%;
  text-align: center;
}
.proceso-badge-titulo {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;                /* antes 17 — mas grande (peticion AS) */
  font-weight: 800;
  letter-spacing: 2px;            /* antes 1.5 */
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.15;
  /* max-width:12ch fuerza wrap natural en el espacio: "INSTALACIÓN" / "RÁPIDA".
     Si AS cambia el texto a algo más corto, sigue cabiendo en una linea. */
  max-width: 12ch;
  margin: 0 auto;
}
.proceso-badge-valor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;                      /* antes 14 */
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(36px, 4vw, 52px); /* antes clamp(28, 3.2vw, 40) — mas grande */
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.proceso-badge-icono {
  display: inline-flex;
  align-items: center;
  color: var(--navy);
  flex-shrink: 0;
}
.proceso-badge-icono img {
  max-height: 54px;               /* antes 44 */
  width: auto;
  display: block;
}
.proceso-badge-icono svg {
  width: 50px;                    /* SVG default: antes 40 */
  height: 50px;
}

/* Imagen lateral (cerdito ahorro) */
.proceso-imagen-lateral {
  display: flex;
  justify-content: center;
  width: 100%;
}
.proceso-imagen-lateral img {
  max-width: 360px;               /* antes 280 — cerdito mas grande (peticion AS) */
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive: tablet/mobile a 1 columna, decoracion debajo de los pasos */
@media (max-width: 900px) {
  .proceso-layout-ppt {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .proceso-decoracion {
    flex-direction: column;
    gap: 20px;
  }
  .proceso-step-row {
    grid-template-columns: 64px 1fr;
    gap: 16px;
  }
  .proceso-step-num {
    font-size: 60px;
  }
  .proceso-step-titulo { font-size: 19px; }
  .proceso-imagen-lateral img { max-width: 280px; }   /* antes 220 — cerdito mas grande tambien en mobile */
}
@media (max-width: 560px) {
  .proceso-badge { padding: 14px 22px; }
  .proceso-badge-valor { gap: 10px; }
  .proceso-badge-icono img { max-height: 36px; }
}

/* ===== 42. INSTALACIÓN — Gama de productos: 4 cards/linea agrupadas =====
   Override del .modelos-grid base (repeat(2,1fr)) para presentar las cards en
   4 columnas, organizadas en dos grupos con cabecera: INDUSTRY (4 cards
   pequeñas: CO-80 a CO-300) y MAIN TR (4 cards grandes: CO-500 a CO-1500).
   Reduccion tipografica para que quepan cómodamente. El layout base de
   .modelos-grid sigue intacto para otras paginas si lo usaran (peticion AS).
   ============================================================ */

.modelos-grupo { margin-bottom: 32px; }
.modelos-grupo:last-child { margin-bottom: 0; }

.modelos-grupo-titulo {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--navy);
  padding: 12px 24px;
  border-radius: var(--radius) var(--radius) 0 0;
  margin: 0;
  text-align: center;
  line-height: 1.2;
}

/* Override 4 columnas en desktop (variante .modelos-grid-4) */
.modelos-grid.modelos-grid-4 {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px;                     /* antes 24 — mas compacto para 4 cards */
  margin-top: 0;                 /* el header del grupo da el espacio */
}

/* Reduccion tipografica de cards dentro de un grupo .modelos-grid-4 */
.modelos-grid-4 .modelo-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;    /* se acopla al header del grupo */
}
.modelos-grid-4 .modelo-header {
  padding: 14px 18px;            /* antes 24 */
}
.modelos-grid-4 .modelo-id {
  font-size: 22px;               /* antes 28 */
  margin-bottom: 0;
  text-align: center;
}
.modelos-grid-4 .modelo-specs {
  padding: 12px 16px;            /* antes 20 24 */
  gap: 4px;                      /* antes 8 */
}
.modelos-grid-4 .spec-row {
  font-size: 13px;               /* antes var(--fs-min) = 16px */
  padding: 4px 0;                /* antes 6 */
  gap: 8px;
}

/* Responsive: a 1024px bajar a 2 cols, a 560px a 1 col.
   Override de la regla base de cooper-v2.css que llevaba .modelos-grid a 1 col en 1024. */
@media (max-width: 1024px) {
  .modelos-grid.modelos-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .modelos-grid-4 .modelo-id { font-size: 24px; }
  .modelos-grid-4 .spec-row { font-size: 14px; }
}
@media (max-width: 560px) {
  .modelos-grid.modelos-grid-4 { grid-template-columns: 1fr !important; }
  .modelos-grupo-titulo { font-size: 16px; letter-spacing: 2px; padding: 10px 18px; }
}