/* ============================================================
   CANTONCE — Design v3 · Green Nebula Dark
   Inspirado en Semantical: fondo near-black, blobs de neblina
   verde ambiental, secciones transparentes, glass cards minimal.

   Carga después de design-v2.css en todas las páginas.
   ============================================================ */

/* ============================================================
   0. FONDO GLOBAL — Verde profundo con halos ambientales
   ============================================================ */

html {
  background: linear-gradient(180deg, #11241d 0%, #091611 100%);
}

body {
  background-color: #091611 !important;
  background-image:
    radial-gradient(ellipse 1300px 850px at 92%  6%,  rgba(138, 223, 190, 0.28), transparent 58%),
    radial-gradient(ellipse 1000px 700px at 4%  55%,  rgba(74, 178, 126, 0.22), transparent 60%),
    radial-gradient(ellipse 820px  560px at 48%  96%,  rgba(44, 144,  98, 0.18), transparent 62%),
    radial-gradient(ellipse 1200px 500px at 50%  -10%, rgba(184, 245, 220, 0.10), transparent 55%) !important;
  background-attachment: fixed !important;
}

:root {
  --glass-surface: rgba(15, 32, 25, 0.68);
  --glass-surface-soft: rgba(13, 28, 22, 0.60);
  --glass-surface-strong: rgba(17, 36, 28, 0.78);
  --glass-tint: linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03));
  --glass-tint-soft: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  --glass-tint-strong: linear-gradient(145deg, rgba(76, 175, 125, 0.20), rgba(76, 175, 125, 0.08));
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-soft: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(76, 175, 125, 0.32);
}

/* background-attachment: fixed no funciona en iOS — fallback */
@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;
  }

  /* En móvil no hay cursor → glow invisible. Fijar attachment para evitar
     bugs de rendering en iOS Safari con fixed en elementos hijos. */
  [data-glow] {
    background-attachment: local, scroll !important;
  }
}

/* ============================================================
   1. CANVAS PARTÍCULAS
   ============================================================ */

.has-particles {
  position: relative;
  overflow: hidden;
}

.particle-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  z-index: 0;
  display: block;
}

.has-particles > * {
  position: relative;
  z-index: 1;
}

.has-particles > .particle-canvas {
  position: absolute !important;
  z-index: 0 !important;
}

/* Orbe de luz de hero — animación suave */
.hero-main::after,
.hero-banner::after,
.hero-banner-gdl::after,
.hero-ayto::after {
  animation: orb-drift 9s ease-in-out infinite alternate !important;
  will-change: transform, opacity;
}

@keyframes orb-drift {
  from { opacity: 0.7;  transform: scale(1)    translateX(0);    }
  to   { opacity: 1;    transform: scale(1.09) translateX(24px); }
}

/* ============================================================
   2. ABOUT ME — Sección oscura (antes: neutral-50)
   ============================================================ */

.about-me {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  overflow: hidden;
}

/* Blob ambiental decorativo */
.about-me::before {
  content: '';
  position: absolute;
  top: 20%;
  left: -10%;
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(138, 223, 190, 0.18), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.about-me .container {
  position: relative;
  z-index: 1;
}

.about-me h2,
.about-me-content h2 {
  color: rgba(255, 255, 255, 0.9) !important;
}

.about-me p,
.about-me-content p {
  color: rgba(255, 255, 255, 0.60) !important;
}

.about-me-name {
  color: rgba(255, 255, 255, 0.9) !important;
}

.about-me-role {
  color: var(--green-400) !important;
}

/* Avatar — glow verde */
.about-me-avatar {
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(76, 175, 125, 0.2),
    0 0 60px rgba(76, 175, 125, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

.about-contact-link {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--radius-md) !important;
}

.about-contact-link:hover {
  background: rgba(76, 175, 125, 0.10) !important;
  color: #fff !important;
  border-color: rgba(76, 175, 125, 0.32) !important;
}

.about-contact-link svg {
  color: var(--green-400) !important;
}

/* Stack de tecnologías — mayor brillo en dark */
.about-me-skills svg {
  opacity: 0.75 !important;
  filter: drop-shadow(0 0 4px rgba(76, 175, 125, 0.08));
}

.about-me-skills svg:hover {
  opacity: 1 !important;
}

/* ============================================================
   3. QUICK ANSWER — Versión oscura (reemplaza el verde-claro)
   ============================================================ */

.quick-answer {
  background: rgba(76, 175, 125, 0.10) !important;
  border-left: 4px solid rgba(76, 175, 125, 0.62) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

.quick-answer strong {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* ============================================================
   4. PORTFOLIO — Sección transparente
   ============================================================ */

.portfolio {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
}

.portfolio .container h2,
.portfolio h2 {
  color: rgba(255, 255, 255, 0.90) !important;
}

.portfolio-content {
  background: var(--glass-surface) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  transition:
    transform    var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out) !important;
  will-change: transform, box-shadow;
}

.portfolio-content:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(76, 175, 125, 0.32) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important;
}

.portfolio-content-body h3 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.portfolio-content-body p {
  color: rgba(255, 255, 255, 0.50) !important;
}

.portfolio-content-body .btn {
  background: rgba(76, 175, 125, 0.10) !important;
  color: rgba(255, 255, 255, 0.80) !important;
  border: 1px solid rgba(76, 175, 125, 0.28) !important;
}

.portfolio-content-body .btn:hover {
  background: rgba(76, 175, 125, 0.22) !important;
  color: #fff !important;
  border-color: rgba(76, 175, 125, 0.5) !important;
}

.portfolio-actions .btn {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.portfolio-actions .btn:hover {
  background: rgba(76, 175, 125, 0.12) !important;
  color: #fff !important;
  border-color: rgba(76, 175, 125, 0.35) !important;
}

/* ============================================================
   5. SERVICES — Bento Grid transparente + glass cards
   ============================================================ */

.services {
  background: transparent !important;
  background-color: transparent !important;
}

.services-header h2 {
  color: rgba(255, 255, 255, 0.90) !important;
}

.services-header p {
  color: rgba(255, 255, 255, 0.52) !important;
}

/* Bento cards — glassmorphism minimal */
.bento-card {
  background: var(--glass-tint) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--glass-border-soft) !important;
  box-shadow: none !important;
  transition:
    transform    var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out) !important;
  will-change: transform, box-shadow;
}

.bento-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--glass-border-strong) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45) !important;
}

.bento-card--accent {
  background: var(--glass-tint-strong) !important;
  border-color: rgba(76, 175, 125, 0.26) !important;
}

.bento-card--accent:hover {
  border-color: rgba(76, 175, 125, 0.54) !important;
  box-shadow:
    0 16px 50px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(76, 175, 125, 0.10) !important;
}

.bento-card h3 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.bento-card p {
  color: rgba(255, 255, 255, 0.52) !important;
}

.bento-card-icon {
  background: rgba(76, 175, 125, 0.10) !important;
  border: 1px solid rgba(76, 175, 125, 0.20) !important;
  color: var(--green-400) !important;
}

.bento-card-icon svg {
  stroke: var(--green-400) !important;
}

.bento-price-from {
  color: rgba(255, 255, 255, 0.40) !important;
}

.bento-price-amount {
  color: var(--green-300) !important;
}

.bento-card--accent .bento-price-amount {
  color: var(--gold-400) !important;
}

.bento-card-link {
  color: var(--green-400) !important;
}

.bento-card-link:hover {
  color: var(--green-300) !important;
}

/* ============================================================
   6. TESTIMONIALS — Transparente
   ============================================================ */

.testimonials {
  background: transparent !important;
  background-color: transparent !important;
}

.testimonials-header h2 {
  color: rgba(255, 255, 255, 0.90) !important;
}

.testimonials-header p {
  color: rgba(255, 255, 255, 0.48) !important;
}

.testimonial-card {
  background: var(--glass-tint) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border-soft) !important;
}

.testimonial-quote {
  color: rgba(255, 255, 255, 0.68) !important;
}

.testimonial-name {
  color: rgba(255, 255, 255, 0.88) !important;
}

.testimonial-meta {
  color: rgba(255, 255, 255, 0.42) !important;
}

.testimonial-stars svg {
  color: var(--gold-500) !important;
  fill: var(--gold-500) !important;
}

/* Clientes strip */
.clients-strip {
  background: transparent !important;
}

.clients-strip p {
  color: rgba(255, 255, 255, 0.38) !important;
}

.client-logo-link {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.48) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.client-logo-link:hover {
  color: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(76, 175, 125, 0.28) !important;
  background: rgba(76, 175, 125, 0.08) !important;
}

/* ============================================================
   7. CONTACT — Transparente
   ============================================================ */

.contact {
  background: transparent !important;
  background-color: transparent !important;
}

.contact-info h2,
.contact h2 {
  color: rgba(255, 255, 255, 0.90) !important;
}

.contact-info > p {
  color: rgba(255, 255, 255, 0.58) !important;
}

.contact-detail-item a,
.contact-detail-item span {
  color: rgba(255, 255, 255, 0.70) !important;
  text-decoration: none;
}

.contact-detail-item a:hover {
  color: var(--green-400) !important;
}

.contact-detail-item svg {
  stroke: var(--green-400) !important;
}

/* Formulario glass */
.contact-form-wrapper {
  background: var(--glass-tint) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  will-change: backdrop-filter;
  border: 1px solid var(--glass-border-soft) !important;
  border-radius: var(--radius-xl) !important;
}

.contact-form-wrapper h3 {
  color: rgba(255, 255, 255, 0.88) !important;
}

label,
.contact-form-wrapper label {
  color: rgba(255, 255, 255, 0.65) !important;
}

.form-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.form-input:focus {
  border-color: rgba(76, 175, 125, 0.55) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.10) !important;
  outline: none !important;
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.26) !important;
}

/* Botón submit del formulario */
.contact-form-second input[type="submit"] {
  background: linear-gradient(90deg, var(--green-700), var(--green-600)) !important;
  color: white !important;
  border: none !important;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.contact-form-second input[type="submit"]:hover {
  background: linear-gradient(90deg, var(--green-600), var(--green-500)) !important;
  box-shadow: 0 6px 24px rgba(76, 175, 125, 0.35) !important;
  transform: translateY(-2px);
}

/* ============================================================
   8. ACORDEÓN OSCURO + ICONO +/−
   ============================================================ */

.accordion {
  background: var(--glass-surface) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border-soft) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: border-color var(--duration-fast) var(--ease-out) !important;
}

.accordion:hover {
  border-color: rgba(76, 175, 125, 0.22) !important;
}

.accordion-label {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.80) !important;
  padding: var(--space-5) var(--space-6) !important;
  transition:
    color      var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out) !important;
}

.accordion-label:hover {
  background: rgba(76, 175, 125, 0.06) !important;
  color: #fff !important;
}

/* Icono: + cuando cerrado, − cuando abierto */
.accordion-label::after {
  content: '+' !important;
  font-size: 1.3rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(76, 175, 125, 0.40) !important;
  color: rgba(76, 175, 125, 0.85) !important;
  transform: none !important;
  flex-shrink: 0 !important;
}

input:checked + .accordion-label {
  background: rgba(76, 175, 125, 0.08) !important;
  color: #fff !important;
}

input:checked + .accordion-label::after {
  content: '−' !important;
  transform: none !important;
  border-color: rgba(76, 175, 125, 0.70) !important;
  background: rgba(76, 175, 125, 0.12) !important;
  color: rgba(76, 175, 125, 1) !important;
}

.accordion-content {
  background: var(--glass-surface-soft) !important;
}

.accordion-content p {
  color: rgba(255, 255, 255, 0.58) !important;
}

.accordion-content a {
  color: var(--green-400) !important;
}

/* FAQ sections — fondo oscuro */
#faqs,
.faq-servicios,
.faq-madrid {
  background: transparent !important;
  background-color: transparent !important;
}

.faqs-title h2 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.faqs-title p {
  color: rgba(255, 255, 255, 0.48) !important;
}

/* FAQ acordeones de páginas específicas */
.faq-acc,
.faq-acc-m {
  background: var(--glass-surface) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border-soft) !important;
  border-radius: var(--radius-md) !important;
}

.faq-acc-label,
.faq-acc-m-label {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

.faq-acc-label:hover,
.faq-acc-m-label:hover {
  background: rgba(76, 175, 125, 0.06) !important;
  color: #fff !important;
}

.faq-acc-toggle:checked + .faq-acc-label,
.faq-acc-m-toggle:checked + .faq-acc-m-label {
  background: rgba(76, 175, 125, 0.08) !important;
  color: #fff !important;
  border-left: 3px solid rgba(76, 175, 125, 0.60) !important;
}

.faq-acc-content p,
.faq-acc-m-content p {
  color: rgba(255, 255, 255, 0.58) !important;
}

/* ============================================================
   9. EFECTO SPOTLIGHT (data-spotlight)
   ============================================================ */

[data-spotlight] {
  --sp-x: 50%;
  --sp-y: 50%;
  position: relative;
  overflow: hidden;
}

[data-spotlight]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    500px circle at var(--sp-x) var(--sp-y),
    rgba(76, 175, 125, 0.12),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.38s ease;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

[data-spotlight]:hover::after {
  opacity: 1;
}

/* ============================================================
   10. PAGES CIUDAD — Canvas heroes sin container
   ============================================================ */

.hero-banner-gdl.has-particles h1,
.hero-banner-gdl.has-particles p,
.hero-banner-gdl.has-particles div,
.hero-banner-gdl.has-particles a,
.hero-banner-gdl.has-particles .quick-answer {
  position: relative;
  z-index: 1;
}

.hero-banner.has-particles h1,
.hero-banner.has-particles p,
.hero-banner.has-particles div,
.hero-banner.has-particles a,
.hero-banner.has-particles .quick-answer {
  position: relative;
  z-index: 1;
}

.hero-ayto.has-particles h1,
.hero-ayto.has-particles p,
.hero-ayto.has-particles div,
.hero-ayto.has-particles a,
.hero-ayto.has-particles .quick-answer {
  position: relative;
  z-index: 1;
}

/* ============================================================
   11. SERVICE NAV CARDS (servicios.html) — Glass minimal
   ============================================================ */

.services-nav-section {
  background: transparent !important;
  background-color: transparent !important;
}

.services-nav-section h2 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.services-nav-section > p {
  color: rgba(255, 255, 255, 0.52) !important;
}

.service-nav-card {
  background: var(--glass-surface) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--glass-border-soft) !important;
  color: rgba(255, 255, 255, 0.80) !important;
  box-shadow: none !important;
  transition:
    transform    var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out) !important;
  will-change: transform, box-shadow;
}

.service-nav-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--glass-border-strong) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
}

.service-nav-card h3 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.service-nav-card p {
  color: rgba(255, 255, 255, 0.48) !important;
}

.service-nav-card .service-nav-link {
  color: var(--green-400) !important;
}

/* ============================================================
   12. SERVICE CARDS (servicios.html grid) — Glass
   ============================================================ */

.services.cabin ~ section .service-card,
.service-card {
  background: var(--glass-surface) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid var(--glass-border-soft) !important;
  transition:
    transform    var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out) !important;
  will-change: transform, box-shadow;
}

.service-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--glass-border-strong) !important;
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.45) !important;
}

.service-card h3 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.service-card p {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ============================================================
   13. TARIFAS — Pricing cards glass + sección oscura
   ============================================================ */

#tarif-cards.tarif-cards,
.tarif-cards {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  overflow: hidden;
}

.tarif-cards::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(76, 175, 125, 0.07), transparent 68%);
  pointer-events: none;
}

.tariff-text h2 {
  color: rgba(255, 255, 255, 0.90) !important;
}

.tariff-text p {
  color: rgba(255, 255, 255, 0.56) !important;
}

/* Pricing cards glass */
.card-tariff {
  background: var(--glass-tint-soft) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.82) !important;
  transition:
    transform    var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out) !important;
  will-change: transform, box-shadow;
}

.card-tariff:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(76, 175, 125, 0.38) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(76, 175, 125, 0.14) !important;
}

/* Card central — destacada */
.col-sm-4.display:nth-child(2) .card-tariff {
  border-color: rgba(76, 175, 125, 0.42) !important;
  box-shadow:
    0 0 50px rgba(76, 175, 125, 0.15),
    0 0 0 1px rgba(76, 175, 125, 0.12) !important;
  transform: scale(1.025);
}

.col-sm-4.display:nth-child(2) .card-tariff:hover {
  transform: scale(1.025) translateY(-7px) !important;
}

.card-tariff .title,
.card-tariff h2,
.card-tariff h3 {
  color: rgba(255, 255, 255, 0.90) !important;
}

.card-tariff .option ul li {
  color: rgba(255, 255, 255, 0.70) !important;
}

/* Tabla comparativa */
.price-compare th {
  background: rgba(76, 175, 125, 0.22) !important;
  color: rgba(255, 255, 255, 0.90) !important;
}

.price-compare td {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.68) !important;
}

.price-compare tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03) !important;
}

.price-compare tr:hover td {
  background: rgba(76, 175, 125, 0.05) !important;
}

/* Keywords tarifas */
.tariff-keywords-section {
  background: transparent !important;
  background-color: transparent !important;
}

.tariff-keywords-section h2 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.tariff-keywords-section p {
  color: rgba(255, 255, 255, 0.52) !important;
}

.tariff-kw-card {
  background: var(--glass-surface) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid var(--glass-border-soft) !important;
}

.tariff-kw-card h3 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.tariff-kw-card p {
  color: rgba(255, 255, 255, 0.48) !important;
}

/* Breadcrumb toggle */
.breadcrumb__item {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.68) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
}

.breadcrumb__item.checked,
.breadcrumb__item:hover {
  background: rgba(76, 175, 125, 0.14) !important;
  border-color: rgba(76, 175, 125, 0.38) !important;
  color: #fff !important;
}

.breadcrumb__title {
  color: inherit !important;
}

/* ============================================================
   14. PRICING INFO (servicios.html)
   ============================================================ */

.pricing-info-section {
  background: var(--glass-surface-strong) !important;
}

.pricing-block {
  background: var(--glass-tint-soft) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xl) !important;
}

.pricing-block h2 {
  color: rgba(255, 255, 255, 0.90) !important;
}

.pricing-block p {
  color: rgba(255, 255, 255, 0.60) !important;
}

/* ============================================================
   15. PÁGINAS DE CIUDAD — Secciones internas
   ============================================================ */

.intro,
.intro-gdl,
.intro-ayto {
  background: transparent !important;
  background-color: transparent !important;
}

.intro h2, .intro-gdl h2, .intro-ayto h2 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.intro p, .intro-gdl p, .intro-ayto p {
  color: rgba(255, 255, 255, 0.60) !important;
}

.benefits,
.benefits-gdl,
.benefits-ayto,
.offer-ayto,
.problem-ayto {
  background: transparent !important;
  background-color: transparent !important;
}

.benefit h3, .benefit-gdl h3, .benefit.madrid h3,
.benefit-item h3, .offer-card h3, .problem-item h3 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.benefit p, .benefit-gdl p, .benefit.madrid p,
.benefit-item p, .benefit-item div p,
.offer-card p, .problem-item p {
  color: rgba(255, 255, 255, 0.56) !important;
}

.benefit-item .check {
  color: var(--green-400) !important;
}

.offer-card {
  background: var(--glass-surface) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid var(--glass-border-soft) !important;
  border-radius: var(--radius-lg) !important;
}

.problem-item {
  background: var(--glass-surface-soft) !important;
  border: 1px solid var(--glass-border-soft) !important;
  border-radius: var(--radius-md) !important;
}

/* Process steps */
.process-ayto,
.work-process,
.benefit-servicess-services,
.why-website {
  background: transparent !important;
  background-color: transparent !important;
}

.work-process h2,
.benefit-servicess-services h2,
.why-website h2,
.process-ayto h2 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.step h3,
.process-step-ayto h3 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.step p,
.why-text p,
.why-text li,
.process-step-ayto p {
  color: rgba(255, 255, 255, 0.56) !important;
}

.step-number {
  color: rgba(76, 175, 125, 0.5) !important;
}

/* Local growth */
.local-growth,
.local-growth.gdl,
.local-growth.madrid {
  background: transparent !important;
  background-color: transparent !important;
}

.local-growth h2,
.local-growth > .container > p {
  color: rgba(255, 255, 255, 0.88) !important;
}

.growth-card,
.growth-card-gdl {
  background: var(--glass-surface) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border-soft) !important;
  border-radius: var(--radius-lg) !important;
}

.growth-card h3, .growth-card-gdl h3 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.growth-card p, .growth-card-gdl p {
  color: rgba(255, 255, 255, 0.52) !important;
}

/* Local projects */
.local-projects {
  background: transparent !important;
  background-color: transparent !important;
}

.local-projects h2,
.local-projects > .container > p {
  color: rgba(255, 255, 255, 0.88) !important;
}

.project-card-gdl {
  background: var(--glass-surface) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border-soft) !important;
  border-radius: var(--radius-lg) !important;
}

.project-card-gdl h3 { color: rgba(255, 255, 255, 0.88) !important; }
.project-card-gdl p  { color: rgba(255, 255, 255, 0.55) !important; }

/* Free consultation */
.free-consultation,
.free-consultation-gdl {
  background: var(--glass-surface-strong) !important;
}

.free-consultation h2,
.free-consultation-gdl h2,
.consultation-text-gdl h2,
.consultation-text-md h2 {
  color: rgba(255, 255, 255, 0.90) !important;
}

.consultation-text-gdl p,
.consultation-text-md p {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* Web mistakes */
.web-mistakes,
.web-mistakes.gdl,
.web-mistakes.madrid {
  background: transparent !important;
  background-color: transparent !important;
}

.web-mistakes h2 { color: rgba(255, 255, 255, 0.88) !important; }
.web-mistakes h2 span { color: rgba(255, 255, 255, 0.46) !important; }
.mistakes li .title, .mistakes-gdl li .title { color: rgba(255, 255, 255, 0.88) !important; }
.mistakes li .descr, .mistakes-gdl li .descr { color: rgba(255, 255, 255, 0.58) !important; }
.conclusion, .conclusion-gdl { color: rgba(255, 255, 255, 0.68) !important; }

/* CTA ayuntamientos */
.cta-ayto {
  background: var(--glass-surface-strong) !important;
}
.cta-ayto h2, .cta-ayto p { color: rgba(255, 255, 255, 0.90) !important; }

/* ============================================================
   16. INLINE STYLE OVERRIDES (seciones con style="" en HTML)
   ============================================================ */

section[style*="background:#f0ede8"],
section[style*="background:#fff8f8"],
section[style*="background:#fff"],
section[style*="background:#f8f6f9"],
section[style*="background:#f8f6f1"],
section[style*="background:#f5f9f7"],
section[style*="background:#f5f0e8"],
section[style*="background:#f0f4ff"] {
  background: transparent !important;
  background-color: transparent !important;
}

section[style] h2,
section[style] h3 {
  color: rgba(255, 255, 255, 0.88) !important;
}

section[style] p,
section[style] li {
  color: rgba(255, 255, 255, 0.58) !important;
}

section[style] a[style*="color:rgb"],
section[style] a[style*="color:#"] {
  color: var(--green-400) !important;
}

section[style] strong {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================================
   17. BOTONES GLOBALES — Modo oscuro
   ============================================================ */

.btn {
  background: rgba(76, 175, 125, 0.10) !important;
  color: rgba(255, 255, 255, 0.80) !important;
  border: 1px solid rgba(76, 175, 125, 0.25) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
}

.btn:hover {
  background: rgba(76, 175, 125, 0.22) !important;
  color: #fff !important;
  border-color: rgba(76, 175, 125, 0.50) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(76, 175, 125, 0.20) !important;
}

/* ============================================================
   18. SECCIÓN INTRO SERVICIOS (fondo blanco inline)
   ============================================================ */

section[style*="background:#f5f9f7"] h2,
section[style*="background:#f5f9f7"] p {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ============================================================
   19. SCROLL REVEAL — Animación refinada
   ============================================================ */

.reveal {
  transition:
    opacity   0.75s var(--ease-out),
    transform 0.75s var(--ease-out) !important;
}

.reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(20px);
}

.reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ============================================================
   20. CONTACT FORM ANTIGUO (páginas sin wrapper moderno)
   ============================================================ */

/* Formularios legacy (guadalajara, madrid, ayuntamientos) */
.contact-form {
  backdrop-filter: blur(14px) !important;
  border-radius: var(--radius-xl) !important;
}

.contact-form h2.contact-title {
  color: rgba(255, 255, 255, 0.88) !important;
}

.contact-form-second h3 {
  color: rgba(255, 255, 255, 0.72) !important;
}

.contact-form-second input[type="text"],
.contact-form-second input[type="email"],
.contact-form-second textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-radius: var(--radius-md) !important;
}

.contact-form-second input[type="text"]:focus,
.contact-form-second input[type="email"]:focus,
.contact-form-second textarea:focus {
  border-color: rgba(76, 175, 125, 0.50) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.08) !important;
}

.contact-form-second input::placeholder,
.contact-form-second textarea::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
}

.contact-social .social-media a {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.contact-social .location h3 {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ============================================================
   21. MODAL GRACIAS — Modo oscuro
   ============================================================ */

.modal-content {
  background: var(--glass-surface-strong) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(76, 175, 125, 0.22) !important;
  will-change: opacity, backdrop-filter;
}

.modal-content h3 {
  color: rgba(255, 255, 255, 0.90) !important;
}

.modal-close svg {
  stroke: rgba(255, 255, 255, 0.60) !important;
}

/* ============================================================
   22. FOOTER — Sin fondo blanco visible debajo
   ============================================================ */

/* El footer ya es oscuro con bubbles — se mantiene */

/* ============================================================
   23. HERO — CTA BAND ya oscuro — refinamiento adicional
   ============================================================ */

.cta-band {
  background: linear-gradient(135deg, #08120e, #0d2019) !important;
  position: relative;
}

.cta-band::before {
  background: radial-gradient(
    ellipse 600px 350px at 50% 50%,
    rgba(138, 223, 190, 0.20),
    transparent 70%
  ) !important;
}

.cta-band h2,
.cta-email-link {
  color: rgba(255, 255, 255, 0.90) !important;
}

.cta-band > .container > p {
  color: rgba(255, 255, 255, 0.60) !important;
}

/* ============================================================
   25. STEP NUMBERS & BENEFIT SERVICES — modo dark
   ============================================================ */

.step-number {
  color: rgba(76, 175, 125, 0.45) !important;
  -webkit-text-stroke: 1px rgba(76, 175, 125, 0.3) !important;
}

/* Why website section */
.why-text ul li { color: rgba(255, 255, 255, 0.65) !important; }
.why-text strong { color: rgba(255, 255, 255, 0.88) !important; }

/* ============================================================
   26. SECCIÓN SERVICIOS INLINE (within servicios.html)
   ============================================================ */

/* La sección "what we offer" con grid inline en servicios.html */
.pricing-info-inner {
  position: relative;
  z-index: 1;
}

section[style*="background:#f5f9f7"] a,
section[style*="background:#f8f6f1"] a {
  color: var(--green-400) !important;
}

section[style*="background:#f5f9f7"] h2,
section[style*="background:#f8f6f1"] h2 {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* ============================================================
   24. FEATURED SERVICES — Mantiene gradiente oscuro existente
       Pero suavizamos para que se integre mejor
   ============================================================ */

.featured-services {
  background: linear-gradient(
    108deg,
    rgba(30, 64, 56, 0.85) 0%,
    rgba(18, 43, 37, 0.90) 50%,
    rgba(30, 64, 56, 0.85) 100%
  ) !important;
  backdrop-filter: blur(8px) !important;
  border-top: 1px solid rgba(76, 175, 125, 0.12);
  border-bottom: 1px solid rgba(76, 175, 125, 0.12);
}

/* ============================================================
   27. GLOW CARD — Border spotlight
   Fiel al componente easemize/spotlight-card de 21st.dev

   Técnica:
   • background de 2 capas con background-clip diferente:
       - padding-box: interior glassmorphism
       - border-box:  gradiente que sigue el cursor
   • JS actualiza --x, --y en coordenadas RELATIVAS AL ELEMENTO
     (NO de viewport) porque backdrop-filter rompe fixed attachment
     en todos los navegadores → usamos background-attachment: scroll
   • Compatible con overflow:hidden — no necesita pseudo-elementos.
   ============================================================ */

[data-glow] {
  /* Posición inicial: fuera de la card → borde invisible */
  --x:  -9999px;
  --y:  -9999px;
  --xp: 0.5;
  --yp: 0.5;

  /* Paleta: sage → cyan-green según posición horizontal */
  --glow-base:    138;
  --glow-spread:   55;
  --glow-hue: calc(var(--glow-base) + var(--xp) * var(--glow-spread));

  --glow-size:  360px;
  --glow-border: 1.5px;

  border: var(--glow-border) solid transparent !important;
  border-radius: var(--radius-lg) !important;

  /* Capa 1 — interior glassmorphism, clipped a padding-box */
  /* Capa 2 — borde glow, clipped a border-box              */
  /* background-attachment: scroll (default) → posición relativa al elemento */
  background:
    linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035)) padding-box,
    radial-gradient(
      var(--glow-size) circle at var(--x) var(--y),
      hsl(var(--glow-hue), 88%, 60%)   0%,
      rgba(255, 255, 255, 0.11)        40%,
      rgba(255, 255, 255, 0.035)      100%
    ) border-box !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  transition:
    transform  var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out) !important;
}

[data-glow]:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.5) !important;
}

/* ─── Variante: bento card accent (fondo verde) ─── */
.bento-card--accent[data-glow] {
  background:
    linear-gradient(145deg, rgba(76,175,125,0.20), rgba(76,175,125,0.08)) padding-box,
    radial-gradient(
      var(--glow-size) circle at var(--x) var(--y),
      hsl(var(--glow-hue), 88%, 65%)   0%,
      rgba(76, 175, 125, 0.26)         40%,
      rgba(76, 175, 125, 0.08)        100%
    ) border-box !important;
}

/* ─── Variante: pricing card ─── */
.card-tariff[data-glow] {
  background:
    linear-gradient(155deg, rgba(255,255,255,0.095), rgba(255,255,255,0.04)) padding-box,
    radial-gradient(
      var(--glow-size) circle at var(--x) var(--y),
      hsl(var(--glow-hue), 85%, 62%)   0%,
      rgba(255, 255, 255, 0.10)        42%,
      rgba(255, 255, 255, 0.035)      100%
    ) border-box !important;
}

/* Card central (popular) — tono dorado en el borde */
.col-sm-4.display:nth-child(2) .card-tariff[data-glow] {
  --glow-base:  42;
  --glow-spread: 18;
}

/* ─── Variante: service-nav-card ─── */
.service-nav-card[data-glow] {
  background:
    rgba(15, 32, 25, 0.70) padding-box,
    radial-gradient(
      var(--glow-size) circle at var(--x) var(--y),
      hsl(var(--glow-hue), 82%, 58%)   0%,
      rgba(255, 255, 255, 0.09)        42%,
      rgba(255, 255, 255, 0.03)       100%
    ) border-box !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ─── Variante: portfolio card ─── */
.portfolio-content[data-glow] {
  background:
    rgba(15, 32, 25, 0.66) padding-box,
    radial-gradient(
      var(--glow-size) circle at var(--x) var(--y),
      hsl(var(--glow-hue), 82%, 58%)   0%,
      rgba(255, 255, 255, 0.09)        42%,
      rgba(255, 255, 255, 0.03)       100%
    ) border-box !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Mantener overflow:hidden en portfolio para clip de imagen */
.portfolio-content[data-glow] {
  overflow: hidden !important;
}

/* Asegurar que el spotlight ::after no choca con el nuevo borde */
[data-glow][data-spotlight]::after {
  z-index: 2;
}


.nav-mega-col-links{
  list-style:none;
}