/* ==========================================================================
   G&L ASSURANCE — MASTER STYLESHEET (THEME READY VIA :root)
   ==========================================================================
   0) RESET & TOKENS
   1) UTILIDADES / BASE
   2) ANIMACIONES
   3) SECTION BASICS & SCROLL
   4) TOP BAR
   5) HEADER + NAV + MENÚ RESPONSIVE
   6) HERO (Index) + Carousel
   7) HOME: Why-us / Coverage
   8) HOME: Partners
   9) HOME: Features
   10) HOME: Testimonials
   11) MAPA
   12) FOOTER
   13) ABOUT
   14) SERVICES (V1)
   15) SERVICES (Responsive)
   16) SERVICES (Acordeón V2)
   17) CONTACT
   18) ACCIDENT ASSISTANCE (Actualizado)
   19) WHATSAPP FLOAT
   20) PANEL LATERAL DE ALERTAS (NUEVO)

   ++ ENHANCEMENTS (al final, por cascada):
   E1) Nueva paleta :root (logo)
   E2) Sombras/Elevation
   E3) Focus accesible, hairline, motion, header frosted, etc.
   E10) UTILIDADES DE TEMA (bg-soft-*, bg-grad-*, shadow-soft, hairlines, helpers)
   CONTRASTE) Refuerzos de contraste y CTA services
   ========================================================================= */

/* ==========================================================================
   0) RESET & TOKENS — Reset básico
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ==========================================================================
   0) RESET & TOKENS — PALETA GLOBAL (site-wide)
   (Nota: la nueva paleta se inyecta al final en ENHANCEMENTS y
   sobreescribe por cascada sin romper estilos existentes.)
   ========================================================================= */
:root {
  /* ======= PALETA ULTRA VIBRANTE: NEON SUNSET (ORIGINAL / SE MANTIENE PARA COMPAT) ======= */
  /* Magenta Eléctrico (Principal) */
  --primary-900: #4A0E4E;
  --primary-700: #7B2CBF;
  --primary-500: #C77DFF;
  --primary-300: #E0AAFF;
  --primary-100: #F8E8FF;

  /* Cyan Neón (Secundario) */
  --secondary-900: #023E8A;
  --secondary-700: #0077B6;
  --secondary-500: #00B4D8;
  --secondary-300: #48CAE4;
  --secondary-100: #CAF0F8;

  /* Naranja Fuego */
  --accent-orange-dark: #D62828;
  --accent-orange: #FF6B35;
  --accent-orange-light: #FFB627;

  /* Verde Lima Neón */
  --accent-lime-dark: #38B000;
  --accent-lime: #70E000;
  --accent-lime-light: #9EF01A;

  /* Rosa Fucsia */
  --accent-pink-dark: #D90368;
  --accent-pink: #FF1B8D;
  --accent-pink-light: #FF66B2;

  /* Amarillo Eléctrico */
  --accent-yellow-dark: #F77F00;
  --accent-yellow: #FFD60A;
  --accent-yellow-light: #FFF38C;

  /* Violeta Profundo */
  --accent-violet-dark: #240046;
  --accent-violet: #5A189A;
  --accent-violet-light: #9D4EDD;

  /* Neutros con contraste */
  --gray-900: #1A1423;
  --gray-700: #2D2635;
  --gray-500: #6B6B83;
  --gray-300: #C4C4D6;
  --gray-100: #F7F7FB;

  /* ======= SEMÁNTICAS ======= */
  --blue-900: var(--primary-900);
  --blue-700: var(--secondary-700);
  --green-500: var(--accent-lime);
  --accent-gold: var(--accent-yellow);
  --coral-500: var(--accent-pink);
  --amber-500: var(--accent-orange-light);
  --emerald-300: var(--accent-lime-light);

  --text-600: var(--gray-900);
  --grey-100: var(--gray-100);
  --grey-200: var(--gray-300);

  /* Secciones con gradientes sutiles */
  --section-1: linear-gradient(135deg, #FFFFFF 0%, #F8E8FF 100%);
  --section-2: linear-gradient(135deg, #FFF5E1 0%, #FFE8CC 100%);
  --section-3: linear-gradient(135deg, #FFFFFF 0%, #CAF0F8 100%);
  --section-4: linear-gradient(135deg, #F0FFF4 0%, #E0FFE8 100%);
  --section-5: linear-gradient(135deg, #FFF0F5 0%, #FFE4ED 100%);
  --section-6: linear-gradient(135deg, #FFFAEB 0%, #FFF3BF 100%);

  /* Gradientes vibrantes para heros */
  --hero-gradient: linear-gradient(135deg, #7B2CBF 0%, #240046 50%, #D90368 100%);
  --hero-gradient-2: linear-gradient(135deg, #0077B6 0%, #023E8A 50%, #7B2CBF 100%);
  --hero-blue: var(--primary-700);
  --hero-blue-dark: var(--primary-900);

  /* Estados ultra vibrantes */
  --success-500: var(--accent-lime);
  --warning-500: var(--accent-orange);
  --danger-500: var(--accent-pink-dark);
  --info-500: var(--secondary-500);

  /* UI mejorada */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(123, 44, 191, 0.15);
  --shadow-colored: 0 15px 40px rgba(255, 27, 141, 0.25);
  --shadow-glow: 0 0 30px rgba(199, 125, 255, 0.4);
  --container: 1280px;
  --header-height: 110px;
}


/* ==========================================================================
   1) UTILIDADES / BASE
   ========================================================================= */
body {
  padding-top: var(--header-height);
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: var(--text-600);
  background: #fff;
  overflow-x: hidden;
}
.container { max-width: var(--container); margin: auto; padding: 2rem 1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-500); color: #fff;
  padding: .75rem 1.5rem; border-radius: var(--radius);
  box-shadow: var(--shadow); text-decoration: none;
  font-weight: 700; transition: transform .2s, filter .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 12px 28px rgba(0,0,0,.12); }

.cta-btn { background: #fff; color: var(--blue-900); }

.btn-secondary {
  background: transparent; border: 2px solid var(--blue-900); color: var(--blue-900);
}
.btn-secondary:hover { background: var(--blue-900); color: #fff; }

/* ==========================================================================
   2) ANIMACIONES
   ========================================================================= */
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInRight{ from{opacity:0;transform:translateX(40px)}  to{opacity:1;transform:translateX(0)} }
@keyframes zoomIn{ from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
@keyframes pulse-btn{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
@keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes fadeInDown{ from{opacity:0; transform:translateY(-20px)} to{opacity:1; transform:translateY(0)} }
@keyframes fadeInLeft{ from{opacity:0; transform:translateX(-20px)} to{opacity:1; transform:translateX(0)} }
@keyframes fadeInRight{ from{opacity:0; transform:translateX(20px)} to{opacity:1; transform:translateX(0)} }
@keyframes fadeInUp{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }
@keyframes expandWidth{ from{width:0} to{width:80px} }
@keyframes slideInUp{ from{opacity:0; transform:translateY(25px)} to{opacity:1; transform:translateY(0)} }
@keyframes pop-in{ 0%{opacity:0; transform:scale(.5)} 100%{opacity:1; transform:scale(1)} }
@keyframes scroll-left{ from{transform:translateX(0)} to{transform:translateX(-450%)} }

.animate-fade-in { animation: fadeIn 1s ease both; }

/* ==========================================================================
   3) SECTION BASICS & SCROLL
   ========================================================================= */
.section {
  padding: 4rem 1rem;
  opacity: 0; transform: translateY(40px);
  transition: opacity .6s ease, transform .6s ease;
}
.section--color1 { background: var(--section-1) !important; }
.section--color2 { background: var(--section-2) !important; }
.section--color3 { background: var(--section-3) !important; }
.section--color4 { background: var(--section-4) !important; }
.section--color5 { background: var(--section-5) !important; }
.section--color6 { background: var(--section-6) !important; }

.animate-fade-in { opacity: 1 !important; transform: translateY(0) !important; }

.section h2, .section-title, .service-category h2, .service-testimonials h2, .partners h2, .features h2, .map-section h2, .support-section h2, .faq-section h2, .steps-section h2 { color: var(--blue-900); }

.coverage-card, .about-card, .service-item, .testimonial-card, .support-item, .faq-item, .form-container, .contact-form, .contact-info { box-shadow: var(--shadow); }

/* ==========================================================================
   4) TOP BAR
   ========================================================================= */
.top-bar { background: linear-gradient(90deg, var(--blue-700) 0%, var(--blue-900) 100%); color: #fff; }
.top-bar__content {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2rem; padding: .5rem 1rem; font-size: .9rem;
}
.top-bar__item { display: inline-flex; align-items: center; gap: .4rem; color: #fff; text-decoration: none; }
.top-bar__item:hover,
.top-bar__item:focus { opacity: .85; }

@media (max-width: 600px) {
  .top-bar__content { padding: .25rem .5rem; gap: .75rem; font-size: .8rem; flex-wrap: nowrap; overflow-x: auto; }
  .top-bar__item span { display: none; }
  .top-bar__item:first-child span { display: inline; }
  .top-bar__item { gap: .3rem; }
}

/* ==========================================================================
   5) HEADER + NAV + MENÚ RESPONSIVE
   ========================================================================= */
.main-header {
  position: fixed; top: 0; width: 100%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.1); z-index: 1000; transition: padding .4s;
}
.main-header .nav { display: flex; align-items: center; justify-content: space-between; padding: .5rem; }
.nav .logo img { max-height: 100px; width: auto; }
.menu-icon { display: none; font-size: 1.8rem; color: var(--blue-900); cursor: pointer; }
.menu ul { display: flex; gap: 1.5rem; list-style: none; }
.menu a {
  position: relative; padding: .25rem 0; color: var(--text-600);
  text-decoration: none; font-weight: 600; transition: color .3s;
}
.menu a::after {
  content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px;
  background: var(--coral-500); transition: width .3s ease;
}
.menu a:hover, .menu a.active { color: var(--blue-700); }
.menu a:hover::after, .menu a.active::after { width: 100%; }

@media (max-width: 600px) {
  .menu-icon { display: block; }
  .menu { display: none; }
  #menu-toggle:checked ~ .menu {
    display: flex; flex-direction: column; background: #fff; position: absolute; top: 100%; left: 0; right: 0; padding: 1rem 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
  }
  .menu ul { flex-direction: column; gap: 1rem; align-items: center; }
  .nav .logo img { max-height: 70px; }
}

/* ==========================================================================
   6) HERO (Index) + Carousel
   ========================================================================= */
.full-hero {
  position: relative; display: flex; justify-content: center; align-items: center;
  min-height: 100vh; overflow: hidden;
}
.full-hero .video-carousel { position: absolute; inset: 0; }
.video-carousel::before {
  content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--blue-700) 40%, transparent); z-index: 1;
}
.video-carousel img { width: 100%; height: 100%; object-fit: cover; }
.hero-content {
  position: relative; z-index: 2; text-align: center; color: #fff;
}
.hero-content h1 { font-size: clamp(1.8rem, 5vw, 3.5rem); margin-bottom: 1rem; }
.hero-content p { font-size: clamp(1rem, 2.5vw, 1.5rem); margin-bottom: 2rem; }
.animated-btn { animation: pulse-btn 1.5s ease-in-out infinite; }
.carousel-item { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.carousel-item.active { opacity: 1; z-index: 1; }
.carousel-control {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.4); color: #fff; border: none; font-size: 2rem;
  padding: .5rem 1rem; cursor: pointer; z-index: 5;
}
.carousel-control:hover { background: rgba(0,0,0,.6); }
.carousel-control.prev { left: 1rem; }
.carousel-control.next { right: 1rem; }

/* ==========================================================================
   7) HOME: Why-us / Coverage
   ========================================================================= */
#why-us p { margin: 0 auto 2rem; max-width: 600px; font-size: 1.25rem; }
.coverage { text-align: center; }
.coverage h2 { font-size: 2.5rem; margin-bottom: 2rem; }
.coverage-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.coverage-card {
  background: #fff; padding: 1.5rem; border-radius: var(--radius);
  transition: transform .3s ease, box-shadow .3s ease;
}
.coverage-card.in-view:nth-child(odd) { animation: slideInLeft .8s ease both; }
.coverage-card.in-view:nth-child(even){ animation: slideInRight .8s ease both; }
.coverage-card img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.coverage-card:hover { transform: translateY(-5px); box-shadow: 0 12px 20px rgba(0,0,0,.15); }
.coverage-icon { font-size: 2rem; color: var(--green-500); margin: 1rem 0; }
.coverage-card h3 { font-size: 1.25rem; color: var(--blue-700); margin-bottom: .5rem; }
.coverage-card .btn-secondary { margin-top: 1rem; }

/* ==========================================================================
   8) HOME: Partners
   ========================================================================= */
.partners { text-align: center; }
.partners h2 { font-size: 2.5rem; }
.partners p { margin: 0 auto 2rem; max-width: 600px; }
.partners-carousel { overflow: hidden; position: relative; padding: 2rem 0; }
.partners-track { display: flex; align-items: center; gap: 2rem; animation: scroll-left 20s linear infinite; }
.partners-carousel:hover .partners-track { animation-play-state: paused; }
.partners-track img { max-height: 100px; padding: .5rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }

@media (max-width: 768px) {
  .partners-track { animation-duration: 10s; gap: 1rem; }
  .partners-track img { max-height: 70px; }
}

/* ==========================================================================
   9) HOME: Features
   ========================================================================= */
.features { text-align: center; }
.features h2 { font-size: 2.5rem; margin-bottom: 2rem; }
.features-list {
  list-style: none; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.features-list li {
  background: #fff; padding: 1rem; border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; align-items: center; gap: .75rem; transition: transform .3s;
}
.features-list li:hover { transform: translateY(-5px); }
.features-list i { font-size: 2rem; color: var(--green-500); }

/* ==========================================================================
   10) HOME: Testimonials
   ========================================================================= */
.testimonials { text-align: center; }
.testimonials h2 { font-size: 2.5rem; margin-bottom: 2rem; }
.testimonial-slider { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));}
.testimonial { background: #fff; padding: 1.5rem; border-radius: var(--radius); position: relative; }
.testimonial img {
  width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
  position: absolute; top: -30px; right: 20px; border: 3px solid #fff;
}
.testimonial p { margin-top: 40px; font-style: italic; }
.testimonial h4 { text-align: right; margin-top: 1rem; }

/* ==========================================================================
   11) MAPA (genérico)
   ========================================================================= */
.map-section h2 { text-align: center; }
.map-container { height: 400px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.map-container iframe { width: 100%; height: 100%; border:0; }

/* ==========================================================================
   12) FOOTER
   ========================================================================= */
.footer { background: var(--blue-900); color: #fff; padding: 2rem 1rem; text-align: center; }
.footer ul { list-style: none; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 1.5rem; }
.footer a { color: #fff; text-decoration: none; transition: color .2s; }
.footer a:hover { color: var(--green-500); }
.footer-copy { font-size: .9rem; opacity: .85; }

* html,
:root body .footer { color-scheme: light only; } /* evita contraste raro en SO con dark-mode */

/* ==========================================================================
   13) ABOUT (Hero + Cards)
   ========================================================================= */
.about-hero {
  position: relative; background: url('images/about.jpg') center/cover no-repeat;
  min-height: 50vh; display: flex; align-items: center;
}
.about-hero .overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--blue-900) 60%, transparent); }
.about-hero .hero-content { position: relative; z-index: 2; color: #fff; text-align: center; width: 100%; }
.about-cards { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.about-card {
  background: #fff; border-radius: var(--radius); padding: 2rem;
  transition: transform .4s ease, box-shadow .4s ease;
}
.about-card:hover { box-shadow: 0 12px 24px rgba(0,0,0,.15); transform: translateY(-5px); }
.about-card .card-icon { font-size: 2.5rem; color: var(--green-500); margin-bottom: 1rem; }
.about-card h2 { color: var(--blue-900); margin-bottom: 1rem; }

/* ==========================================================================
   14) SERVICES (Hero, Tabs, Service Items, CTA, Testimonials, Acordeones v1)
   ========================================================================= */
.section-title { text-align: center; font-size: 3rem; margin-bottom: 2rem; }
.section-title::after {
  content: ''; display: block; width: 80px; height: 4px; background: var(--green-500);
  margin: .5rem auto 0;
}
.services-hero {
  position: relative; background: url('images/servicio.jpg') center/cover no-repeat;
  min-height: 50vh; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center;
}
.services-hero::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--blue-700) 65%, transparent); z-index: 1; }
.services-hero .hero-content { position: relative; z-index: 2; }

#service-tabs {
  position: sticky; top: 78px; z-index: 200; display: flex; justify-content: center; gap: .5rem;
  padding: .55rem .95rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  width: fit-content; max-width: calc(100% - 2rem); margin-inline: auto; overflow-x: hidden;
}
#service-tabs a {
  font-weight: 600; color: var(--blue-900); text-decoration: none; padding: .45rem 1.15rem;
  border-radius: var(--radius); transition: all .25s;
}
#service-tabs a:hover { background: var(--section-2); transform: translateY(-1px); }
#service-tabs a.active { background: var(--green-500); color: #fff; }

.service-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.service-item {
  background: #fff; padding: 2rem; border-radius: var(--radius);
  border-left: 4px solid transparent; transition: all .3s;
}
.service-item:hover { border-color: var(--green-500); transform: translateY(-8px); box-shadow: 0 16px 28px rgba(0,0,0,.12); }
.service-item h3 { display: flex; align-items: center; color: var(--blue-700); }
.service-item h3 i { margin-right: .75rem; color: var(--green-500); }

/* ==========================================================================
   15) SERVICES (Tweaks responsive)
   ========================================================================= */
@media (max-width: 640px) {
  #service-tabs {
    width: 100%; max-width: none; overflow-x: auto;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   16) SERVICES — Acordeón variante v2
   ========================================================================= */
.accordion {
  width: 100%; text-align: left; background: var(--blue-700); color: #fff; padding: 1rem;
  border: none; border-radius: var(--radius); margin: .75rem 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.accordion::after { content: '+'; font-size: 1.25rem; transition: transform .3s; }
.accordion.active::after { content: '–'; transform: rotate(180deg); }
.panel { max-height: 0; overflow: hidden; transition: max-height .4s ease; }

/* ==========================================================================
   17) CONTACT (Hero, Form, Info, Mapa)
   ========================================================================= */
.contact-hero {
  position: relative; background: url('images/contact.jpg') center/cover no-repeat;
  min-height: 50vh; display: flex; align-items: center;
}
.contact-hero .overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--blue-700) 60%, transparent); }
.contact-hero .hero-content { position: relative; z-index: 2; text-align: center; color: #fff; width: 100%; }

.contact-section .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; }
@media (max-width: 800px) { .contact-section .contact-grid { grid-template-columns: 1fr; } }

.contact-form { background: #fff; padding: 2rem; border-radius: var(--radius); }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: .5rem; }
.form-group input, .form-group textarea {
  width: 100%; padding: .75rem 1rem; border: 1px solid #ccc; border-radius: var(--radius);
}
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--green-500); }

.contact-info { background: #fff; padding: 2rem; border-radius: var(--radius); }
.contact-info i { color: var(--green-500); margin-right: .5rem; }

/* ==========================================================================
   18) ACCIDENT ASSISTANCE — REEMPLAZO COMPLETO (títulos + cards correctos)
   ========================================================================= */
html { scroll-behavior: smooth; }
#report-form { scroll-margin-top: var(--header-height, 80px); }

.accident-hero {
  position: relative; background: url('images/Accidentasistence.avif') center/cover no-repeat;
  min-height: 50vh; display: flex; align-items: center;
}
.accident-hero .overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--hero-blue) 85%, transparent); }
.accident-hero .hero-content { position: relative; z-index: 2; color: #fff; text-align: center; width: 100%; }

/* Títulos */
.steps-section h2,
.support-section h2,
.faq-section h2,
.cta-section h2 {
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  font-size: clamp(1.6rem, 3.6vw, 2.25rem);
  color: var(--blue-900);
}

/* Grid de pasos */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; align-items: stretch; }

/* Cards de pasos */
.step-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid #eaeaea; padding: 2rem 1.5rem 1.5rem; padding-top: 2.75rem;
  position: relative; overflow: visible; transition: transform .2s ease, box-shadow .2s ease;
}
.step-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.12); }

/* Badge número */
.step-number {
  position: absolute; top: -18px; left: 18px;
  background: var(--green-500); color: #fff; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.95rem;
  border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* Tipografías dentro del card */
.step-card h3 { margin: .25rem 0 .5rem; font-size: 1.15rem; line-height: 1.25; color: var(--blue-900); font-weight: 700; }
.step-card p { margin: 0; color: #444; }
.step-card .btn { margin-top: 1rem; }

/* Soporte + FAQ */
.support-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.support-item { background: #fff; padding: 1.5rem; border-radius: var(--radius); display: flex; gap: 1rem; box-shadow: var(--shadow); }
.support-icon { font-size: 1.5rem; color: var(--green-500); }

.faq-item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.faq-question { background: var(--hero-blue-dark); color: #fff; padding: 1.5rem; cursor: pointer; position: relative; border: none; width: 100%; text-align: left;}
.faq-question::after { content: '+'; position: absolute; right: 1.5rem; transition: transform .3s; }
.faq-item.active .faq-question::after { content: '–'; transform: rotate(180deg); }
.faq-answer { padding: 1.5rem; display: none; }
.faq-item.active .faq-answer { display: block; }

.form-container { background: #fff; padding: 2rem; border-radius: var(--radius); max-width: 800px; margin: 2rem auto; box-shadow: var(--shadow); }

/* Responsive Accident */
@media (max-width: 640px) {
  .steps-grid { grid-template-columns: 1fr; }
  .step-number { top: -16px; left: 14px; width: 32px; height: 32px; }
  .step-card { padding-top: 2.5rem; }
}

/* ==========================================================================
   19) GLOBAL: WhatsApp Float
   ========================================================================= */
.whatsapp-float {
  position: fixed; bottom: 2rem; right: 2rem;
  background: var(--green-500); color: #fff; width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
  z-index: 1000; animation: pulse 3s ease-in-out infinite; transition: transform .2s;
}
.whatsapp-float:hover { transform: scale(1.1); }

@media (max-width: 640px) {
  .whatsapp-float { width: 48px; height: 48px; bottom: 1rem; right: 1rem; }
}

/* ==========================================================================
   20) PANEL LATERAL DE ALERTAS (NUEVO Y CORREGIDO)
   ========================================================================= */
.alerts-fab {
  position: fixed; bottom: 100px; right: 20px; width: 55px; height: 55px;
  background-color: var(--blue-700); color: white; border-radius: 50%; border: none;
  display: flex; justify-content: center; align-items: center; font-size: 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); cursor: pointer; z-index: 998; transition: all 0.3s ease;
}
.alerts-fab:hover { background-color: var(--blue-900); transform: scale(1.1); }
.alerts-count-badge {
  position: absolute; top: -5px; right: -5px; background-color: var(--danger-500);
  color: white; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; font-weight: bold;
  display: flex; justify-content: center; align-items: center; border: 2px solid white;
}
.alerts-backdrop {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.6); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out;
}
.alerts-backdrop.is-visible { opacity: 1; pointer-events: auto; }
.alerts-sidebar {
  position: fixed; top: 0; right: 0; height: 100vh; width: 360px; max-width: 90%; background-color: #fff;
  z-index: 1000; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); transform: translateX(100%);
  transition: transform 0.3s ease-in-out; display: flex; flex-direction: column;
}
.alerts-sidebar.is-open { transform: translateX(0); }
.sidebar-header {
  display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem;
  background-color: var(--blue-900); color: #fff; flex-shrink: 0;
}
.sidebar-header h3 { margin: 0; font-size: 1.2rem; }
.close-btn { background: none; border: none; color: white; font-size: 2.5rem; line-height: 1; cursor: pointer; padding: 0; }
.sidebar-content { padding: 1.5rem; overflow-y: auto; flex-grow: 1; }
.sidebar-content .alert-strip {
  display: flex; align-items: center; gap: 10px; padding: 1rem; background-color: var(--grey-200);
  border-radius: 8px; margin-bottom: 1.5rem; font-size: 0.9rem;
}
.sidebar-content .alerts-list-container { display: flex; flex-direction: column; gap: 10px; }
.sidebar-content #alerts-list { display: flex; flex-direction: column; gap: 8px; }

/* Píldoras de alerta */
.alert-pill {
  background: var(--grey-200);
  padding: 8px 8px 8px 12px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  border: 1px solid var(--gray-300);
}
.alert-pill .event { flex-grow: 1; }
.sev {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  color: #fff;
  font-size: .75rem;
  text-transform: uppercase;
  flex-shrink: 0;
}
.sev-Extreme { background: #d90000; }
.sev-Severe  { background: var(--coral-500); }
.sev-Moderate{ background: var(--amber-500); color: #333; }
.sev-Minor   { background: var(--emerald-300); color: #333; }
.sev-Unknown { background: #8f8f8f; }



/* ==========================================================================
   ========================= ENHANCEMENTS (NO-DESTRUCTIVE) ===================
   ========================================================================= */

/* E1) NUEVA PALETA BASADA EN EL LOGO (sobrescribe tokens por cascada) */
:root {
  /* Azul Marino — PRINCIPAL */
  --primary-900: #091336; /* principal */
  --primary-700: #2D3D5F;
  --primary-500: #657EA7;
  --primary-300: #A2B2CC;
  --primary-100: #EEF2F8;

  /* Taupe cálido — Secundario/Complemento */
  --secondary-900: #6E5E53;
  --secondary-700: #8E7D71;
  --secondary-500: #B29F91; /* color de marca cálido */
  --secondary-300: #D5C9BF;
  --secondary-100: #F3EFEA;

  /* Accentos coherentes */
  --accent-cta-dark: #2B3B5B;
  --accent-cta: #657EA7;        /* CTA principal */
  --accent-cta-light: #A9B7D0;

  --accent-gold: #B29F91;
  --coral-500: #C48A94;         /* alertas suaves */
  --amber-500: #C5A27A;         /* avisos */
  --emerald-300: #A2B2CC;       /* success suave */

  /* Neutros */
  --gray-900: #0F1220;
  --gray-700: #1C2334;
  --gray-500: #707887;
  --gray-300: #D4D8E1;
  --gray-100: #F5F7FA;

  /* Mapeo semántico existente */
  --blue-900: var(--primary-900);
  --blue-700: var(--primary-700);
  --green-500: var(--accent-cta);   /* tus .btn usan --green-500 */
  --text-600: var(--gray-900);
  --grey-100: var(--gray-100);
  --grey-200: var(--gray-300);

  /* Gradientes sutiles con la nueva paleta */
  --section-1: linear-gradient(135deg, #FFFFFF 0%, #EEF2F8 100%);
  --section-2: linear-gradient(135deg, #FFFFFF 0%, #F3EFEA 100%);
  --section-3: linear-gradient(135deg, #FFFFFF 0%, #EAF0F7 100%);
  --section-4: linear-gradient(135deg, #FFFFFF 0%, #EFF4FA 100%);
  --section-5: linear-gradient(135deg, #FFFFFF 0%, #F5F0ED 100%);
  --section-6: linear-gradient(135deg, #FFFFFF 0%, #F8F3EE 100%);

  /* Heros */
  --hero-gradient: linear-gradient(135deg, #091336 0%, #2D3D5F 50%, #657EA7 100%);
  --hero-gradient-2: linear-gradient(135deg, #2D3D5F 0%, #091336 50%, #B29F91 100%);
  --hero-blue: var(--primary-700);
  --hero-blue-dark: var(--primary-900);

  /* Estados */
  --success-500: #4B8F78;
  --warning-500: var(--amber-500);
  --danger-500: #B55E62;
  --info-500: var(--primary-500);

  /* UI */
  --shadow: 0 10px 30px rgba(9, 19, 54, 0.12); /* suavizado con la nueva paleta */
  --shadow-colored: 0 15px 40px rgba(45, 61, 95, 0.18);
  --shadow-glow: 0 0 30px rgba(101, 126, 167, 0.28);
}

/* E2) SISTEMA DE ELEVACIÓN (sombras profesionales reutilizables) */
:root {
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(9,19,54,.06), 0 1px 1px rgba(9,19,54,.04);
  --elev-2: 0 2px 6px rgba(9,19,54,.10), 0 1px 3px rgba(9,19,54,.06);
  --elev-3: 0 6px 14px rgba(9,19,54,.12), 0 3px 6px rgba(9,19,54,.08);
  --elev-4: 0 10px 24px rgba(9,19,54,.14), 0 6px 10px rgba(9,19,54,.10);
  --elev-5: 0 18px 40px rgba(9,19,54,.18), 0 8px 16px rgba(9,19,54,.12);

  --elev-glow: 0 0 0 8px color-mix(in srgb, var(--accent-cta) 18%, transparent);
  --hairline: 1px solid color-mix(in srgb, var(--gray-500) 12%, transparent);

  --ease: cubic-bezier(.2,.6,.2,1);
  --t-fast: .18s;
  --t-med: .28s;

  --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --radius-xl: 28px;
}

/* Aplicaciones suaves de elevación y borde (no destructivo) */
.coverage-card, .about-card, .service-item, .testimonial, .support-item,
.faq-item, .form-container, .contact-form, .contact-info, .step-card {
  border: var(--hairline);
  box-shadow: var(--elev-2);
}
.coverage-card:hover, .service-item:hover, .step-card:hover { box-shadow: var(--elev-3); transform: translateY(-4px); }
.whatsapp-float, .alerts-fab { box-shadow: var(--elev-4); }

/* E3) Focos accesibles y consistentes */
:root { --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-cta) 30%, transparent); }
a, button, .accordion, .faq-question, .btn, .btn-secondary, input, textarea { outline: none; }
a:focus-visible, button:focus-visible, .accordion:focus-visible, .faq-question:focus-visible,
.btn:focus-visible, .btn-secondary:focus-visible, input:focus-visible, textarea:focus-visible {
  box-shadow: var(--focus-ring);
  border-color: color-mix(in srgb, var(--accent-cta) 30%, #fff);
}

/* E4) Botones pulidos */
.btn {
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  box-shadow: var(--elev-2);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--elev-3); filter: brightness(1.04); }
.btn:active { transform: translateY(0); box-shadow: var(--elev-2); filter: brightness(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }

.btn-secondary { box-shadow: var(--elev-1); }
.btn-secondary:hover { box-shadow: var(--elev-2); }

/* E5) Header “frosted” y limpio en scroll */
.main-header {
  backdrop-filter: saturate(140%) blur(8px);
  background: color-mix(in srgb, #ffffff 78%, transparent);
  border-bottom: var(--hairline);
  box-shadow: var(--elev-1);
}

/* E6) Overlays de héroes más finos (usa paleta nueva) */
.video-carousel::before,
.about-hero .overlay,
.services-hero::before,
.contact-hero .overlay,
.accident-hero .overlay {
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--primary-900) 46%, transparent),
    color-mix(in srgb, var(--primary-700) 18%, transparent)
  );
}

/* E7) Formularios: focus/invalid más claros */
.form-group input, .form-group textarea {
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
  border: 1px solid color-mix(in srgb, var(--gray-500) 24%, #fff);
  background: #fff;
}
.form-group input:focus, .form-group textarea:focus {
  border-color: color-mix(in srgb, var(--accent-cta) 42%, #fff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-cta) 20%, transparent);
}
.form-group input:invalid, .form-group textarea:invalid {
  border-color: #B55E62;
  box-shadow: 0 0 0 4px color-mix(in srgb, #B55E62 18%, transparent);
}

/* E8) Sidebar de alertas con jerarquía */
.alerts-sidebar { box-shadow: var(--elev-5); border-left: var(--hairline); }
.sidebar-header {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary-900) 92%, transparent),
      color-mix(in srgb, var(--primary-700) 30%, transparent)
    );
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
.sidebar-content .alert-strip, .alert-pill { box-shadow: var(--elev-1); }
.alerts-backdrop { backdrop-filter: blur(2px); }

* { transition-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .partners-track { animation: none !important; transform: translateX(0) !important; }
}

/* ==========================================================================
   E10) UTILIDADES DE TEMA (bg-soft-*, bg-grad-*, shadow-soft, hairlines, helpers)
   ========================================================================= */

/* Fondos suaves (alineados a los section-X ya definidos) */
.bg-soft-1 { background: var(--section-1); }
.bg-soft-2 { background: var(--section-2); }
.bg-soft-3 { background: var(--section-3); }
.bg-soft-4 { background: var(--section-4); }
.bg-soft-5 { background: var(--section-5); }
.bg-soft-6 { background: var(--section-6); }
/* extra para el mapa del index */
.bg-soft-7 { background: var(--section-6); }

/* Gradientes de marca para heros/CTAs */
.bg-grad-1 { background: var(--hero-gradient); color: #fff; }
.bg-grad-2 { background: var(--hero-gradient-2); color: #fff; }
.bg-grad-3 { background:
  linear-gradient(135deg,
    color-mix(in srgb, var(--primary-900) 86%, transparent) 0%,
    color-mix(in srgb, var(--primary-700) 52%, transparent) 100%
  );
  color: #fff;
}

/* Elevación y hairlines utilitarias */
.shadow-soft { box-shadow: var(--elev-2); border: var(--hairline); border-radius: var(--radius); }
.shadow-soft-lg { box-shadow: var(--elev-4); border: var(--hairline); border-radius: var(--radius-lg); }
.has-top-hairline { border-top: var(--hairline); }
.has-bottom-hairline { border-bottom: var(--hairline); }

/* Texto sobre fondos oscuros */
.text-on-dark, .bg-grad-1 *, .bg-grad-2 *, .bg-grad-3 * { color: inherit; }
.text-muted { color: color-mix(in srgb, var(--text-600) 68%, #fff); }

/* Animación para tarjetas (coincide con JS que agrega .animate-card) */
.animate-card { animation: pop-in .5s var(--ease) both; }

/* Helpers de imagen de fondo */
.bg-cover { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Accesibilidad: contenido solo para lectores de pantalla */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* =========================================================
   CONTRASTE: Títulos visibles en fondos oscuros + texto de cards
   y FIX CTA de Services para que no quede “en blanco”
   (bloque añadido y consolidado al FINAL del archivo)
   ========================================================= */

/* 1) Secciones con gradiente: color base claro para el texto */
.bg-grad-1,
.bg-grad-2,
.bg-grad-3 { color: #fff; }

/* 2) Títulos que DEBEN resaltar en gradientes */
.bg-grad-1 h1, .bg-grad-1 h2, .bg-grad-1 .section-title,
.bg-grad-2 h1, .bg-grad-2 h2, .bg-grad-2 .section-title,
.bg-grad-3 h1, .bg-grad-3 h2, .bg-grad-3 .section-title {
  color: #fff;
  text-shadow:
    0 2px 10px rgba(9,19,54,.45),
    0 1px 0 rgba(0,0,0,.25);
  letter-spacing: -0.02em;
}
.bg-grad-1 .section-title::after,
.bg-grad-2 .section-title::after,
.bg-grad-3 .section-title::after {
  background: #fff;
  opacity: .95;
}

/* 3) Casos concretos — Services */
#specialty > h2,
#specialty > p,
.service-testimonials > .container > h2,
.service-testimonials > h2 {
  color: #fff;
  text-shadow: 0 2px 10px rgba(9,19,54,.45);
}

/* 4) Dentro de gradientes, las CARDS fuerzan texto oscuro y fondo blanco */
.bg-grad-1 .coverage-card,
.bg-grad-1 .service-item,
.bg-grad-1 .testimonial, .bg-grad-1 .testimonial-card,
.bg-grad-1 .about-card,
.bg-grad-1 .step-card,
.bg-grad-2 .coverage-card,
.bg-grad-2 .service-item,
.bg-grad-2 .testimonial, .bg-grad-2 .testimonial-card,
.bg-grad-2 .about-card,
.bg-grad-2 .step-card,
.bg-grad-3 .coverage-card,
.bg-grad-3 .service-item,
.bg-grad-3 .testimonial, .bg-grad-3 .testimonial-card,
.bg-grad-3 .about-card,
.bg-grad-3 .step-card {
  color: var(--text-600);
  background: #fff;
}

/* Títulos e iconos de las cards */
.service-item h3,
.coverage-card h3,
.testimonial h4,
.testimonial-card h4,
.about-card h2,
.step-card h3 { color: var(--blue-900); }

.service-item p,
.coverage-card p,
.testimonial p,
.testimonial-card p,
.about-card p,
.step-card p { color: #223; }

/* 5) Espaciados para que el título no se “pegue” a las cards */
#specialty .service-list,
.service-testimonials .testimonial-slider,
.steps-section .steps-grid { margin-top: 1.25rem; }

/* 6) Footer oscuro y legible en todas las páginas */
.footer {
  background: var(--blue-900) !important;
  color: #fff !important;
}
.footer a { color: #fff; }
.footer a:hover { color: var(--accent-cta-light); }

/* 7) Overlays robustos para títulos legibles en héroes */
.services-hero::before,
.about-hero .overlay,
.contact-hero .overlay,
.accident-hero .overlay {
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--primary-900) 58%, transparent),
    color-mix(in srgb, var(--primary-700) 28%, transparent)
  );
}

/* 8) Forzar texto oscuro en bloques blancos que estén dentro de gradientes */
.bg-grad-1 .shadow-soft,
.bg-grad-2 .shadow-soft,
.bg-grad-3 .shadow-soft { color: var(--text-600); }

/* 9) FIX — CTA de Services siempre visible y con contraste */
.service-cta{
  background: transparent;            /* elimina cualquier fondo heredado */
  display: flex;
  justify-content: center;
  padding: 1rem 0 .5rem;
}
.service-cta .cta-btn{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .9rem 1.25rem;
  border: 0;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(135deg, var(--blue-700,#0e2a47), var(--blue-600,#164372));
  color: #fff !important;             /* asegura contraste aunque .btn cambie el color */
  box-shadow: 0 8px 22px rgba(14,42,71,.22), 0 1px 0 rgba(255,255,255,.25) inset;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.service-cta .cta-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(14,42,71,.28), 0 1px 0 rgba(255,255,255,.3) inset;
}
.service-cta .cta-btn:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.service-cta .cta-btn i{ font-size: 1.1em; }