/* ==========================================================================
   0) DESIGN TOKENS (Variables globales)
   - Define aquí colores, tipografía, espaciados, radios y sombras.
   - Así evitas “valores mágicos” repetidos y mantienes coherencia visual.
   ========================================================================== */

:root {
  /* ===== Colores de marca ===== */
  --color-primary: #262626;   /* Gris oscuro corporativo (header/footer/texto oscuro) */
  --color-secondary: #454545; /* Fondo general de la web */
  --color-accent: #f2ab00;    /* Acento corporativo (botones, foco, detalles) */

  /* ===== Colores de texto ===== */
  --color-text-light: #f0f4f8; /* Texto sobre fondos oscuros */
  --color-text-dark: #1b1b1b;  /* Texto sobre fondos claros */

  /* ===== Superficies ===== */
  --color-surface: #ffffff;                 /* Tarjetas / formulario (fondo blanco) */
  --color-surface-muted: rgba(240, 244, 248, 0.06); /* Superficie “suave” sobre oscuro (si lo necesitas) */

  /* ===== Bordes / divisores (reutilizados para reducir variables) ===== */
  --color-border: #cfd6df;  /* Bordes de inputs y contenedores claros */
  --color-divider: var(--color-border); /* Divisores: mismo tono que bordes para coherencia */

  /* ===== Estado de enfoque accesible ===== */
  --color-focus-ring: rgba(242, 171, 0, 0.25); /* Anillo de foco suave basado en el color de marca */

  /* ===== Sombras (elevación) ===== */
  --shadow-header: 0 4px 10px rgba(0, 0, 0, 0.35); /* Sombra bajo header fijo */
  --shadow-footer: 0 -4px 10px rgba(0, 0, 0, 0.35); /* Sombra sobre footer */
  --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.18);   /* Sombra de tarjetas (formulario) */

  /* ===== Radios (redondeos consistentes) ===== */
  --radius-sm: 10px; /* Redondeo pequeño (inputs/enlaces) */
  --radius-md: 12px; /* Redondeo medio (botones) */
  --radius-lg: 14px; /* Redondeo grande (tarjetas) */

  /* ===== Espaciados (escala consistente) ===== */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 34px;
  --space-9: 40px;
  --space-10: 60px;

  /* ===== Tipografía (tokens) ===== */
  --font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-base: 16px;   /* Tamaño base del documento */
  --line-height-base: 1.5;  /* Interlineado base (legibilidad) */

  /* Escala tipográfica (ajústala cuando crezca el proyecto) */
  --font-size-sm: 0.9rem;   /* Texto pequeño (footer/enlaces) */
  --font-size-md: 0.95rem;  /* Texto medio (botones/labels) */
  --font-size-lg: 1.1rem;   /* Subtítulos */
  --font-size-xl: 2rem;     /* Títulos grandes (se apoya con clamp en la sección) */

  /* ===== Layout ===== */
  --header-height: 70px; /* Debe coincidir con .header { height } */

  /* ===== Horario de llamadas (formulario) =====*/
 /* ===== Agenda de llamadas (por día de semana) =====
     Formato intervalos: "HH:MM-HH:MM,HH:MM-HH:MM"
     - Si un día está cerrado => "" (vacío)
  */
  --call-hours-mon: "09:00-14:00,16:00-20:00";
  --call-hours-tue: "09:00-14:00,16:00-20:00";
  --call-hours-wed: "09:00-14:00,16:00-20:00";
  --call-hours-thu: "09:00-14:00,16:00-20:00";
  --call-hours-fri: "09:00-14:00";
  --call-hours-sat: "09:00-14:00";
  --call-hours-sun: "";

  /* Saltos permitidos (minutos): 30 => solo :00 y :30 */
  --call-step-minutes: 30;

  /* Rango de días seleccionables (desde hoy) */
  --call-max-days-ahead: 30;

    /* ================= ANIMACIONES ================= */

  /* Duraciones */
  --anim-fast: 150ms;
  --anim-base: 300ms;
  --anim-slow: 600ms;

  /* Easing */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);

  /* Distancias de movimiento */
  --anim-shift-sm: 8px;
  --anim-shift-md: 16px;
  --anim-shift-lg: 24px;

  /* CTA */
  --cta-bg: var(--color-accent);
  --cta-color: var(--color-primary);
  --cta-bg-hover: var(--color-accent);

  /* Rotación imágenes de servicios */
  --services-rotate-interval: 6000ms; /* tiempo entre cambios (más calmado) */
  --services-rotate-fade: 600ms;      /* fade más suave */
  --services-rotate-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out suave */
  --services-rotate-dim: 0.0;         /* cuánto “oscurece” al hacer fade-out (0 = no baja) */
  --services-rotate-min-opacity: 0.85; /* opacidad mínima durante el fade-out */

}

/* ==========================================================================
   1) RESET / BASE
   ========================================================================== */

/* Altura completa para permitir layout vertical con footer al final */
html,
body {
  height: 100%;
}

/* Mejora UX al navegar por anclas (#formulario):
   - Evita que el header fijo tape el título de la sección. */
html {
  /* scroll-padding-top añade “espacio virtual” al hacer scroll a un id */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
  /* Tamaño base de fuente del documento */
  font-size: var(--font-size-base);
}

/* Box sizing consistente:
   - Incluye padding y border dentro del ancho/alto calculado de cada elemento. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==========================================================================
   2) LAYOUT GENERAL
   ========================================================================== */

body {
  /* display:flex + flex-direction:column permite “footer pegado abajo”
     cuando el main crece o cuando la página tiene poco contenido. */
  display: flex;
  flex-direction: column;

  /* Elimina margen por defecto del navegador */
  margin: 0;

  /* Tipografía base del proyecto */
  font-family: var(--font-family-base);
  font-size: 1rem; /* 1rem = --font-size-base */
  line-height: var(--line-height-base);

  /* Fondo y color de texto global (tema oscuro) */
  background-color: var(--color-secondary);
  color: var(--color-text-light);

  /* Evita scroll horizontal por elementos que se desborden */
  overflow-x: hidden;

  /* Compensa el header fijo para que el contenido no quede oculto */
  padding-top: var(--header-height);
}

/* El main debe “estirar” para empujar el footer hacia abajo cuando haga falta */
.main {
  /* flex:1 = crece y ocupa el espacio disponible en el layout vertical */
  flex: 1;
}

/* ==========================================================================
   3) HEADER (CABECERA FIJA)
   ========================================================================== */

.header {
  /* Fijo en la parte superior */
  position: fixed;
  top: 0;
  left: 0;

  /* Ocupa el ancho completo */
  width: 100%;

  /* Altura constante del header */
  height: var(--header-height);

  /* padding horizontal: espacio interno izquierdo/derecho */
  padding: 0 var(--space-6);

  /* Fondo corporativo */
  background-color: var(--color-primary);

  /* Asegura que el header quede por encima del contenido */
  z-index: 1000;

  /* Layout interno horizontal */
  display: flex;               /* coloca elementos en línea */
  align-items: center;         /* centra verticalmente */
  gap: var(--space-5);         /* separación entre elementos */

  /* Sombra para separar visualmente del contenido */
  box-shadow: var(--shadow-header);
}

/* Enlace del logo:
   - display:flex para alinear la imagen verticalmente sin “saltos”.
   - margin-left negativo: elimina el padding visual y pega el logo al borde. */
.logo-link {
  display: flex;               /* alinea contenido interno */
  align-items: center;         /* centra verticalmente */
  height: 100%;                /* ocupa el alto del header */
  margin-left: calc(var(--space-6) * -1);
}

.logo {
  /* height:100% hace que el logo use todo el alto disponible del header */
  height: 100%;
  max-height: 100%;

  /* width:auto mantiene proporción (no estira) */
  width: auto;

  /* elimina espacio inferior de imágenes inline */
  display: block;

  /* indica interactividad */
  cursor: pointer;
}

/* Navegación principal centrada */
/* Navegación principal: ocupa el espacio central del header */
.nav-principal {
  flex: 1; /* permite que la nav crezca y empuje el CTA a la derecha */
  display: flex; /* centra la lista internamente */
  justify-content: center;
}
/* Lista de navegación (ul) */
.nav-list{
  list-style: none;       /* quita viñetas */
  margin: 0;              /* elimina margen por defecto */
  padding: 0;             /* elimina padding por defecto */
  display: flex;          /* pone los items en fila */
  align-items: center;    /* alinea verticalmente */
  gap: 12px;              /* separación entre items */
}

/* Item de navegación (li) */
.nav-item{
  position: relative;     /* referencia para el dropdown absoluto */
  display: inline-flex;   /* permite alinear enlace + botón flecha */
  align-items: center;
  gap: 4px;
}

/* Botón del desplegable (▾) */
.dropdown-toggle{
  background: none;                 /* sin fondo por defecto */
  border: none;                     /* sin borde por defecto */
  color: var(--color-text-light);   /* mismo color que enlaces */
  cursor: pointer;                  /* indica clic */
  padding: 6px;                     /* área clicable cómoda */
  border-radius: var(--radius-sm);  /* coherente con el resto */
  line-height: 1;                   /* evita que el botón “salte” de altura */
}

/* Hover y foco accesible del botón */
.dropdown-toggle:hover,
.dropdown-toggle:focus-visible{
  background-color: rgba(240, 244, 248, 0.1);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Menú desplegable */
.dropdown-menu{
  position: absolute;                      /* flotante respecto al li */
  top: calc(100% + 8px);                   /* debajo del item */
  left: 0;

  min-width: 280px;
  margin: 0;
  padding: 8px 0;
  list-style: none;

  background-color: var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  z-index: 1100;

  display: none;                           /* oculto por defecto */
}

/* Items del desplegable */
.dropdown-menu a{
  display: block;                          /* ocupa todo el ancho (mejor clic) */
  padding: 10px 16px;
  text-decoration: none;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* Hover/foco en enlaces del desplegable */
.dropdown-menu a:hover,
.dropdown-menu a:focus-visible{
  background-color: rgba(240, 244, 248, 0.1);
  outline: none;
}

/* Estado abierto */
.nav-item.has-dropdown.is-open > .dropdown-menu{
  display: block;
}


/* Botones del header (enlaces con aspecto de botón) */
.boton_principal,
.boton_formulario {
  display: inline-block;              /* permite padding y tamaño “de botón” */
  padding: 8px 16px;                  /* área clicable cómoda */
  border-radius: var(--radius-sm);    /* redondeo */
  text-decoration: none;              /* quita subrayado */
  font-size: var(--font-size-md);     /* tamaño consistente */
  font-weight: 500;
  border: 1px solid transparent;      /* evita “saltos” al cambiar border */
  white-space: nowrap;               /* evita salto de línea en textos largos */

  /* transiciones suaves */
  transition: transform 0.2s ease, filter 0.2s ease, background-color 0.2s ease;
}

/* Botón secundario */
.boton_principal {
  color: var(--color-text-light);
  background-color: rgba(240, 244, 248, 0.08);
  border-color: rgba(240, 244, 248, 0.3);
}

.boton_principal:hover {
  background-color: rgba(240, 244, 248, 0.1);
}

/* Botón CTA (amarillo) */
.boton_formulario {
  background-color: var(--color-accent);
  color: var(--color-primary);       /* reusa el gris oscuro corporativo */
  border-color: var(--color-accent);
  font-weight: 600;
}

.boton_formulario:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Foco accesible en enlaces/botones del header */
.boton_principal:focus-visible,
.boton_formulario:focus-visible {
  outline: none;                      /* quitamos el outline por defecto */
  box-shadow: 0 0 0 3px var(--color-focus-ring); /* anillo de foco */
}

/* ==========================================================================
   SECCIÓN SERVICIOS
   ========================================================================== */

.services-section{
  padding: var(--space-10) var(--space-5);
}

.services-intro{
  max-width: 920px;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.services-intro h2{
  margin: 0 0 var(--space-2);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.services-intro p{
  margin: 0;
  opacity: 0.9;
}

/* Grid: 2 columnas (4 filas) */
.services-grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  align-items: stretch;         /* Asegura que los items se estiren y tengan la misma altura de cada fila*/
}

/* Tarjeta de servicio */
.service-card{
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex;                /*Permite que el enlace interio "ocupe" toda la altura*/
}

/* Enlace que envuelve toda la tarjeta */
.service-link{
  display: flex;                 /* layout vertical */
  flex-direction: column;
  gap: var(--space-3);          /* gap controla el espacio vertical entre elementos */

  padding: var(--space-6);      /* padding: espacio interno de la tarjeta */
  height: 100%;                 /* height:100% permite estirar el enlace dentro de la tarjeta */
  width: 100%;

  text-decoration: none;
  color: var(--color-text-dark);

  transition: transform var(--anim-base) var(--ease-standard); /* transiciones suaves para hover/focus */
}

/* Título del servicio */
.service-link h3{
  margin: 0;
  font-size: 1.2rem;
}

/* Imagen del servicio */
.service-link img{
  width: 100%;
  display: block;               /*elimina el espacio inferior de imagenes inline*/
  border-radius: var(--radius-sm);
  aspect-ratio: 16 / 9;         /*altura uniforme*/
  object-fit: cover;            /*recorte sin deformar*/
  transition: opacity var(--services-rotate-fade) var(--services-rotate-ease);
  will-change: opacity;
}

.service-link img.is-fading{
  opacity: var(--services-rotate-min-opacity);
}
/* Descripción */
.service-link p{
  margin: 0;
  margin-top: auto;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  opacity: 0.9;
}

.service-cta{
    margin-top: var(--space-4);  /* Separación respecto al texto */
    align-self: stretch;        /* Asegura que ocupe el ancho del contenedor */
}

/* Hover accesible */
.service-link:hover,
.service-link:focus-visible{
  outline: none;
}

.service-link:hover{
  transform: translateY(-2px);
}

.service-link:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.service-card:has(.service-link:hover){
  box-shadow: 0 16px 36px rgba(0,0,0,0.22);
}



/* Responsive: 1 columna en móvil */
@media (max-width: 768px){
  .services-grid{
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce){
    .service-link img{
        transition: none;
    }
    .service-link img.is-fading{
    opacity: 1;
  }
}
/* ==========================================================================
   4) SECCIÓN FORMULARIO
   - Se mantiene el fondo del main.
   - El formulario es una “tarjeta” blanca.
   ========================================================================== */

.form-section {
  /* padding: espacio alrededor de toda la sección */
  padding: var(--space-10) var(--space-5);
}

/* Bloque de introducción (texto fuera del recuadro) */
.form-intro {
  max-width: 920px;            /* limita ancho para mejor lectura */
  margin: 0 auto var(--space-7); /* centra (auto) y separa abajo */
  text-align: center;
}

.form-intro h2 {
  margin: 0 0 var(--space-2);  /* margen inferior para separar del párrafo */
  font-size: clamp(1.6rem, 3vw, 2.2rem); /* responsive sin media queries */
}

.form-intro p {
  margin: 0;
  opacity: 0.9;                /* reduce intensidad para jerarquía visual */
  line-height: 1.5;
}

/* Tarjeta blanca del formulario */
.form-card {
  max-width: 920px;
  margin: 0 auto;              /* centra horizontalmente */
  background-color: var(--color-surface);
  color: var(--color-text-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-8) 26px;
  box-shadow: var(--shadow-card);
}

/* Fieldset semántico sin borde visual */
.form-fieldset {
  border: 0;                   /* quita borde por defecto de fieldset */
  padding: 0;                  /* quita padding por defecto */
  margin: 0;                   /* quita margen por defecto */

  display: grid;               /* layout en rejilla */
  gap: var(--space-4);         /* separación uniforme entre campos */
}

.form-legend {
  font-weight: 700;
  margin-bottom: var(--space-2);
}

/* Cada campo dentro de un <p> para estructura semántica */
.form-field {
  margin: 0;                   /* evita márgenes por defecto del <p> */
}

.form-field label {
  display: block;              /* pone la etiqueta en su propia línea */
  margin-bottom: var(--space-1);
  font-weight: 600;
  font-size: var(--font-size-md);
}

.form-field input,
.form-field textarea {
  width: 100%;                 /* ocupa todo el ancho del contenedor */
  padding: 12px 14px;          /* área cómoda */
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);

  font: inherit;               /* hereda fuente y tamaño del body */
  color: var(--color-text-dark);
  background-color: var(--color-surface);
}

.form-field textarea {
  resize: vertical;            /* permite redimensionar solo vertical */
  min-height: 120px;
}

/* Foco accesible para inputs/textarea */
.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Checkbox en dos columnas: cuadradito + texto */
.form-field--check {
  display: grid;                      /* controla columnas */
  grid-template-columns: 18px 1fr;    /* checkbox fijo + texto flexible */
  gap: var(--space-2);
  align-items: start;                 /* alinea arriba para textos largos */
}

.form-field--check input {
  margin-top: 3px;                    /* ajusta alineación con la primera línea del texto */
  accent-color: var(--color-accent);  /* color del checkbox */
}

/* Bloque condicional de fecha/hora */
.call-schedule {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

/* Acciones del formulario (botón) */
.form-actions {
  margin-top: var(--space-2);
}

/* Botón submit (normalizado) */
.btn-submit {
  width: 100%;
  padding: 14px 18px;

  border-radius: var(--radius-md);
  border: none;                 /* elimina borde por defecto del botón */

  font: inherit;
  font-weight: 700;

  cursor: pointer;
  background-color: var(--color-accent);
  color: var(--color-primary);

  transition: filter 0.2s ease, transform 0.2s ease;
}

.btn-submit:hover {
  filter: brightness(1.05);
}

.btn-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* ==========================================================================
   5) UTILIDADES DE ACCESIBILIDAD
   ========================================================================== */

/* Oculta visualmente pero sigue siendo accesible para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   6) THEMING (Claro/Oscuro) mediante atributo
   - Puedes activar el tema claro u oscuro en <html> o <body>:
     <html data-theme="light">  o  <html data-theme="dark">
   - Por defecto (sin atributo) se mantiene tu tema oscuro actual.
   ========================================================================== */

/* Tema claro (opcional): redefine SOLO variables, no reglas */
[data-theme="light"] {
  --color-secondary: #f3f5f7;   /* fondo general claro */
  --color-text-light: #1b1b1b;  /* texto general en claro (si decides usarlo) */
}

/* Tema oscuro explícito (opcional): por claridad, aunque ya es el default */
[data-theme="dark"] {
  /* Aquí podrías ajustar secundarios, sombras, etc. si quisieras */
    --color-secondary: #1b1b1b;   /* fondo general claro */
  --color-text-light: #f3f5f7;
}

/* ==========================================================================
   7) RESPONSIVE
   ========================================================================== */

@media (max-width: 640px) {
  /* Reduce padding de la tarjeta en pantallas pequeñas */
  .form-card {
    padding: 24px 18px 18px;
  }

  /* Ajusta separación del menú si se compacta */
  .nav-principal {
    gap: var(--space-2);
  }
}

/* ==========================================================================
   SISTEMA DE ANIMACIONES (REUTILIZABLE)
   ========================================================================== */

/* Estado inicial oculto */
.animate-in {
  opacity: 0;
  transform: translateY(var(--anim-shift-md));
  transition:
    opacity var(--anim-base) var(--ease-out),
    transform var(--anim-base) var(--ease-out);
}

/* Estado visible */
.animate-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variante rápida */
.animate-fast {
  transition-duration: var(--anim-fast);
}

/* Variante lenta */
.animate-slow {
  transition-duration: var(--anim-slow);
}

/* Hover lift reutilizable */
.hover-lift {
  transition: transform var(--anim-base) var(--ease-standard),
              box-shadow var(--anim-base) var(--ease-standard);
}

.hover-lift:hover {
  transform: translateY(calc(var(--anim-shift-sm) * -1));
  box-shadow: 0 16px 36px rgba(0,0,0,0.22);
}

/* Respeto a accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .animate-in,
  .hover-lift {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   8) FOOTER (AL FINAL)
   - Colocado aquí para que el archivo siga el orden visual:
     Variables → Base → Layout → Header → Main → Formulario → Footer → Responsive
   ========================================================================== */

.footer {
  width: 100%;
  background-color: var(--color-primary);
  color: var(--color-text-light);

  /* padding: arriba / laterales / abajo */
  padding: var(--space-9) var(--space-7) var(--space-5);

  /* sombra “hacia arriba” para separar del contenido */
  box-shadow: var(--shadow-footer);
}

/* Grid de 4 columnas */
.footer-contenido {
  display: grid;                        /* activa grid layout */
  grid-template-columns: repeat(4, 1fr);/* 4 columnas iguales */
  gap: 30px;                            /* separación entre columnas */
  max-width: 1300px;
  margin: 0 auto;                       /* centra el contenedor */
}

.footer-col {
  text-align: left;
}

/* Títulos */
.footer-col h3,
.footer-col h4 {
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--color-text-light);
}

.footer-brand p {
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Listas sin viñetas */
.footer-list {
  list-style: none;   /* quita bullets */
  padding-left: 0;    /* quita indentación */
  margin: 0;
}

/* Separación entre items */
.footer-list li {
  margin: 4px 0;
}

/* Enlaces de navegación y redes */
.footer-nav a,
.footer-social a {
  display: inline-flex;        /* icono + texto alineados */
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  text-decoration: none;
  color: var(--color-text-light);
  opacity: 0.85;
}

.footer-nav a:hover,
.footer-social a:hover {
  opacity: 1;
}

/* Iconos */
.social-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Address sin cursiva */
.footer-contact {
  font-style: normal;
}

/* Párrafos de contacto */
.footer-contact p {
  margin: 4px 0;
  font-size: var(--font-size-sm);
}

/* Enlaces de contacto */
.footer-contact a {
  color: var(--color-text-light);
  text-decoration: none;
  opacity: 0.9;
}

.footer-contact a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* Texto general de columnas */
.footer-col p {
  margin: 6px 0;
  font-size: var(--font-size-sm);
  opacity: 0.85;
}

/* Franja inferior */
.footer-copy {
  text-align: center;
  margin-top: var(--space-7);
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
/* ==========================================================================
   CTA (COMPONENTE REUTILIZABLE)
   ========================================================================== */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 18px;
  border-radius: var(--radius-md);

  background-color: var(--cta-bg);
  color: var(--cta-color);

  font-weight: 700;
  font-size: var(--font-size-md);
  text-decoration: none;

  transition:
    transform var(--anim-base) var(--ease-standard),
    filter var(--anim-base) var(--ease-standard),
    box-shadow var(--anim-base) var(--ease-standard);
}

.cta:hover,
.cta:focus-visible {
  outline: none;
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}