/* =============================
   MODO OSCURO: Correcciones específicas para tarjetas, títulos y botones
   ============================= */
/* Index: tarjetas principales e internas en 'Quiénes somos' y '¿Por qué elegir SEESA?' */
body.theme-nocturne .about-main-card,
body.theme-nocturne .about-inner-card,
body.theme-nocturne .why-seesa-card,
body.theme-nocturne .why-seesa-card *,
body.theme-nocturne .stock-card,
body.theme-nocturne .garantia-card,
body.theme-nocturne .marcas-card {
  background: #181f2a !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}

/* Forzar modo oscuro en tarjetas de 'Quiénes somos' (about-section) */
body.theme-nocturne .about-section,
body.theme-nocturne .about-section .rubros-card {
  background: #181f2a !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}
body.theme-nocturne .about-section .rubros-card * {
  color: #fff !important;
}
/* Eliminar fondo blanco del contenedor de 'Lo que nos define' en modo oscuro */
body.theme-nocturne .about-section .p-3.rounded-3.border.shadow-sm {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Títulos principales en renovables y electrónica */
body.theme-nocturne .hero-solar h1,
body.theme-nocturne .hero-elec h1,
body.theme-nocturne .hero-solar .section-title,
body.theme-nocturne .hero-elec .section-title {
  color: #fff !important;
  text-shadow: 0 2px 8px #000;
}

/* Botones 'Tienda' en tarjetas de categoría */
body.theme-nocturne .btn-store,
body.theme-nocturne .btn-tienda,
body.theme-nocturne .btn-outline-dark {
  background: #232b3a !important;
  color: #fff !important;
  border-color: #fff !important;
}
body.theme-nocturne .btn-store:hover,
body.theme-nocturne .btn-tienda:hover,
body.theme-nocturne .btn-outline-dark:hover {
  background: #2d3748 !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* Tarjetas de precios en detalles de productos (catálogo) */
body.theme-nocturne .product-price-card,
body.theme-nocturne .catalog-price-card,
body.theme-nocturne .product-detail-card,
body.theme-nocturne .catalog-detail-card {
  background: #181f2a !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}

/* Electrónica: tarjeta '¿Por qué SEESA Electrónica?' */
body.theme-nocturne .why-seesa-elec-card {
  background: #181f2a !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}
/* =============================
   MODO OSCURO: Forzar textos secundarios y overlays legibles
   ============================= */
body.theme-nocturne .text-muted,
body.theme-nocturne .small,
body.theme-nocturne .card-footer,
body.theme-nocturne .card-desc,
body.theme-nocturne .img-caption,
body.theme-nocturne .img-label,
body.theme-nocturne .img-text,
body.theme-nocturne .card-count,
body.theme-nocturne .counter,
body.theme-nocturne .category-label,
body.theme-nocturne .card-info,
body.theme-nocturne .card-text,
body.theme-nocturne .card-subtitle {
  color: #e4e9f2 !important;
}
body.theme-nocturne .text-dark,
body.theme-nocturne .text-body {
  color: #fff !important;
}
body.theme-nocturne .img-caption,
body.theme-nocturne .img-label,
body.theme-nocturne .img-text {
  text-shadow: 0 2px 8px #000;
}
/* =============================
   FOOTER SEESA - ESTILO CLÁSICO
   ============================= */
.site-footer {
  background: var(--footer-bg, #0c1424);
  color: #fff;
  padding: 2.2rem 0 1.2rem 0;
  border-top: 1.5px solid var(--footer-border, rgba(255,255,255,0.08));
  font-size: 1.08rem;
}

.site-footer .footer-brand {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: #fff;
}

.site-footer .text-footer-muted {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.98rem;
}

@media (max-width: 767px) {
  .site-footer {
    padding: 1.2rem 0 0.7rem 0;
    font-size: 0.98rem;
  }
  .site-footer .footer-brand {
    font-size: 1.08rem;
  }
}
:root {
  --brand-primary: #0d6efd;
  --brand-secondary: #ff9f1c;
  --brand-accent: #1c8cff;
  --brand-dark: #1d1f24;
  --brand-text: #1d1f24;
  --brand-muted: #6c757d;
  --solar-color: #ff8b2e;
  --solar-color-dark: #c96f1d;
  --electronica-color: #0d6efd;
  --electronica-color-dark: #0a53b5;
  --hero-home: #f5f8ff;
  --hero-elec-start: #e9f5ff;
  --hero-elec-end: #d9f0ff;
  --hero-solar-start: #fff4e5;
  --hero-solar-end: #ffe4c2;
  --floating-btn-bg: #0d6efd;
  --floating-btn-shadow: rgba(13, 110, 253, 0.4);
  --rubros-solar-border: #ff8b2e;
  --rubros-elec-border: #0d6efd;
  --card-shadow: rgba(15, 23, 42, 0.08);
  --card-shadow-hover: rgba(15, 23, 42, 0.12);
  --footer-bg: #0c1424;
  --footer-border: rgba(255, 255, 255, 0.08);
  --bs-primary: var(--brand-primary);
  --bs-warning: var(--brand-secondary);
  --scroll-offset: 88px;
}

body.theme-aurora {
  --brand-primary: #ff5c35;
  --brand-secondary: #ffd166;
  --brand-accent: #912b1c;
  --brand-dark: #2e1a13;
  --brand-text: #2e1a13;
  --brand-muted: #7b5a4d;
  --hero-home: #f5f5f7;
  --hero-elec-start: #f2f2f4;
  --hero-elec-end: #e6e6ea;
  --hero-solar-start: #f4f2f0;
  --hero-solar-end: #eceae8;
  --floating-btn-bg: #ff5c35;
  --floating-btn-shadow: rgba(255, 92, 53, 0.35);
  --card-shadow: rgba(255, 92, 53, 0.08);
  --card-shadow-hover: rgba(255, 92, 53, 0.18);
  --footer-bg: #2a1a14;
  --footer-border: rgba(255, 255, 255, 0.12);
  --bs-primary: #ff5c35;
  --bs-warning: #ffd166;
}

body.theme-pacific {
  --brand-primary: #0091ff;
  --brand-secondary: #4af2c7;
  --brand-accent: #045ea0;
  --brand-dark: #042236;
  --brand-text: #052033;
  --brand-muted: #4d6474;
  --hero-home: #f3f5f6;
  --hero-elec-start: #f1f3f5;
  --hero-elec-end: #e7eaee;
  --hero-solar-start: #f2f4f4;
  --hero-solar-end: #e9eded;
  --floating-btn-bg: #0091ff;
  --floating-btn-shadow: rgba(0, 145, 255, 0.35);
  --card-shadow: rgba(4, 34, 54, 0.08);
  --card-shadow-hover: rgba(4, 34, 54, 0.18);
  --footer-bg: #031f32;
  --footer-border: rgba(255, 255, 255, 0.1);
  --bs-primary: #0091ff;
  --bs-warning: #4af2c7;
}

body.theme-nocturne {
  --brand-primary: #5ec8ff;
  --brand-secondary: #ff9f1c;
  --brand-accent: #1fbad6;
  --brand-dark: #010409;
  --brand-text: #e8edf5;
  --brand-muted: #8892a6;
  --hero-home: #0d1117;
  --hero-elec-start: #0a1019;
  --hero-elec-end: #0f1825;
  --hero-solar-start: #14161c;
  --hero-solar-end: #1a1f2b;
  --floating-btn-bg: #5ec8ff;
  --floating-btn-shadow: rgba(94, 200, 255, 0.35);
  --card-shadow: rgba(0, 0, 0, 0.4);
  --card-shadow-hover: rgba(0, 0, 0, 0.55);
  --footer-bg: #00050b;
  --footer-border: rgba(94, 200, 255, 0.25);
  --bs-primary: #5ec8ff;
  --bs-warning: #ff9f1c;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--brand-text);
  background: #ffffff;
}

main {
  background: #fff;
}

body.theme-nocturne {
  background: #010409;
}

body.theme-nocturne main {
  background: #0d1117;
}

body.theme-nocturne .section-title {
  color: #f5f7fb;
}

body.theme-nocturne .section-subtitle {
  color: #9aa4b5;
}

body.theme-nocturne .rubros-card,
body.theme-nocturne .cat-card,
body.theme-nocturne .project-card,
body.theme-nocturne .projects-archive,
body.theme-nocturne .project-entry,
body.theme-nocturne .projects-archive-detail .project-article,
body.theme-nocturne .card,
body.theme-nocturne .card-body,
body.theme-nocturne .card-header {
  background: #111827 !important;
  color: #fff !important;
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.45);
}

body.theme-nocturne .card * {
  color: #fff !important;
}

body.theme-nocturne .modal-content,
body.theme-nocturne .modal-body,
body.theme-nocturne .modal-header,
body.theme-nocturne .modal-footer {
  background: #111827 !important;
  color: #fff !important;
}
body.theme-nocturne .modal-content * {
  color: #fff !important;
}

body.theme-nocturne .bg-light {
  background-color: #111827 !important;
}

body.theme-nocturne .btn-outline-primary,
body.theme-nocturne .btn-outline-secondary {
  color: var(--brand-text);
  border-color: rgba(255, 255, 255, 0.3);
}

.navbar-brand img {
  height: 80px;
}

.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .btn {
  display: flex;
  align-items: center;
}

.navbar .nav-link.active {
  font-weight: 600;
  color: var(--brand-primary) !important;
}

body.theme-nocturne .navbar {
  background-color: #0d1117 !important;
}

body.theme-nocturne .navbar .nav-link {
  color: rgba(232, 237, 245, 0.85);
}

body.theme-nocturne .navbar .nav-link.active {
  color: #5ec8ff !important;
}

.hero,
.hero-elec,
.hero-solar {
  padding: 6rem 0 4rem;
}

.hero {
  background: var(--hero-home);
}

.hero-elec {
  background: linear-gradient(90deg, var(--hero-elec-start), var(--hero-elec-end));
}

.hero-solar {
  background: linear-gradient(90deg, var(--hero-solar-start), var(--hero-solar-end));
}

.hero-carousel-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 260px;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(13, 17, 23, 0.18);
  background: #000;
}

.hero-carousel {
  height: 100%;
}

.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
  height: 100%;
}

.hero-carousel .carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  width: 48px;
}

.hero-carousel .carousel-indicators {
  bottom: 1rem;
}

@media (max-width: 991px) {
  .hero-carousel-wrapper {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 575px) {
  .hero-carousel-wrapper {
    aspect-ratio: 4 / 3;
  }
}

@supports not (aspect-ratio: 1 / 1) {
  .hero-carousel-wrapper {
    padding-top: 45%;
  }

  .hero-carousel-wrapper .hero-carousel {
    position: absolute;
    inset: 0;
  }
}

.section-title {
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.section-subtitle {
  color: var(--brand-muted);
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.65;
}

.list-check {
  list-style: none;
  padding-left: 0;
}

.list-check li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.7rem;
}

.list-check li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-primary);
  font-weight: 600;
}

.rubros-card,
.cat-card,
.project-card {
  border-radius: 1rem;
  box-shadow: 0 10px 30px var(--card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rubros-card,
.cat-card {
  padding: 2rem;
  height: 100%;
  background: #fff;
}

.rubros-card:hover,
.cat-card:hover,
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px var(--card-shadow-hover);
}

.rubros-solar {
  border-top: 5px solid var(--rubros-solar-border);
}

.rubros-elec {
  border-top: 5px solid var(--rubros-elec-border);
}

.project-card img {
  border-radius: 1rem 1rem 0 0;
}

/* Uniformizar tamaño de imágenes en tarjetas de proyectos */
.project-card {
  /* garantizar que la tarjeta sea un contenedor columnar y pueda estirarse */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.project-card .card-img-top,
.project-card img.card-img-top {
  width: 100%;
  height: 200px;           /* altura base en móvil */
  object-fit: cover;       /* llenar el recuadro sin distorsión */
  object-position: center; /* recorte centrado */
  display: block;
  border-radius: 1rem 1rem 0 0; /* conservar estética */
}

/* Asegurar que el cuerpo de la tarjeta ocupe el resto del espacio */
.project-card .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Ajustes por breakpoints para mejor proporción */
@media (min-width: 576px) {
  .project-card .card-img-top { height: 220px; }
}
@media (min-width: 768px) {
  .project-card .card-img-top { height: 260px; }
}
@media (min-width: 1200px) {
  .project-card .card-img-top { height: 300px; }
}

.team-photo {
  width: 161px;
  height: 161px;
  object-fit: cover;
  /* mantener fondo/placeholder si no hay imagen */
  background: linear-gradient(135deg, #ced4da, #f1f3f5);
  display: inline-block;
}

.floating-back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 999;
  width: 47.6px;
  height: 47.6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--floating-btn-bg);
  box-shadow: 0 12px 30px var(--floating-btn-shadow);
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
}

.floating-back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.floating-back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px var(--floating-btn-shadow);
}

.floating-back-to-top span {
  font-size: 1.19rem;
  line-height: 1;
  font-weight: bold;
}

.floating-btn-warning {
  background: var(--brand-secondary);
  box-shadow: 0 12px 30px rgba(246, 183, 86, 0.35);
}

.floating-btn-primary {
  background: var(--brand-primary);
}

.btn-solar {
  color: #fff !important;
  background-color: var(--solar-color);
  border-color: var(--solar-color);
  padding: .625rem 1rem;
  font-size: 1rem;
  font-weight: 500;
}

.btn-solar:hover {
  color: #fff !important;
  background-color: var(--solar-color-dark);
  border-color: var(--solar-color-dark);
}

.btn-outline-solar {
  color: var(--solar-color);
  border-color: var(--solar-color);
}

.btn-outline-solar:hover {
  color: #1f1404;
  background-color: var(--solar-color);
  border-color: var(--solar-color);
}

.btn-electronica {
  color: #fff;
  background-color: var(--electronica-color);
  border-color: var(--electronica-color);
  padding: .625rem 1rem;
  font-size: 1rem;
  font-weight: 500;
}

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

.btn-outline-electronica {
  color: var(--electronica-color);
  border-color: var(--electronica-color);
}

.btn-outline-electronica:hover {
  color: #fff;
  background-color: var(--electronica-color);
  border-color: var(--electronica-color);
}

.projects-archive {
  border-radius: 1rem;
}

.projects-archive-list {
  display: grid;
  gap: 1rem;
}

.project-entry {
  border-radius: 1rem;
  padding: 1.25rem;
  background: #fff;
  box-shadow: 0 10px 26px var(--card-shadow);
}

.project-entry-header {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.5rem;
}

.project-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 0.8rem;
  margin-right: 0.35rem;
}

.projects-archive-detail .project-article img {
  max-height: 320px;
  object-fit: cover;
  width: 100%;
}

.projects-archive-detail p {
  line-height: 1.6;
}

.theme-switcher {
  width: 220px;
}

.theme-switcher select {
  border-radius: 0.5rem;
}

.theme-switcher,
#theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .85rem;        /* tamano del texto del control */
  padding: .15rem .4rem;    /* espacio interno */
  border-radius: .4rem;
  background: rgba(0,0,0,0.03);
  color: inherit;
  cursor: pointer;
  transition: background .12s ease;
  user-select: none;
}

/* Variante aun mas pequena si se necesita */
.theme-switcher.compact,
#theme-switcher.compact {
  font-size: .75rem;
  padding: .08rem .28rem;
}

/* Theme switcher: visible por defecto (fallback fijo) */
#theme-switcher,
.theme-switcher {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  right: auto;
  top: auto;
  z-index: 1080;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .45rem;
  font-size: .85rem;
  border-radius: .45rem;
  background: rgba(255,255,255,0.96);
  color: inherit;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}

/* Compacto para pantallas pequenas */
#theme-switcher.compact,
.theme-switcher.compact {
  font-size: .75rem;
  padding: .06rem .28rem;
}

/* Cuando se inserta en navbar (ajusta visual dentro del contenedor) */
#theme-switcher.in-navbar,
.theme-switcher.in-navbar {
  position: relative;
  top: auto;
  right: auto;
  z-index: auto;
  margin-left: .5rem;
}

/* Eliminadas reglas de theme-switcher */
.navbar .theme-switcher,
.navbar #theme-switcher {
  margin-left: 0;
  margin-top: .25rem;
}

/* Proyectos - modal y vistas */
#projects-by-year h6 { font-weight:700; margin-top:1rem; margin-bottom:.5rem; }
#projects-by-year .card { min-height: 220px; }
#project-detail img { max-height: 280px; object-fit: cover; }
#article-body img { max-height: 360px; object-fit: cover; width: 100%; margin-bottom: .75rem; }

/* Pequenos ajustes visuales para entrada/articulo */
#article-body p { line-height: 1.6; }

/* Carousel moderno y profesional -------------------------------------------------- */
/* Ajustes: alturas más generosas y transiciones más suaves para que no se vea pequeño ni rápido */
.carousel-modern {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #f7fafc;
}

/* El contenedor define la altura; la imagen debe rellenarlo, no al revés */
.carousel-modern .carousel-inner,
.carousel-modern .carousel-item {
  width: 100%;
  min-height: 420px; /* presencia visual consistente */
  height: auto;
  display: block;
  position: relative;
}

/* Imagen: ocupa todo el contenedor (no condiciona el tamaño del mismo) */
.carousel-modern .carousel-image {
  width: 100%;
  height: 100%;         /* llena el contenedor */
  object-fit: cover;    /* recorte consistente */
  object-position: center;
  display: block;
  transition: none;     /* sin efectos intrusivos */
  background-color: #f3f6f9;
}

/* Controles posicionados absolutamente y centrados verticalmente */
.carousel-modern .carousel-control-prev,
.carousel-modern .carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;               /* siempre por encima de slides */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0,0,0,0.46);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .95;
  transition: background .12s ease, transform .12s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.carousel-modern .carousel-control-prev { left: 0.9rem; }
.carousel-modern .carousel-control-next { right: 0.9rem; }
.carousel-modern .carousel-control-prev-icon,
.carousel-modern .carousel-control-next-icon {
  width: 1.2rem;
  height: 1.2rem;
}

/* Indicadores y controles siempre encima */
.carousel-modern .carousel-indicators { z-index: 22; bottom: 1rem; }

/* Forzar que la diapositiva activa esté visible sobre las demás durante la transición */
.carousel-modern .carousel-item { opacity: 0; transition: opacity .45s ease; z-index: 1; }
.carousel-modern .carousel-item.active { opacity: 1; z-index: 10; }

/* Ajustes responsive: reducir min-height en pantallas pequeñas */
@media (max-width: 575px) {
  .carousel-modern .carousel-inner,
  .carousel-modern .carousel-item { min-height: 260px; }
  .carousel-modern .carousel-image { min-height: 260px; }
}

/* Fin - Carousel moderno (ajustes de tamaño/velocidad visibles) ------------------ */


.carousel-modern.fade .carousel-item {
  opacity: 0;
  transition: opacity .6s ease;
}
.carousel-modern.fade .carousel-item.active {
  opacity: 1;
}

.carousel-modern .carousel-item:hover .carousel-image {
  transform: scale(1.02);
}

@media (max-width: 991px) {
  .carousel-modern .carousel-caption-wrapper { max-width: 72%; left: .9rem; right: .9rem; bottom: 1rem; padding: .8rem; }
  .carousel-modern .carousel-caption-wrapper h3 { font-size: 1.1rem; }
  .carousel-modern .carousel-image { aspect-ratio: 16 / 9; min-height: 300px; }
}
@media (max-width: 575px) {
  .carousel-modern .carousel-caption-wrapper { position: relative; bottom: 0.6rem; left: .6rem; right: .6rem; max-width: calc(100% - 1.2rem); padding: .65rem; }
  .carousel-modern .carousel-caption-wrapper h3 { font-size: 1rem; }
  .carousel-modern .carousel-image { aspect-ratio: 4 / 3; min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-modern .carousel-image,
  .carousel-modern .carousel-item,
  .carousel-modern .carousel-indicators [data-bs-target] {
    transition: none !important;
  }
}

.carousel-modern.no-overlay .carousel-overlay { display: none; }
.carousel-modern.caption-bottom .carousel-caption-wrapper { left: 50%; transform: translateX(-50%); bottom: 1rem; max-width: 86%; }
/* Fin - Carousel moderno ------------------------------------------------------- */
/* Preferencias de reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .carousel-modern .carousel-image,
  .carousel-modern .carousel-item,
  .carousel-modern .carousel-indicators [data-bs-target] {
    transition: none !important;
  }
}

/* Utilidades: ocultar overlay o caption si se necesita */
.carousel-modern.no-overlay .carousel-overlay { display: none; }
.carousel-modern.caption-bottom .carousel-caption-wrapper { left: 50%; transform: translateX(-50%); bottom: 1rem; max-width: 86%; }

/* Fin - Carousel moderno ------------------------------------------------------- */

/* Carousel simple y legible (sin overlays ni efectos llamativos) ----------------- */
.carousel-simple {
  border-radius: 1rem;
  overflow: hidden;
  background: #f7fafc;
  position: relative;
}

/* El contenedor controla la altura, la imagen rellena */
.carousel-simple .carousel-inner,
.carousel-simple .carousel-item {
  min-height: 420px;
  height: auto;
  display: block;
  position: relative;
}

/* Imagen rellena el contenedor */
.carousel-simple .carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  min-height: 420px;
  transition: none;
}

/* Eliminar overlays/captions y jerarquizar z-index */
.carousel-simple .carousel-overlay,
.carousel-simple .carousel-caption-wrapper,
.carousel-simple .carousel-caption { display: none !important; }
.carousel-simple .carousel-item { z-index: 1; opacity: 0; transition: opacity .45s ease; }
.carousel-simple .carousel-item.active { z-index: 10; opacity: 1; }

/* Controles centrados verticalmente y siempre encima */
.carousel-simple .carousel-control-prev,
.carousel-simple .carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.carousel-simple .carousel-control-prev { left: 0.9rem; }
.carousel-simple .carousel-control-next { right: 0.9rem; }

/* Indicadores encima */
.carousel-simple .carousel-indicators { z-index: 22; bottom: 1rem; }

/* Responsive */
@media (max-width: 575px) {
  .carousel-simple .carousel-inner,
  .carousel-simple .carousel-item { min-height: 260px; }
  .carousel-simple .carousel-image { min-height: 260px; }
}

/* Fin - Carousel simple -------------------------------------------------------- */
/* Centrar y recortar la imagen correctamente */
.carousel-simple .carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  min-height: 420px;
  transition: none; /* sin efectos de movimiento */
  border-radius: 0;
}

/* Eliminar overlays/captions heredadas: carrusel simple y legible */
.carousel-simple .carousel-overlay,
.carousel-simple .carousel-caption-wrapper,
.carousel-simple .carousel-caption {
  display: none !important;
}

/* Forzar que la diapositiva activa quede por encima durante la transición */
.carousel-simple .carousel-item {
  z-index: 1;
  opacity: 0;
  transition: opacity .45s ease;
}
.carousel-simple .carousel-item.active {
  z-index: 3;
  opacity: 1;
}

/* Asegurar que los estados "next"/"prev" tengan z-index intermedio si aparecen */
.carousel-simple .carousel-item.carousel-item-next,
.carousel-simple .carousel-item.carousel-item-prev {
  z-index: 2;
}

/* Controles e indicadores siempre encima */
.carousel-simple .carousel-control-prev,
.carousel-simple .carousel-control-next,
.carousel-simple .carousel-indicators {
  z-index: 5;
}

/* Ajustes de tamaño para controles (más visibles) */
.carousel-simple .carousel-control-prev,
.carousel-simple .carousel-control-next {
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Indicadores discretos pero legibles */
.carousel-simple .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) inset;
}
.carousel-simple .carousel-indicators .active {
  background: var(--brand-primary);
  transform: scale(1.12);
}

/* Responsive: menor altura en móviles */
@media (max-width: 575px) {
  .carousel-simple .carousel-inner,
  .carousel-simple .carousel-item { min-height: 260px; }
  .carousel-simple .carousel-image { min-height: 260px; object-position: center; }
}

/* Fin - Carousel simple -------------------------------------------------------- */

/* MAPA: asegurar altura adecuada y presencia */
.map-container {
  width: 100%;
  height: 360px;    /* altura base más visible */
  max-height: 560px;
  overflow: hidden;
  border-radius: .5rem;
}
@media (min-width: 992px) {
  .map-container { height: 480px; } /* mayor altura en desktop */
}
.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Modal About - disposición: banner izquierda, contenido centro, video derecha */
.about-modal .modal-content { border-radius: .75rem; }
.about-modal .modal-body { max-height: 82vh; }

/* Modal About: layout equilibrado (banner izq, texto centro, video der) */
.about-modal .modal-dialog { max-width: 1200px; }
.about-modal .modal-content { border-radius: .75rem; overflow: hidden; }
.about-modal .modal-body { max-height: 82vh; overflow: auto; padding: 0; }

/* Row principal: forzar altura mínima y que las columnas estiren igual */
.about-grid { min-height: 380px; }

/* Cada columna usa flex para centrar su contenido y mantener altura igual */
.about-grid > [class*="col-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

/* Banner izquierdo: fondo azul que cubre toda la columna */
.about-visual {
  background: linear-gradient(180deg, #0d6efd 0%, #0a58ca 100%);
  color: #fff;
  width: 100%;
  height: 100%;
  padding: 0;
}
.about-visual .about-logo {
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: .08em;
  text-align: center;
  padding: 1rem;
}

/* Contenido central: texto centrado tanto horizontal como verticalmente */
.about-content { padding: 0; }
.about-content .w-100 { max-width: 820px; }
.about-content .lead,
.about-content p { color: var(--brand-dark); margin-bottom: .75rem; }

/* Video (derecha): ocupa su columna y es responsivo */
.about-video { padding: 0 0.75rem; }
.video-embed { width: 100%; aspect-ratio: 16/9; border-radius: .5rem; overflow: hidden; background: #000; }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Misíon/Visión: tarjetas en fila inferior, ya añadidas; asegurar separación en desktop */
@media (min-width: 992px) {
  .about-modal .modal-body .container .row.g-3 { padding: 1rem 0 1.25rem; }
}

/* Responsive: apilar columnas en móviles */
@media (max-width: 991px) {
  .about-grid { min-height: auto; }
  .about-grid > [class*="col-"] { padding: .75rem 1rem; }
  .about-visual { order: 1; }
  .about-content { order: 2; }
  .about-video { order: 3; padding: 0 1rem 1rem; }
}

/* Fin - modal About */
@media (max-width: 767px) {
  .about-grid { flex-direction: column; }
  .about-visual { flex: none; width: 100%; min-height: 140px; }
}

/* Fin - estilos modal About */
/* Grid: usar Bootstrap row/cols, forzar igual altura */
.about-grid { height: 100%; min-height: 360px; }
.about-grid .about-visual,
.about-grid .about-main,
.about-grid .about-side,
.about-grid .about-video {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Banner izquierdo: fondo azul que cubre toda la columna y contenido centrado */
.about-visual {
  background: linear-gradient(180deg, #0d6efd 0%, #0a58ca 100%);
  color: #fff;
  padding: 1rem;
  width: 100%;
  height: 100%;
}
.about-visual .about-logo {
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: .08em;
  text-align: center;
}

/* Contenido central: texto centrado verticalmente, video debajo del texto */
.about-main { align-items: center; }
.about-main .about-text { width: 100%; }
.video-wrap { width: 100%; margin-top: .75rem; }
.video-embed { width: 100%; aspect-ratio: 16/9; border-radius: .5rem; overflow: hidden; background: #000; }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Lado derecho: tarjetas misíon/visión centradas verticalmente */
.about-side { align-items: center; }
.about-side .card { width: 100%; border-radius: .6rem; }

/* Asegurar que las columnas se estiren a la misma altura */
.about-grid .col-12.col-lg-3,
.about-grid .col-12.col-lg-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Responsive: apilar en móviles */
@media (max-width: 991px) {
  .about-grid { min-height: auto; }
  .about-grid { flex-direction: column; }
  .about-visual, .about-main, .about-side { padding: .75rem 1rem; }
  .about-visual { order: 1; }
  .about-main { order: 2; }
  .about-side { order: 3; }
}

/* Fin - modal About */
@media (max-width: 767px) {
  .about-grid { flex-direction: column; }
  .about-visual { flex: none; width: 100%; min-height: 140px; }
}

/* Fin - estilos modal About */

/*
 * BLOQUE ANTIGUO DESACTIVADO.
 * Se conserva completo, pero no se aplica porque fue diseñado para mostrar
 * "Nuestra oferta" encima de una imagen con fondos oscuros y texto blanco.
 */
@media not all {
/* Fondo estático para la sección "Nuestras líneas" */
#nuestras-lineas {
  position: relative;
  overflow: hidden;
  /* ruta relativa desde assets/css/common.css hacia la imagen */
  /* Imagen de fondo desactivada a solicitud:
  background-image: url("../imagenes/back/paneles-paisaje-01.jpg");
  */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed; /* fondo fijo al hacer scroll */
  color: inherit;
  min-height: 360px; /* asegura presencia visual, ajustar si se desea */
}

/* Capa overlay sutil para mejorar legibilidad del texto sobre la imagen
    -> cambiado a blanco de baja opacidad (0.08) */
#nuestras-lineas::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.25); /* capa blanca tenue: 25% de opacidad */
  z-index: 1;
  pointer-events: none;
}

/* Mantener el contenido por encima del overlay */
#nuestras-lineas .container {
  position: relative;
  z-index: 2;
  /* fondo semitransparente para separar el contenido de la imagen */
  background: rgba(0, 0, 0, 0.28); /* color oscuro translúcido - ajustar si prefieres otro tono */
  padding: 2rem;
  border-radius: 0.75rem;
}

/* Reducir padding en móviles para no ocupar demasiada altura */
@media (max-width: 767px) {
  #nuestras-lineas .container {
    padding: 1rem;
    border-radius: 0.5rem;
  }
}

/* Texto blanco para toda la sección "Nuestras líneas" */
#nuestras-lineas {
  color: #ffffff;
}

/* Titulares y subtítulos en blanco */
#nuestras-lineas .section-title,
#nuestras-lineas .section-subtitle {
  color: #ffffff;
}

/* Párrafos, listas y enlaces (texto general) */
#nuestras-lineas p,
#nuestras-lineas ul,
#nuestras-lineas li,
#nuestras-lineas a,
#nuestras-lineas .lead {
  color: #ffffff;
}

/* Tarjetas: fondo oscuro semitransparente para legibilidad del texto blanco */
#nuestras-lineas .rubros-card,
#nuestras-lineas .cat-card {
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  /* no se anulan los bordes aquí: dejamos que .rubros-solar / .rubros-elec dibujen el borde superior coloreado */
  border-radius: 1rem;
  overflow: hidden;
}

/* Titulares y párrafos dentro de las tarjetas */
#nuestras-lineas .rubros-card h3,
#nuestras-lineas .rubros-card p,
#nuestras-lineas .cat-card h3,
#nuestras-lineas .cat-card p {
  color: #ffffff;
}

/* Botones dentro de las tarjetas: forzar color de texto blanco para contraste */
#nuestras-lineas .rubros-card .btn,
#nuestras-lineas .cat-card .btn {
  color: #ffffff !important;
}

/* Ajuste para variantes específicas (si usan fondo claro, aseguramos contraste) */
#nuestras-lineas .btn-solar,
#nuestras-lineas .btn-electronica {
  /* conservar sus colores de fondo, pero asegurar texto blanco */
  color: #ffffff !important;
}

/* Mejora de contraste/legibilidad para textos en #nuestras-lineas */
#nuestras-lineas {
  --nuestras-text-main: #ffffff;          /* color principal (blanco puro) */
  --nuestras-text-muted: rgba(255,255,255,0.92); /* párrafos / cuerpo */
  --nuestras-text-sub: rgba(255,255,255,0.88);   /* subtítulos */
  --nuestras-text-shadow: 0 4px 18px rgba(0,0,0,0.45); /* sombra sutil para legibilidad */
}

/* Titular principal: blanco y sombra para sobresalir sobre zonas claras */
#nuestras-lineas .section-title {
  color: var(--nuestras-text-main);
  text-shadow: var(--nuestras-text-shadow);
  font-weight: 700;
}

/* Subtítulo: algo más tenue pero legible */
#nuestras-lineas .section-subtitle {
  color: var(--nuestras-text-sub);
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  margin-bottom: 1.25rem;
}

/* Texto general y lead: blanco casi opaco */
#nuestras-lineas p,
#nuestras-lineas .lead,
#nuestras-lineas ul,
#nuestras-lineas li {
  color: var(--nuestras-text-muted);
  text-shadow: 0 2px 10px rgba(0,0,0,0.32);
  line-height: 1.6;
}

/* Enlaces: color de acento visible y sombra ligera */
#nuestras-lineas a {
  color: #fff; /* se suele usar botón para llamada a la acción; aquí texto enlace en blanco */
  text-decoration: underline;
  text-shadow: 0 2px 8px rgba(0,0,0,0.28);
}

/* Botones dentro de la sección: asegurar texto contrastado */
#nuestras-lineas .rubros-card .btn,
#nuestras-lineas .cat-card .btn,
#nuestras-lineas .btn-solar,
#nuestras-lineas .btn-electronica {
  color: #fff !important;
  text-shadow: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Pequeño ajuste en tarjetas: reforzar el contraste del contenido interno */
#nuestras-lineas .rubros-card,
#nuestras-lineas .cat-card {
  /* preservar fondo semitransparente, pero subir contraste del interior */
  background: rgba(0,0,0,0.48);
}

/* Mobile: reducir intensidad de sombra para evitar halo excesivo */
@media (max-width: 767px) {
  #nuestras-lineas .section-title,
  #nuestras-lineas .section-subtitle,
  #nuestras-lineas p {
    text-shadow: 0 2px 8px rgba(0,0,0,0.28);
  }
}
}

/* Alinear la tarjeta de "Nuestra oferta" con el ancho máximo del carrusel. */
#nuestras-lineas > .container {
  max-width: 1400px;
}

/* Ajustes para que el modal utilice flex y el video/texto llenen su espacio */
.about-modal .modal-dialog {
  max-width: 1200px;
  height: 85vh;
  margin: 1rem auto;
}

.about-modal .modal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.about-modal .modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.about-modal .container-fluid {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Primera fila debe ocupar todo el espacio disponible */
.about-modal .container-fluid > .row:first-child {
  flex: 1;
  display: flex;
  align-items: stretch;
}

/* Columnas deben estirarse verticalmente */
.about-modal .about-grid > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* Video: ocupar TODO el espacio vertical disponible */
.about-modal .about-video {
  padding: 0 !important;
  margin: 0 !important;
}

.about-modal .about-video > div {
  padding: 0.25rem !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.about-modal .video-embed {
  flex: 1 !important;
  min-height: 0 !important;
  background: #000 !important;
  border-radius: .5rem !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0.25rem 0 !important;
}

/* Texto del video en la parte inferior */
.about-modal .about-video .mt-2 {
  flex: 0 0 auto;
  margin-top: 0.5rem;
}

/* Contenido central también debe llenar su espacio */
.about-modal .about-content .w-100 {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
}

/* Segunda fila: altura automática */
.about-modal .container-fluid > .row:nth-child(2) {
  flex: 0 0 auto;
}

/* Mobile: comportamiento diferente */
@media (max-width: 991px) {
  .about-modal .modal-dialog {
    height: auto;
    max-height: 95vh;
  }
  
  .about-modal .container-fluid > .row:first-child {
    flex: none;
  }
  
  .about-modal .video-embed {
    height: 250px;
    flex: none;
  }
  
  .about-modal .video-embed iframe {
    position: relative;
  }
}

/* === MODAL ABOUT - REGLAS LIMPIAS (REEMPLAZAR BLOQUE COMPLETO) === */

/* Modal principal */
.about-modal .modal-dialog {
  max-width: 1200px;
  margin: 1.25rem auto;
  /* usar una altura en viewport para dar espacio controlado */
  height: 78vh;
  max-height: 78vh;
}

.about-modal .modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: .75rem;
  overflow: hidden;
}

.about-modal .modal-body {
  flex: 1 1 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.about-modal .container-fluid {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Primera fila (banner + texto + vídeo) ocupa el espacio disponible */
.about-modal .about-grid {
  display: flex;
  flex: 1 1 auto;
  min-height: 0; /* importante para que los hijos puedan encoger en flex layouts */
  align-items: stretch;
  gap: 0;
}

/* Forzar que cada columna sea un contenedor columnar y no colapse */
.about-modal .about-grid > [class*="col-"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Banner izquierdo: centrado */
.about-modal .about-visual {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenido central: llenar el alto y centrar contenido */
.about-modal .about-content .w-100 {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
  box-sizing: border-box;
}

/* Columna del vídeo: sin padding excesivo y columna completa */
.about-modal .about-video {
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Contenedor del embed: ocupa todo el espacio disponible */
.about-modal .about-video .video-embed {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: .5rem;
  background: #000;
}

/* Iframe: absolutamente posicionado para cubrir el contenedor */
.about-modal .about-video .video-embed iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* Texto debajo del vídeo (no crece) */
.about-modal .about-video .mt-2 {
  flex: 0 0 auto;
  text-align: center;
  margin-top: .5rem;
}

/* Tarjetas MISIÓN / VISIÓN: asegurar misma altura cuando estén en una fila */
.about-modal .mission-card,
.about-modal .vision-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.about-modal .mission-card .card-body,
.about-modal .vision-card .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Asegurar que la fila de tarjetas no estire la fila principal */
.about-modal .container-fluid > .row:last-child {
  flex: 0 0 auto;
}

/* Responsive: en móvil apilar y dar altura razonable al vídeo */
@media (max-width: 991px) {
  .about-modal .modal-dialog {
    height: auto;
    max-height: 95vh;
  }
  .about-modal .about-grid {
    flex-direction: column;
  }
  .about-modal .about-video .video-embed {
    position: relative;
    height: 220px;
    flex: none;
  }
  .about-modal .about-video .video-embed iframe {
    position: relative !important;
    height: 100% !important;
  }
}

/* Pequeña protección extra: anular reglas anteriores conflictivas para vídeo */
.about-modal .video-embed,
.about-modal .video-embed iframe {
  max-width: 100%;
  box-sizing: border-box;
}

/* === fin reglas modal consolidadas === */

/* Reglas para nueva estructura del modal "Más sobre SEESA" */
/* Layout general del modal */
.about-modal .modal-dialog {
  max-width: 1200px;
  margin: 1.25rem auto;
  height: 78vh;
  max-height: 78vh;
}
.about-modal .modal-content { height: 100%; display:flex; flex-direction:column; overflow:hidden; border-radius:.75rem; }
.about-modal .modal-body { flex:1 1 auto; padding:0; display:flex; flex-direction:column; min-height:0; }

/* Container principal: columna - banner / contenido / tarjetas */
.about-modal .container-fluid { height:100%; display:flex; flex-direction:column; min-height:0; }

/* FILA 1 - Banner: altura fija (ajustable) */
.about-banner-row { flex: 0 0 12%; min-height:48px; } /* ajustar 12% según diseño */
.about-visual { width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:0; }

/* FILA 2 - Contenido: ocupa espacio restante y se divide en dos columnas iguales */
.about-content-row { flex: 1 1 auto; display:flex; gap:0; min-height:0; align-items:stretch; }
.about-content-row > .about-content { flex: 1 1 50%; display:flex; min-height:0; }
.about-content-row > .about-video   { flex: 1 1 50%; display:flex; min-height:0; }

/* Asegurar que el área de texto llene verticalmente y no se superponga */
.about-content .w-100 { height:100%; display:flex; flex-direction:column; justify-content:center; padding:1.25rem; box-sizing:border-box; }

/* Video: contenedor y iframe llenan toda la columna */
.about-video { padding:0; display:flex; flex-direction:column; min-height:0; }
.about-video .video-embed { position:relative; flex:1 1 auto; min-height:0; width:100%; height:100%; overflow:hidden; border-radius:.5rem; background:#000; }
.about-video .video-embed iframe { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:0 !important; }

/* FILA 3 - Tarjetas: altura natural, no estira la fila 2 */
.about-cards-row { flex: 0 0 auto; }

/* Misíon/Visión: asegurar misma altura cuando sea posible */
.mission-card, .vision-card { display:flex; flex-direction:column; height:100%; }
.mission-card .card-body, .vision-card .card-body { flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start; }

/* Responsive: en móvil apilar filas y dar altura razonable al vídeo */
@media (max-width:991px) {
  .about-banner-row { flex: 0 0 auto; }
  .about-content-row { flex-direction:column; }
  .about-content-row > .about-content,
  .about-content-row > .about-video { flex: none; width:100%; }
  .about-video .video-embed { height:220px; position:relative; flex:none; }
  .about-modal .modal-dialog { height:auto; max-height:95vh; margin:1rem; }
}

/* Protecciones: evitar márgenes/paddings heredados que creen huecos */
.about-modal .row.gx-0 { margin:0; padding:0; box-sizing:border-box; }

/* Ajustes específicos para el texto dentro del modal "Más sobre SEESA" */
.about-modal .about-content .w-100 {
  /* asegurar que el contenido comience desde arriba */
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 1rem;
}

/* Realce del primer párrafo */
.about-modal .about-content .lead.lead-strong {
  font-size: 1.18rem;      /* un poco más grande que el lead por defecto */
  font-weight: 700;
  line-height: 1.35;
  margin-top: 0;
  margin-bottom: 1rem;
  color: inherit;         /* respeta el tema (claro/oscuro) */
  text-align: left;
}

/* Justificar el resto del texto para mejor llenado del espacio */
.about-modal .about-content p {
  text-align: justify;
  text-justify: inter-word;
  color: inherit;
  margin-bottom: 1rem;
}

/* En móvil, mantener legibilidad y evitar tamaños excesivos */
@media (max-width: 767px) {
  .about-modal .about-content .lead.lead-strong {
    font-size: 1.05rem;
    text-align: left;
  }
  .about-modal .about-content p {
    text-align: left; /* justificar puede no verse bien en pantallas muy pequeñas */
  }
}

/* Iconos sociales (Font Awesome) dentro de botones */
.social-btn i,
.btn .fa,
.btn .fas,
.btn .fab {
  font-size: 0.95rem;
  line-height: 1;
  margin-right: .45rem;
  display: inline-block;
  vertical-align: middle;
}

/* Asegurar texto blanco en botones solares/electrónicos */
.btn-solar,
.btn-electronica {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Evitar subrayado en botones */
.btn { text-decoration: none !important; }

/* Ajustes visuales para botones sociales: equilibrar tamaño y padding */
.social-btn {
  padding-left: .6rem;
  padding-right: .6rem;
  gap: .35rem;
}

/* Botón de contacto (llamada a modal) */
.contact-open-btn {
  margin-left: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
}

/* ============================================
   TARJETAS DE CONTACTO - MODO CLARO Y OSCURO
   ============================================ */

/*
 * BLOQUE ANTIGUO DESACTIVADO.
 * Se conserva completo, pero no se aplica porque cambiaba la tarjeta de redes
 * a un fondo azul/oscuro y forzaba una altura mínima diferente.
 */
@media not all {

/* Variables base para index/home (azul) */
:root {
  --contact-bg-light: #0d6efd;
  --contact-bg-light-strong: #0b5ed7;
  --contact-bg-dark: #1a1f2e;
  --contact-bg-dark-strong: #141824;
}

body.page-home,
body.page-index {
  --contact-bg-light: #0d6efd;
  --contact-bg-light-strong: #0b5ed7;
  --contact-bg-dark: #0c1529;
  --contact-bg-dark-strong: #090e1b;
}

/* Variables para página renovables (naranja/solar) */
body.page-renovables {
  --contact-bg-light: #f59e0b;
  --contact-bg-light-strong: #d97706;
  --contact-bg-dark: #2c1602;
  --contact-bg-dark-strong: #1b0e01;
}

/* Variables para página electrónica (azul) */
body.page-electronica {
  --contact-bg-light: #0ea5e9;
  --contact-bg-light-strong: #0284c7;
  --contact-bg-dark: #0b1926;
  --contact-bg-dark-strong: #08121b;
}

/* TARJETA EN MODO CLARO: fondo de color con acento de página */
.contact-card {
  position: relative;
  background: linear-gradient(135deg, var(--contact-bg-light), var(--contact-bg-light-strong));
  color: #ffffff;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  min-height: 260px;
}

/* Overlay sutil para dar profundidad */
.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Barra de acento izquierda */
.contact-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 0;
}

/* Títulos y subtítulos */
.contact-card .contact-card-title {
  color: #ffffff;
  position: relative;
  z-index: 1;
  font-weight: 700;
}

.contact-card .contact-card-subtitle {
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 1;
}

/* Botones sociales - MODO CLARO */
.contact-card .contact-social-btn {
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  font-weight: 600;
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
}

.contact-card .contact-social-btn span {
  color: #ffffff !important;
}

.contact-card .contact-social-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.contact-card .contact-social-btn:hover span {
  color: #ffffff !important;
}

.contact-card .contact-social-btn i {
  color: #ffffff !important;
}

/* Botón CTA principal - más destacado */
.contact-card .contact-cta-btn {
  background: #ffffff !important;
  color: var(--contact-bg-light) !important;
  border: 1.5px solid #ffffff !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
  min-width: 120px;
}

.contact-card .contact-cta-btn span {
  color: var(--contact-bg-light) !important;
}

.contact-card .contact-cta-btn:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.contact-card .contact-cta-btn:hover span {
  color: var(--contact-bg-light) !important;
}

.contact-card .contact-cta-btn i {
  color: var(--contact-bg-light) !important;
}

/* ============================================
   MODO OSCURO: Tarjeta con fondo oscuro
   ============================================ */
body.theme-nocturne .contact-card {
  background: linear-gradient(135deg, var(--contact-bg-dark, #1a1f2e), var(--contact-bg-dark-strong, #141824));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

body.theme-nocturne .contact-card::after {
  background: var(--contact-bg-light);
}

/* Botones sociales en modo oscuro */
body.theme-nocturne .contact-card .contact-social-btn {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body.theme-nocturne .contact-card .contact-social-btn span {
  color: #ffffff !important;
}

body.theme-nocturne .contact-card .contact-social-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
}

body.theme-nocturne .contact-card .contact-social-btn:hover span {
  color: #ffffff !important;
}

/* Botón CTA en modo oscuro */
body.theme-nocturne .contact-card .contact-cta-btn {
  background: linear-gradient(135deg, var(--contact-bg-light), var(--contact-bg-light-strong)) !important;
  color: #ffffff !important;
  border-color: var(--contact-bg-light) !important;
}

body.theme-nocturne .contact-card .contact-cta-btn span {
  color: #ffffff !important;
}

body.theme-nocturne .contact-card .contact-cta-btn i {
  color: #ffffff !important;
}

body.theme-nocturne .contact-card .contact-cta-btn:hover {
  background: var(--contact-bg-light-strong) !important;
  color: #ffffff !important;
}

body.theme-nocturne .contact-card .contact-cta-btn:hover span {
  color: #ffffff !important;
}

/* Responsive */
@media (max-width: 575px) {
  .contact-card {
    border-radius: 0.85rem;
    min-height: auto;
  }
  .contact-card .contact-social-btn,
  .contact-card .contact-cta-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}
}

/* Redes sociales: botones e iconos ligeramente más grandes y legibles. */
.contact-card .contact-social-btn,
.contact-card .contact-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 180px;
  width: 180px;
  min-height: 40px;
  padding: 0.45rem 0.75rem;
  border: 1px solid #b8c2cf;
  border-radius: 0.4rem;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(13, 38, 59, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-card .contact-social-btn:hover,
.contact-card .contact-social-btn:focus-visible,
.contact-card .contact-cta-btn:hover,
.contact-card .contact-cta-btn:focus-visible {
  border-color: #0d6efd;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.18);
}

.contact-card .contact-social-btn i {
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1;
}

@media (max-width: 575px) {
  .contact-card .contact-social-btn,
  .contact-card .contact-cta-btn {
    flex-basis: 100%;
    width: 100%;
  }
}

/* Toggle de modo oscuro en footer */
.site-footer .form-switch .form-check-input {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
}
.site-footer .form-switch .form-check-input:checked {
  background-color: var(--contact-bg-light, #0d6efd);
  border-color: var(--contact-bg-light, #0d6efd);
}
.site-footer .form-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.35);
}

/* Contraste: iconos en botones outline-light deben ser blancos */
.btn-outline-light .fa,
.btn-outline-light i {
  color: #ffffff;
}

/* Responsivo: ajustar tamaño de iconos en móviles */
@media (max-width: 575px) {
  .social-btn i, .contact-open-btn i { font-size: 0.9rem; margin-right: .35rem; }
  .social-btn, .contact-open-btn { padding-left: .45rem; padding-right: .45rem; }
}

/* Offset por defecto para evitar que el header fijo tape secciones ancladas.
   Este valor será actualizado por JS (site-scripts.js) con la altura real del header. */
:root {
  --scroll-offset: 88px;
}

/* Smooth scrolling (opcional, mejora experiencia cuando JS no interviene) */
html {
  scroll-behavior: smooth;
}

/* Aplicar compensación al hacer scroll a anclas internas */
section[id],
header[id],
div[id],
main[id],
article[id] {
  /* usar calc para permitir ajustes desde JS */
  scroll-margin-top: calc(var(--scroll-offset));
  -webkit-scroll-margin-top: calc(var(--scroll-offset));
}

/* Fallback para enlaces directos (cuando el navegador salta antes de que JS corra)
   se intenta desplazar un poco el contenido para que no quede tapado. */
html.rescrolled { scroll-behavior: auto; }

/* Asegurar texto blanco en el botón destacado dentro del hero solar */
.hero-solar .btn-solar,
.hero-solar .btn-solar.text-white {
  color: #ffffff !important;
}

/* Imagenes de catálogo: recorte profesional y responsive */
.catalog-card-img {
  width: 100%;
  height: 160px;              /* altura base en móviles */
  object-fit: cover;          /* recorta centrado sin distorsionar */
  object-position: center;
  border-radius: .6rem;
  display: block;
}

/* Aumentar altura en pantallas mayores para mejor presencia */
@media (min-width: 768px) {
  .catalog-card-img { height: 190px; }
}
@media (min-width: 1200px) {
  .catalog-card-img { height: 220px; }
}

/* Asegurar separación visual consistente con card-body */
.card-body .catalog-card-img { margin-bottom: .9rem; }

/* Catálogo: figura y img profesional (recorte, aspect-ratio y placeholder) */
.catalog-figure {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: .6rem;
  display: block;
  background: linear-gradient(180deg,#f3f4f6,#eef2ff); /* sutil fondo mientras carga */
}

/* Usar aspect-ratio si está soportado; garantiza recorte consistente */
.catalog-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 0; /* la figura ya tiene border-radius */
}

/* Alturas ajustadas por breakpoint */
@media (min-width: 576px) {
  .catalog-card-img { aspect-ratio: 4/3; }
}
@media (min-width: 992px) {
  .catalog-card-img { aspect-ratio: 16/9; }
}

/* Asegurar separación visual */
.card-body .catalog-figure { margin-bottom: .9rem; }

/* ============================================
   PAGINACIÓN PROFESIONAL - SEESA
   ============================================ */

.pagination-container {
  margin: 1.5rem 0;
}

.pagination-info {
  text-align: center;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--brand-muted);
}

.pagination-info strong {
  color: var(--brand-text);
  font-weight: 600;
}

/* Mejoras visuales para la paginación */
.pagination {
  gap: 0.25rem;
}

.pagination .page-link {
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
  color: var(--brand-text);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  min-width: 2.5rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pagination .page-link:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

.pagination .page-link:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  z-index: 3;
}

.pagination .page-item.active .page-link {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.3);
  transform: scale(1.05);
}

.pagination .page-item.disabled .page-link {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: #f8f9fa;
  border-color: #dee2e6;
}

.pagination .page-item.disabled .page-link:hover {
  transform: none;
  box-shadow: none;
  background-color: #f8f9fa;
  border-color: #dee2e6;
  color: var(--brand-muted);
}

/* Iconos de navegación */
.pagination .page-link i {
  font-size: 0.75rem;
}

/* Responsive - Móviles */
@media (max-width: 576px) {
  .pagination {
    gap: 0.15rem;
  }
  
  .pagination .page-link {
    min-width: 2rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
  }
  
  .pagination-info {
    font-size: 0.8rem;
  }
}

/* Animación suave al cambiar de página */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pagination-container {
  animation: fadeInUp 0.3s ease-out;
}

/* ============================================================================
   MODALES APILADOS (STACKED MODALS)
   Permite tener múltiples modales abiertos sin que se cierren entre sí
   
   Jerarquía de z-index:
   - Theme switcher: 1080
   - Modales de catálogo/productos/proyectos/kits: 1090
   - Backdrop de esos modales: 1089
   - Backdrop del modal de contacto: 1095 (tapa los modales anteriores)
   - Modal de contacto: 1100 (siempre encima)
   ============================================================================ */

/* Modales de catálogo/productos/proyectos/kits */
#catalogModal,
#productModal,
#projectsModal,
#kitsModal {
  z-index: 1090 !important;
}

/* Modal de contacto siempre encima */
#contactModal,
#contactModalElectronica {
  z-index: 1100 !important;
}

#contactModal.show,
#contactModalElectronica.show {
  z-index: 1100 !important;
}

/* Backdrops: Por defecto están debajo de los modales normales */
.modal-backdrop {
  z-index: 1089 !important;
}

/* Backdrop específico del modal de contacto (añadido por JS) */
.modal-backdrop.contact-modal-backdrop {
  z-index: 1095 !important;
}

/* Permitir scroll en modal inferior cuando hay uno superior abierto */
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Los textos de los tres carruseles de partners no deben superar la ficha del logo. */
#partnersCarousel .partner-logo-wrapper,
#solarPartnersCarousel .partner-logo-wrapper,
#electronicaPartnersCarousel .partner-logo-wrapper {
  flex: 0 0 180px;
  width: 180px;
  max-width: 180px;
  min-width: 180px !important;
}

#partnersCarousel .partner-link,
#solarPartnersCarousel .partner-link,
#electronicaPartnersCarousel .partner-link,
#partnersCarousel .partner-link .mt-2,
#solarPartnersCarousel .partner-link .mt-2,
#electronicaPartnersCarousel .partner-link .mt-2 {
  width: 100%;
  max-width: 100%;
}

#partnersCarousel .partner-logo-wrapper p,
#solarPartnersCarousel .partner-logo-wrapper p,
#electronicaPartnersCarousel .partner-logo-wrapper p {
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}