/* =====================================================================
   VALENTIA · Estilos de la página (HTML + CSS puros)
   Para cambiar colores y fuentes: edita las variables de la sección 1.
   Cada bloque de sección tiene su comentario con el nombre de la clase.
   Orden del archivo:
   1. Variables   2. Base   3. Utilidades   4. Botones y enlaces
   5. Header      6. Hero   7. Secciones    8. Footer
   Breakpoints usados: 640px (sm) · 768px (md) · 1024px (lg)
   ===================================================================== */

/* ---------- 1. VARIABLES (paleta y fuentes) ---------- */
:root {
  --bg: #05070b;          /* fondo principal */
  --bg-alt: #080b12;      /* fondo sección "plataforma" */
  --bg-deep: #04060a;     /* fondo sección "enfoque" */
  --bg-footer: #030407;
  --orange: #f97316;
  --orange-light: #fb923c;
  --amber: #f59e0b;
  --text: #f1f5f9;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --line: rgba(255, 255, 255, 0.07);   /* bordes sutiles */

  --font-serif: 'Cormorant Garamond', serif;   /* tipografía del logo */
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;

  --bar-h: 5rem;                           /* ALTO de la barra fija superior (cámbialo aquí) */
  --bar-bg: #070d19;                        /* color de fondo de la barra */
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--orange); color: #fff; }

/* Al saltar a una #ancla, deja espacio para que la barra fija no tape el título */
section[id] { scroll-margin-top: var(--bar-h); }

/* ---------- 3. UTILIDADES ---------- */
/* Contenedor centrado de ancho máximo */
.container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 640px) { .container { padding: 0 2rem; } }
/* Versión más ancha, con márgenes laterales amplios (la usan el menú y la portada) */
.container--wide { max-width: 96rem; padding-left: clamp(1.5rem, 5.5vw, 5.5rem); padding-right: clamp(1.5rem, 5.5vw, 5.5rem); }

.text-orange { color: var(--orange); }
.text-gradient {
  background: linear-gradient(to right, var(--orange-light), var(--orange), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tamaños de ícono (el SVG hereda el color del texto con currentColor) */
.icon {
  width: 1.5rem; height: 1.5rem; flex-shrink: 0;
  /* Íconos de línea por defecto: sin relleno, trazo del color del texto */
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Íconos sólidos (logos de WhatsApp, Python, etc.) */
.icon--fill { fill: currentColor; stroke: none; }
/* Contenedor invisible donde se definen los íconos */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon-sm { width: 1rem; height: 1rem; }
.icon-md { width: 1.75rem; height: 1.75rem; }
.icon-wa { width: 1.25rem; height: 1.25rem; }
.icon-accent { color: var(--orange-light); }
.icon-orange { color: var(--orange); }

/* Barrita naranja decorativa sobre el titular de la portada */
.accent-bar { width: 3.5rem; height: 3px; background: var(--orange); border-radius: 999px; margin-bottom: 2rem; }

/* Efecto "vidrio": fondo translúcido + desenfoque */
.glass-nav {
  background: rgba(5, 7, 11, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.glass-card {
  background: rgba(13, 18, 28, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  transition: all 0.3s;
}
.glass-card:hover {
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: 0 10px 30px -10px rgba(249, 115, 22, 0.15);
}

/* Grilla de 12 columnas: 1 columna en móvil, 12 desde 1024px.
   Cada .col-N ocupa N columnas en pantallas grandes. */
.grid-12 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.grid-12--center { align-items: center; }
.grid-12--wide-gap { gap: 3rem; }
@media (min-width: 1024px) {
  .grid-12 { grid-template-columns: repeat(12, 1fr); }
  .grid-12--wide-gap { gap: 4rem; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .align-right { text-align: right; }
}

/* Etiqueta naranja de sección (ej: "NUESTRAS SOLUCIONES") + línea a la derecha */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--orange);
}
.eyebrow::after { content: ''; width: 2rem; height: 2px; background: var(--orange); }

/* Títulos y textos de sección */
.section-title {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #fff;
}
.section-title--spaced { margin-bottom: 1rem; }
@media (min-width: 640px) { .section-title { font-size: 3rem; } }
@media (min-width: 1024px) { .section-title--xl { font-size: 3.75rem; } }

.lead { font-size: 1rem; line-height: 1.7; color: var(--zinc-400); }
.lead--light { font-weight: 300; margin-bottom: 2.5rem; }
.lead--wide { max-width: 42rem; }
@media (min-width: 640px) { .lead { font-size: 1.125rem; } }
/* Salto de línea que solo aparece en pantallas ≥ 640px */
.br-sm { display: none; }
@media (min-width: 640px) { .br-sm { display: inline; } }

/* ---------- 4. BOTONES Y ENLACES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  font-weight: 500;
  transition: all 0.3s;
}
/* La flecha se desplaza a la derecha al pasar el mouse */
.btn .icon, .link-cta .icon { transition: transform 0.2s; }
.btn:hover .icon, .link-cta:hover .icon { transform: translateX(0.25rem); }

/* Botón del menú: borde naranja, fondo transparente */
.btn--outline {
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  color: #fff;
  border: 1.5px solid var(--orange);
  background: transparent;
}
.btn--outline .icon { width: 1rem; height: 1rem; color: var(--orange); }
.btn--outline:hover { background: rgba(249, 115, 22, 0.15); }
@media (max-width: 639px) {
  .btn--outline { padding: 0.5rem 1rem; gap: 0.5rem; font-size: 0.85rem; }
  .btn--outline .icon { display: none; }     /* en celular se oculta la flecha para ganar espacio */
}

/* Botón "píldora" naranja suave (Ver casos de éxito) */
.btn--pill {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--orange-light);
  border: 1px solid rgba(249, 115, 22, 0.4);
  background: rgba(249, 115, 22, 0.1);
}
.btn--pill:hover { background: var(--orange); color: #fff; }

/* Botón principal con degradado (WhatsApp) */
.btn--cta {
  gap: 0.75rem;
  padding: 1rem 2rem;
  font-size: 0.875rem;
  color: #fff;
  background: linear-gradient(to right, var(--orange), var(--amber));
  box-shadow: 0 0 35px -5px rgba(249, 115, 22, 0.3);
}
.btn--cta:hover { background: linear-gradient(to right, #ea580c, #d97706); transform: scale(1.02); }
@media (min-width: 640px) { .btn--cta { font-size: 1rem; } }

/* Enlace "CONOCE MÁS": texto + flecha, subrayado naranja bajo todo el enlace */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #fff;
  border-bottom: 2px solid var(--orange);
  transition: color 0.2s;
}
.link-cta .icon { width: 1rem; height: 1rem; color: var(--orange); }
.link-cta:hover { color: var(--orange-light); }
@media (min-width: 640px) { .link-cta { font-size: 0.875rem; } }

/* ---------- 5. BARRA SUPERIOR FIJA (logo + menú + botón) ---------- */
/* Queda pegada arriba mientras se baja por la página y se repite igual en las demás páginas.
   Su alto lo controla --bar-h (variables, sección 1). El contenido va centrado en vertical. */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--bar-h);
  background: var(--bar-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);   /* sombra suave al bajar sobre el contenido */
}
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }


/* Logo: nombre en serif + lema (el footer usa la misma base) */
.brand { display: flex; flex-direction: column; align-items: flex-start; }
.brand__name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #fff;
  transition: color 0.2s;
}
.brand__tag {
  margin-top: -2px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--zinc-400);
}
a.brand:hover .brand__name { color: var(--orange-light); }

/* Logo del menú: el nombre y el lema ocupan EXACTAMENTE el mismo ancho
   y quedan alineados a la izquierda, con el mismo margen que el titular. */
.brand--header { align-items: stretch; flex-shrink: 0; }   /* el logo nunca se comprime */
.brand--header .brand__name {
  display: flex;
  justify-content: space-between;   /* reparte las letras para igualar el ancho del lema */
  font-size: 1.9rem;                /* tamaño del nombre */
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}
.brand--header .brand__tag {
  margin-top: 0.4rem;
  margin-right: -0.3em;             /* quita el espacio sobrante tras la última letra */
  font-size: 0.5625rem;             /* tamaño del lema (9px) */
  font-weight: 600;
  letter-spacing: 0.3em;
  white-space: nowrap;
  color: #fff;
}
@media (max-width: 639px) {
  .brand--header .brand__name { font-size: 1.6rem; }
  .brand--header .brand__tag { font-size: 0.5rem; letter-spacing: 0.26em; margin-right: -0.26em; }
}

/* Menú: oculto en celular y tablet, visible desde 1024px (falta un menú hamburguesa para pantallas chicas) */
.nav { display: none; align-items: center; gap: 2.25rem; font-size: 0.875rem; color: #fff; }
@media (min-width: 1024px) { .nav { display: flex; } }
.nav__link { position: relative; white-space: nowrap; padding: 0.25rem 0; opacity: 0.92; transition: opacity 0.2s, color 0.2s; }
.nav__link:hover { opacity: 1; color: var(--orange-light); }
/* Opción activa: línea naranja debajo, un poco más ancha que el texto */
.nav__link.is-active { opacity: 1; }
.nav__link.is-active::after { content: ''; position: absolute; left: -0.4rem; right: -0.4rem; bottom: -0.75rem; height: 3px; background: var(--orange); }

/* ---------- 6. HERO (portada) ---------- */
/* La portada empieza justo debajo de la barra fija: la foto aparece desde ahí hacia abajo. */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: var(--bar-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0c1424;          /* color de respaldo mientras carga la foto */
}
.hero__bg { position: absolute; inset: var(--bar-h) 0 0 0; z-index: 0; }   /* la foto arranca bajo la barra */
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 75% center; }
@media (min-width: 1024px) { .hero__bg img { object-position: center; } }

/* Capas sobre la foto: oscurecen un poco la izquierda (texto) y funden el borde inferior */
.hero__shade { position: absolute; inset: 0; }
.hero__shade--side { background: linear-gradient(to right, rgba(8, 13, 26, 0.85), rgba(8, 13, 26, 0.55) 60%, rgba(8, 13, 26, 0.3)); }
@media (min-width: 768px) {
  .hero__shade--side { background: linear-gradient(to right, rgba(8, 13, 26, 0.7) 0%, rgba(8, 13, 26, 0.3) 40%, transparent 65%); }
}
.hero__shade--vertical { background: linear-gradient(to bottom, transparent 0%, transparent 88%, var(--bg) 100%); }

/* Textos de la portada (medidas de la versión que te gustó) */
.hero__content { position: relative; z-index: 10; width: 100%; padding-top: 3rem; padding-bottom: 3rem; }
.hero__text { max-width: 42rem; }
.hero__title {
  margin-bottom: 1.5rem;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
}
.hero__title .text-orange { font-weight: 800; }
.hero__subtitle { max-width: 32rem; margin-bottom: 2.5rem; font-size: 1.125rem; font-weight: 300; line-height: 1.7; color: var(--zinc-300); }
@media (min-width: 640px) {
  .hero__title { font-size: 3.75rem; }
  .hero__subtitle { font-size: 1.25rem; }
}
@media (min-width: 1024px) { .hero__title { font-size: 4.2rem; } }

/* ---------- 7. SECCIONES ---------- */
.section { position: relative; padding: 7rem 0; border-top: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; }
.section--alt { background: var(--bg-alt); padding: 6rem 0; }
.section--deep { background: var(--bg-deep); }
@media (min-width: 640px) {
  .section { padding: 9rem 0; }
  .section--alt { padding: 8rem 0; }
}
.section__head { margin-bottom: 4rem; }
.section__head--end { align-items: end; margin-bottom: 5rem; }

/* Tarjetas de "Soluciones" */
.cards-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .cards-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cards-grid { gap: 2rem; } }

.card { padding: 2rem; border-radius: 1rem; }
.card:hover { transform: translateY(-0.25rem); }
@media (min-width: 640px) { .card { padding: 2.5rem; } }
.card__title { margin-bottom: 0.75rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; transition: color 0.3s; }
.card:hover .card__title { color: var(--orange-light); }
.card__text { font-size: 0.875rem; line-height: 1.7; color: var(--zinc-400); }
@media (min-width: 640px) {
  .card__title { font-size: 1.5rem; }
  .card__text { font-size: 1rem; }
}

/* Cuadrito con ícono naranja */
.icon-box {
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--orange-light);
  border-radius: 0.75rem;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.2);
  transition: background 0.3s;
}
.card:hover .icon-box { background: rgba(249, 115, 22, 0.2); }
.icon-box--fixed { flex-shrink: 0; margin-bottom: 0; } /* versión para los pilares (a la izquierda del texto) */

.platform__copy { position: relative; z-index: 10; }
.platform__copy .section-title { margin-bottom: 1.5rem; } /* separa el título del párrafo */

/* "Plataforma": imagen con etiqueta flotante */
.visual {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}
.visual img { width: 100%; height: 420px; object-fit: cover; object-position: 50% 25%; filter: brightness(0.9); }
@media (min-width: 640px) { .visual img { height: 480px; } }
.visual__fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg), transparent 60%); }
.visual__tag {
  position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem; border-radius: 0.75rem;
}
.visual__label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--orange-light); }
.visual__title { font-size: 0.875rem; font-weight: 600; color: #fff; }

/* Punto verde con pulso ("en vivo") */
.ping { position: relative; display: flex; width: 0.75rem; height: 0.75rem; }
.ping__wave { position: absolute; inset: 0; border-radius: 50%; background: #34d399; opacity: 0.75; animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.ping__dot { position: relative; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #10b981; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* "Enfoque": resplandor y pilares */
.glow-blob {
  position: absolute; right: -5rem; top: 50%;
  width: 24rem; height: 24rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(249, 115, 22, 0.1);
  filter: blur(64px);
  pointer-events: none;
}
.pillars { display: flex; flex-direction: column; gap: 1.5rem; }
.pillar { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.5rem; border-radius: 1rem; }
@media (min-width: 640px) { .pillar { padding: 1.75rem; } }
.pillar__title { margin-bottom: 0.25rem; font-size: 1.125rem; font-weight: 700; color: #fff; }
@media (min-width: 640px) { .pillar__title { font-size: 1.25rem; } }

/* "Resultados": cifras */
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .metrics-grid { gap: 2rem; } }
@media (min-width: 768px) { .metrics-grid { grid-template-columns: repeat(4, 1fr); } }
.metric { display: flex; flex-direction: column; align-items: center; padding: 1.5rem; border-radius: 1rem; text-align: center; }
@media (min-width: 640px) { .metric { padding: 2rem; } }
.metric__value { margin-bottom: 0.75rem; font-family: var(--font-display); font-size: 3rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; }
.metric__label { margin-bottom: 1rem; font-size: 0.75rem; font-weight: 500; line-height: 1.4; color: var(--zinc-300); }
.metric__bar { width: 2rem; height: 2px; margin-top: auto; background: var(--orange); }
@media (min-width: 640px) {
  .metric__value { font-size: 3.75rem; }
  .metric__label { font-size: 0.875rem; }
}
@media (min-width: 1024px) { .metric__value { font-size: 4.5rem; } }

/* "Hablemos": fondo con imagen oscurecida */
.contact { position: relative; padding: 6rem 0; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); }
@media (min-width: 640px) { .contact { padding: 8rem 0; } }
.contact__bg { position: absolute; inset: 0; z-index: 0; }
.contact__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 90%; filter: brightness(0.4) contrast(1.25); }
.contact__shade { position: absolute; inset: 0; }
.contact__shade--flat { background: rgba(5, 7, 11, 0.8); mix-blend-mode: multiply; }
.contact__shade--vertical { background: linear-gradient(to top, var(--bg), transparent, var(--bg)); }
.contact__content { position: relative; z-index: 10; }
/* ---------- 8. FOOTER ---------- */
.footer {
  font-size: 0.875rem;
  color: var(--zinc-400);
  background: var(--bar-bg);                          /* mismo color que la barra superior */
  border-top: 1px solid rgba(255, 255, 255, 0.1);     /* mismo filo que la barra superior */
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.6);   /* sombra hacia arriba (espejo del header) */
}
.footer__top { min-height: var(--bar-h); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.brand--footer { align-items: center; }
.brand--footer .brand__name { font-size: 1.125rem; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; font-size: 0.75rem; }
.footer__nav a:hover, .footer__legal a:hover { color: #fff; }
.footer__socials { display: flex; gap: 1rem; }
.social {
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--zinc-300);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s;
}
.social:hover { color: #fff; border-color: rgba(249, 115, 22, 0.5); }
.footer__bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-size: 0.75rem; color: var(--zinc-500); }
.footer__legal { display: flex; align-items: center; gap: 1.5rem; }
.footer__legal a { transition: color 0.2s; }
.sep { color: #3f3f46; }
@media (min-width: 640px) {
  .footer__nav { font-size: 0.875rem; }
  .footer__bottom { flex-direction: row; }
}
@media (min-width: 768px) {
  .footer__top { flex-direction: row; padding: 0; }
  .brand--footer { align-items: flex-start; }
}


/* =====================================================================
   9. CONTENIDO DEL DOCUMENTO (problema, qué es, qué observamos, contacto)
   Reutiliza el mismo lenguaje visual: naranja, vidrio, Space Grotesk.
   ===================================================================== */

/* Etiqueta sin línea final (para títulos de tarjeta) */
.eyebrow--plain::after { display: none; }
.card .eyebrow { margin-bottom: 0.75rem; }

/* Subtítulo de bloque */
.subtitle { margin-bottom: 2rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; }
@media (min-width: 640px) { .subtitle { font-size: 1.875rem; } }

/* Bloque con aire arriba (ej: "El marco normativo") */
.block { margin-top: 5rem; }

/* Cifras: variante de 3 columnas */
.metrics-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .metrics-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.metrics-grid--3 .metric__value { font-size: clamp(2.5rem, 4vw, 3.5rem); }
.metrics-grid--3 .metric__label { font-size: 0.875rem; }
.metric__note { margin-left: 0.15em; font-size: 0.4em; font-weight: 500; vertical-align: super; color: var(--orange); }

/* Frase destacada con filo naranja a la izquierda */
.statement {
  margin: 3rem 0 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--orange);
  font-size: 1.25rem; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em;
  color: #fff;
}
.statement--sm { margin-top: 2rem; font-size: 1rem; font-weight: 500; color: var(--zinc-300); }
@media (min-width: 640px) { .statement { font-size: 1.5rem; } .statement--sm { font-size: 1.125rem; } }

/* Lema con ícono */
.tagline { display: flex; align-items: center; gap: 0.75rem; margin-top: 2rem; font-size: 1.125rem; font-weight: 600; color: var(--orange-light); }

/* Nota al pie / fuentes */
.footnote { margin-top: 3rem; font-size: 0.75rem; line-height: 1.6; color: var(--zinc-500); }
.footnote--center { max-width: 44rem; margin-left: auto; margin-right: auto; text-align: center; }

/* Pilares más compactos */
.pillars--tight { gap: 1rem; }
.pillars--tight .pillar { padding: 1.25rem; }

/* Etiquetas del equipo asesor */
.chips { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--zinc-300);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.chip::before { content: ''; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--orange); }

/* Tarjeta de contacto */
.contact .lead { color: var(--zinc-300); font-weight: 300; }
.contact-card { display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem; border-radius: 1.25rem; }
.contact-card__name { font-size: 1.375rem; font-weight: 700; color: #fff; }
.contact-card__role { margin-top: -1rem; font-size: 0.875rem; color: var(--orange-light); }
.contact-row { display: flex; align-items: center; gap: 1rem; }
.contact-row .icon-box { width: 2.5rem; height: 2.5rem; margin-bottom: 0; flex-shrink: 0; }
.contact-row__label { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; color: var(--zinc-500); }
.contact-row__value { display: block; font-size: 1rem; font-weight: 500; color: #fff; overflow-wrap: anywhere; }
a.contact-row:hover .contact-row__value { color: var(--orange-light); }
.contact-card .btn--cta { width: 100%; justify-content: center; margin-top: 0.5rem; }
.platform__copy .pillars--tight { margin-top: 2.5rem; }
.contact-card .btn--cta { padding-top: 1rem; padding-bottom: 1rem; }
.contact-card .icon-wa { width: 1.25rem; height: 1.25rem; }


/* =====================================================================
   10. VERSIÓN 3 · enfoque minería + Recursos Humanos
   (portada con 2 botones y franja de confianza, faena, cómo funciona,
    para quién, confidencialidad y preguntas frecuentes)
   ===================================================================== */

/* ---------- Portada: botones y franja de confianza ---------- */
.hero__content { display: flex; flex-direction: column; gap: 3.5rem; }
.hero__subtitle { max-width: 36rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.hero__actions .btn--cta { padding: 0.9rem 1.75rem; }

.trust {
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem;
  max-width: 46rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 768px) { .trust { display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; } }
.trust__item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; font-weight: 500; color: var(--zinc-300); }
.trust__item .icon { width: 1.125rem; height: 1.125rem; color: var(--orange); }

/* Botón del menú: en celular se acorta el texto para que quepa junto al logo */
.header .btn--outline { white-space: nowrap; }
.btn__short { display: none; }
@media (max-width: 479px) {
  .btn__extra { display: none; }
  .btn__short { display: inline; }
}

/* ---------- En faena: tarjetas compactas + cadena ---------- */
.mini-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .mini-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mini-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.mini { padding: 1.75rem; border-radius: 1rem; }
.mini .icon-box { margin-bottom: 1.25rem; }
.mini__title { margin-bottom: 0.5rem; font-size: 1.125rem; font-weight: 700; color: #fff; }

.chain {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem;
  margin-top: 3.5rem;
}
@media (min-width: 768px) { .chain { flex-direction: row; align-items: center; gap: 1rem; } }
.chain__step {
  flex: 1;
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.875rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.chain__step--end { border-color: rgba(249, 115, 22, 0.45); background: rgba(249, 115, 22, 0.08); }
.chain__num { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; color: var(--orange); }
.chain__text { font-size: 1.0625rem; font-weight: 700; color: #fff; }
.chain__hint { font-size: 0.8125rem; color: var(--zinc-400); }
.chain__arrow { align-self: center; color: var(--orange); transform: rotate(90deg); }
@media (min-width: 768px) { .chain__arrow { transform: none; } }

/* ---------- Cómo funciona: 4 pasos numerados ---------- */
.steps { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1.25rem; counter-reset: none; }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.step { position: relative; padding: 2rem 1.75rem; border-radius: 1rem; }
.step__num {
  position: absolute; top: 1.25rem; right: 1.5rem;
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; line-height: 1;
  color: rgba(249, 115, 22, 0.18);
}
.step__title { margin-bottom: 0.625rem; font-size: 1.25rem; font-weight: 700; color: #fff; }
/* Línea naranja que une los pasos en escritorio */
@media (min-width: 1024px) {
  .step::after {
    content: ''; position: absolute; top: 3.5rem; right: -1.5rem;
    width: 1.5rem; height: 2px; background: linear-gradient(to right, var(--orange), transparent);
  }
  .step:last-child::after { display: none; }
}

/* ---------- Para quién: tarjetas por rol ---------- */
.roles { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .roles { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.role { position: relative; padding: 2rem; border-radius: 1rem; }
.role--featured {
  border-color: rgba(249, 115, 22, 0.45);
  background: linear-gradient(160deg, rgba(249, 115, 22, 0.12), rgba(13, 18, 28, 0.6) 55%);
}
.role__badge {
  position: absolute; top: 1.5rem; right: 1.5rem;
  padding: 0.25rem 0.75rem; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-light); border: 1px solid rgba(249, 115, 22, 0.4);
}
.role__title { font-size: 1.375rem; font-weight: 700; color: #fff; }
.role__sub { margin: 0.25rem 0 1.25rem; font-size: 0.9375rem; color: var(--orange-light); }

/* Lista con check naranja (roles y confidencialidad) */
.checklist, .privacy__list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.checklist li, .privacy__list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; line-height: 1.55; color: var(--zinc-300); }
.checklist .icon, .privacy__list .icon { width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; color: var(--orange); }

/* ---------- Equipo: banda de confidencialidad ---------- */
.privacy {
  display: grid; grid-template-columns: 1fr; gap: 1.75rem;
  margin-top: 4rem; padding: 2rem; border-radius: 1.25rem;
  border-color: rgba(249, 115, 22, 0.35);
}
@media (min-width: 1024px) { .privacy { grid-template-columns: 1.3fr 1fr; align-items: center; gap: 3rem; padding: 2.5rem 3rem; } }
.privacy__head { display: flex; align-items: flex-start; gap: 1.25rem; }
.privacy__head .eyebrow { margin-bottom: 0.5rem; }
.privacy__title { font-size: 1.375rem; font-weight: 700; line-height: 1.3; color: #fff; }
@media (min-width: 640px) { .privacy__title { font-size: 1.625rem; } }
.icon-box--lg { width: 3.5rem; height: 3.5rem; margin-bottom: 0; flex-shrink: 0; }
.icon-box--lg .icon { width: 1.75rem; height: 1.75rem; }
.privacy__list li { font-size: 1rem; color: #fff; }

/* ---------- Preguntas frecuentes (sin JavaScript) ---------- */
.faq { display: flex; flex-direction: column; gap: 0.75rem; }
.faq__item { border-radius: 0.875rem; }
.faq__item:hover { transform: none; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-size: 1rem; font-weight: 600; color: #fff;
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon { width: 1.125rem; height: 1.125rem; color: var(--orange); transition: transform 0.2s; }
.faq__item[open] .faq__q .icon { transform: rotate(180deg); }
.faq__item[open] { border-color: rgba(249, 115, 22, 0.35); }
.faq__a { padding: 0 1.5rem 1.25rem; font-size: 0.9375rem; line-height: 1.7; color: var(--zinc-400); }


/* =====================================================================
   11. VERSIÓN 4 · fotografías de faena + secciones claras
   ===================================================================== */

/* Columna que empieza en la 7 (para dejar libre la mitad izquierda) */
@media (min-width: 1024px) { .col-start-7 { grid-column: 7 / span 6; } }

/* ---------- Sección con foto de fondo (En faena) ---------- */
.section--photo { background: var(--bg); }
.photo-bg { position: absolute; inset: 0; z-index: 0; }
.photo-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 20%; }
.photo-bg__shade { position: absolute; inset: 0; }
/* Oscurece la derecha (donde va el texto) y deja ver a la persona a la izquierda */
.photo-bg__shade--side { background: linear-gradient(to right, rgba(5, 7, 11, 0.15) 0%, rgba(5, 7, 11, 0.55) 45%, rgba(5, 7, 11, 0.92) 62%); }
/* Funde la parte de abajo con el fondo, para que las tarjetas queden sobre color sólido */
.photo-bg__shade--bottom { background: linear-gradient(to bottom, rgba(5, 7, 11, 0) 0%, rgba(5, 7, 11, 0) 38%, var(--bg) 62%); }
.photo-content { position: relative; z-index: 10; }
.riesgo__head { min-height: 26rem; align-items: center; margin-bottom: 5rem; }
.lead--on-photo { margin-top: 1.5rem; color: var(--zinc-300); }

/* En celular la foto va arriba, más oscura, y el texto debajo */
@media (max-width: 1023px) {
  .photo-bg { bottom: auto; height: 34rem; }
  .photo-bg img { object-position: 20% center; }
  .photo-bg__shade--side { background: rgba(5, 7, 11, 0.35); }
  .photo-bg__shade--bottom { background: linear-gradient(to bottom, rgba(5, 7, 11, 0) 30%, var(--bg) 100%); }
  .riesgo__head { min-height: 0; padding-top: 16rem; margin-bottom: 3.5rem; }
}

/* ---------- Imagen del producto (dashboard) ---------- */
.visual--product { margin: 0; border-color: rgba(255, 255, 255, 0.08); background: #0b0f17; }
.visual--product img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: none; }
.visual__caption {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- Contacto: deja ver la panorámica de la faena ---------- */
.contact__bg img { object-position: center 60%; filter: brightness(0.6) contrast(1.05); }
.contact__shade--flat { background: linear-gradient(to right, rgba(5, 7, 11, 0.85) 0%, rgba(5, 7, 11, 0.55) 55%, rgba(5, 7, 11, 0.35) 100%); mix-blend-mode: normal; }
.contact__shade--vertical { background: linear-gradient(to bottom, var(--bg) 0%, rgba(5, 7, 11, 0) 22%, rgba(5, 7, 11, 0) 78%, var(--bg-footer) 100%); }

/* ---------- Secciones claras (color arena) ----------
   Se activan con class="section section--light". Cortan la secuencia oscura
   y le dan a la página un aire más editorial y corporativo. */
.section--light {
  --ink: #0b1220;           /* texto principal (azul marino) */
  --ink-soft: #4b5563;      /* texto secundario */
  background: #f4efe6;
  border-top-color: rgba(11, 18, 32, 0.06);
}
.section--light .section-title,
.section--light .subtitle,
.section--light .card__title,
.section--light .step__title,
.section--light .mini__title,
.section--light .metric__value,
.section--light .statement { color: var(--ink); }
.section--light .lead,
.section--light .card__text { color: var(--ink-soft); }
.section--light .metric__label,
.section--light .statement--sm { color: #3f3f46; }
.section--light .footnote { color: #78716c; }
.section--light .eyebrow { color: #c2410c; }
.section--light .eyebrow::after { background: #c2410c; }
.section--light .text-orange { color: #ea580c; }

/* Tarjetas blancas con sombra suave en lugar de vidrio oscuro */
.section--light .glass-card {
  background: #ffffff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid rgba(11, 18, 32, 0.08);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 12px 32px -18px rgba(11, 18, 32, 0.25);
}
.section--light .glass-card:hover { border-color: rgba(234, 88, 12, 0.45); box-shadow: 0 18px 40px -20px rgba(234, 88, 12, 0.35); }
.section--light .card:hover .card__title { color: #c2410c; }
.section--light .icon-box { color: #ea580c; background: rgba(249, 115, 22, 0.1); border-color: rgba(249, 115, 22, 0.25); }
.section--light .step__num { color: rgba(234, 88, 12, 0.22); }
/* Escritorio: la foto mantiene su proporción (sin zoom) y se funde con el fondo al final */
@media (min-width: 1024px) {
  .photo-bg { bottom: auto; height: 56.25vw; max-height: 100%; }
  .photo-bg__shade--bottom { background: linear-gradient(to bottom, rgba(5, 7, 11, 0) 0%, rgba(5, 7, 11, 0) 55%, var(--bg) 100%); }
}
/* Contacto: más luz en la panorámica para que se vea el atardecer */
.contact__bg img { object-position: center 35%; filter: brightness(0.85) contrast(1.05); }
.contact__shade--flat { background: linear-gradient(to right, rgba(5, 7, 11, 0.82) 0%, rgba(5, 7, 11, 0.45) 55%, rgba(5, 7, 11, 0.2) 100%); }
@media (max-width: 1023px) { .contact__shade--flat { background: rgba(5, 7, 11, 0.6); } }


/* =====================================================================
   12. VERSIÓN 5 · contenido de index_1 (solución, identidad, equipo)
   Mismos tonos: naranja, vidrio oscuro y secciones arena.
   ===================================================================== */

/* Portada: nota pequeña bajo los botones */
.hero__note { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--zinc-400); }

/* Bajada bajo el título de una sección */
.section__sub { margin-top: 1.25rem; }

/* Grilla de 3 tarjetas (desafío, propósito/misión/visión) */
.trio { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .trio { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* Etiqueta pequeña de tarjeta: "01 / VISIBILIDAD" */
.card__kicker {
  margin-bottom: 1rem;
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em;
  color: var(--orange);
}
.section--light .card__kicker { color: #c2410c; }

/* Propuesta: lista con filo naranja + cita destacada */
.features { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.feature { display: flex; flex-direction: column; gap: 0.25rem; padding-left: 1.25rem; border-left: 3px solid var(--orange); }
.feature__title { font-size: 1.0625rem; font-weight: 700; color: #fff; }
.feature__text { font-size: 0.9375rem; line-height: 1.6; color: var(--zinc-400); }

.quote {
  position: relative;
  padding: 2.5rem 2rem;
  border-radius: 1.25rem;
  font-size: 1.5rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(150deg, rgba(249, 115, 22, 0.14), rgba(13, 18, 28, 0.85) 55%);
  border: 1px solid rgba(249, 115, 22, 0.3);
}
.quote::before {
  content: '“'; position: absolute; top: 0.25rem; left: 1.5rem;
  font-family: var(--font-serif); font-size: 5rem; line-height: 1; color: rgba(249, 115, 22, 0.35);
}
@media (min-width: 640px) { .quote { padding: 3.5rem 3rem; font-size: 1.875rem; } }

/* Identidad: tarjetas de propósito / misión / visión (texto más largo) */
.identity .card__title { font-size: 1.25rem; }
.identity .card__text { font-size: 0.9375rem; }

/* Valores: tarjetas oscuras (contrastan sobre el fondo arena) */
.values { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .values { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .values { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.value { padding: 1.75rem; border-radius: 1rem; background: #0b1220; border: 1px solid rgba(255, 255, 255, 0.06); }
.section--light .value .icon-box { color: var(--orange-light); background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.3); margin-bottom: 1.25rem; }
.value__title { margin-bottom: 0.5rem; font-size: 1.125rem; font-weight: 700; color: #fff; }
.value__text { font-size: 0.9375rem; line-height: 1.6; color: #cbd5e1; }

/* Confianza: párrafo dentro de la banda de confidencialidad */
.privacy__text { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.6; color: var(--zinc-400); }
.privacy__text strong, .privacy__list strong { color: #fff; font-weight: 600; }

/* Equipo: 6 personas */
.team { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .team { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .team { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.person { padding: 2rem; border-radius: 1rem; }
.person:hover { transform: translateY(-0.25rem); }
.person__photo {
  width: 5.5rem; height: 5.5rem; margin-bottom: 1.25rem;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 50%;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #1e293b, var(--orange));
  border: 4px solid #fff;
  box-shadow: 0 8px 20px -10px rgba(11, 18, 32, 0.5);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__name { font-size: 1.25rem; font-weight: 700; color: #fff; }
.section--light .person__name { color: var(--ink); }
.person__role { margin: 0.25rem 0 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--orange); }
.section--light .person__role { color: #c2410c; }

/* Contacto: línea de sectores */
.contact__sectors { margin-top: 1.5rem; font-size: 0.875rem; color: var(--zinc-400); }

/* Footer: frase de cierre */
.footer__claim { color: var(--zinc-500); }


/* =====================================================================
   13. VERSIÓN 6 · página solo con los textos de index_1
   ===================================================================== */

/* Portada: etiqueta sobre el título y botón secundario transparente */
.hero__text .eyebrow { margin-bottom: 1.5rem; }
.btn--ghost {
  padding: 0.9rem 1.5rem;
  font-size: 0.875rem; font-weight: 600; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.btn--ghost:hover { border-color: var(--orange); background: rgba(249, 115, 22, 0.12); }
.hero__actions + .hero__note { margin-top: 1.5rem; }

/* Listas con filo naranja en secciones claras */
.section--light .feature__title { color: var(--ink); }
.section--light .feature__text { color: var(--ink-soft); }
.section--light .statement strong { color: var(--ink); }

/* Panel conceptual del dashboard (HTML + CSS, sin imagen) */
.dash {
  padding: 1.5rem;
  border-radius: 1rem;
  color: #1f2937;
  background: #f8fafc;
  border: 6px solid #1e293b;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
}
@media (min-width: 1024px) { .dash { transform: rotate(-2deg); } }
.dash__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
.dash__title { font-size: 0.9375rem; font-weight: 800; color: #0b1220; }
.dash__demo { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; color: #6b7280; }
.dash__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin: 1.1rem 0; }
.dash__metric { padding: 0.8rem; border-radius: 0.5rem; background: #eef0f3; }
.dash__metric small { display: block; font-size: 0.625rem; color: #6b7280; }
.dash__metric b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: #0b1220; }
.dash__label { font-size: 0.75rem; font-weight: 700; color: #0b1220; }
.dash__chart { height: 9rem; display: flex; align-items: flex-end; gap: 0.55rem; padding: 0.6rem 0.5rem 0; border-bottom: 1px solid #d1d5db; }
.dash__chart span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #fdba74, var(--orange)); }
.dash__pills { display: flex; gap: 0.55rem; margin-top: 1.1rem; }
.dash__pills span { flex: 1; padding: 0.5rem; border-radius: 0.35rem; font-size: 0.625rem; text-align: center; color: #374151; background: #e9ebee; }
.dash__pills span::first-letter { color: var(--orange); }
@media (max-width: 479px) { .dash__metric b { font-size: 1.2rem; } .dash__pills { flex-direction: column; } }

/* Foto con cita encima (Confianza). Si falta la imagen, queda el degradado. */
.photo-card {
  position: relative; margin: 0;
  min-height: 26rem;
  display: flex; align-items: flex-end;
  overflow: hidden;
  border-radius: 1.25rem;
  background: linear-gradient(160deg, #1e293b, #0b1220);
  background-size: cover; background-position: center;
  box-shadow: 0 25px 50px -20px rgba(11, 18, 32, 0.45);
}
.photo-card--confianza { background-image: linear-gradient(to top, rgba(5, 7, 11, 0.85) 0%, rgba(5, 7, 11, 0.1) 60%), url("../images/confianza.jpg"), linear-gradient(160deg, #1e293b, #0b1220); }
.photo-card__quote { padding: 2rem; font-size: 1.75rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: #fff; }
@media (min-width: 640px) { .photo-card__quote { padding: 2.5rem; font-size: 2.125rem; } }

/* Banda de foto a todo el ancho con cita */
.band {
  position: relative;
  padding: 8rem 0;
  background-color: #0b1220;
  background-image: linear-gradient(to right, rgba(5, 7, 11, 0.88) 0%, rgba(5, 7, 11, 0.55) 60%, rgba(5, 7, 11, 0.35) 100%), url("../images/banda-chuquicamata.jpg");
  background-size: cover; background-position: center;
}
@media (min-width: 640px) { .band { padding: 10rem 0; } }
.band__quote { max-width: 46rem; font-size: 1.75rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: #fff; }
@media (min-width: 640px) { .band__quote { font-size: 2.5rem; } }

/* Equipo sobre fondo oscuro: borde del círculo más suave */
.section--alt .person__photo { border-color: rgba(255, 255, 255, 0.12); }

/* Formulario de contacto */
.contact-form { padding: 2rem; border-radius: 1.25rem; background: rgba(8, 11, 18, 0.78); }
.contact-form__title { font-size: 1.375rem; font-weight: 700; color: #fff; }
.contact-form__intro { margin: 0.5rem 0 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--zinc-400); }
.field__label { display: block; margin: 1rem 0 0.4rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: var(--zinc-300); }
.field {
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit; font-size: 0.9375rem; color: #fff;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s;
}
.field::placeholder { color: var(--zinc-500); }
.field:focus { outline: none; border-color: var(--orange); }
.field--area { min-height: 6.5rem; resize: vertical; }
.contact-form__btn { width: 100%; justify-content: center; margin-top: 1.25rem; border: 0; cursor: pointer; font-family: inherit; }
.contact-form__status { margin-top: 0.75rem; font-size: 0.75rem; color: var(--zinc-400); }