/* ==========================================================================
   MyComuApp — Landing Page
   Hoja de estilos principal
   Línea de diseño: verde institucional + fondo crema, tarjetas blancas,
   esquinas suaves y sombras difusas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de diseño
   -------------------------------------------------------------------------- */
:root {
  /* Marca */
  --mca-green: #648b3a;
  --mca-green-dark: #506f2e;
  --mca-green-darker: #3d5522;
  --mca-green-light: #7fa851;
  --mca-green-soft: #e8efdf;
  --mca-green-softer: #f1f6ea;

  /* Superficies */
  --mca-cream: #f9faf0;
  --mca-cream-deep: #f3f5e6;
  --mca-white: #ffffff;

  /* Texto */
  --mca-ink: #1b1d17;
  --mca-ink-soft: #4d5347;
  --mca-ink-muted: #6b7263;

  /* Acentos de estado (tomados de la UI de la app) */
  --mca-red: #e05252;
  --mca-red-soft: #fdeaea;
  --mca-amber: #e0912f;
  --mca-amber-soft: #fdf2e3;

  /* Paleta de acentos para los íconos.
     Tonos desaturados y de luminosidad pareja, para que convivan con el verde
     institucional sin competir con él ni verse infantiles. */
  --acc-verde: #5f8a37;
  --acc-verde-bg: #eaf1e0;
  --acc-teal: #2c8a82;
  --acc-teal-bg: #e1f0ee;
  --acc-azul: #3d6ea3;
  --acc-azul-bg: #e5edf6;
  --acc-ambar: #b3720f;
  --acc-ambar-bg: #fbf0da;
  --acc-terracota: #c25c3c;
  --acc-terracota-bg: #f9e8e2;
  --acc-violeta: #6d55a0;
  --acc-violeta-bg: #ede9f6;

  /* Variantes oscuras para cuando el acento se usa como color de TEXTO:
     los tonos de arriba sirven para rellenos (>=3:1) pero no llegan al 4.5:1
     que exige el texto. */
  --acc-verde-ink: #4a6b2a;
  --acc-teal-ink: #1f6660;
  --acc-azul-ink: #325a83;
  --acc-ambar-ink: #8a5a0f;
  --acc-terracota-ink: #9c452c;
  --acc-violeta-ink: #584287;

  /* Líneas y sombras */
  --mca-border: #e7ead9;
  --mca-shadow-sm: 0 2px 8px rgba(27, 29, 23, 0.04);
  --mca-shadow: 0 6px 24px rgba(27, 29, 23, 0.06);
  --mca-shadow-lg: 0 18px 48px rgba(27, 29, 23, 0.10);
  --mca-shadow-green: 0 12px 28px rgba(100, 139, 58, 0.22);

  /* Formas */
  --mca-radius-sm: 12px;
  --mca-radius: 18px;
  --mca-radius-lg: 26px;
  --mca-radius-pill: 999px;

  /* Bootstrap overrides */
  --bs-primary: #648b3a;
  --bs-primary-rgb: 100, 139, 58;
  --bs-body-bg: #f9faf0;
  --bs-body-color: #4d5347;
  --bs-border-color: #e7ead9;
  --bs-link-color: #648b3a;
  --bs-link-hover-color: #506f2e;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* {
  scrollbar-color: var(--mca-green-light) var(--mca-cream-deep);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--mca-cream);
  color: var(--mca-ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--mca-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

a {
  text-decoration: none;
  transition: color 0.2s ease;
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--mca-green);
  color: #fff;
}

:focus-visible {
  outline: 3px solid rgba(100, 139, 58, 0.45);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Enlace de salto al contenido: sólo visible al recibir foco por teclado */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  background: var(--mca-green);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.75rem 1.35rem;
  border-radius: 0 0 var(--mca-radius-sm) var(--mca-radius-sm);
  box-shadow: var(--mca-shadow-lg);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* --------------------------------------------------------------------------
   3. Utilidades
   -------------------------------------------------------------------------- */
.text-green { color: var(--mca-green) !important; }
.text-ink { color: var(--mca-ink) !important; }
.bg-cream-deep { background-color: var(--mca-cream-deep) !important; }

/* Aire lateral en móvil.
   El contenedor de Bootstrap trae 12 px por lado, que a 390 px de ancho deja
   el texto pegado al borde. Lo subimos a 22 px sólo en pantallas angostas: las
   filas compensan sus propios márgenes negativos, así que el contenido queda
   alineado sin tocar nada más. */
@media (max-width: 575.98px) {
  .container,
  .container-fluid {
    padding-left: 1.375rem;
    padding-right: 1.375rem;
  }
}

.section {
  padding: 5.5rem 0;
  position: relative;
}

.section-sm { padding: 3.5rem 0; }

@media (max-width: 767.98px) {
  .section { padding: 3.5rem 0; }
  .section-sm { padding: 2.5rem 0; }
}

.lead-mca {
  font-size: 1.125rem;
  color: var(--mca-ink-soft);
  line-height: 1.75;
}

.display-hero {
  font-size: clamp(2.25rem, 5.2vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.section-title {
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Acentos: se aplican a la tarjeta y los hereda su ícono.
   Sin clase, todo cae al verde institucional. */
.acc-verde     { --acc: var(--acc-verde);     --acc-bg: var(--acc-verde-bg);     --acc-ink: var(--acc-verde-ink); }
.acc-teal      { --acc: var(--acc-teal);      --acc-bg: var(--acc-teal-bg);      --acc-ink: var(--acc-teal-ink); }
.acc-azul      { --acc: var(--acc-azul);      --acc-bg: var(--acc-azul-bg);      --acc-ink: var(--acc-azul-ink); }
.acc-ambar     { --acc: var(--acc-ambar);     --acc-bg: var(--acc-ambar-bg);     --acc-ink: var(--acc-ambar-ink); }
.acc-terracota { --acc: var(--acc-terracota); --acc-bg: var(--acc-terracota-bg); --acc-ink: var(--acc-terracota-ink); }
.acc-violeta   { --acc: var(--acc-violeta);   --acc-bg: var(--acc-violeta-bg);   --acc-ink: var(--acc-violeta-ink); }

/* Etiqueta superior de sección */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--mca-green-soft);
  color: var(--mca-green-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.95rem;
  border-radius: var(--mca-radius-pill);
  margin-bottom: 1rem;
}

.eyebrow i { font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */
.btn {
  font-weight: 600;
  border-radius: var(--mca-radius-pill);
  padding: 0.7rem 1.6rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border-width: 2px;
}

.btn-lg {
  padding: 0.9rem 2.1rem;
  font-size: 1.02rem;
}

.btn-mca {
  background-color: var(--mca-green);
  border-color: var(--mca-green);
  color: #fff;
  box-shadow: var(--mca-shadow-green);
}

.btn-mca:hover,
.btn-mca:focus {
  background-color: var(--mca-green-dark);
  border-color: var(--mca-green-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(100, 139, 58, 0.3);
}

.btn-mca-outline {
  background-color: transparent;
  border-color: var(--mca-green);
  color: var(--mca-green-dark);
}

.btn-mca-outline:hover,
.btn-mca-outline:focus {
  background-color: var(--mca-green);
  border-color: var(--mca-green);
  color: #fff;
  transform: translateY(-2px);
}

.btn-mca-ghost {
  background-color: #fff;
  border-color: var(--mca-border);
  color: var(--mca-ink);
  box-shadow: var(--mca-shadow-sm);
}

.btn-mca-ghost:hover,
.btn-mca-ghost:focus {
  border-color: var(--mca-green);
  color: var(--mca-green-dark);
  transform: translateY(-2px);
}

.btn-mca-white {
  background-color: #fff;
  border-color: #fff;
  color: var(--mca-green-dark);
}

.btn-mca-white:hover,
.btn-mca-white:focus {
  background-color: var(--mca-cream);
  border-color: var(--mca-cream);
  color: var(--mca-green-darker);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   5. Navbar
   -------------------------------------------------------------------------- */
.navbar-mca {
  background-color: rgba(249, 250, 240, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  padding: 0.85rem 0;
  transition: box-shadow 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
  border-bottom: 1px solid transparent;
}

.navbar-mca.is-scrolled {
  box-shadow: 0 4px 22px rgba(27, 29, 23, 0.07);
  border-bottom-color: var(--mca-border);
  padding: 0.55rem 0;
}

/* En las páginas con cabecera fotográfica, la barra arranca transparente para
   que la foto llegue hasta el borde superior, y se vuelve sólida al hacer
   scroll. Sólo en escritorio: en móvil el menú desplegado necesita fondo. */
@media (min-width: 992px) {
  body[data-hero="photo"] .navbar-mca:not(.is-scrolled) {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }

  body[data-hero="photo"] .navbar-mca:not(.is-scrolled) .navbar-brand-mca { color: #fff; }

  body[data-hero="photo"] .navbar-mca:not(.is-scrolled) .nav-link {
    color: rgba(255, 255, 255, 0.92);
  }

  body[data-hero="photo"] .navbar-mca:not(.is-scrolled) .nav-link:hover,
  body[data-hero="photo"] .navbar-mca:not(.is-scrolled) .nav-link:focus,
  body[data-hero="photo"] .navbar-mca:not(.is-scrolled) .nav-link.active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.16);
  }
}

.navbar-brand-mca {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--mca-green);
  letter-spacing: -0.03em;
}

.navbar-brand-mca:hover { color: var(--mca-green-dark); }

.navbar-brand-mca img {
  width: 42px;
  height: 42px;
  transition: transform 0.35s ease;
}

.navbar-brand-mca:hover img { transform: rotate(-6deg) scale(1.05); }

.navbar-mca .nav-link {
  color: var(--mca-ink);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 0.95rem !important;
  border-radius: var(--mca-radius-pill);
  position: relative;
}

.navbar-mca .nav-link:hover,
.navbar-mca .nav-link:focus {
  color: var(--mca-green-dark);
  background-color: var(--mca-green-soft);
}

.navbar-mca .nav-link.active {
  color: var(--mca-green-dark);
  background-color: var(--mca-green-soft);
}

.navbar-mca .dropdown-menu {
  border: 1px solid var(--mca-border);
  border-radius: var(--mca-radius);
  box-shadow: var(--mca-shadow-lg);
  padding: 0.5rem;
  margin-top: 0.6rem;
  background: #fff;
}

.navbar-mca .dropdown-item {
  border-radius: var(--mca-radius-sm);
  padding: 0.6rem 0.85rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--mca-ink);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.navbar-mca .dropdown-item:hover,
.navbar-mca .dropdown-item:focus {
  background-color: var(--mca-green-soft);
  color: var(--mca-green-dark);
}

.navbar-mca .dropdown-item i { color: var(--mca-green); font-size: 1.05rem; }

/* Los submenús se abren al pasar el cursor (sólo escritorio; en móvil el menú
   se despliega con el botón hamburguesa). El ::before tiende un puente
   invisible sobre el hueco, para que el cursor pueda bajar sin que se cierre. */
@media (min-width: 992px) {
  .navbar-mca .nav-item.dropdown:hover > .dropdown-menu,
  .navbar-mca .nav-item.dropdown:focus-within > .dropdown-menu {
    display: block;
  }

  .navbar-mca .nav-item.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.7rem;
    height: 0.7rem;
  }
}

.navbar-toggler {
  border: 1px solid var(--mca-border);
  border-radius: 12px;
  padding: 0.45rem 0.6rem;
}

.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(100, 139, 58, 0.25); }

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23648b3a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px) {
  .navbar-mca .navbar-collapse {
    background: #fff;
    border: 1px solid var(--mca-border);
    border-radius: var(--mca-radius);
    box-shadow: var(--mca-shadow-lg);
    padding: 0.85rem;
    margin-top: 0.85rem;
  }
  .navbar-mca .dropdown-menu {
    box-shadow: none;
    border: none;
    background: var(--mca-cream);
    margin-top: 0.25rem;
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 8rem 0 4.5rem;
  overflow: hidden;
}

/* ---- Hero con fotografía a sangre ---------------------------------------
   El velo va de tinta casi opaca a la izquierda (donde vive el texto) hasta
   verde translúcido a la derecha, para que la foto respire sin perder
   contraste. */
.hero--photo {
  padding: 10.5rem 0 6rem;
  background-image:
    linear-gradient(100deg,
      rgba(20, 22, 17, 0.94) 0%,
      rgba(31, 45, 18, 0.90) 34%,
      rgba(61, 85, 34, 0.74) 62%,
      rgba(100, 139, 58, 0.48) 100%),
    url("../img/bg/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* El círculo desenfocado del hero claro sobra sobre la foto */
.hero--photo::before { display: none; }

/* Degradado inferior que funde la foto con el fondo crema de la sección
   siguiente, para que el corte no sea duro. */
.hero--photo .display-hero {
  color: #fff;
  /* Columna más angosta que el hero anterior: bajamos el tope tipográfico
     para que el titular reparta bien las líneas. */
  font-size: clamp(2.2rem, 4.4vw, 3.45rem);
}

.hero--photo .text-hero-accent {
  color: #b2d67e;
  display: block;
}
.hero--photo .lead-mca { color: rgba(255, 255, 255, 0.86); }
.hero--photo .lead-mca strong { color: #fff; }
.hero--photo .hero-list li { color: rgba(255, 255, 255, 0.86); }
.hero--photo .hero-list i { color: #b2d67e; }

.hero--photo .hero-badge {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero--photo .hero-badge .dot {
  background: rgba(255, 255, 255, 0.2);
  color: #d3e9b3;
}

@media (max-width: 991.98px) {
  .hero--photo {
    padding: 8.5rem 0 4rem;
    /* En móvil el texto ocupa todo el ancho: el velo debe cubrir parejo */
    background-image:
      linear-gradient(160deg,
        rgba(20, 22, 17, 0.94) 0%,
        rgba(31, 45, 18, 0.90) 55%,
        rgba(61, 85, 34, 0.80) 100%),
      url("../img/bg/hero.jpg");
  }
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
}

.hero::before {
  width: 620px;
  height: 620px;
  background: rgba(100, 139, 58, 0.16);
  top: -240px;
  right: -160px;
}

.hero::after {
  width: 460px;
  height: 460px;
  background: rgba(127, 168, 81, 0.13);
  bottom: -220px;
  left: -180px;
}

.hero > .container { position: relative; z-index: 1; }

@media (max-width: 991.98px) {
  .hero { padding: 6.5rem 0 3rem; }
}

/* Tarjetas flotantes sobre el mockup */
.float-card {
  position: absolute;
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: var(--mca-radius);
  box-shadow: var(--mca-shadow-lg);
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 3;
}

.float-card .fc-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.float-card .fc-label {
  font-size: 0.72rem;
  color: var(--mca-ink-muted);
  font-weight: 600;
  line-height: 1.3;
}

.float-card .fc-value {
  font-size: 0.98rem;
  color: var(--mca-ink);
  font-weight: 800;
  line-height: 1.3;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}

@media (max-width: 1199.98px) {
}

@media (max-width: 575.98px) {
  .float-card { display: none; }
  /* En Características sí se conserva: es el único vínculo visual con la app */
  .float-card--foto {
    display: flex;
    left: 0.5rem;
    bottom: 0.9rem;
    padding: 0.65rem 0.85rem;
  }
  .float-card--foto .fc-icon { width: 32px; height: 32px; font-size: 0.95rem; }
  .float-card--foto .fc-value { font-size: 0.88rem; }
}

/* Badges de las tiendas.
   Un solo diseño para las tres: píldora con ícono y dos líneas de texto. */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  height: 56px;
  padding: 0 1.35rem;
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: 14px;
  color: var(--mca-ink);
  line-height: 1.2;
  box-shadow: var(--mca-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.store-badge i {
  font-size: 1.75rem;
  color: var(--mca-green-dark);
  transition: color 0.2s ease;
}

.store-badge .sb-top {
  font-size: 0.63rem;
  opacity: 0.72;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
}

.store-badge .sb-name {
  font-size: 0.98rem;
  font-weight: 700;
}

/* Sólo las tiendas con ficha reaccionan al cursor */
a.store-badge:hover,
a.store-badge:focus-visible {
  color: var(--mca-ink);
  border-color: var(--mca-green);
  transform: translateY(-3px);
  box-shadow: var(--mca-shadow-lg);
}

/* Tienda aún no publicada: mismo diseño, un punto más apagado */
.store-badge--soon {
  opacity: 0.82;
  box-shadow: var(--mca-shadow-sm);
}

/* Sobre fondo oscuro (hero con fotografía y panel de descarga) */
.hero--photo .store-badge,
.download-panel .store-badge {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}

.hero--photo .store-badge i,
.download-panel .store-badge i { color: #fff; }

.hero--photo a.store-badge:hover,
.hero--photo a.store-badge:focus-visible,
.download-panel a.store-badge:hover,
.download-panel a.store-badge:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--mca-green-darker);
}

.hero--photo a.store-badge:hover i,
.hero--photo a.store-badge:focus-visible i,
.download-panel a.store-badge:hover i,
.download-panel a.store-badge:focus-visible i { color: var(--mca-green-dark); }

@media (max-width: 400px) {
  .store-badge { height: 48px; padding: 0 1rem; gap: 0.6rem; }
  .store-badge i { font-size: 1.5rem; }
  .store-badge .sb-name { font-size: 0.9rem; }
}

/* Degradado inferior que funde la fotografía con la sección siguiente.
   Va anclado al borde del encabezado (no a su contenedor), así funciona
   con cualquier padding y en todos los tamaños de pantalla.
   --fade-to indica el color de la sección que viene a continuación. */
.hero--photo,
.page-hero--img {
  --fade-to: var(--mca-cream);
}

/* En la portada, debajo del hero viene la barra de aliados */
.hero--photo { --fade-to: var(--mca-cream-deep); }

.hero--photo::after,
.page-hero--img::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  height: 4rem;
  border-radius: 0;
  filter: none;
  background: linear-gradient(to bottom,
    rgba(243, 245, 230, 0) 0%,
    rgba(243, 245, 230, 0.35) 55%,
    var(--fade-to) 100%);
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .hero--photo::after,
  .page-hero--img::after { height: 3rem; }
}

/* --------------------------------------------------------------------------
   6b. Cabecera de subpágina
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding: 8.5rem 0 3.5rem;
  overflow: hidden;
  border-bottom: 1px solid var(--mca-border);
}

.page-hero::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: rgba(100, 139, 58, 0.14);
  filter: blur(90px);
  top: -260px;
  right: -140px;
  pointer-events: none;
}

.page-hero > .container { position: relative; z-index: 1; }

/* Variante con fotografía de fondo */
.page-hero--img {
  border-bottom: none;
  color: rgba(255, 255, 255, 0.9);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 9.5rem 0 4.5rem;
}

/* Velo verde: garantiza el contraste del texto sobre cualquier fotografía.
   Anula el círculo desenfocado que hereda de .page-hero::before. */
.page-hero--img::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  filter: none;
  top: 0;
  right: 0;
  background: linear-gradient(105deg,
    rgba(27, 29, 23, 0.92) 0%,
    rgba(61, 85, 34, 0.86) 45%,
    rgba(100, 139, 58, 0.62) 100%);
}

.page-hero--img .page-hero-title { color: #fff; }
.page-hero--img .page-hero-lead { color: rgba(255, 255, 255, 0.88); }

.page-hero--img .page-hero-icon {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.page-hero--img .breadcrumb-mca a { color: rgba(255, 255, 255, 0.7); }
.page-hero--img .breadcrumb-mca a:hover { color: #fff; }
.page-hero--img .breadcrumb-mca [aria-current="page"] { color: #fff; }
.page-hero--img .breadcrumb-mca li + li::before { color: rgba(255, 255, 255, 0.5); }

.page-hero-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--mca-green-soft);
  color: var(--mca-green-dark);
  font-size: 1.7rem;
  margin-bottom: 1.1rem;
}

.page-hero-title {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 1rem;
}

.page-hero-lead { max-width: 760px; margin-bottom: 0; }

@media (max-width: 767.98px) {
  .page-hero { padding: 7rem 0 2.5rem; }
  .page-hero--img { padding: 7.5rem 0 3rem; }
}

/* Miga de pan */
.breadcrumb-mca {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: 0.86rem;
  font-weight: 600;
}

.breadcrumb-mca li { display: flex; align-items: center; gap: 0.5rem; }

.breadcrumb-mca li + li::before {
  content: "/";
  color: var(--mca-ink-muted);
  opacity: 0.6;
}

.breadcrumb-mca a { color: var(--mca-ink-muted); }
.breadcrumb-mca a:hover { color: var(--mca-green-dark); }
.breadcrumb-mca [aria-current="page"] { color: var(--mca-green-dark); }

/* --------------------------------------------------------------------------
   7. Barra de aliados
   -------------------------------------------------------------------------- */
.allies {
  border-top: 1px solid var(--mca-border);
  border-bottom: 1px solid var(--mca-border);
  background: var(--mca-cream-deep);
}

.allies-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mca-ink-muted);
}

/* Logos reales de los aliados */
.ally-logo {
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: var(--mca-radius);
  padding: 1rem 1.25rem;
  height: 92px;
  box-shadow: var(--mca-shadow-sm);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.ally-logo:hover {
  transform: translateY(-4px);
  box-shadow: var(--mca-shadow);
  border-color: var(--mca-green-light);
}

.ally-logo img {
  max-height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* Los logos vienen en colores muy distintos: los atenuamos para que la fila
     se lea como un conjunto, y recuperan su color al pasar el cursor. */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.28s ease, opacity 0.28s ease;
}

.ally-logo:hover img { filter: grayscale(0); opacity: 1; }

@media (max-width: 575.98px) {
  .ally-logo { height: 76px; padding: 0.75rem 0.9rem; }
  .ally-logo img { max-height: 44px; }
}

/* --------------------------------------------------------------------------
   8. Tarjetas genéricas
   -------------------------------------------------------------------------- */
.card-mca {
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: var(--mca-radius);
  padding: 1.9rem;
  height: 100%;
  box-shadow: var(--mca-shadow-sm);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.card-mca::after {
  content: "";
  position: absolute;
  inset: auto auto -60px -60px;
  width: 140px;
  height: 140px;
  background: var(--acc-bg, var(--mca-green-softer));
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
}

.card-mca:hover {
  transform: translateY(-6px);
  box-shadow: var(--mca-shadow-lg);
  border-color: var(--acc, var(--mca-green-light));
}

.card-mca:hover::after { opacity: 1; }

.card-mca > * { position: relative; z-index: 1; }

.card-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--acc-bg, var(--mca-green-soft));
  color: var(--acc, var(--mca-green-dark));
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin-bottom: 1.15rem;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.card-mca:hover .card-icon {
  background: var(--acc, var(--mca-green));
  color: #fff;
  transform: scale(1.06) rotate(-4deg);
}

.card-mca h3,
.card-mca .h3 {
  font-size: 1.14rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.card-mca p {
  font-size: 0.95rem;
  margin-bottom: 0;
  color: var(--mca-ink-soft);
}

/* Tarjeta compacta de módulo.
   Es un <button> que abre su modal, así que reseteamos los estilos nativos. */
.module-card {
  display: block;
  width: 100%;
  position: relative;
  appearance: none;
  font: inherit;
  text-align: center;
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: var(--mca-radius);
  padding: 1.35rem 1.15rem 1.25rem;
  height: 100%;
  cursor: pointer;
  box-shadow: var(--mca-shadow-sm);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.module-card:hover,
.module-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--mca-shadow);
  border-color: var(--acc, var(--mca-green-light));
}

.module-card .mc-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 0.75rem;
  border-radius: 14px;
  background: var(--acc-bg, var(--mca-green-soft));
  color: var(--acc, var(--mca-green-dark));
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  transition: background-color 0.28s ease, color 0.28s ease;
}

.module-card:hover .mc-icon,
.module-card:focus-visible .mc-icon {
  background: var(--acc, var(--mca-green));
  color: #fff;
}

.module-card .mc-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mca-ink);
  line-height: 1.3;
}

.module-card .mc-sub {
  display: block;
  font-size: 0.82rem;
  color: var(--mca-ink-muted);
  margin-top: 0.25rem;
  line-height: 1.45;
}

/* Señal de que la tarjeta se puede abrir */
.module-card .mc-mas {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  background: var(--acc-bg, var(--mca-green-soft));
  color: var(--acc, var(--mca-green-dark));
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.module-card:hover .mc-mas,
.module-card:focus-visible .mc-mas { opacity: 1; transform: scale(1); }

/* En táctil no hay hover: el indicador se muestra siempre, atenuado */
@media (hover: none) {
  .module-card .mc-mas { opacity: 0.55; transform: scale(1); }
}

/* Pista bajo el texto introductorio de la sección */
.modulos-pista {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.35rem 0 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--mca-green-dark);
  background: var(--mca-green-softer);
  border-radius: var(--mca-radius-pill);
  padding: 0.45rem 1.1rem;
}

.modulos-pista i { font-size: 1rem; }

/* --------------------------------------------------------------------------
   9. Sección "Qué es" — panel destacado
   -------------------------------------------------------------------------- */
.panel-green {
  background: linear-gradient(135deg, var(--mca-green) 0%, var(--mca-green-dark) 100%);
  border-radius: var(--mca-radius-lg);
  color: #fff;
  padding: 3rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--mca-shadow-lg);
}

.panel-green::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  top: -180px;
  right: -120px;
}

.panel-green::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  bottom: -160px;
  left: -80px;
}

.panel-green > * { position: relative; z-index: 1; }

.panel-green h2, .panel-green h3, .panel-green h4 { color: #fff; }

.panel-green p { color: rgba(255, 255, 255, 0.9); }

@media (max-width: 767.98px) {
  .panel-green { padding: 2rem 1.5rem; }
}

/* Estadísticas */
.stat {
  text-align: center;
  padding: 0.5rem;
}

.stat-num {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mca-green);
  display: block;
}

.panel-green .stat-num { color: #fff; }

.stat-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--mca-ink-muted);
  margin-top: 0.4rem;
}

.panel-green .stat-label { color: rgba(255, 255, 255, 0.85); }

/* --------------------------------------------------------------------------
   9b. Fotografía de la sección Características
   -------------------------------------------------------------------------- */

/* Escenario: aloja el carrusel y los controles superpuestos */
.feature-stage { position: relative; }

.feature-photo {
  position: relative;
  margin: 0;
  border-radius: var(--mca-radius-lg);
}

.feature-photo .carousel-item { position: relative; }

.feature-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mca-radius-lg);
  box-shadow: 0 26px 60px rgba(27, 29, 23, 0.16);
}

/* Halo detrás de la foto: toma el acento del pilar en curso.
   Va desenfocado para que se lea como un resplandor y no como una segunda
   tarjeta mal alineada. */
.feature-stage::before {
  content: "";
  position: absolute;
  inset: -26px;
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
  background: radial-gradient(circle at 30% 30%, rgba(100, 139, 58, 0.28), rgba(100, 139, 58, 0.06) 70%);
  filter: blur(26px);
  z-index: -1;
}

/* Tarjeta flotante: conecta la foto con el producto sin recurrir a un mockup */
.float-card--foto {
  left: -1.25rem;
  bottom: 1.75rem;
  animation: floaty 6s ease-in-out infinite;
}

.float-card--foto .fc-icon {
  background: var(--acc-bg, var(--mca-green-soft));
  color: var(--acc, var(--mca-green-dark));
}

/* Controles del carrusel, con el mismo lenguaje que los de la galería */
.feature-stage .gal-ctrl--prev { left: 0.85rem; }
.feature-stage .gal-ctrl--next { right: 0.85rem; }
.feature-stage .gal-ctrl { width: 46px; height: 46px; font-size: 1.15rem; }

/* La tarjeta del pilar en curso se resalta */
.card-mca--pilar { cursor: pointer; }

/* Botón invisible que cubre la tarjeta entera */
.pilar-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: inherit;
  cursor: pointer;
  z-index: 2;
}

.pilar-btn:focus-visible {
  outline: 3px solid rgba(100, 139, 58, 0.45);
  outline-offset: 3px;
}

.card-mca--pilar.is-activa {
  border-color: var(--acc, var(--mca-green));
  box-shadow: var(--mca-shadow);
}

.card-mca--pilar.is-activa .card-icon {
  background: var(--acc, var(--mca-green));
  color: #fff;
}

@media (max-width: 991.98px) {
  .feature-stage { max-width: 460px; margin: 0 auto; }
}

@media (max-width: 575.98px) {
  .feature-stage .gal-ctrl { width: 38px; height: 38px; font-size: 1rem; }
  .feature-stage .gal-ctrl--prev { left: 0.4rem; }
  .feature-stage .gal-ctrl--next { right: 0.4rem; }
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.5rem;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--mca-ink-soft);
  line-height: 1.55;
}

.check-list i {
  color: var(--mca-green);
  font-size: 1rem;
  line-height: 1.5;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   12. Planes / Precios
   -------------------------------------------------------------------------- */
.plan-tabs {
  display: inline-flex;
  gap: 0.3rem;
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: var(--mca-radius-pill);
  padding: 0.35rem;
  box-shadow: var(--mca-shadow-sm);
  flex-wrap: wrap;
  justify-content: center;
}

.plan-tabs .nav-link {
  border: none;
  border-radius: var(--mca-radius-pill);
  color: var(--mca-ink-soft);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.6rem 1.35rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.plan-tabs .nav-link:hover { color: var(--mca-green-dark); }

.plan-tabs .nav-link.active {
  background: var(--mca-green);
  color: #fff;
  box-shadow: var(--mca-shadow-green);
}

.plan-card {
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: var(--mca-radius-lg);
  padding: 2rem 1.85rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--mca-shadow-sm);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.plan-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--mca-shadow-lg);
  border-color: var(--mca-green-light);
}

.plan-card.is-featured {
  border: 2px solid var(--mca-green);
  box-shadow: var(--mca-shadow);
}

.plan-flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mca-green);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: var(--mca-radius-pill);
  box-shadow: var(--mca-shadow-green);
  white-space: nowrap;
}

.plan-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--mca-ink);
  margin-bottom: 0.3rem;
}

.plan-desc {
  font-size: 0.86rem;
  color: var(--mca-ink-muted);
  margin-bottom: 1.25rem;
  min-height: 42px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.plan-price .pp-amount {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--mca-green);
  letter-spacing: -0.04em;
  line-height: 1;
}

.plan-price .pp-unit {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mca-green);
}

.plan-period {
  font-size: 0.83rem;
  color: var(--mca-ink-muted);
  font-weight: 600;
  margin-bottom: 1.4rem;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: 0.65rem;
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--mca-ink-soft);
  line-height: 1.55;
}

.plan-features i {
  color: var(--mca-green);
  font-size: 1.05rem;
  line-height: 1.45;
  flex-shrink: 0;
}

.plan-card .btn { margin-top: auto; }

.plan-note {
  font-size: 0.84rem;
  color: var(--mca-ink-muted);
  background: #fff;
  border: 1px dashed var(--mca-border);
  border-radius: var(--mca-radius);
  padding: 0.9rem 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.plan-note i { color: var(--mca-green); font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   12b. Galería / carrusel de capturas
   -------------------------------------------------------------------------- */

/* Fondo propio: un degradado suave hacia el verde hace que el marco blanco de
   las capturas destaque más que sobre el crema plano. */
.galeria-section {
  background:
    linear-gradient(180deg,
      var(--mca-cream-deep) 0%,
      #eef3e4 45%,
      var(--mca-cream-deep) 100%);
  overflow: hidden;
}

/* El escenario ocupa el ancho del contenedor, igual que el resto de las
   secciones. En pantallas grandes el container llega a 1320 px, por debajo de
   los 1476 px reales de las capturas, así que nunca se escalan hacia arriba. */
.gallery-stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* Marco de las capturas de escritorio.
   Las imágenes de origen ya incluyen la ventana del navegador, así que aquí
   sólo aportamos elevación y esquinas suaves — sin cromo duplicado. */
.shot-frame {
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(27, 29, 23, 0.16);
  overflow: hidden;
  padding: 12px;
}

.shot-frame .carousel {
  border-radius: 18px;
  overflow: hidden;
}

/* Marco de las capturas móviles.
   Mismo tratamiento que .shot-frame —tarjeta blanca— para que ambas pestañas
   de la galería se lean como una sola pieza. Antes era un bisel negro y
   rompía la consistencia. */
.gallery-stage--phone { max-width: 560px; }

.phone-frame {
  position: relative;
  /* Debe poder encogerse: en pantallas angostas comparte la fila con los dos
     controles del carrusel y, sin shrink, los empuja fuera del viewport. */
  flex: 0 1 auto;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: 28px;
  padding: 12px;
  box-shadow: 0 30px 70px rgba(27, 29, 23, 0.16);
}

.phone-frame .carousel {
  border-radius: 18px;
  overflow: hidden;
}

.phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* Imágenes del carrusel */
.gallery-stage .carousel-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Controles superpuestos sobre la imagen: así el marco aprovecha todo el ancho */
.gal-ctrl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(27, 29, 23, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 1.45rem;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(27, 29, 23, 0.28);
  transition: background-color 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
  z-index: 4;
}

.gal-ctrl--prev { left: 1.75rem; }
.gal-ctrl--next { right: 1.75rem; }

.gal-ctrl:hover,
.gal-ctrl:focus-visible {
  background: var(--mca-green);
  border-color: var(--mca-green);
  transform: translateY(-50%) scale(1.08);
}

/* En la pestaña móvil el teléfono es angosto: los controles van a los bordes
   del escenario, no sobre la captura. */
.gallery-stage--phone .gal-ctrl--prev { left: 0; }
.gallery-stage--phone .gal-ctrl--next { right: 0; }

/* Pie de foto, contador e indicadores */
.gallery-meta {
  width: 100%;
  margin: 1.75rem auto 0;
  text-align: center;
}

.gallery-caption {
  font-weight: 600;
  color: var(--mca-ink);
  font-size: 1.05rem;
  margin: 0;
  min-height: 1.7em;
}

.gallery-count {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mca-ink-muted);
  letter-spacing: 0.04em;
}

.gallery-count b { color: var(--mca-green-dark); font-weight: 800; }

.gal-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.1rem;
}

.gal-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #cdd4c0;
  transition: background-color 0.25s ease, width 0.25s ease;
  cursor: pointer;
}

.gal-dots button:hover { background: var(--mca-green-light); }

.gal-dots button.active {
  background: var(--mca-green);
  width: 30px;
  border-radius: var(--mca-radius-pill);
}

@media (max-width: 991.98px) {
  .gal-ctrl { width: 46px; height: 46px; font-size: 1.15rem; }
  .gal-ctrl--prev { left: 0.85rem; }
  .gal-ctrl--next { right: 0.85rem; }
  .shot-frame { border-radius: 22px; padding: 8px; }
  .shot-frame .carousel { border-radius: 15px; }
}

@media (max-width: 575.98px) {
  .gal-ctrl { width: 40px; height: 40px; font-size: 1rem; }
  .gal-ctrl--prev { left: 0.4rem; }
  .gal-ctrl--next { right: 0.4rem; }
  .shot-frame { border-radius: 16px; padding: 6px; }
  .shot-frame .carousel { border-radius: 11px; }
  .phone-frame { border-radius: 18px; padding: 6px; }
  .phone-frame .carousel,
  .phone-frame img { border-radius: 12px; }
  /* Deja aire para los dos controles laterales */
  .gallery-stage--phone .phone-frame { max-width: 220px; }
  .gallery-caption { font-size: 0.95rem; }
}

/* --------------------------------------------------------------------------
   13. IoT
   -------------------------------------------------------------------------- */

/* Misma gramática que el hero y las cabeceras: fotografía a sangre bajo un
   velo verde. La foto —una cerradura inteligente abierta desde el teléfono—
   ilustra el propio producto, así que se deja ver por la derecha, donde no
   hay texto. Antes había una ilustración de clipart que rompía la paleta. */
.iot-section {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.82);
  background-image:
    linear-gradient(100deg,
      rgba(16, 18, 13, 0.96) 0%,
      rgba(25, 37, 15, 0.93) 38%,
      rgba(61, 85, 34, 0.72) 68%,
      rgba(100, 139, 58, 0.34) 100%),
    url("../img/bg/iot.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.iot-section > .container { position: relative; z-index: 1; }

.iot-section h2,
.iot-section h3 { color: #fff; }

.iot-lead {
  font-size: 1.125rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1.5rem;
  max-width: 46ch;
}

/* Logo "MyComuApp of things": el original es verde y gris sobre fondo claro.
   Subirle el brillo lo dejaba lavado, así que se pasa a blanco sólido, que es
   lo que mejor se lee sobre la fotografía. */
.iot-logo {
  height: 76px;
  width: auto;
  margin-bottom: 1.35rem;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(224, 145, 47, 0.22);
  color: #eab668;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.32rem 0.85rem;
  border-radius: var(--mca-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Tarjetas de cristal sobre la fotografía. Son botones que abren su modal. */
.iot-card {
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  appearance: none;
  font: inherit;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--mca-radius);
  padding: 1.75rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.iot-card:hover,
.iot-card:focus-visible {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(178, 214, 126, 0.55);
}

.iot-card .card-icon {
  background: rgba(178, 214, 126, 0.18);
  color: #cfe6a8;
}

.iot-card:hover .card-icon,
.iot-card:focus-visible .card-icon { background: var(--acc, var(--mca-green)); color: #fff; }

.iot-card-titulo {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.iot-card-texto {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.94rem;
  line-height: 1.65;
}

.iot-card-mas {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #cfe6a8;
}

.iot-card-mas i { transition: transform 0.25s ease; }
.iot-card:hover .iot-card-mas i { transform: translateX(4px); }

/* En pantallas angostas el texto ocupa todo el ancho: el velo cubre parejo */
@media (max-width: 991.98px) {
  .iot-section {
    background-image:
      linear-gradient(165deg,
        rgba(16, 18, 13, 0.95) 0%,
        rgba(25, 37, 15, 0.92) 55%,
        rgba(61, 85, 34, 0.82) 100%),
      url("../img/bg/iot.jpg");
  }
}

/* --------------------------------------------------------------------------
   14. Descarga (CTA)
   -------------------------------------------------------------------------- */
.download-panel {
  background:
    linear-gradient(120deg,
      rgba(61, 85, 34, 0.95) 0%,
      rgba(80, 111, 46, 0.88) 50%,
      rgba(100, 139, 58, 0.78) 100%),
    url("../img/bg/bg-cta.jpg") center/cover no-repeat;
  border-radius: var(--mca-radius-lg);
  padding: 3.25rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--mca-shadow-lg);
}

.download-panel::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  top: -200px;
  right: -140px;
}

.download-panel::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border: 30px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  bottom: -180px;
  left: -100px;
}

.download-panel > * { position: relative; z-index: 1; }

.download-panel h2 { color: #fff; }

.download-panel p { color: rgba(255, 255, 255, 0.9); }

@media (max-width: 767.98px) {
  .download-panel { padding: 2.25rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq .accordion-item {
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: var(--mca-radius) !important;
  margin-bottom: 0.85rem;
  overflow: hidden;
  box-shadow: var(--mca-shadow-sm);
}

.faq .accordion-button {
  background: #fff;
  color: var(--mca-ink);
  font-weight: 700;
  font-size: 1rem;
  padding: 1.15rem 1.4rem;
  border-radius: var(--mca-radius) !important;
  box-shadow: none;
}

.faq .accordion-button:not(.collapsed) {
  background: var(--mca-green-softer);
  color: var(--mca-green-dark);
}

.faq .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(100, 139, 58, 0.2);
}

.faq .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23648b3a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.faq .accordion-body {
  padding: 0.25rem 1.4rem 1.35rem;
  color: var(--mca-ink-soft);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   16. Contacto
   -------------------------------------------------------------------------- */
.contact-panel {
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: var(--mca-radius-lg);
  padding: 2.5rem;
  box-shadow: var(--mca-shadow);
}

@media (max-width: 767.98px) {
  .contact-panel { padding: 1.75rem 1.35rem; }
}

.form-label {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--mca-ink);
  margin-bottom: 0.4rem;
}

.form-control,
.form-select {
  border: 1px solid var(--mca-border);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  background-color: var(--mca-cream);
  color: var(--mca-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--mca-green-light);
  box-shadow: 0 0 0 4px rgba(100, 139, 58, 0.14);
  background-color: #fff;
}

.form-control::placeholder { color: var(--mca-ink-muted); opacity: 0.8; }

.form-check-input:checked {
  background-color: var(--mca-green);
  border-color: var(--mca-green);
}

.form-check-input:focus {
  border-color: var(--mca-green-light);
  box-shadow: 0 0 0 3px rgba(100, 139, 58, 0.18);
}

.form-check-label { font-size: 0.86rem; color: var(--mca-ink-soft); }

.invalid-feedback { font-size: 0.8rem; }

.contact-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--mca-border);
}

.contact-item:last-of-type { border-bottom: none; }

.contact-item .ci-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--acc-bg, var(--mca-green-soft));
  color: var(--acc, var(--mca-green-dark));
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contact-item .ci-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mca-ink-muted);
}

.contact-item .ci-value {
  font-weight: 700;
  color: var(--mca-ink);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.contact-item a.ci-value:hover { color: var(--mca-green-dark); }

/* --------------------------------------------------------------------------
   16b. Componentes de subpágina
   -------------------------------------------------------------------------- */

/* Tarjeta resumen que enlaza a una subpágina */
.teaser-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: var(--mca-radius-lg);
  padding: 1.9rem;
  box-shadow: var(--mca-shadow-sm);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  color: inherit;
}

.teaser-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mca-shadow-lg);
  border-color: var(--acc, var(--mca-green-light));
  color: inherit;
}

.teaser-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--acc-bg, var(--mca-green-soft));
  color: var(--acc, var(--mca-green-dark));
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin-bottom: 1.15rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.teaser-card:hover .teaser-icon { background: var(--acc, var(--mca-green)); color: #fff; }

.teaser-card h3 { font-size: 1.14rem; margin-bottom: 0.6rem; }

.teaser-card p {
  font-size: 0.94rem;
  color: var(--mca-ink-soft);
  margin-bottom: 1rem;
}

.teaser-meta {
  display: block;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--acc-ink, var(--mca-green-dark));
  background: var(--acc-bg, var(--mca-green-softer));
  border-radius: var(--mca-radius-pill);
  padding: 0.35rem 0.9rem;
  align-self: flex-start;
  margin-bottom: 1.25rem;
}

.teaser-link {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--acc-ink, var(--mca-green-dark));
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.teaser-card:hover .teaser-link i { transform: translateX(4px); }
.teaser-link i { transition: transform 0.25s ease; }

/* Banda de llamada a la acción */
.cta-band {
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: var(--mca-radius-lg);
  padding: 2.75rem;
  box-shadow: var(--mca-shadow);
}

@media (max-width: 767.98px) {
  .cta-band { padding: 1.75rem 1.35rem; }
}

/* Tarjeta lateral (precio, cobertura, descargas) */
.side-card {
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: var(--mca-radius-lg);
  padding: 1.9rem;
  box-shadow: var(--mca-shadow);
  position: sticky;
  top: 96px;
}

@media (max-width: 991.98px) {
  .side-card { position: static; }
}

.side-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.side-price .sp-from,
.side-price .sp-unit {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mca-green);
}

.side-price .sp-amount {
  font-size: 2.9rem;
  font-weight: 800;
  color: var(--mca-green);
  letter-spacing: -0.04em;
  line-height: 1;
}

.side-period {
  font-size: 0.85rem;
  color: var(--mca-ink-muted);
  font-weight: 600;
  margin: 0.35rem 0 0;
}

/* Sello de certificación bajo los botones de la tarjeta lateral */
.cert-block {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--mca-border);
  text-align: center;
}

.cert-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mca-ink-muted);
  margin-bottom: 0.75rem;
}

/* El logo oficial trae el nombre en blanco (pensado para fondo oscuro), así que
   usamos sólo el emblema y componemos el nombre con la tipografía del sitio. */
.cert-uv {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
}

.cert-uv img {
  width: auto;
  height: 46px;
  flex-shrink: 0;
}

.cert-uv span {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--mca-ink);
}

.side-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--mca-green-soft);
  color: var(--mca-green-dark);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.4rem 0.95rem;
  border-radius: var(--mca-radius-pill);
}

/* Pasos numerados */
.step-list { display: grid; gap: 1rem; }

.step {
  display: flex;
  gap: 1.1rem;
  background: #fff;
  border: 1px solid var(--mca-border);
  border-radius: var(--mca-radius);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--mca-shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.step:hover { transform: translateX(5px); box-shadow: var(--mca-shadow); }

.step-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mca-green);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1rem;
}

.step h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.step p { font-size: 0.93rem; color: var(--mca-ink-soft); margin: 0; }

/* Banda informativa */
.notice-band {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: var(--mca-green-softer);
  border: 1px solid var(--mca-green-soft);
  border-radius: var(--mca-radius);
  padding: 1.15rem 1.4rem;
  font-size: 0.94rem;
  color: var(--mca-ink-soft);
}

.notice-band > i {
  color: var(--mca-green);
  font-size: 1.25rem;
  line-height: 1.45;
  flex-shrink: 0;
}

.notice-band strong { color: var(--mca-ink); }

/* Filas de descarga (prensa) */
.download-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--mca-border);
  border-radius: 14px;
  margin-bottom: 0.65rem;
  color: var(--mca-ink);
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.download-row:last-child { margin-bottom: 0; }

.download-row:hover {
  border-color: var(--mca-green-light);
  background: var(--mca-green-softer);
  color: var(--mca-green-dark);
  transform: translateX(4px);
}

.download-row .dr-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--mca-green-soft);
  color: var(--mca-green-dark);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.download-row .dr-title { display: block; font-weight: 700; font-size: 0.94rem; line-height: 1.35; }
.download-row .dr-sub { display: block; font-size: 0.79rem; color: var(--mca-ink-muted); }

/* Muestras de color (prensa) */
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }

.swatch {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--mca-ink-soft);
}

.sw-chip {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  flex-shrink: 0;
}

/* Cita destacada */
.quote-block {
  border-left: 4px solid var(--mca-green);
  background: var(--mca-green-softer);
  border-radius: 0 var(--mca-radius) var(--mca-radius) 0;
  padding: 1.25rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--mca-ink);
  margin: 0;
}

/* Texto legal / documento largo */
.prose { font-size: 1rem; line-height: 1.8; }

.prose h2 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 2.5rem 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--mca-green-soft);
}

.prose h2:first-of-type { margin-top: 1rem; }

.prose h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 1.9rem 0 0.75rem;
  color: var(--mca-green-dark);
}

.prose p { margin-bottom: 1.1rem; }

.prose-date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--mca-green-soft);
  color: var(--mca-green-dark);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: var(--mca-radius-pill);
  margin-bottom: 0.5rem;
}

.prose-list {
  padding-left: 1.4rem;
  margin-bottom: 1.4rem;
  display: grid;
  gap: 0.75rem;
}

.prose-list li { padding-left: 0.35rem; }
.prose-list li::marker { color: var(--mca-green); font-weight: 700; }

/* Página de confirmación */
.confirm-section { padding-top: 9rem; }

.confirm-icon--error {
  background: var(--acc-terracota);
  box-shadow: 0 12px 28px rgba(194, 92, 60, 0.28);
}

.confirm-icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  background: var(--mca-green);
  color: #fff;
  font-size: 2.6rem;
  box-shadow: var(--mca-shadow-green);
}

@media (max-width: 767.98px) {
  .confirm-section { padding-top: 7.5rem; }
  .swatches { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   16c. Modal de módulo
   -------------------------------------------------------------------------- */
.modulo-modal .modal-content {
  border: none;
  border-radius: var(--mca-radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(27, 29, 23, 0.28);
  background: #fff;
}

/* Cabecera: fotografía de fondo bajo un velo del acento del módulo.
   Es una sola imagen para los catorce modales; el color la diferencia. */
.modulo-modal .modal-header {
  position: relative;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem;
  border-bottom: none;
  background-image:
    linear-gradient(115deg,
      color-mix(in srgb, var(--acc, #648b3a) 94%, #14170f) 0%,
      color-mix(in srgb, var(--acc, #648b3a) 82%, #14170f) 46%,
      color-mix(in srgb, var(--acc, #648b3a) 55%, transparent) 100%),
    url("../img/bg/modal.jpg");
  background-size: cover;
  background-position: center;
}

/* Reserva para navegadores sin color-mix: el acento sólido en degradado */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .modulo-modal .modal-header {
    background-image:
      linear-gradient(115deg,
        var(--acc, #648b3a) 0%,
        var(--acc, #648b3a) 46%,
        rgba(20, 23, 15, 0.45) 100%),
      url("../img/bg/modal.jpg");
  }
}

.modulo-modal .mm-icon {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modulo-modal .mm-titulos { flex: 1 1 auto; min-width: 0; }

.modulo-modal .modal-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
  color: #fff;
}

.modulo-modal .mm-sub {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.15rem;
}

.modulo-modal .btn-close {
  align-self: flex-start;
  margin: 0;
  padding: 0.5rem;
  border-radius: 50%;
  filter: invert(1) grayscale(1) brightness(2.4);
  opacity: 0.75;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.modulo-modal .btn-close:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.18); }

.modulo-modal .btn-close:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.modulo-modal .modal-body { padding: 1.75rem; }

.modulo-modal .mm-intro {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--mca-ink-soft);
  margin-bottom: 1.5rem;
}

.modulo-modal .mm-subtitulo {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mca-ink-muted);
  margin-bottom: 0.9rem;
}

/* Los "check" heredan el acento del módulo */
.modulo-modal .check-list i { color: var(--acc, var(--mca-green)); }
.modulo-modal .check-list li { font-size: 0.95rem; }

.modulo-modal .notice-band {
  background: var(--acc-bg, var(--mca-green-softer));
  border-color: var(--acc-bg, var(--mca-green-soft));
}

.modulo-modal .notice-band > i { color: var(--acc, var(--mca-green)); }

.modulo-modal .modal-footer {
  padding: 1.25rem 1.75rem 1.5rem;
  border-top: 1px solid var(--mca-border);
  background: var(--mca-cream);
  gap: 0.5rem;
}

.modulo-modal .modal-footer > * { margin: 0; }

/* La capa oscura de fondo, en el tinte de la marca */
.modal-backdrop.show { background-color: #14170f; opacity: 0.62; }

@media (max-width: 575.98px) {
  .modulo-modal .modal-header { padding: 1.25rem 1.15rem; gap: 0.8rem; }
  .modulo-modal .mm-icon { width: 48px; height: 48px; border-radius: 15px; font-size: 1.3rem; }
  .modulo-modal .modal-title { font-size: 1.2rem; }
  .modulo-modal .modal-body { padding: 1.35rem 1.15rem; }
  .modulo-modal .modal-footer { padding: 1rem 1.15rem 1.25rem; }
  .modulo-modal .modal-footer .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--mca-ink);
  color: rgba(255, 255, 255, 0.68);
  padding: 4rem 0 0;
}

.footer h2 {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.15rem;
}

.footer a {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.93rem;
}

.footer a:hover { color: #b9d194; }

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 800;
  font-size: 1.35rem;
  color: #fff;
  margin-bottom: 1rem;
}

.footer-brand img { width: 44px; height: 44px; }

.social-links {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

/* Estilo base: sobre fondo claro, como el panel de "Datos de contacto".
   La variante clara para el pie oscuro va más abajo. */
.social-links a {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--mca-green-soft);
  border: 1px solid var(--mca-border);
  display: grid;
  place-items: center;
  color: var(--mca-green-dark);
  font-size: 1.05rem;
  transition: background-color 0.25s ease, transform 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  background: var(--mca-green);
  border-color: var(--mca-green);
  color: #fff;
  transform: translateY(-3px);
}

/* Sobre el fondo oscuro del pie de página */
.footer .social-links a {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.8);
}

.footer .social-links a:hover,
.footer .social-links a:focus-visible {
  background: var(--mca-green);
  border-color: var(--mca-green);
  color: #fff;
}

.footer-bottom {
  margin-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.4rem 0;
  font-size: 0.86rem;
}

.footer-bottom .made-in {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.footer-bottom .made-in i { color: var(--mca-green-light); }

/* --------------------------------------------------------------------------
   18. Botón volver arriba
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--mca-green);
  color: #fff;
  font-size: 1.2rem;
  display: grid;
  place-items: center;
  box-shadow: var(--mca-shadow-green);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
  z-index: 1030;
}

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

.to-top:hover { background: var(--mca-green-dark); }

/* --------------------------------------------------------------------------
   19. Animaciones de aparición
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}