:root {   --header-h: 80px;   /* ajustalo a tu header real */ } /* HERO - Bootstrap Carousel */ #heroCarousel {   height: calc(100dvh - var(--header-h));   overflow: hidden; } #heroCarousel .carousel-inner, #heroCarousel .carousel-item {   height: 100%; } #heroCarousel .hero-img {   height: 100%;   width: 100%;   object-fit: cover; } /* Caption centrado + glass */ #heroCarousel .hero-caption {   position: absolute;   inset: 0;   display: flex;   flex-direction: column;   justify-content: center;   align-items: flex-start;   text-align: left;   padding: 0 8%; } #heroCarousel .hero-caption::before {   content: "";   position: absolute;   left: 8%;   right: 8%;   top: 50%;   transform: translateY(-50%);   height: auto;   min-height: 280px;   border-radius: 16px;   z-index: 0; } .texto {   background: rgba(0, 0, 0, 0.1);   backdrop-filter: blur(8px);   -webkit-backdrop-filter: blur(8px);   text-shadow: black 1em 1em 2em; } #heroCarousel .hero-caption>* {   position: relative;   z-index: 1;   color: #fff;   text-shadow: 0 5px 10px rgba(0, 0, 0, 0.8); } /* Tipografía similar a la tuya */ #heroCarousel .autor {   font-weight: 800;   letter-spacing: 5px;   text-transform: uppercase;   margin-bottom: 10px; } #heroCarousel .titulo {   font-size: clamp(2rem, 4vw, 4rem);   font-weight: 800;   line-height: 1.1;   margin-bottom: 6px; } #heroCarousel .tema {   font-size: clamp(2.2rem, 5vw, 5rem);   font-weight: 800;   color: #0b6db6;   margin: 0; } #heroCarousel .des {   font-size: 1.1rem;   font-weight: 300;   max-width: 620px;   margin-top: 14px; } /* Botón estilo similar al tuyo */ #heroCarousel .btn-hero {   display: inline-flex;   justify-content: center;   align-items: center;   height: 40px;   padding: 0 20px;   background-color: #0e0573;   color: #ffffff;   text-decoration: none;   border-radius: 8px;   font-weight: bold;   transition: 0.3s; } #heroCarousel .btn-hero:hover {   background-color: #135479; } /* Flechas más visibles sobre fondo */ #heroCarousel .carousel-control-prev, #heroCarousel .carousel-control-next {   width: 10%; } #heroCarousel .carousel-control-prev-icon, #heroCarousel .carousel-control-next-icon {   filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.8)); } /* Responsive */ @media (max-width: 768px) {   #heroCarousel .hero-caption {     align-items: center;     text-align: center;     padding: 0 6%;   }   #heroCarousel .hero-caption::before {     left: 6%;     right: 6%;   }   #heroCarousel .des {     padding: 0 10px;   } }

/* ===========================
   CAROUSEL SIN BOOTSTRAP (CSS)
   =========================== */

/* Helpers (por si antes dependían de Bootstrap) */
#heroCarousel .d-block { display: block; }
#heroCarousel .w-100 { width: 100%; }

/* Estructura */
#heroCarousel {
  position: relative;
}

#heroCarousel .carousel-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Para poder superponer slides y hacer fade */
#heroCarousel .carousel-inner {
  position: relative;
  height: 100%;
}

#heroCarousel .carousel-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 800ms ease;
  z-index: 0;
}

/* Mostrar slide según radio */
#hero-1:checked ~ .carousel-inner .item-1,
#hero-2:checked ~ .carousel-inner .item-2,
#hero-3:checked ~ .carousel-inner .item-3 {
  opacity: 1;
  z-index: 1;
}

/* Indicadores */
#heroCarousel .carousel-indicators {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  z-index: 6;
  padding: 0 16px;
}

#heroCarousel .carousel-indicators .indicator {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
}

#heroCarousel .carousel-indicators .indicator:hover {
  transform: scale(1.1);
}

/* Indicador activo */
#hero-1:checked ~ .carousel-indicators label[for="hero-1"],
#hero-2:checked ~ .carousel-indicators label[for="hero-2"],
#hero-3:checked ~ .carousel-indicators label[for="hero-3"] {
  background: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.95);
}

/* Controles prev/next */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  padding: 0;
}

#heroCarousel .carousel-control-prev { left: 0; }
#heroCarousel .carousel-control-next { right: 0; }

#heroCarousel .control {
  display: none; /* se muestra según el radio activo */
  cursor: pointer;
  user-select: none;
}

/* Mostrar el label correcto según slide activo */
#hero-1:checked ~ .carousel-control-prev .prev-1 { display: flex; }
#hero-2:checked ~ .carousel-control-prev .prev-2 { display: flex; }
#hero-3:checked ~ .carousel-control-prev .prev-3 { display: flex; }

#hero-1:checked ~ .carousel-control-next .next-1 { display: flex; }
#hero-2:checked ~ .carousel-control-next .next-2 { display: flex; }
#hero-3:checked ~ .carousel-control-next .next-3 { display: flex; }

/* Iconos (sin Bootstrap) */
#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.25);
}

#heroCarousel .carousel-control-prev-icon::before,
#heroCarousel .carousel-control-next-icon::before {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

#heroCarousel .carousel-control-prev-icon::before {
  transform: rotate(45deg);
  margin-left: 2px;
}

#heroCarousel .carousel-control-next-icon::before {
  transform: rotate(-135deg);
  margin-right: 2px;
}

/* Mejorar accesibilidad: foco visible en controles/indicadores */
#heroCarousel .control:focus-visible,
#heroCarousel .carousel-indicators .indicator:focus-visible,
#heroCarousel .btn-hero:focus-visible {
  outline: 2px solid rgba(255,255,255,0.85);
  outline-offset: 4px;
}

/* =========================
   SERVICES SECTION (3 y 3)
   ========================= */

/* IMPORTANTE: Antes estaba hardcodeado #f4f4f4 (rompía dark mode) */
.section-services {
  background: var(--bg-muted);
  padding: 5rem 1.5rem;
}

/* Título coherente con el tema */
.section-title {
  text-align: center;
  margin-bottom: 3rem;
  color: var(--text-main);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.2px;
}

/* Grid 3 y 3 fijo en desktop */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

/* Shadows ajustados por tema (porque tus --shadow-* son globales y en dark a veces se sienten raros) */
:root {
  --home-card-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
  --home-card-shadow-hover: 0 24px 55px rgba(0, 0, 0, 0.14);
}
html[data-theme="dark"] {
  --home-card-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  --home-card-shadow-hover: 0 24px 55px rgba(0, 0, 0, 0.45);
}

/* Card base */
.service-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--home-card-shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--home-card-shadow-hover);
}

/* Media (si usás background-image inline) */
.service-media {
  height: 110px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border-color);
}

/* Header */
.service-header {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.35rem 1.35rem 0.9rem;
}

.service-header i {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--secondary);
  background: rgba(14, 5, 115, 0.10);
  flex: 0 0 auto;
}

/* Títulos y subtítulos coherentes con tema */
.service-heading h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.2;
}

.service-subtitle {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Divider */
.service-divider {
  height: 1px;
  background: var(--border-color);
  margin: 0 1.35rem;
}

/* Lista */
.service-list {
  list-style: none;
  padding: 1.1rem 1.35rem 1.4rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
  font-weight: 500;
}

/* Bullet */
.service-list li {
  position: relative;
  padding-left: 1.25rem;
}

.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--secondary);
  opacity: 0.9;
}

/* Responsivo */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-card {
    min-height: unset;
  }
}

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