/* ==========================================================================
   TIPOGRAFÍA DE TÍTULOS — fuente propia (Sora), guardada en fonts/ para que
   el sitio siga funcionando sin depender de internet ni de un CDN externo.
   Solo se usa en titulares; el texto de cuerpo sigue en la fuente del
   sistema, más liviana y más rápida de cargar.
   ========================================================================== */
@font-face {
  font-family: 'Sora';
  src: url('../fonts/Sora-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   VARIABLES — cambia un color o una medida aquí y se actualiza en todo el
   sitio. No hace falta buscar en el resto del archivo.

   Estilo: tema claro y espacioso, con formas de fondo suaves tipo "nube" y
   tarjetas blancas — paleta azul, siguiendo la referencia visual elegida.
   ========================================================================== */
:root {
  --primario: #4D6BFE;
  --primario-oscuro: #3450D9;
  --primario-suave: #EAEFFF;
  --primario-tinta: #1B2233;

  --color-whatsapp: #25D366;
  --color-whatsapp-oscuro: #1DA851;

  --bg: #F1F9FA;
  --bg-elevado: #E9F5F6;
  --superficie: #FFFFFF;
  --superficie-2: #FFFFFF;
  --borde: rgba(23, 33, 55, 0.09);
  --borde-fuerte: rgba(23, 33, 55, 0.28);

  --texto: #1B2233;
  --texto-suave: #5B6478;
  --texto-tenue: #8891A3;

  --fuente: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: 'Sora', var(--fuente);

  --texto-base: 16px;
  --texto-grande: 1.15rem;
  --texto-pequeno: 0.92rem;

  --radio-borde: 18px;
  --radio-borde-chico: 12px;
  --degradado-oscuro: linear-gradient(135deg, #0F1730 0%, #1C2E63 55%, #3455D6 100%);
  --sombra: 0 10px 30px rgba(23, 33, 55, 0.06);
  --sombra-fuerte: 0 24px 56px rgba(23, 33, 55, 0.13);
  --ancho-maximo: 1160px;
  --transicion: 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--texto-base);
  line-height: 1.6;
  color: var(--texto);
  background: var(--bg);
  overflow-x: hidden;
  position: relative;
}

/* Formas de fondo tipo "nube" — suaves, grandes, casi imperceptibles.
   Dan la textura atmosférica de la referencia sin volverse ruido. */
body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
  pointer-events: none;
}
body::before {
  width: 620px; height: 620px; top: -220px; right: -180px;
  background: rgba(120, 150, 230, 0.16);
}
body::after {
  width: 560px; height: 560px; top: 10%; left: -240px;
  background: rgba(140, 165, 255, 0.16);
}

header, main, footer { position: relative; z-index: 1; }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.6em 0;
  color: var(--texto);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 500; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1em 0; }

img { max-width: 100%; display: block; }

a { color: inherit; }

.contenedor {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.titulo-seccion { margin-bottom: 0.4em; }
.titulo-seccion--centrado { text-align: center; }

.texto-seccion {
  font-size: var(--texto-grande);
  color: var(--texto-suave);
  max-width: 760px;
}
.texto-seccion--centrado { text-align: center; margin-left: auto; margin-right: auto; }

/* Efecto "marcador": caja de color sólido detrás del texto resaltado */
.resalte {
  background: var(--primario);
  color: #FFFFFF;
  padding: 0.02em 0.2em;
  border-radius: 0.16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ==========================================================================
   APARICIÓN SUAVE AL HACER SCROLL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal--izq { transform: translateX(-36px); }
.reveal--der { transform: translateX(36px); }
.reveal--zoom { transform: scale(0.9); }
.reveal--visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.boton {
  --corte: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
  padding: 11px 20px;
  font-size: 0.92rem;
  clip-path: polygon(
    var(--corte) 0, 100% 0,
    100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%,
    0 100%, 0 var(--corte)
  );
  transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion), border-color var(--transicion), color var(--transicion);
  cursor: pointer;
  border: none;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0) scale(0.99); }

.boton--whatsapp {
  background: var(--color-whatsapp);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.28);
}
.boton--whatsapp:hover {
  background: var(--color-whatsapp-oscuro);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.36);
}

.boton--fantasma {
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--texto);
}
.boton--fantasma:hover { border-color: var(--primario); color: var(--primario-oscuro); box-shadow: var(--sombra); }

.boton--grande { --corte: 10px; padding: 13px 26px; font-size: 1rem; }
.boton--pequeno { --corte: 6px; padding: 8px 16px; font-size: 0.85rem; }

.icono-wsp { font-size: 1.2em; line-height: 1; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--texto);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 10px 16px;
  border-radius: 100px;
}

.chip-marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primario-suave);
  border: 1px solid rgba(77, 107, 254, 0.22);
  color: var(--primario-oscuro);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 9px 18px;
  border-radius: 100px;
  margin-bottom: 20px;
}

/* ==========================================================================
   ENCABEZADO / NAVEGACIÓN
   ========================================================================== */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(90deg, #0F1730 0%, #1C2E63 40%, #3455D6 72%, #9FC0FF 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transicion), border-color var(--transicion), background-color var(--transicion);
}
.encabezado--scrolled {
  background: linear-gradient(90deg, #0F1730 0%, #1C2E63 40%, #3455D6 72%, #9FC0FF 100%);
  border-bottom-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(23, 33, 55, 0.16);
}

.encabezado__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.marca {
  font-family: var(--fuente-titulo);
  font-size: 1.7rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  text-decoration: none;
  flex-shrink: 0;
}
.marca__acento { color: #AEC9FF; }

/* Solo texto — nada de caja ni de píldora de fondo, ni en reposo ni al
   pasar el cursor. La página activa se marca con una línea fina debajo. */
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 4px 2px;
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
.nav a:hover { color: #FFFFFF; }
.nav a.activo {
  color: #FFFFFF;
  border-bottom-color: #AEC9FF;
}

.encabezado__acciones { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Botón hamburguesa — solo visible en celular/tablet, donde el menú de
   arriba se esconde y este lo reemplaza. */
.menu-movil-boton {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.menu-movil-boton span {
  display: block;
  height: 2px;
  width: 18px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.encabezado--menu-abierto .menu-movil-boton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.encabezado--menu-abierto .menu-movil-boton span:nth-child(2) { opacity: 0; }
.encabezado--menu-abierto .menu-movil-boton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .menu-movil-boton { display: flex; }

  /* El menú pasa a ser una tarjeta desplegable debajo del encabezado,
     controlada por el botón hamburguesa (no por :hover). */
  .nav {
    display: flex;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: linear-gradient(160deg, #FFFFFF 0%, var(--primario-suave) 100%);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 10px;
    box-shadow: var(--sombra-fuerte);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 60;
  }
  .nav a {
    border-radius: 10px;
    border-bottom: none;
    padding: 13px 14px;
    height: auto;
    font-size: 0.98rem;
    color: var(--texto-suave);
  }
  .nav a:hover { background: var(--bg-elevado); color: var(--texto); }
  .nav a.activo { background: var(--primario-suave); color: var(--primario); }
  .encabezado--menu-abierto .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .boton__extra { display: none; }
}

@media (max-width: 360px) {
  .encabezado__acciones { gap: 6px; }
  .boton--pequeno { padding: 9px 12px; font-size: 0.88rem; gap: 6px; }
  .marca { font-size: 1.2rem; }
  .contenedor { padding: 0 14px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; padding: 8px 0 0; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0 48px;
}

.hero__subtitulo {
  font-size: var(--texto-grande);
  color: var(--texto-suave);
  margin-bottom: 1.6em;
}

.hero__nota {
  margin-top: 14px;
  font-size: var(--texto-pequeno);
  color: var(--texto-tenue);
}

/* Foto sobre bloque de color sólido, como la referencia de estilo.
   El bloque de color vive en un panel propio (no en el marco completo)
   para que no se estire detrás de las tarjetas apiladas en celular. */
.hero__foto-marco { position: relative; }

.hero__foto-panel {
  position: relative;
  padding: 30px 0 0 30px;
}
.hero__foto-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 26px; bottom: -26px;
  background: var(--degradado-oscuro);
  border-radius: var(--radio-borde);
  z-index: 0;
}
.hero__foto-panel img {
  position: relative;
  z-index: 1;
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-fuerte);
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.hero__tarjeta {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--texto);
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: var(--sombra-fuerte);
  font-size: 0.85rem;
  line-height: 1.4;
  max-width: 230px;
}
.hero__tarjeta strong { display: block; font-size: 0.95rem; }
.hero__tarjeta-icono {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primario-suave);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.hero__tarjeta--1 { left: -6px; bottom: 26px; }
.hero__tarjeta--2 { right: -6px; top: 4px; }

.hero__franja {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  padding: 26px 24px 44px;
  border-top: 1px solid var(--borde);
}
.hero__dato { display: flex; flex-direction: column; gap: 2px; }
.hero__dato strong { font-size: 1.7rem; color: var(--texto); font-weight: 800; }
.hero__dato span { font-size: 0.95rem; color: var(--texto-tenue); }

/* ==========================================================================
   ENCABEZADO DE PÁGINA INTERIOR (Minutas / Nosotros / Contacto)
   ========================================================================== */
.pagina-hero {
  padding: 64px 0 48px;
  text-align: center;
}
.pagina-hero .chip-marca { margin-bottom: 18px; }
.pagina-hero h1 { max-width: 820px; margin-left: auto; margin-right: auto; }
.pagina-hero .texto-seccion { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   PROBLEMA (papel vs. digital)
   ========================================================================== */
.problema { padding: 80px 24px; text-align: center; }

.comparacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.comparacion__item { margin: 0; flex: 1 1 380px; max-width: 460px; position: relative; }
.comparacion__item img {
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra);
  width: 100%; height: 300px; object-fit: cover;
  border: 1px solid var(--borde);
}
.comparacion__item--antes img { filter: grayscale(0.7) brightness(0.96); }
.comparacion__item--ahora img { box-shadow: var(--sombra-fuerte); }

.comparacion__etiqueta {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: rgba(27, 34, 51, 0.85); color: #FFFFFF;
  font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 8px 14px; border-radius: 100px;
}
.comparacion__etiqueta--ahora { background: var(--primario); color: #FFFFFF; }

.comparacion__item figcaption { margin-top: 16px; font-weight: 700; color: var(--texto-suave); font-size: 1.05rem; }
.comparacion__flecha { font-size: 2.4rem; color: var(--texto-tenue); font-weight: 900; flex: 0 0 auto; }

/* ==========================================================================
   SERVICIOS — bento grid
   ========================================================================== */
.servicios { padding: 80px 0; }

.servicios__pie { text-align: center; margin-top: 44px; }

.grid-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
  margin-top: 52px;
  align-items: stretch;
}

.tarjeta-servicio {
  background: var(--superficie);
  border-radius: var(--radio-borde);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  overflow: hidden;
  padding-bottom: 28px;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
  display: flex;
  flex-direction: column;
}
.tarjeta-servicio:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-fuerte);
  border-color: var(--borde-fuerte);
}

.tarjeta-servicio__foto { position: relative; overflow: hidden; }
.tarjeta-servicio__foto img {
  width: 100%; height: 200px; object-fit: cover;
  transition: transform 0.5s ease;
}
.tarjeta-servicio:hover .tarjeta-servicio__foto img { transform: scale(1.06); }
.tarjeta-servicio__foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.32) 100%);
}

.tarjeta-servicio__badge {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--primario); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.tarjeta-servicio__foto .tarjeta-servicio__badge {
  position: absolute; left: 20px; bottom: -8px; z-index: 2;
  border: 4px solid var(--superficie);
  box-shadow: var(--sombra);
}
.tarjeta-servicio__badge--grande { margin: 28px 28px 0 28px; }
.tarjeta-servicio--foto .tarjeta-servicio__cuerpo { padding-top: 34px; }
.tarjeta-servicio__cuerpo { padding: 0 28px; flex: 1; }
.tarjeta-servicio h3 { margin: 0 0 0.4em; font-size: 1.2rem; }
.tarjeta-servicio p { color: var(--texto-suave); margin-bottom: 0; font-size: 1.05rem; }

/* La última tarjeta cierra la cuadrícula como un bloque oscuro destacado —
   el mismo contraste "página clara + una ficha oscura" de la referencia. */
.grid-servicios--completo .tarjeta-servicio:last-child {
  grid-column: 1 / -1;
  background: var(--degradado-oscuro);
  border-color: transparent;
  flex-direction: row; align-items: center; gap: 24px; padding: 32px;
}
.grid-servicios--completo .tarjeta-servicio:last-child .tarjeta-servicio__badge--grande {
  margin: 0;
  background: rgba(255, 255, 255, 0.14);
}
.grid-servicios--completo .tarjeta-servicio:last-child .tarjeta-servicio__cuerpo { padding: 0; }
.grid-servicios--completo .tarjeta-servicio:last-child h3,
.grid-servicios--completo .tarjeta-servicio:last-child p { color: #FFFFFF; }
.grid-servicios--completo .tarjeta-servicio:last-child p { color: rgba(255, 255, 255, 0.78); }
@media (max-width: 600px) {
  .grid-servicios--completo .tarjeta-servicio:last-child { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   COMO FUNCIONA — línea de tiempo
   ========================================================================== */
.como-funciona { padding: 80px 0; }

.pasos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 56px;
}
.pasos::before {
  content: ''; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px;
  background: var(--borde); z-index: 0;
}
.paso { position: relative; z-index: 1; }
.paso__numero {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  background: var(--primario); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.4rem; margin-bottom: 18px;
  box-shadow: var(--sombra);
}
.paso h3 { margin-bottom: 0.3em; }
.paso p { color: var(--texto-suave); }
@media (max-width: 860px) { .pasos::before { display: none; } }

/* ==========================================================================
   ROLES (página Minutas) — lista jerárquica, no tarjetas sueltas
   ========================================================================== */
.roles { padding: 80px 0; }

.lista-roles {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 780px;
}
.rol {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 4px;
  border-top: 1px solid var(--borde);
}
.rol:last-child { border-bottom: 1px solid var(--borde); }
.rol__nivel {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primario-suave);
  border: 1px solid rgba(77, 107, 254, 0.22);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--primario-oscuro); font-size: 1rem;
}
.rol h3 { margin: 0 0 0.3em; }
.rol p { margin: 0; color: var(--texto-suave); }

/* ==========================================================================
   RAZONES
   ========================================================================== */
.razones { padding: 80px 24px; }

.grid-razones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  margin-top: 52px;
}
.razon {
  text-align: center; padding: 32px 24px;
  border-radius: var(--radio-borde-chico);
  border: 1px solid var(--borde);
  background: var(--superficie);
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.razon:hover { transform: translateY(-4px); box-shadow: var(--sombra-fuerte); border-color: var(--borde-fuerte); }
.razon__icono {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--primario-suave);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
.razon h3 { margin-bottom: 0.3em; }
.razon p { color: var(--texto-suave); font-size: 1.05rem; }

/* ==========================================================================
   PÁGINA NOSOTROS
   ========================================================================== */
.nosotros { padding: 20px 0 80px; }
.nosotros__cuerpo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.nosotros__foto-marco { position: relative; padding: 30px 30px 0 0; }
.nosotros__foto-marco::before {
  content: ''; position: absolute; top: 0; right: 0; left: 26px; bottom: -26px;
  background: var(--primario); border-radius: var(--radio-borde); z-index: 0;
}
.nosotros__foto-marco img {
  position: relative; z-index: 1; border-radius: var(--radio-borde);
  width: 100%; height: 380px; object-fit: cover; box-shadow: var(--sombra-fuerte);
}
.nosotros__texto p { color: var(--texto-suave); font-size: var(--texto-grande); }
@media (max-width: 860px) {
  .nosotros__cuerpo { grid-template-columns: 1fr; }
  .nosotros__foto-marco { order: -1; }
}

/* ==========================================================================
   PÁGINA CONTACTO
   ========================================================================== */
.contacto { padding: 20px 0 90px; }
.contacto__tarjeta {
  max-width: 640px;
  margin: 0 auto;
  background: var(--degradado-oscuro);
  border-radius: var(--radio-borde);
  padding: 44px 40px;
  text-align: center;
}
.contacto__tarjeta h2 { color: #FFFFFF; }
.contacto__intro { color: rgba(255, 255, 255, 0.78); margin-bottom: 28px; }
.contacto__renglon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.contacto__dato {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.02rem;
  text-decoration: none;
}
.contacto__dato-icono {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.05rem;
}
.contacto__dato:hover { color: #FFFFFF; }

/* ==========================================================================
   LLAMADO FINAL — la misma ficha oscura destacada de "Servicios", para
   cerrar cada página con el mismo golpe visual.
   ========================================================================== */
.cta-final { position: relative; padding: 80px 24px; text-align: center; }
.cta-final__caja {
  max-width: 780px; margin: 0 auto;
  background: var(--degradado-oscuro);
  color: #FFFFFF;
  border-radius: 28px;
  padding: 56px 40px;
}
.cta-final__caja h2 { color: #FFFFFF; }
.cta-final__caja p { color: rgba(255, 255, 255, 0.78); font-size: var(--texto-grande); margin-bottom: 1.8em; }
.cta-final__caja .boton--whatsapp { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); }

/* ==========================================================================
   PIE DE PAGINA
   ========================================================================== */
.pie { padding: 40px 0 32px; border-top: 1px solid var(--borde); }
.pie .marca { color: var(--texto); }
.pie .marca__acento { color: var(--primario); }
.pie__interior {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
}
.pie__nav { display: flex; gap: 22px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.pie__nav a { text-decoration: none; color: var(--texto-suave); font-size: 0.98rem; }
.pie__nav a:hover { color: var(--texto); }
.pie__contacto { text-decoration: none; color: var(--texto); font-weight: 700; transition: color var(--transicion); }
.pie__contacto:hover { color: var(--primario); }
.pie__copy { color: var(--texto-tenue); font-size: var(--texto-pequeno); width: 100%; text-align: center; margin-top: 8px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  :root { --texto-base: 18px; }
  .hero__grid { grid-template-columns: 1fr; padding-bottom: 24px; }
  .hero__foto { order: -1; }
  .hero__foto-panel { padding: 18px 18px 0 0; }
  .hero__foto-panel::before { right: 0; left: 18px; }
  .hero__foto-panel img { height: 260px; }
  .hero__tarjeta {
    position: static;
    max-width: 100%;
    width: 100%;
    margin-top: 10px;
  }
  .hero__franja { gap: 24px; padding: 20px 18px 32px; justify-content: space-between; }
  .hero__dato strong { font-size: 1.4rem; }
  .hero__dato span { font-size: 0.85rem; }

  .comparacion { flex-direction: column; }
  .comparacion__flecha { transform: rotate(90deg); }

  .contacto__tarjeta { padding: 36px 24px; }
}

@media (max-width: 520px) {
  .contenedor { padding: 0 18px; }
  .boton--grande { width: 100%; justify-content: center; }
  .marca { font-size: 1.5rem; }
  .boton--pequeno { padding: 10px 16px; font-size: 0.95rem; }
  .pie__interior { flex-direction: column; text-align: center; }
}