/* ==========================================================================
   COMPONENTS.CSS
   Componentes reutilizables del sistema de diseño
   Requiere que base.css esté cargado antes (usa sus custom properties).
   ==========================================================================
   Índice:
     1. Contenedor y grid
     2. Botones (primario, secundario, ghost)
     3. Eyebrow + animación reveal (aparición al hacer scroll)
     4. Tarjetas (card) + tarjeta con fondo fotográfico al hover
     5. Badges
     6. Formularios + tarjeta flotante de cotización (.form-card)
     7. Galería mosaico (.mosaic)
     8. Bloque de media (video + brochure)
     9. Franja oscura con textura fotográfica (.strip-dark)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CONTENEDOR Y GRID
   --------------------------------------------------------------------------
   .container centra el contenido y limita su ancho máximo (--container-max
   definido en base.css). .grid es un grid de 12 columnas simple, controlado
   con clases modificadoras de nº de columnas visibles según breakpoint.
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

.container--narrow {
  max-width: 760px;
}

.container--wide {
  max-width: 1440px;
}

.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--2 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* A partir de tablet (768px) se activan las columnas reales */
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A partir de laptop (1024px) se completa el nº de columnas final */
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Flex helpers puntuales usados junto a .container en headers/CTAs */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}


/* --------------------------------------------------------------------------
   2. BOTONES
   --------------------------------------------------------------------------
   Tres variantes: primario (acción principal, acento "glow"), secundario
   (contorno navy sobre fondo claro) y ghost (contorno blanco, para barras de
   navegación o CTAs sobre fondos oscuros/fotográficos). Todos comparten .btn
   como base, incluida la flecha animada (<span class="arw">→</span> o
   <span class="dl">↓</span>) usada en CTAs del modelo aprobado.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-none);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* Flecha / flecha de descarga animada dentro de un .btn */
.btn .arw,
.btn .dl {
  display: inline-block;
  transition: transform var(--transition-base);
}

.btn:hover .arw {
  transform: translateX(5px);
}

.btn:hover .dl {
  transform: translateY(3px);
}

/* Primario: máxima jerarquía visual — hero, CTA final de formulario.
   Equivale a .btn-gold del modelo aprobado (fondo acento "glow"). */
.btn--primary,
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-primary-900);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover,
.btn--accent:hover {
  background-color: var(--color-accent-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(180, 138, 70, 0.5);
}

/* Secundario: contorno navy sobre fondo claro. Equivale a .btn-outline-dark. */
.btn--secondary {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-primary-900);
}

.btn--secondary:hover {
  border-color: var(--color-primary-900);
  background-color: var(--color-primary-900);
  color: #fff;
}

/* Ghost: contorno blanco translúcido — nav, hero, tarjetas sobre fondo oscuro.
   Equivale a .btn-ghost del modelo aprobado. */
.btn--ghost {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}

.btn--ghost:hover {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}


/* --------------------------------------------------------------------------
   3. EYEBROW + REVEAL
   --------------------------------------------------------------------------
   .eyebrow: etiqueta con línea y color de acento, usada sobre cada título de
   sección. .reveal / .reveal-group: animación de aparición al hacer scroll,
   activada por js/scroll.js vía IntersectionObserver (añade .is-visible).
   .reveal-group escalona a sus hijos directos usando --reveal-index (fijado
   por scroll.js en cada hijo).
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  /* accent-900, no accent base: el accent base da ~2.3:1 sobre fondos claros,
     por debajo de WCAG AA (4.5:1) para texto. Ver The Text Contrast Rule en
     DESIGN.md. */
  color: var(--color-accent-900);
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--color-accent-900);
}

/* Eyebrow sobre fondo oscuro (hero, cta-band, franjas invertidas): el acento
   base pierde contraste sobre navy oscuro, se usa la variante clara. */
.eyebrow--inverse {
  color: var(--color-accent-light);
}

.eyebrow--inverse::before {
  background: var(--color-accent-light);
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-group > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(var(--reveal-index, 0) * 60ms);
}

.reveal-group.is-visible > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-group > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   4. TARJETAS (CARD)
   --------------------------------------------------------------------------
   Base para tarjetas de servicio, industria y equipo. .card--interactive
   añade elevación al hover. .card--photo añade un fondo fotográfico oculto
   que se revela al hover con overlay navy (equivalente a .sol del modelo
   aprobado) — usada en grids de "Soluciones incluidas en este servicio".
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card--interactive {
  cursor: pointer;
}

.card--interactive:hover,
.card--interactive:focus-visible {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background-color: var(--color-info-bg);
  color: var(--color-primary);
}

.card__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-900);
}

.card__body {
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.card__footer {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* Variante oscura, usada sobre fondos de sección invertidos (ej. presencia geográfica) */
.card--inverse {
  background-color: var(--color-primary-800);
  border-color: var(--color-primary-700);
}

.card--inverse .card__title {
  color: var(--color-text-inverse);
}

.card--inverse .card__body {
  color: var(--color-text-inverse-muted);
}

/* --- Tarjeta con fondo fotográfico revelado al hover (grid "Soluciones") --- */

.card--photo {
  position: relative;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-5);
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}

.card--photo .card__photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease-standard);
}

.card--photo .card__photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card--photo .card__photo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 0.78/0.65, no 0.94/0.8: en hover .card__body pasa a blanco puro (no
     rgba reducido), texto normal ~16px (necesita 4.5:1) — a 0.65 el peor
     caso mide ~5.5:1. Este overlay se repite en el grid "Soluciones" de
     las 6 tarjetas × 12 páginas de servicio (ES+EN): era el más extendido
     de los overlays sobre-oscurecidos del sitio. */
  background: linear-gradient(100deg, rgba(28, 23, 18, 0.78), rgba(28, 23, 18, 0.65));
}

.card--photo:hover .card__photo-bg {
  opacity: 1;
}

.card--photo:hover {
  background-color: var(--color-primary-900);
}

.card--photo > .card__check,
.card--photo > .card__body {
  position: relative;
  z-index: 1;
}

.card--photo .card__check {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-primary-700);
  color: var(--color-primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  transition: 0.4s;
}

.card--photo:hover .card__check {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(180, 138, 70, 0.12);
}

.card--photo .card__body {
  font-size: 1.02rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
  line-height: 1.5;
  transition: 0.4s;
}

.card--photo:hover .card__body {
  color: #fff;
}

/* --- Tarjeta vertical (icono + título + cuerpo) con fondo fotográfico al
   hover: misma idea que .card--photo pero compone sobre el layout normal en
   columna de .card, usada en el grid de servicios de la home. --- */

.card--photo-hover {
  position: relative;
  overflow: hidden;
}

.card--photo-hover .card__photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease-standard);
}

.card--photo-hover .card__photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card--photo-hover .card__photo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 0.82/0.70, no 0.93/0.86: .card__body en hover queda a rgba(255,255,255,.85),
     texto normal (necesita 4.5:1) — a 0.70 el peor caso sigue midiendo
     ~4.5:1+ con margen, y la foto ahora se distingue en vez de desaparecer
     bajo un velo casi opaco. */
  background: linear-gradient(160deg, rgba(28, 23, 18, 0.82), rgba(28, 23, 18, 0.70));
}

.card--photo-hover:hover .card__photo-bg {
  opacity: 1;
}

.card--photo-hover:hover {
  border-color: transparent;
}

.card--photo-hover > *:not(.card__photo-bg) {
  position: relative;
  z-index: 1;
}

.card--photo-hover .card__icon,
.card--photo-hover .card__title,
.card--photo-hover .card__body,
.card--photo-hover .service-card__link {
  transition: color var(--transition-base), background-color var(--transition-base);
}

.card--photo-hover:hover .card__icon {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.card--photo-hover:hover .card__title,
.card--photo-hover:hover .service-card__link {
  color: #fff;
}

.card--photo-hover:hover .card__body {
  color: rgba(255, 255, 255, 0.85);
}

/* Grid contenedor de tarjetas .card--photo: líneas divisorias finas en vez
   de separación con gap, calcado del modelo aprobado (.sol-grid) */
.card-grid--divided {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-grid--divided .card--photo {
  background-color: var(--color-bg);
  padding: var(--space-8) var(--space-6);
}

@media (max-width: 767px) {
  .card-grid--divided {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   5. BADGES
   --------------------------------------------------------------------------
   Etiquetas pequeñas para categorizar (ej. "SARLAFT", "Nuevo", estados de
   formulario). Mayúsculas + tracking amplio para diferenciarlas del texto
   corrido.
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-none);
  white-space: nowrap;
}

.badge--neutral {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

.badge--primary {
  background-color: var(--color-info-bg);
  color: var(--color-primary-700);
}

.badge--accent {
  background-color: rgba(180, 138, 70, 0.14);
  /* accent-900, no accent-dark: accent-dark measures ~3.99:1 on this tint,
     under WCAG AA's 4.5:1 for 12px text. See The Text Contrast Rule. */
  color: var(--color-accent-900);
}

.badge--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.badge--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge--error {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}


/* --------------------------------------------------------------------------
   6. FORMULARIOS
   --------------------------------------------------------------------------
   Pensado para el formulario de contacto/cotización (Fase 5, backend PHP)
   pero es genérico para cualquier formulario del sitio. Incluye estados de
   error, texto de ayuda y checkbox/radio accesibles, y .form-card: la
   tarjeta flotante con sombra usada en el bloque "Cotizar" (.qform del
   modelo aprobado).
   -------------------------------------------------------------------------- */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-label .is-required {
  color: var(--color-error);
  margin-left: var(--space-1);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

.form-textarea {
  min-height: 90px;
  resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-neutral-500);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  background-color: var(--color-bg);
  border-color: var(--color-primary-700);
  box-shadow: var(--shadow-focus);
}

.form-row {
  display: grid;
  gap: 0 var(--space-4);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .form-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Estado de error: se activa añadiendo .has-error al .form-group */
.form-group.has-error .form-input,
.form-group.has-error .form-textarea,
.form-group.has-error .form-select {
  border-color: var(--color-error);
}

.form-group.has-error .form-hint {
  color: var(--color-error);
}

/* Checkbox / radio accesibles (ej. aceptación de política de datos) */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-5);
}

.form-check input[type='checkbox'],
.form-check input[type='radio'] {
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.2em;
  accent-color: var(--color-primary-700);
  flex-shrink: 0;
}

.form-check label {
  font-size: 0.82rem;
  color: var(--color-neutral-500);
  line-height: var(--leading-snug);
}

.form-check a {
  color: var(--color-primary-700);
  text-decoration: underline;
}

/* Contenedor de mensajes de estado del envío (éxito/error del PHP) */
.form-status {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.form-status--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.form-status--error {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

/* --- Tarjeta flotante de formulario (bloque "Cotizar", .qform del modelo) --- */

.form-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-xl);
}

.form-card__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-1);
}

.form-card__subtitle {
  color: var(--color-text-muted);
  font-size: 0.94rem;
  margin-bottom: var(--space-6);
}

.form-card .btn--primary {
  width: 100%;
}


/* --------------------------------------------------------------------------
   7. GALERÍA MOSAICO (.mosaic)
   --------------------------------------------------------------------------
   Composición asimétrica (una imagen grande + tres pequeñas) con etiqueta
   que aparece al hover. Equivale a .gallery/.gal-grid del modelo aprobado;
   se usa en todas las páginas para mostrar "el trabajo en acción".
   -------------------------------------------------------------------------- */

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 220px);
  gap: 14px;
}

.mosaic__item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}

.mosaic__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out), filter 0.5s;
}

.mosaic__item:hover img {
  transform: scale(1.07);
}

.mosaic__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(28, 23, 18, 0.75));
  opacity: 0;
  transition: opacity 0.4s;
}

.mosaic__item:hover::after {
  opacity: 1;
}

.mosaic__label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  opacity: 0;
  transform: translateY(8px);
  transition: 0.4s var(--ease-out);
  z-index: 2;
}

.mosaic__item:hover .mosaic__label {
  opacity: 1;
  transform: none;
}

.mosaic__item--1 { grid-column: 1 / 4; grid-row: 1 / 3; }
.mosaic__item--2 { grid-column: 4 / 7; grid-row: 1 / 2; }
.mosaic__item--3 { grid-column: 4 / 6; grid-row: 2 / 3; }
.mosaic__item--4 { grid-column: 6 / 7; grid-row: 2 / 3; }

@media (max-width: 980px) {
  .mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 180px);
  }
  .mosaic__item--1 { grid-column: 1 / 3; grid-row: 1 / 2; }
  .mosaic__item--2 { grid-column: 1 / 2; grid-row: 2 / 3; }
  .mosaic__item--3 { grid-column: 2 / 3; grid-row: 2 / 3; }
  .mosaic__item--4 { grid-column: 1 / 3; grid-row: 3 / 4; }
}


/* --------------------------------------------------------------------------
   8. BLOQUE DE MEDIA (video + brochure)
   --------------------------------------------------------------------------
   Equivale a .media/.media-box del modelo aprobado: visual con botón "play"
   tipo glass a la izquierda, texto + CTA de descarga a la derecha.
   -------------------------------------------------------------------------- */

.media-block {
  background-color: var(--color-primary-900);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  position: relative;
}

.media-block__visual {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  cursor: pointer;
}

.media-block__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.media-block__visual:hover img {
  transform: scale(1.05);
}

.media-block__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 23, 18, 0.1), rgba(28, 23, 18, 0.55));
}

.media-block__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: 0.4s var(--ease-standard);
}

.media-block__visual:hover .media-block__play {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translate(-50%, -50%) scale(1.08);
}

.media-block__play svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  margin-left: 3px;
}

.media-block__text {
  padding: var(--space-10) var(--space-10);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.media-block__text .eyebrow {
  margin-bottom: var(--space-3);
}

.media-block__text h3 {
  color: #fff;
  font-size: 1.7rem;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.media-block__text p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  margin-bottom: var(--space-6);
}

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


/* --------------------------------------------------------------------------
   9b. SELECTOR DE IDIOMA (.lang-switch)
   --------------------------------------------------------------------------
   Dropdown con banderas en el header, junto al CTA de navegación. Por ahora
   solo ES está activo: EN queda visible pero deshabilitado (aria-disabled)
   hasta que exista contenido traducido (fase posterior). El toggle de
   apertura/cierre lo maneja initLangSwitch() en js/nav.js, con el mismo
   patrón de accesibilidad que el dropdown de Servicios (Escape, clic fuera).
   -------------------------------------------------------------------------- */

.lang-switch {
  position: relative;
}

.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.lang-switch__toggle:hover {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

.lang-switch__toggle .nav__chevron {
  transition: transform var(--transition-base);
}

.lang-switch.is-open .lang-switch__toggle .nav__chevron {
  transform: rotate(180deg);
}

.lang-switch__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 160px;
  padding: var(--space-2);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: var(--z-dropdown);
}

.lang-switch.is-open .lang-switch__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switch__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
}

.lang-switch__option:hover {
  background-color: var(--color-neutral-100);
}

.lang-switch__option.is-active {
  background-color: var(--color-accent);
  color: var(--color-primary-900);
}

.lang-switch__option.is-active:hover {
  background-color: var(--color-accent);
}

.lang-switch__option[aria-disabled='true'] {
  color: var(--color-neutral-400);
  cursor: not-allowed;
}

.lang-switch__option[aria-disabled='true']:hover {
  background-color: transparent;
}

/* Banderas como SVG inline, no emoji: Windows no renderiza los emoji de
   bandera (🇨🇴🇺🇸) como ícono — muestra el código de país en texto plano
   ("CO", "US"), lo que se ve roto. Un SVG propio es consistente en
   cualquier sistema operativo. */
.flag-icon {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(4, 16, 34, 0.12);
}


/* --------------------------------------------------------------------------
   9c. ASISTENTE VIRTUAL DE WHATSAPP (.wa-bot)
   --------------------------------------------------------------------------
   Burbuja flotante fija (.whatsapp-fab) que abre un panel de chat 100%
   front-end (sin backend ni costo recurrente, ver js/whatsapp-bot.js): hace
   un par de preguntas guiadas (servicio de interés + nombre) con un efecto
   de "escribiendo…" para sentirse natural, y al final entrega un botón que
   abre la conversación real de WhatsApp con el mensaje ya redactado.
   -------------------------------------------------------------------------- */

.wa-bot {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--z-toast);
}

.whatsapp-fab {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(4, 16, 34, 0.35);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.whatsapp-fab:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 30px rgba(4, 16, 34, 0.4);
}

.whatsapp-fab svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 640px) {
  .whatsapp-fab {
    width: 52px;
    height: 52px;
  }
  .whatsapp-fab svg {
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab {
    transition: none;
  }
  .whatsapp-fab:hover {
    transform: none;
  }
}

/* --- Panel del chat --- */

.wa-bot__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 16px);
  width: 340px;
  max-width: calc(100vw - 32px);
  /* Todo el panel es el contenedor con scroll (no solo el historial de
     mensajes): así, cuando la lista de opciones no cabe, se puede desplazar
     en vez de quedar recortada por un overflow:hidden del panel. El header
     queda fijo arriba vía position:sticky (ver .wa-bot__header). */
  max-height: min(520px, calc(100vh - 140px));
  background-color: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.wa-bot.is-open .wa-bot__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (max-width: 480px) {
  .wa-bot__panel {
    width: calc(100vw - 24px);
    right: -8px;
  }
}

/* Fondo de bronce de marca (no tinta): en viewports bajos el panel se abre
   casi hasta arriba de la pantalla y su header sticky queda a centímetros
   del header oscuro del sitio — si ambos usaran el mismo tono de tinta se
   leerían como una sola barra continua. El bronce mantiene el header
   dentro de la paleta de Bardona (mismo tono que "Habla con un experto")
   en vez de un neutro sin marca; el verde del avatar sigue marcando "esto
   es WhatsApp de verdad". Texto en tinta, no blanco — ver The Text
   Contrast Rule en DESIGN.md (blanco sobre bronce no llega a 4.5:1). */
.wa-bot__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-accent);
  color: var(--color-primary-900);
  flex-shrink: 0;
}

.wa-bot__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wa-bot__avatar svg {
  width: 20px;
  height: 20px;
  color: #fff;
}

.wa-bot__title {
  font-size: 0.95rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-900);
}

.wa-bot__status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: rgba(28, 23, 18, 0.65);
}

.wa-bot__status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background-color: #25d366;
}

.wa-bot__close {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: rgba(28, 23, 18, 0.6);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1);
}

.wa-bot__close:hover {
  color: var(--color-primary-900);
}

.wa-bot__messages {
  min-height: 140px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: var(--color-bg-alt);
}

.wa-bot__msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.4;
}

.wa-bot__msg--bot {
  align-self: flex-start;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-bottom-left-radius: 2px;
}

.wa-bot__msg--user {
  align-self: flex-end;
  background-color: var(--color-primary-700);
  color: #fff;
  border-bottom-right-radius: 2px;
}

.wa-bot__typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-bottom-left-radius: 2px;
}

.wa-bot__typing span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-400);
  animation: waTyping 1.2s infinite ease-in-out;
}

.wa-bot__typing span:nth-child(2) { animation-delay: 0.2s; }
.wa-bot__typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes waTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.wa-bot__options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 var(--space-4) var(--space-4);
  background-color: var(--color-bg-alt);
}

.wa-bot__option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-900);
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  animation: waOptionIn 0.4s var(--ease-out) forwards;
  transition: border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
}

.wa-bot__option:hover {
  border-color: var(--color-accent);
  background-color: rgba(180, 138, 70, 0.06);
  box-shadow: var(--shadow-sm);
}

.wa-bot__option:active {
  transform: translateY(1px);
}

.wa-bot__option-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background-color: var(--color-info-bg);
  color: var(--color-primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.wa-bot__option:hover .wa-bot__option-icon {
  background-color: var(--color-accent);
  color: var(--color-primary-900);
}

.wa-bot__option-icon svg {
  width: 16px;
  height: 16px;
}

.wa-bot__option-label {
  flex: 1;
  min-width: 0;
}

.wa-bot__option-arrow {
  width: 16px;
  height: 16px;
  color: var(--color-neutral-400);
  flex-shrink: 0;
  transition: transform var(--transition-base), color var(--transition-base);
}

.wa-bot__option:hover .wa-bot__option-arrow {
  transform: translateX(3px);
  color: var(--color-accent-dark);
}

@keyframes waOptionIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-bot__option {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.wa-bot__composer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg);
  flex-shrink: 0;
}

.wa-bot__composer-form {
  display: flex;
  gap: 8px;
  width: 100%;
}

.wa-bot__input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 9px 14px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--color-text);
  background-color: var(--color-bg-alt);
}

.wa-bot__input:focus {
  outline: none;
  border-color: var(--color-primary-700);
  box-shadow: var(--shadow-focus);
  background-color: var(--color-bg);
}

.wa-bot__send {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: var(--color-primary-900);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wa-bot__send:hover {
  background-color: var(--color-accent-dark);
}

.wa-bot__send svg {
  width: 16px;
  height: 16px;
}

.wa-bot__cta {
  display: block;
  width: 100%;
  text-align: center;
}


/* --------------------------------------------------------------------------
   9. FRANJA OSCURA CON TEXTURA FOTOGRÁFICA (.strip-dark)
   --------------------------------------------------------------------------
   Equivale a .other/.other-inner del modelo aprobado: usada para "Otras
   líneas de servicio" y otros bloques de cierre con fondo fotográfico.
   El texto (columna izquierda) y la lista de checks (columna derecha) del
   contenido interno cubren TODO el ancho/alto de la franja sin fondo propio,
   así que la foto necesita un overlay consistente en toda su superficie
   (no un degradado direccional parcial como en .page-hero/.industry-card,
   donde el texto vive solo en una franja). Mismo rango de opacidad
   (0.8-0.94) que .card--photo, ya probado en el sistema — foto siempre a
   opacity:1, todo el contraste lo da este overlay.
   -------------------------------------------------------------------------- */

.strip-dark {
  background-color: var(--color-primary-900);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-10);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.strip-dark__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.strip-dark__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.strip-dark__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 0.78/0.62, no 0.94/0.8: el único texto que vive sobre esta foto es el
     h3 (1.7rem, blanco, "large text" WCAG → mínimo 3:1). A 0.62 el peor
     caso (zona más clara de la foto) sigue midiendo ~5:1 — la opacidad
     anterior volvía la foto casi invisible sin necesidad. */
  background: linear-gradient(100deg, rgba(28, 23, 18, 0.78), rgba(28, 23, 18, 0.62));
}

.strip-dark > * {
  position: relative;
  z-index: 1;
}

.strip-dark__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.strip-dark__head h3 {
  color: #fff;
  font-size: 1.7rem;
}

.strip-dark__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.strip-dark__list a {
  background: var(--color-primary-900);
  padding: var(--space-5) var(--space-4);
  font-size: 0.94rem;
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  transition: 0.3s;
}

.strip-dark__list a:hover {
  background: var(--color-primary-800);
  color: #fff;
  padding-left: var(--space-5);
}

.strip-dark__list a .a {
  opacity: 0;
  transition: 0.3s;
}

.strip-dark__list a:hover .a {
  opacity: 1;
}

.strip-dark__list a.is-current {
  background: var(--color-accent);
  color: var(--color-primary-900);
}

@media (max-width: 980px) {
  .strip-dark__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .strip-dark {
    padding: var(--space-8) var(--space-5);
  }
  .strip-dark__list {
    grid-template-columns: repeat(2, 1fr);
  }
}