/* ============================================================================
   LIDERA Marketing Digital — hoja de estilos única
   ----------------------------------------------------------------------------
    1. Tipografía   ·  2. Variables   ·  3. Base        ·  4. Utilidades
    5. Cabecera     ·  6. Botones     ·  7. Portada     ·  8. Datos y cintas
    9. Agencia      · 10. Inteligencia · 11. Servicios  · 12. Proceso
   13. Contacto     · 14. Clientes    · 15. Plataformas · 16. Preguntas
   17. Cierre       · 18. Pie         · 19. Animaciones · 20. Media queries
   Diseño pensado primero para celular.
   ============================================================================ */

/* 1. TIPOGRAFÍA (Poppins alojada en el propio sitio) ---------------------- */
@font-face { font-family: Poppins; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/poppins-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* 2. VARIABLES ------------------------------------------------------------ */
:root {
  /* Colores de marca */
  --color-rojo:        #E31B23;
  --color-rojo-claro:  #ff4d55;
  --color-rojo-suave:  #FDECEC;
  --color-negro:       #0d0d10;
  --color-negro-raya:  #141419;
  --color-negro-raya2: #101014;

  /* Neutros */
  --color-tinta:      #15151a;
  --color-texto:      #4b4b55;
  --color-texto-tenue:#65656e;
  --color-blanco:     #ffffff;
  --color-fondo-alt:  #fbfbfc;
  --color-borde:      rgba(0, 0, 0, .09);
  --color-borde-duro: rgba(0, 0, 0, .16);

  /* Sobre fondo oscuro */
  --claro-90: rgba(255, 255, 255, .9);
  --claro-82: rgba(255, 255, 255, .82);
  --claro-72: rgba(255, 255, 255, .72);
  --claro-66: rgba(255, 255, 255, .66);
  --claro-60: rgba(255, 255, 255, .6);
  --claro-42: rgba(255, 255, 255, .42);
  --borde-claro:      rgba(255, 255, 255, .12);
  --borde-claro-sutil:rgba(255, 255, 255, .09);

  /* Tipografía */
  --fuente: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --tam-titulo:     clamp(43px, 7.6vw, 74px);
  --tam-seccion:    clamp(30px, 4.4vw, 48px);
  --tam-seccion-lg: clamp(31px, 4.6vw, 50px);
  --tam-cierre:     clamp(30px, 4.8vw, 54px);
  --tam-bajada:     clamp(15px, 1.7vw, 19px);
  --tam-parrafo:    clamp(15px, 1.5vw, 17px);

  /* Medidas */
  --ancho-max:   1280px;
  --lateral:     clamp(16px, 4vw, 34px);
  --alto-seccion:clamp(56px, 8vw, 110px);
  --alto-cabecera: 76px;

  /* Formas */
  --radio-sm: 8px;
  --radio:    10px;
  --radio-md: 12px;
  --radio-lg: 14px;
  --radio-xl: 18px;
  --radio-bloque: clamp(22px, 3.4vw, 40px);   /* bloques oscuros flotantes */
  --sombra-carta: 0 14px 34px rgba(0, 0, 0, .07);
  --sombra-alta:  0 22px 48px rgba(0, 0, 0, .12);
  --sombra-rojo:  0 14px 34px rgba(227, 27, 35, .34);
  --transicion: 250ms ease;
  --suave: cubic-bezier(.22, 1, .36, 1);
}

/* 3. BASE ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 10px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Blanco: la cabecera y el pie ahora son claros */
  background: var(--color-blanco);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-tinta);
  -webkit-font-smoothing: antialiased;
  /* OJO: no poner overflow-x aquí ni en .lienzo. "overflow-x: hidden" hace
     que el navegador trate al elemento como contenedor de scroll y la
     cabecera sticky se pega a ÉL en vez de a la ventana: deja de quedar
     fija. Los adornos que se salen ya están recortados por el overflow
     de cada sección. */
}

body.sin-scroll { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.028em; line-height: 1.06; }
p { margin: 0; }
img { max-width: 100%; display: block; }

a { color: var(--color-rojo); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--color-rojo-claro); }

:focus-visible {
  outline: 2px solid var(--color-rojo);
  outline-offset: 3px;
  border-radius: 4px;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--color-rojo);
  color: #fff;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0 0 var(--radio-sm) 0;
}
.salto-contenido:focus { left: 0; color: #fff; }

/* 4. UTILIDADES ----------------------------------------------------------- */
.lienzo {
  width: 100%;
  background: var(--color-blanco);
  /* "clip" recorta lo que se sale de costado (los bloques que entran
     desplazados desde la derecha) SIN convertirse en contenedor de scroll.
     Por eso no rompe la cabecera fija, cosa que "hidden" sí hace. */
  overflow-x: clip;
}

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

.seccion { padding-block: var(--alto-seccion); }
.seccion--alt    { background: var(--color-fondo-alt); }
.seccion--blanca { background: var(--color-blanco); }

/* Los bloques oscuros no van de borde a borde: quedan como una tarjeta
   grande, con las puntas redondeadas y aire alrededor. */
.seccion--oscura {
  background: var(--color-negro);
  color: #fff;
  border-radius: var(--radio-bloque);
  margin-inline: var(--lateral);
  overflow: hidden;
}
.seccion--linea  { border-bottom: 1px solid var(--color-borde); }
.seccion--linea-arriba { border-top: 1px solid var(--color-borde); }

.antetitulo {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--color-rojo);
  text-transform: uppercase;
}
.antetitulo--claro { color: var(--color-rojo-claro); }

.destacado { color: var(--color-rojo); }

.encabezado-centrado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  text-align: center;
  margin-bottom: 44px;
}
.encabezado-centrado h2 { font-size: var(--tam-seccion); }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Aparición al hacer scroll ------------------------------------------
   Los estados iniciales sólo se aplican si JavaScript está activo (clase
   .js en <html>): sin él, todo el contenido se ve normalmente.
   [data-revelar]       un elemento suelto
   [data-revelar-grupo] sus hijos aparecen encadenados, uno detrás de otro */
.js [data-revelar],
.js [data-revelar-grupo] > * {
  opacity: 0;
  transition: opacity 700ms var(--suave), transform 700ms var(--suave);
  will-change: opacity, transform;
}
.js [data-revelar="abajo"],
.js [data-revelar-grupo="abajo"] > * { transform: translateY(28px); }
.js [data-revelar="izq"],
.js [data-revelar-grupo="izq"] > *   { transform: translateX(-42px); }
.js [data-revelar="der"],
.js [data-revelar-grupo="der"] > *   { transform: translateX(42px); }

.js [data-revelar].es-visible,
.js [data-revelar-grupo].es-visible > * {
  opacity: 1;
  transform: none;
}

/* Escalonado: cada hijo entra 90 ms después del anterior */
.js [data-revelar-grupo].es-visible > *:nth-child(2) { transition-delay:  90ms; }
.js [data-revelar-grupo].es-visible > *:nth-child(3) { transition-delay: 180ms; }
.js [data-revelar-grupo].es-visible > *:nth-child(4) { transition-delay: 270ms; }
.js [data-revelar-grupo].es-visible > *:nth-child(5) { transition-delay: 360ms; }
.js [data-revelar-grupo].es-visible > *:nth-child(6) { transition-delay: 450ms; }
.js [data-revelar-grupo].es-visible > *:nth-child(7) { transition-delay: 540ms; }
.js [data-revelar-grupo].es-visible > *:nth-child(8) { transition-delay: 630ms; }

/* 5. CABECERA ------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 70;
  /* Fondo blanco para que destaque el logo negro */
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-borde);
  transition: background-color var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
}
/* Al bajar, la barra se compacta y se vuelve más transparente: se deja ver
   un poco lo que pasa por debajo. El desenfoque mantiene la lectura. */
.cabecera.esta-compacta {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: rgba(13, 13, 16, .06);
  box-shadow: 0 8px 26px rgba(13, 13, 16, .08);
}

.cabecera__interior {
  min-height: var(--alto-cabecera);
  padding-block: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 26px;
  transition: min-height var(--transicion);
}
.cabecera.esta-compacta .cabecera__interior { min-height: 62px; }

.marca { display: flex; align-items: center; flex: 0 0 auto; }
.marca img {
  height: 30px;
  width: auto;
  /* El logo va tal cual: negro con el punto rojo, sobre el fondo blanco */
  transition: height var(--transicion), transform var(--transicion);
}
.marca:hover img { transform: scale(1.04); }

.menu-boton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 1px solid var(--color-borde-duro);
  border-radius: var(--radio-sm);
  padding: 9px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-tinta);
  cursor: pointer;
}
.menu-boton__barras,
.menu-boton__barras::before,
.menu-boton__barras::after {
  display: block;
  width: 17px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}
.menu-boton__barras { position: relative; }
.menu-boton__barras::before,
.menu-boton__barras::after { content: ""; position: absolute; left: 0; }
.menu-boton__barras::before { top: -5px; }
.menu-boton__barras::after  { top: 5px; }
.menu-boton[aria-expanded="true"] .menu-boton__barras { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__barras::before { transform: translateY(5px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__barras::after  { transform: translateY(-5px) rotate(-45deg); }

.navegacion {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: rgba(255, 255, 255, .99);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-borde);
  box-shadow: 0 16px 30px rgba(13, 13, 16, .1);
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height var(--transicion), visibility var(--transicion);
}
.navegacion.esta-abierto {
  max-height: 78vh;
  overflow-y: auto;
  visibility: visible;
}
.navegacion__lista {
  list-style: none;
  margin: 0;
  padding: 10px var(--lateral) 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.navegacion__enlace {
  display: block;
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-tinta);
  border-bottom: 1px solid var(--color-borde);
}
.navegacion__enlace:hover { color: var(--color-rojo); }
.navegacion__cta { margin-top: 14px; }
.navegacion__cta .boton { width: 100%; }

/* 6. BOTONES -------------------------------------------------------------- */
.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px solid transparent;
  border-radius: var(--radio);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 18px 34px;
  cursor: pointer;
  text-align: center;
  /* Destello que barre el botón al pasar el mouse. Va como imagen de fondo
     (no como pseudo-elemento) para que nunca tape el texto. */
  background-image: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .3) 50%, transparent 62%);
  background-repeat: no-repeat;
  background-size: 260% 100%;
  background-position: 175% 0;
  transition: background-color var(--transicion), color var(--transicion),
              border-color var(--transicion), box-shadow var(--transicion),
              transform var(--transicion), background-position 750ms ease;
}
.boton:hover { background-position: -75% 0; transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton .flecha {
  font-size: 17px;
  line-height: 1;
  transition: transform var(--transicion);
}
.boton:hover .flecha { transform: translateX(4px); }

.boton--rojo {
  background: var(--color-rojo);
  color: #fff;
  box-shadow: var(--sombra-rojo);
}
.boton--rojo:hover {
  background-color: #fff;
  color: var(--color-negro);
  box-shadow: 0 18px 40px rgba(227, 27, 35, .42);
}

.boton--negro { background-color: var(--color-negro); color: #fff; padding: 17px 32px; font-size: 14.5px; }
.boton--negro:hover {
  background-color: var(--color-rojo);
  color: #fff;
  box-shadow: var(--sombra-rojo);
}

.boton--fantasma {
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
  padding: 18px 32px;
}
.boton--fantasma:hover {
  border-color: #fff;
  background-color: rgba(255, 255, 255, .1);
  color: #fff;
}

.boton--linea {
  border-color: var(--color-borde-duro);
  color: var(--color-tinta);
  font-size: 13.5px;
  padding: 14px 26px;
}
.boton--linea:hover {
  border-color: var(--color-rojo);
  color: var(--color-rojo);
  background-color: var(--color-rojo-suave);
}

.boton--chico { font-size: 13px; padding: 12px 22px; border-radius: var(--radio-sm); box-shadow: none; }
.boton--chico:hover { box-shadow: 0 10px 24px rgba(227, 27, 35, .34); }

/* 7. PORTADA -------------------------------------------------------------- */
.portada {
  position: relative;
  background: var(--color-negro);
  overflow: hidden;
  /* Arriba queda pegada a la cabecera; abajo se redondea, para que el
     bloque oscuro se lea como una pieza apoyada sobre el fondo claro. */
  border-radius: 0 0 var(--radio-bloque) var(--radio-bloque);
}
.portada__foto,
.portada__velo,
.portada__brillo { position: absolute; inset: 0; pointer-events: none; }

.portada__foto {
  background-image: url('../img/hero-datos.webp');
  background-size: cover;
  background-position: center;
}
.portada__velo {
  background: linear-gradient(180deg, rgba(10,10,13,.82) 0%, rgba(10,10,13,.9) 55%, rgba(13,13,16,.97) 100%);
}
.portada__brillo {
  inset: auto;
  right: -180px;
  top: -120px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,27,35,.4) 0%, rgba(227,27,35,0) 68%);
  animation: brillo 8s ease-in-out infinite;
}

.portada__interior {
  position: relative;
  padding-block: clamp(72px, 10vw, 130px) clamp(72px, 10vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
}

.etiquetas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.etiqueta {
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--claro-82);
}
/* La de los años destaca sobre las otras dos */
.etiqueta--rojo {
  border-color: rgba(227, 27, 35, .7);
  background: rgba(227, 27, 35, .2);
  color: #ff9095;
  font-size: 12.5px;
  padding: 9px 22px;
  letter-spacing: .18em;
}

.portada h1 {
  font-size: var(--tam-titulo);
  line-height: 1.03;
  letter-spacing: -.03em;
  color: #fff;
  max-width: 960px;
  text-wrap: balance;
}
.portada__bajada {
  font-size: var(--tam-bajada);
  line-height: 1.5;
  color: rgba(255, 255, 255, .68);
  max-width: 640px;
}
/* Las tres frases van una debajo de la otra, centradas. Cada una entra por
   un lado distinto: izquierda, derecha, izquierda. */
.portada__bajada .frase { display: block; }
.js .portada__bajada .frase {
  animation: fraseIzq 750ms var(--suave) backwards;
}
.js .portada__bajada .frase--der { animation-name: fraseDer; }
.js .portada__bajada .frase:nth-child(1) { animation-delay: 500ms; }
.js .portada__bajada .frase:nth-child(2) { animation-delay: 680ms; }
.js .portada__bajada .frase:nth-child(3) { animation-delay: 860ms; }
.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding-top: 4px;
  width: 100%;
}
/* En celular los dos botones ocupan el mismo ancho: se ven parejos */
.portada__acciones .boton { flex: 1 1 100%; max-width: 340px; }

/* Entrada de la portada al cargar la página.
   Con "backwards" el estado invisible vive dentro de la animación, no en el
   elemento: si la animación no llegara a ejecutarse, la portada se ve igual. */
.js .portada__interior > * {
  animation: entrada 850ms var(--suave) backwards;
}
.js .portada__interior > *:nth-child(1) { animation-delay: 120ms; }
.js .portada__interior > *:nth-child(2) { animation-delay: 240ms; }
.js .portada__interior > *:nth-child(3) { animation-delay: 360ms; }
.js .portada__interior > *:nth-child(4) { animation-delay: 480ms; }

/* Indicador de "seguí bajando" */
.portada__bajar {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  transition: border-color var(--transicion);
}
.portada__bajar:hover { border-color: var(--color-rojo); }
.portada__bajar span {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: var(--color-rojo);
  animation: bajar 1.9s ease-in-out infinite;
}

/* 8. DATOS Y CINTAS ------------------------------------------------------- */
/* Celular: las tres cifras van en una sola fila. La cuarta ("Años de
   experiencia") no entra, así que se oculta; ese dato ya está arriba, en la
   etiqueta "+10 AÑOS" de la portada. Desde 560 px vuelven las cuatro. */
.datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-block: clamp(26px, 4vw, 44px);
}
.dato:nth-child(4) { display: none; }

.dato { display: flex; flex-direction: column; gap: 3px; }
.dato__numero {
  font-size: clamp(21px, 6.2vw, 42px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dato__numero--rojo { color: var(--color-rojo); }
.dato__texto {
  font-size: clamp(11px, 3vw, 13px);
  line-height: 1.35;
  color: var(--color-texto-tenue);
}

.cinta {
  background: var(--color-negro);
  padding: 26px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cinta--clara {
  background: transparent;
  padding: 26px 0 clamp(48px, 7vw, 90px);
  -webkit-mask-image: none;
          mask-image: none;
}
.cinta__pista {
  display: flex;
  width: max-content;
  animation: desplazar 46s linear infinite;
}
.cinta--clara .cinta__pista { animation-duration: 40s; }
.cinta__pista:hover { animation-play-state: paused; }
.cinta__grupo { display: flex; gap: 12px; padding-right: 12px; }
.cinta--clara .cinta__grupo { gap: 16px; padding-right: 16px; }

.ficha {
  display: inline-flex;
  align-items: center;
  /* El JavaScript le ajusta la escala según lo cerca que esté del centro */
  will-change: transform, opacity;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  border-radius: var(--radio);
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--claro-90);
  white-space: nowrap;
  transition: border-color var(--transicion), background-color var(--transicion), box-shadow var(--transicion);
}
.ficha:hover {
  border-color: var(--color-rojo);
  background: rgba(227, 27, 35, .16);
  box-shadow: 0 0 24px rgba(227, 27, 35, .35);
}
.ficha img { width: 19px; height: 19px; object-fit: contain; }
.ficha__sigla {
  width: 19px; height: 19px;
  border-radius: 5px;
  background: rgba(227, 27, 35, .22);
  color: #ff7a80;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; line-height: 1;
}

.cliente-muestra {
  width: 170px;
  height: 82px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: repeating-linear-gradient(135deg, #f6f6f8 0 10px, #eeeef2 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: #8a8a94;
}

/* 9. AGENCIA -------------------------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}
.duo__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.duo__texto h2 { font-size: var(--tam-seccion-lg); }
.duo__texto p {
  font-size: var(--tam-parrafo);
  line-height: 1.75;
  color: var(--color-texto);
  max-width: 520px;
  text-wrap: pretty;
}

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 16px;
}
.pilar {
  position: relative;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-wrap: break-word;
  background: #fff;
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
}
/* Línea roja que crece sobre el borde superior al pasar el mouse */
.pilar::before {
  content: "";
  position: absolute;
  left: 26px; right: 26px; top: -1px;
  height: 2px;
  background: var(--color-rojo);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--suave);
}
.pilar:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
  border-color: rgba(227, 27, 35, .35);
}
.pilar:hover::before { transform: scaleX(1); }

.pilar__numero {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--color-rojo-suave);
  color: var(--color-rojo);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  transition: background-color var(--transicion), color var(--transicion),
              transform var(--transicion);
}
.pilar:hover .pilar__numero {
  background: var(--color-rojo);
  color: #fff;
  transform: scale(1.08);
}
.pilar h3 { font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.pilar p  { font-size: 13px; line-height: 1.6; color: var(--color-texto-tenue); }

/* 10. INTELIGENCIA -------------------------------------------------------- */
.retrato {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.4;
  max-height: 560px;
  border-radius: var(--radio-xl);
  overflow: hidden;
  border: 1px solid var(--borde-claro);
  background: #f4f4f5;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.retrato img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 900ms var(--suave);
}
.retrato:hover { border-color: rgba(227, 27, 35, .4); box-shadow: 0 24px 60px rgba(227, 27, 35, .18); }
.retrato:hover img { transform: scale(1.05); }

/* Acento rojo que aparece en la esquina de la foto */
.retrato::after {
  content: "";
  position: absolute;
  left: 22px; top: 22px;
  width: 54px; height: 3px;
  background: var(--color-rojo);
  border-radius: 2px;
  transform-origin: left;
  transition: transform 550ms var(--suave) 120ms;
}
/* Sin JavaScript el acento ya se ve; con JS entra dibujándose */
.js .retrato::after { transform: scaleX(0); }
.js .retrato.es-visible::after { transform: scaleX(1); }


/* --- Computadora con el panel de analítica -------------------------------
   El equipo entero se dibuja con CSS y el tablero de adentro se mide en
   cqw (1cqw = 1% del ancho de la pantalla), así se ve igual de proporcionado
   en un celular chico que en un monitor. Cada medida va primero en px como
   respaldo para navegadores que no entiendan las unidades de contenedor. */
.compu {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding: 52px 0 26px;
}

/* Arco rojo que asoma por detrás */
.compu__arco {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
              transparent 0 61%,
              #f2545b 61.5% 100%);
  opacity: .92;
  pointer-events: none;
}

/* Etiqueta "ANALÍTICA" */
.compu__etiqueta {
  position: absolute;
  left: 0;
  top: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--color-tinta);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .4);
}
.compu__etiqueta i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-rojo);
  animation: latido 1.8s ease-in-out infinite;
}

/* El equipo no ocupa todo el ancho: el resto es el aire donde entran las
   burbujas de las redes, a los costados. */
.compu__equipo {
  position: relative;
  z-index: 2;
  container-type: inline-size;
  width: 78%;
  margin-inline: auto;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .5));
}

/* Tapa: el marco de la pantalla */
.compu__tapa {
  aspect-ratio: 16 / 10.2;
  background: linear-gradient(160deg, #3a3a45 0%, #1d1d24 60%, #2b2b34 100%);
  border-radius: 12px 12px 4px 4px;
  border-radius: 2.6cqw 2.6cqw .8cqw .8cqw;
  padding: 9px;
  padding: 2cqw;
}
.compu__pantalla {
  height: 100%;
  background: #f6f7f9;
  border-radius: 6px;
  border-radius: 1.3cqw;
  padding: 10px;
  padding: 2.4cqw;
  display: flex;
  flex-direction: column;
  gap: 8px;
  gap: 2cqw;
  overflow: hidden;
}

/* Base: el teclado, un poco más ancho que la tapa */
.compu__base {
  position: relative;
  width: 112%;
  margin-left: -6%;
  height: 14px;
  height: 3cqw;
  background: linear-gradient(180deg, #d7d9de 0%, #a9adb6 55%, #858993 100%);
  border-radius: 0 0 8px 8px;
  border-radius: 0 0 1.8cqw 1.8cqw;
  clip-path: polygon(1.6% 0, 98.4% 0, 100% 100%, 0 100%);
}
/* Muesca del borde delantero */
.compu__base::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 14%;
  height: 42%;
  border-radius: 0 0 999px 999px;
  background: rgba(0, 0, 0, .16);
}

/* --- Tablero de la pantalla --- */
.panel__metricas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  gap: 1.5cqw;
}
.panel__metrica {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 5px;
  border-radius: 1.1cqw;
  padding: 7px 8px;
  padding: 1.6cqw 1.8cqw;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.panel__metrica b {
  font-size: 14px;
  font-size: 3.4cqw;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--color-tinta);
}
.panel__metrica:first-child b { color: var(--color-rojo); }
.panel__metrica span {
  font-size: 8px;
  font-size: 1.9cqw;
  color: var(--color-texto-tenue);
  line-height: 1.2;
}

.panel__cuerpo {
  flex: 1;
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 6px;
  gap: 1.5cqw;
  min-height: 0;
}

/* Gráfico: barras grises de fondo y la línea roja encima */
.panel__grafico {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 5px;
  border-radius: 1.1cqw;
  padding: 8px 7px 7px;
  padding: 1.9cqw 1.7cqw 1.6cqw;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  gap: .7cqw;
}
.panel__grafico span {
  flex: 1;
  border-radius: 1.5px;
  background: #d9dbe0;
  transform-origin: bottom;
  animation: crecer 3s var(--suave) infinite alternate;
}
.panel__grafico span:nth-child(2) { animation-delay: .2s; }
.panel__grafico span:nth-child(3) { animation-delay: .4s; }
.panel__grafico span:nth-child(4) { animation-delay: .6s; }
.panel__grafico span:nth-child(5) { animation-delay: .8s; }
.panel__grafico span:nth-child(6) { animation-delay: 1s; background: var(--color-rojo); }
.panel__grafico span:nth-child(7) { animation-delay: 1.2s; }
.panel__grafico span:nth-child(8) { animation-delay: 1.4s; }

.panel__linea {
  position: absolute;
  inset: 8px 7px 7px;
  inset: 1.9cqw 1.7cqw 1.6cqw;
  width: auto;
  height: auto;
  overflow: visible;
}
.panel__linea polyline {
  fill: none;
  stroke: var(--color-rojo);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: trazar 2.4s var(--suave) .3s forwards;
}

/* Dona de participación */
.panel__dona {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 5px;
  border-radius: 1.1cqw;
  display: grid;
  place-items: center;
}
.panel__dona i {
  display: block;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--color-rojo) 0 62%, #d9dbe0 62% 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 52%, #000 52.5%);
          mask: radial-gradient(circle, transparent 0 52%, #000 52.5%);
}

/* Burbujas de redes que flotan alrededor */
.burbuja {
  position: absolute;
  z-index: 3;   /* por encima del equipo */
  display: grid;
  place-items: center;
  width: clamp(34px, 9vw, 46px);
  height: clamp(34px, 9vw, 46px);
  border-radius: 30%;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
  animation: flotar 5s ease-in-out infinite;
}
.burbuja img { width: 54%; height: 54%; object-fit: contain; }
/* Rodean al equipo: tres de cada lado */
.burbuja--1 { top: 14%; left: 0;    animation-delay: .0s; }
.burbuja--2 { top: 44%; left: -1%;  animation-delay: .7s; }
.burbuja--3 { top: 73%; left: 3%;   animation-delay: 1.4s; }
.burbuja--4 { top: 17%; right: 0;   animation-delay: .35s; }
.burbuja--5 { top: 47%; right: -1%; animation-delay: 1.05s; }
.burbuja--6 { top: 76%; right: 3%;  animation-delay: 1.75s; }

.seccion--oscura .duo__texto h2 { color: #fff; font-size: clamp(31px, 4.4vw, 48px); }
.seccion--oscura .duo__texto p  { color: rgba(255, 255, 255, .65); line-height: 1.7; }

/* En celular las tres cajas se turnan: se muestra una por vez, más grande,
   y va rotando sola. La clase .trio--rotativo la pone el JavaScript; sin él
   quedan las tres apiladas, que también se leen bien. */
.trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
}

.trio--rotativo { gap: 0; }
.trio--rotativo .trio__caja {
  /* Las tres ocupan la misma celda: la altura la marca la más alta.
     La que sale se apaga rápido y la que entra aparece después, para que
     nunca se lleguen a ver las dos encimadas. */
  grid-area: 1 / 1;
  padding: 26px 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
.trio--rotativo .trio__caja.es-activa {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 380ms var(--suave) 180ms, transform 380ms var(--suave) 180ms, visibility 0s;
}
.trio--rotativo .trio__caja h3 { font-size: 19px; margin-bottom: 8px; }
.trio--rotativo .trio__caja p  { font-size: 14.5px; line-height: 1.65; }

/* Puntitos indicadores debajo */
.trio__puntos {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.trio__punto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: width var(--transicion), background-color var(--transicion);
}
.trio__punto.es-activo { width: 24px; background: var(--color-rojo); }
.trio__caja {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radio-md);
  padding: 20px;
  transition: background-color var(--transicion), border-color var(--transicion),
              transform var(--transicion), box-shadow var(--transicion);
}
.trio__caja:hover {
  background: rgba(227, 27, 35, .14);
  border-color: rgba(227, 27, 35, .55);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
.trio__caja h3 { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 6px; letter-spacing: 0; }
.trio__caja p  { font-size: 12.5px; line-height: 1.6; color: var(--claro-60); }

/* 11. SERVICIOS ----------------------------------------------------------- */
.servicios__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 44px;
}
.servicios__cabeza h2 { font-size: var(--tam-seccion); max-width: 640px; }
.servicios__titulo { display: flex; flex-direction: column; gap: 12px; }

/* Servicios: son seis, así que en escritorio van 3 arriba y 3 abajo. */
.tarjetas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.servicio {
  position: relative;
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
  overflow-wrap: break-word;
  color: inherit;
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
/* Un lavado rojo muy suave que sube desde abajo */
.servicio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(227, 27, 35, .06) 100%);
  opacity: 0;
  transition: opacity var(--transicion);
  pointer-events: none;
}
/* Halo rojo que sigue al cursor dentro de la tarjeta. El JavaScript sólo
   actualiza --mx y --my; si no corriera, el halo queda centrado arriba. */
.servicio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              rgba(227, 27, 35, .13), transparent 68%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.servicio:hover {
  border-color: var(--color-rojo);
  box-shadow: var(--sombra-alta);
  color: inherit;
  transform: translateY(-5px);
}
.servicio:hover::before,
.servicio:hover::after { opacity: 1; }

.servicio__icono {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--color-rojo-suave);
  color: var(--color-rojo);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  transition: background-color var(--transicion), color var(--transicion),
              transform 450ms var(--suave);
}
.servicio:hover .servicio__icono {
  background: var(--color-rojo);
  color: #fff;
  transform: rotate(-6deg) scale(1.08);
}
/* Los que llevan el logo de la plataforma mantienen el fondo claro: sobre
   rojo, un logo de color (el azul de Google, por ejemplo) no se leería. */
.servicio__icono--marca { background: var(--color-rojo-suave); }
.servicio:hover .servicio__icono--marca { background: var(--color-rojo-suave); }
.servicio__icono img { width: 24px; height: 24px; object-fit: contain; }
.servicio__icono svg { display: block; }
.servicio h3 { font-size: 17.5px; font-weight: 600; color: var(--color-tinta); letter-spacing: 0; line-height: 1.3; }
.servicio p  { font-size: 13px; line-height: 1.65; color: var(--color-texto-tenue); }
.servicio__mas {
  position: relative;
  margin-top: auto;
  padding-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-rojo);
}
.servicio__mas .flecha {
  display: inline-block;
  transition: transform var(--transicion);
}
.servicio:hover .servicio__mas .flecha { transform: translateX(5px); }

/* 11b. PÁGINA DE SERVICIOS ------------------------------------------------ */
/* El juego de íconos no se dibuja: sólo guarda las definiciones */
.iconos-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* El trazo va en los <svg> que USAN los íconos, no en el juego: al clonarlos
   con <use> dejan de ser descendientes del sprite y perderían el estilo.
   Estas propiedades sí se heredan hacia el contenido clonado. */
.punto__icono svg,
.detalle__cierre-icono svg,
.detalle__svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Portada de página interna: texto a la izquierda, sin centrar */
.portada--interna .portada__interior--izq {
  align-items: flex-start;
  text-align: left;
  padding-block: clamp(56px, 8vw, 104px) clamp(48px, 7vw, 88px);
}
/* Los botones acompañan al texto: pegados a la izquierda, no centrados */
.portada--interna .portada__interior--izq .portada__acciones {
  justify-content: flex-start;
  padding-top: 12px;
}
.portada--interna h1 { font-size: clamp(34px, 5.4vw, 60px); }
.portada__bajada--ancha { max-width: 620px; }

.migas { font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.migas a { color: rgba(255, 255, 255, .8); }
.migas a:hover { color: var(--color-rojo-claro); }
.migas span { margin-inline: 6px; }

/* Encabezado de cada familia de servicios */
.familia {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 30px);
  padding-bottom: clamp(30px, 4vw, 48px);
  margin-bottom: clamp(18px, 3vw, 30px);
  border-bottom: 1px solid var(--color-borde);
}
.familia__numero {
  flex: 0 0 auto;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--color-rojo-suave);
}
.familia h2 { font-size: var(--tam-seccion); margin-block: 8px 12px; }
.familia p  { font-size: var(--tam-parrafo); line-height: 1.7; color: var(--color-texto); max-width: 620px; }

/* Un servicio desarrollado: presentación + lista de puntos */
.detalle {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 54px);
  padding-block: clamp(34px, 5vw, 62px);
  border-bottom: 1px solid var(--color-borde);
}
.detalle:last-child { border-bottom: 0; }

/* El botón es el último hijo del bloque: en celular queda después de la
   lista o la foto, que es donde se espera encontrarlo. En escritorio el
   media query lo devuelve a la columna de la izquierda. */
.detalle__accion { display: flex; }

.detalle__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.detalle__intro h3 {
  font-size: clamp(27px, 3.6vw, 40px);
  line-height: 1.1;
}
.detalle__intro p {
  font-size: var(--tam-parrafo);
  line-height: 1.7;
  color: var(--color-texto);
  max-width: 460px;
}
.detalle__intro .boton { margin-top: 4px; }

.detalle__marcas { display: flex; gap: 10px; }
.detalle__marca {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-fondo-alt);
  border: 1px solid var(--color-borde);
}
.detalle__marca img { width: 24px; height: 24px; object-fit: contain; }
.detalle__svg { width: 24px; height: 24px; color: var(--color-rojo); }

/* Etiqueta con borde redondeado, como en el perfil */
.etiqueta-linea {
  display: inline-block;
  border: 1px solid rgba(227, 27, 35, .5);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-rojo);
}

/* Lista de puntos de cada servicio */
.puntos { list-style: none; margin: 0; padding: 0; }
.punto {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--color-borde);
}
.punto:first-child { border-top: 0; padding-top: 0; }
.punto__icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-rojo-suave);
  color: var(--color-rojo);
  transition: background-color var(--transicion), color var(--transicion),
              transform var(--transicion);
}
.punto__icono svg { width: 23px; height: 23px; }
.punto:hover .punto__icono {
  background: var(--color-rojo);
  color: #fff;
  transform: scale(1.06);
}
.punto h4 { font-size: 15.5px; font-weight: 600; letter-spacing: 0; line-height: 1.35; margin-bottom: 4px; }
.punto p  { font-size: 13.5px; line-height: 1.6; color: var(--color-texto-tenue); }

/* Columna de la foto, del lado derecho del bloque */
.detalle__foto {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.detalle__foto img {
  width: 100%;
  max-width: 440px;
  height: auto;
  border-radius: var(--radio-lg);
  transition: transform 700ms var(--suave);
}
.detalle:hover .detalle__foto img { transform: scale(1.02); }
/* La de capacitaciones va dentro de la columna de la lista */
.detalle__foto--suelta { justify-content: flex-start; }
.detalle__foto--suelta img { max-width: 340px; }

/* Capacitaciones */
.detalle--capacitacion { border-bottom: 0; }
.detalle__lista-simple { display: flex; flex-direction: column; gap: 20px; }

.lista-tildes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-tildes li {
  position: relative;
  padding-left: 34px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-texto);
}
.lista-tildes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1.6px solid var(--color-rojo);
  color: var(--color-rojo);
  font-size: 11px;
  line-height: 1;
}

.detalle__cierre {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-rojo-suave);
  border: 1px solid rgba(227, 27, 35, .28);
  border-radius: var(--radio-lg);
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-texto);
}
.detalle__cierre strong { color: var(--color-rojo); font-weight: 600; }
.detalle__cierre-icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-rojo);
  color: #fff;
}
.detalle__cierre-icono svg { width: 22px; height: 22px; }

/* 11c. PÁGINA NOSOTROS ---------------------------------------------------- */
/* Retrato con el arco rosado detrás, como en el perfil de la clienta */
.retrato-nos {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 30px 20px 20px;
}
.retrato-nos__arco {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(420px, 92%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(160deg, #FDECEC 0%, #f8d6d8 100%);
}
/* Trama de puntitos, el detalle que acompaña al arco */
.retrato-nos__puntos {
  position: absolute;
  left: -6px;
  bottom: 40px;
  width: 96px;
  height: 96px;
  background-image: radial-gradient(rgba(13, 13, 16, .16) 1.6px, transparent 1.7px);
  background-size: 16px 16px;
}
.retrato-nos__marco {
  position: relative;
  width: min(380px, 88%);
  /* Arriba redondeado como un arco; abajo apenas curvado */
  border-radius: 50% 50% var(--radio-lg) var(--radio-lg) / 42% 42% var(--radio-lg) var(--radio-lg);
  overflow: hidden;
}
.retrato-nos__marco img { width: 100%; height: auto; display: block; }

/* Sello con los años de experiencia */
.retrato-nos__sello {
  position: absolute;
  right: 0;
  bottom: 26px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-rojo);
  color: #fff;
  border-radius: var(--radio-lg);
  padding: 12px 18px;
  box-shadow: 0 16px 34px rgba(227, 27, 35, .35);
}
.retrato-nos__sello strong {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.retrato-nos__sello span { font-size: 11.5px; line-height: 1.3; }

/* Hitos de la trayectoria */
.hitos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.hito {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radio-lg);
  padding: 24px;
  transition: background-color var(--transicion), border-color var(--transicion),
              transform var(--transicion);
}
.hito:hover {
  background: rgba(227, 27, 35, .12);
  border-color: rgba(227, 27, 35, .45);
  transform: translateY(-4px);
}
.hito__icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(227, 27, 35, .18);
  color: var(--color-rojo-claro);
}
.hito__icono svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.hito strong { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.hito > span:last-child { font-size: 13.5px; line-height: 1.6; color: var(--claro-60); }

/* Por qué elegir LIDERA */
.porque__titulo { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.04; }
.porque__linea {
  display: block;
  width: 58px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-rojo);
}
.duo--porque .duo__texto p { font-size: var(--tam-bajada); }
.duo--porque .duo__texto strong { color: var(--color-tinta); font-weight: 600; }

/* En celular va todo en una columna y el botón queda al final, después de
   los seis motivos: primero se leen los puntos, después el paso siguiente. */
.duo--porque { grid-template-columns: 1fr; }
.porque__accion { display: flex; }
.porque__accion .boton { flex: 1 1 auto; justify-content: center; }

@media (min-width: 760px) {
  /* En pantalla grande el botón vuelve a la columna izquierda, pegado al
     texto: los motivos ocupan la columna derecha a lo alto de las dos filas. */
  .duo--porque {
    grid-template-columns: 1fr 1fr;
    row-gap: 24px;
  }
  .duo--porque > .duo__texto     { grid-area: 1 / 1 / 2 / 2; align-self: end; }
  .duo--porque > .porque__accion { grid-area: 2 / 1 / 3 / 2; align-self: start; }
  .duo--porque > .motivos        { grid-area: 1 / 2 / 3 / 3; }
  .porque__accion .boton { flex: 0 1 auto; }
}

.motivos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.motivo {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  /* La línea roja del costado, como en el perfil */
  border-left: 3px solid var(--color-rojo);
  border-radius: var(--radio-lg);
  padding: 18px 20px;
  transition: box-shadow var(--transicion), transform var(--transicion),
              border-color var(--transicion);
}
.motivo:hover {
  box-shadow: var(--sombra-carta);
  transform: translateY(-3px);
}
.motivo__icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-rojo-suave);
  color: var(--color-rojo);
  transition: background-color var(--transicion), color var(--transicion);
}
.motivo__icono svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.motivo:hover .motivo__icono { background: var(--color-rojo); color: #fff; }
.motivo h3 { font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.35; margin-bottom: 3px; }
.motivo p  { font-size: 13.5px; line-height: 1.6; color: var(--color-texto-tenue); }
.motivo strong { color: var(--color-tinta); font-weight: 600; }

/* 11d. PÁGINA DE CONTACTO ------------------------------------------------- */
/* Los cuatro puntos van sobre la portada, con más aire entre ellos */
.checks--portada { gap: 13px; padding-top: 8px; }

/* A la izquierda las vías, a la derecha el formulario */
.contacto-doble {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 46px);
  align-items: start;
}

/* Las tres vías, en tarjetas claras al lado del formulario */
.vias { display: flex; flex-direction: column; gap: 14px; }
.via {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: 20px 22px;
  color: inherit;
  transition: border-color var(--transicion), box-shadow var(--transicion),
              transform var(--transicion);
}
.via:hover {
  border-color: var(--color-rojo);
  box-shadow: var(--sombra-alta);
  color: inherit;
  transform: translateY(-3px);
}
.via__icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--color-rojo-suave);
  color: var(--color-rojo);
}
.via__icono--wa { background: rgba(37, 211, 102, .16); color: #25D366; }
.via__icono img { width: 24px; height: 24px; object-fit: contain; }
.via__cuerpo { min-width: 0; }
.via h2 { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.via p  { font-size: 14px; color: var(--color-texto); word-break: break-word; }
.via__mas {
  display: inline-block;
  padding-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-rojo);
}
.via__mas .flecha { display: inline-block; transition: transform var(--transicion); }
.via:hover .via__mas .flecha { transform: translateX(5px); }

.vias__nota {
  padding-top: 4px;
  font-size: 13.5px;
  color: var(--color-texto-tenue);
}

/* --- El formulario en su bloque oscuro flotante --------------------------
   Los campos NO se tocan: quedan blancos, iguales a los del inicio. Las dos
   clases juntas para que gane sobre .formulario, que va después en la hoja. */
.formulario.formulario--oscuro {
  position: relative;
  isolation: isolate;
  background: var(--color-negro);
  border-radius: var(--radio-bloque);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: 0 26px 60px rgba(13, 13, 16, .28);
  overflow: hidden;
}
/* La misma trama de puntitos y aros que el sector de contacto del inicio.
   Va en una capa aparte para que no la tapen los campos blancos. */
.formulario.formulario--oscuro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-negro-raya2);
  background-image:
    radial-gradient(circle at 8% 92%, transparent 0 118px, rgba(255,255,255,.05) 118px 119px, transparent 119px),
    radial-gradient(circle at 8% 92%, transparent 0 178px, rgba(255,255,255,.04) 178px 179px, transparent 179px),
    radial-gradient(circle at 8% 92%, transparent 0 238px, rgba(227,27,35,.16) 238px 240px, transparent 240px),
    radial-gradient(circle at 92% 8%, transparent 0 148px, rgba(255,255,255,.04) 148px 149px, transparent 149px),
    radial-gradient(circle at 92% 8%, transparent 0 218px, rgba(227,27,35,.13) 218px 220px, transparent 220px),
    radial-gradient(rgba(255, 255, 255, .085) 1px, transparent 1.6px);
  background-size: auto, auto, auto, auto, auto, 22px 22px;
}
/* El resplandor rojo de la esquina, igual que en el inicio */
.formulario.formulario--oscuro::after {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -200px;
  width: 520px;
  height: 520px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 27, 35, .28) 0%, rgba(227, 27, 35, 0) 68%);
  animation: brillo 8s ease-in-out infinite;
  pointer-events: none;
}
.formulario.formulario--oscuro h3 { color: #fff; }
.formulario.formulario--oscuro .formulario__ayuda { color: var(--claro-60); }
.formulario.formulario--oscuro .boton:hover { background-color: #fff; color: var(--color-negro); }

.formulario.formulario--oscuro .aviso--ok {
  background: rgba(74, 222, 128, .14);
  border-color: rgba(74, 222, 128, .4);
  color: #86efac;
}
.formulario.formulario--oscuro .aviso--error {
  background: rgba(227, 27, 35, .16);
  border-color: rgba(227, 27, 35, .5);
  color: #ffb4b8;
}

/* 12. PROCESO ------------------------------------------------------------- */
/* En celular los pasos van uno debajo del otro y se van tildando a medida
   que el visitante baja: nada de arrastrar de costado ni barras de scroll.
   Desde 1080px entran los seis en fila y aparece la línea de tiempo. */
.proceso__marco { padding-bottom: 4px; }
.proceso__pista { width: 100%; }

.proceso__pasos { display: grid; grid-template-columns: 1fr; gap: 14px; }
.proceso__riel { display: none; }

.proceso__puntos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.proceso__riel-base,
.proceso__riel-avance,
.proceso__puntos { pointer-events: none; }
/* La línea de tiempo aparece recién en escritorio (ver el media query final) */
.proceso__riel-interior { position: relative; height: 38px; margin-bottom: 20px; }
.proceso__riel-base,
.proceso__riel-avance {
  position: absolute;
  left: 8.333%; right: 8.333%;
  top: 18px;
  height: 2px;
  border-radius: 2px;
}
.proceso__riel-base { background: rgba(0, 0, 0, .1); }
.proceso__riel-avance { overflow: hidden; }
.proceso__riel-avance span {
  display: block;
  width: 0;
  height: 2px;
  background: var(--color-rojo);
  transition: width 600ms ease;
}
/* Sin JavaScript el recorrido se muestra completo */
html:not(.js) .proceso__riel-avance span { width: 100%; }

.proceso__puntos { position: relative; }
.proceso__punto-celda { display: flex; justify-content: center; }
.proceso__punto {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-borde-duro);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: #9a9aa4;
  transition: background-color 450ms ease, border-color 450ms ease,
              color 450ms ease, box-shadow 450ms ease;
}
.proceso__punto.es-hecho,
html:not(.js) .proceso__punto {
  background: var(--color-rojo);
  border-color: var(--color-rojo);
  color: transparent;
  box-shadow: 0 0 0 6px rgba(227, 27, 35, .14);
}
.proceso__punto::after {
  content: "✓";
  position: absolute;
  font-size: 15px;
  color: #fff;
  opacity: 0;
  transform: scale(.5);
  transition: opacity 350ms var(--suave), transform 350ms var(--suave);
}
.proceso__punto.es-hecho::after,
html:not(.js) .proceso__punto::after { opacity: 1; transform: scale(1); }

.paso {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-wrap: break-word;
  hyphens: auto;
  background: #fff;
  transition: border-color 450ms ease, background-color 450ms ease,
              transform 450ms var(--suave);
}
.paso.es-hecho,
html:not(.js) .paso {
  border-color: rgba(227, 27, 35, .4);
  background: #fffafa;
}
/* --- Línea vertical de la izquierda (celular) -----------------------------
   Cada paso tiene su círculo; el tramo de línea que sale de ese círculo se
   pinta de rojo cuando el paso queda tildado. */
.proceso__pasos { padding-left: 48px; }
.paso { position: relative; }

/* El círculo con el número, que pasa a tilde */
.paso::before {
  content: attr(data-n);
  position: absolute;
  left: -48px;
  top: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-borde-duro);
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: #9a9aa4;
  z-index: 1;
  transition: background-color 400ms ease, border-color 400ms ease,
              color 400ms ease, box-shadow 400ms ease;
}
.paso.es-hecho::before,
html:not(.js) .paso::before {
  content: "✓";
  background: var(--color-rojo);
  border-color: var(--color-rojo);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(227, 27, 35, .14);
}

/* El tramo de línea hasta el paso siguiente */
.paso::after {
  content: "";
  position: absolute;
  left: -33px;
  top: 50px;
  bottom: -16px;
  width: 2px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .12);
  transition: background-color 500ms ease;
}
.paso:last-child::after { display: none; }
.paso.es-hecho::after,
html:not(.js) .paso::after { background: var(--color-rojo); }
.paso__numero { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--color-rojo); }
.paso h3 { font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.paso p  { font-size: 12.5px; line-height: 1.6; color: var(--color-texto-tenue); }

.proceso__nota {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}
.proceso__nota > div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-rojo-suave);
  border: 1px solid rgba(227, 27, 35, .28);
  /* Radio suave en celular: con el texto en varias líneas, la píldora
     redonda se deforma. Vuelve a ser píldora cuando entra en una línea. */
  border-radius: var(--radio-lg);
  padding: 16px 22px;
}
.proceso__nota p { font-size: 13.5px; color: var(--color-texto); }
.proceso__nota strong { color: var(--color-rojo); font-weight: 600; }
.tilde-circulo {
  flex: 0 0 auto;
  margin-top: 1px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-rojo);
  color: var(--color-rojo);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}

/* 13. CONTACTO ------------------------------------------------------------ */
.contacto {
  position: relative;
  background: var(--color-negro);
  color: #fff;
  overflow: hidden;
  /* Mismo tratamiento de bloque flotante que la sección oscura */
  border-radius: var(--radio-bloque);
  margin: 0 var(--lateral) var(--lateral);
}
/* Fondo del sector del formulario: una trama de puntitos y unos aros
   grandes muy tenues. Es todo CSS, no hay ninguna imagen de fondo. */
.contacto__rayas {
  position: absolute;
  inset: 0;
  background-color: var(--color-negro-raya2);
  background-image:
    /* aros concéntricos, apenas visibles */
    radial-gradient(circle at 12% 84%, transparent 0 118px, rgba(255,255,255,.05) 118px 119px, transparent 119px),
    radial-gradient(circle at 12% 84%, transparent 0 178px, rgba(255,255,255,.04) 178px 179px, transparent 179px),
    radial-gradient(circle at 12% 84%, transparent 0 238px, rgba(227,27,35,.16) 238px 240px, transparent 240px),
    radial-gradient(circle at 88% 16%, transparent 0 148px, rgba(255,255,255,.04) 148px 149px, transparent 149px),
    radial-gradient(circle at 88% 16%, transparent 0 218px, rgba(227,27,35,.13) 218px 220px, transparent 220px),
    /* trama de puntitos */
    radial-gradient(rgba(255, 255, 255, .085) 1px, transparent 1.6px);
  background-size: auto, auto, auto, auto, auto, 22px 22px;
}
.contacto__brillo {
  position: absolute;
  right: -200px;
  bottom: -220px;
  width: 660px;
  height: 660px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 27, 35, .32) 0%, rgba(227, 27, 35, 0) 68%);
  animation: brillo 8s ease-in-out infinite;
  pointer-events: none;
}
.contacto__interior {
  position: relative;
  padding-block: var(--alto-seccion);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
.contacto__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.contacto__texto h2 { font-size: var(--tam-seccion); color: #fff; }
.contacto__texto > p { font-size: 15.5px; line-height: 1.7; color: var(--claro-66); max-width: 480px; }

.checks { display: flex; flex-direction: column; gap: 11px; padding-top: 4px; }
/* flex-start para que el tilde no quede centrado cuando el texto ocupa
   dos líneas en celular */
.check { display: flex; gap: 12px; align-items: flex-start; }
.check span { color: var(--color-rojo-claro); font-size: 14px; line-height: 1.6; }
.check p { font-size: 14px; color: rgba(255, 255, 255, .8); }

.contacto__enlaces { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px; }
.contacto__enlace {
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 9px;
  padding: 12px 18px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .85);
  transition: border-color var(--transicion), color var(--transicion);
}
.contacto__enlace:hover { color: #fff; border-color: var(--color-rojo); }
.contacto__enlace--wa:hover { border-color: #25D366; }

/* Formulario */
.formulario {
  background: #fff;
  border-radius: var(--radio-xl);
  padding: clamp(28px, 3.6vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.formulario h3 { font-size: 20px; font-weight: 600; color: var(--color-tinta); letter-spacing: 0; }
.formulario__ayuda { font-size: 13.5px; color: var(--color-texto-tenue); line-height: 1.6; margin-bottom: 2px; }

.campo { display: block; }
.campo input,
.campo textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: 14px;
  color: var(--color-tinta);
  background: #fff;
  outline: none;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { resize: vertical; min-height: 118px; }
.campo input:focus,
.campo textarea:focus {
  border-color: var(--color-rojo);
  box-shadow: 0 0 0 3px rgba(227, 27, 35, .12);
}
.campo--error input,
.campo--error textarea { border-color: var(--color-rojo); background: #fffafa; }
.campo__error { display: block; font-size: 12px; color: var(--color-rojo); padding-top: 5px; }

/* Teléfono y sitio web. En celular van uno debajo del otro, así los dos
   quedan cómodos de completar. Recién en pantallas anchas se ponen a la par,
   y sólo si la columna da el ancho: el auto-fit los vuelve a apilar antes de
   dejarlos apretados. Es igual en el inicio y en contacto. */
.campos-par {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .campos-par { grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); }
}

/* Trampa antispam: invisible para personas, visible para robots */
.campo--trampa {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.formulario .boton { width: 100%; padding: 17px; font-size: 14.5px; box-shadow: none; }
.formulario .boton:hover { background: var(--color-negro); color: #fff; }

.aviso {
  border-radius: var(--radio);
  padding: 13px 16px;
  font-size: 13px;
  line-height: 1.6;
}
.aviso--ok    { background: #eaf7ef; border: 1px solid #b6e0c4; color: #1a6b39; }
.aviso--error { background: #fdecec; border: 1px solid rgba(227, 27, 35, .35); color: #9c1219; }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }

/* 14. CLIENTES ------------------------------------------------------------
   La sección está fuera de la página por ahora (faltan los logos reales).
   Estos estilos quedan listos para cuando vuelva. */
.clientes__cabeza { padding-block: clamp(48px, 7vw, 90px) 0; margin-bottom: 0; }
.clientes__cabeza h2 { font-size: clamp(28px, 4vw, 44px); }
.clientes__cinta { overflow: hidden; }

/* 15. PLATAFORMAS --------------------------------------------------------- */
.plataformas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  padding-block: clamp(48px, 7vw, 90px);
}
.plataformas h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; }
.plataformas__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.plataforma {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(0, 0, 0, .12);
  background: #fff;
  border-radius: var(--radio);
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 500;
  transition: transform var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion);
}
.plataforma:hover {
  transform: translateY(-3px);
  border-color: rgba(227, 27, 35, .4);
  box-shadow: var(--sombra-carta);
}
.plataforma img {
  width: 21px; height: 22px;
  object-fit: contain;
  transition: transform 450ms var(--suave);
}
.plataforma:hover img { transform: scale(1.15); }

/* 16. PREGUNTAS FRECUENTES ------------------------------------------------ */
.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 5vw, 60px);
  align-items: start;
}
.faq__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.faq__intro h2 { font-size: clamp(29px, 4vw, 44px); }
.faq__intro p  { font-size: 15px; line-height: 1.7; color: var(--color-texto-tenue); max-width: 400px; }

.faq__lista { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: 20px 22px;
  background: var(--color-fondo-alt);
  transition: border-color var(--transicion), background-color var(--transicion),
              box-shadow var(--transicion);
}
.faq__item:hover { border-color: rgba(227, 27, 35, .35); background: #fff; }
.faq__item[open] {
  border-color: rgba(227, 27, 35, .4);
  background: #fff;
  box-shadow: var(--sombra-carta);
}
.faq__item[open] summary { color: var(--color-rojo); }
.faq__item summary {
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--color-rojo);
  border-bottom: 2px solid var(--color-rojo);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transicion);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__item p { font-size: 13.5px; line-height: 1.7; color: var(--color-texto-tenue); padding-top: 12px; }

/* 17. CIERRE -------------------------------------------------------------- */
/* Mismo tratamiento de bloque flotante que las otras zonas oscuras */
.cierre {
  position: relative;
  background: var(--color-negro);
  color: #fff;
  overflow: hidden;
  border-radius: var(--radio-bloque);
  margin: 0 var(--lateral) var(--lateral);
}
.cierre__brillo {
  position: absolute;
  left: 50%; top: 50%;
  width: 760px; height: 760px;
  margin: -380px 0 0 -380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227,27,35,.34) 0%, rgba(227,27,35,0) 68%);
  animation: brillo 7s ease-in-out infinite;
  pointer-events: none;
}
.cierre__interior {
  position: relative;
  padding-block: clamp(56px, 8vw, 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.cierre h2 {
  font-size: var(--tam-cierre);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
  max-width: 820px;
  text-wrap: balance;
}
.cierre p { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; color: var(--claro-66); max-width: 560px; }

/* 18. PIE ----------------------------------------------------------------- */
/* Pie blanco, para que el logo negro se lea bien */
.pie { background: var(--color-blanco); color: var(--color-tinta); border-top: 1px solid var(--color-borde); }
.pie__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(30px, 4vw, 48px);
  padding-block: clamp(44px, 6vw, 68px) 30px;
}
/* align-items: flex-start es lo que evita que el logo se estire: en una
   columna flex, por defecto los hijos ocupan todo el ancho y la imagen se
   deformaba al tener el alto fijo. */
.pie__marca { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pie__marca img { height: 44px; width: auto; max-width: 100%; }
.pie__marca p { font-size: 14px; line-height: 1.7; color: var(--color-texto-tenue); max-width: 320px; }
.pie__marca strong { color: var(--color-rojo); font-weight: 600; }

.pie__col { display: flex; flex-direction: column; gap: 11px; }
.pie__col h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--color-texto-tenue);
  text-transform: uppercase;
}
.pie__col a { font-size: 14px; color: var(--color-texto); }
.pie__col a:hover { color: var(--color-rojo); }

.pie__legal {
  border-top: 1px solid var(--color-borde);
  padding-block: 20px 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
.pie__legal p, .pie__legal a { font-size: 12.5px; color: var(--color-texto-tenue); }
.pie__legal a:hover { color: var(--color-rojo); }
.pie__legal div { display: flex; flex-wrap: wrap; gap: 20px; }

.whatsapp-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  padding: 14px 20px;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  font-size: 13.5px;
  font-weight: 600;
  max-width: calc(100vw - 32px);
  transition: background-color var(--transicion);
}
.whatsapp-flotante:hover { background: #1da851; color: #fff; }
.whatsapp-flotante__texto { display: none; }

/* 18b. PÁGINAS DE TEXTO LARGO (privacidad y similares) --------------------- */
/* Portada sin foto: para una página de texto no hace falta tanta presencia */
.portada--corta { border-radius: 0 0 var(--radio-bloque) var(--radio-bloque); }
.portada--corta .portada__interior { padding-block: clamp(44px, 6vw, 78px) clamp(38px, 5vw, 64px); }

/* El texto corrido se lee mejor en una columna angosta */
.legal {
  max-width: 760px;
  margin-inline: auto;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--color-texto);
  text-wrap: pretty;
}
.legal__fecha {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
  margin-bottom: 18px;
}
.legal__entrada {
  font-size: var(--tam-bajada);
  line-height: 1.7;
  color: var(--color-tinta);
  padding-bottom: 6px;
}
.legal h2 {
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--color-tinta);
  margin-top: 40px;
  margin-bottom: 12px;
  padding-top: 26px;
  border-top: 1px solid var(--color-borde);
}
.legal h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-tinta);
  margin-top: 26px;
  margin-bottom: 8px;
}
.legal p { margin-bottom: 14px; }
.legal strong { color: var(--color-tinta); font-weight: 600; }
.legal a { color: var(--color-rojo); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--color-negro); }

.legal ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.legal li { position: relative; padding-left: 20px; }
/* El puntito rojo del logo, reutilizado como viñeta */
.legal li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-rojo);
}

.legal__contacto li::before { top: 12px; }

/* 19. ANIMACIONES --------------------------------------------------------- */
@keyframes desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes brillo { 0%, 100% { opacity: .42; transform: scale(1); } 50% { opacity: .72; transform: scale(1.08); } }
@keyframes entrada {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bajar  { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes fraseIzq { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes fraseDer { from { opacity: 0; transform: translateX(46px);  } to { opacity: 1; transform: none; } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes crecer { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes trazar { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Sin movimiento, el proceso se muestra completo */
  .proceso__punto { background: var(--color-rojo); border-color: var(--color-rojo); color: transparent; }
  .proceso__punto::after { opacity: 1; transform: none; }
  .proceso__riel-avance span { width: 100%; }
  /* Y todo el contenido queda visible sin animación de entrada */
  .js [data-revelar],
  .js [data-revelar-grupo] > *,
  .js .portada__interior > * { opacity: 1; transform: none; }
  .js .retrato::after { transform: scaleX(1); }
}

/* 20. MEDIA QUERIES ------------------------------------------------------- */
@media (min-width: 480px) {
  /* Los dos botones de la portada entran en una línea */
  .portada__acciones .boton { flex: 0 1 auto; }
}

@media (min-width: 560px) {
  /* Ya entran las cuatro cifras */
  .datos { grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 3vw, 34px); }
  .dato:nth-child(4) { display: flex; }
}

@media (min-width: 600px) {
  .whatsapp-flotante { right: 24px; bottom: 24px; }
  .whatsapp-flotante__texto { display: inline; }
  .proceso__nota > div { border-radius: 999px; padding: 12px 26px; align-items: center; }
  .tilde-circulo { margin-top: 0; }
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .hitos    { grid-template-columns: repeat(2, 1fr); }

  /* Desde tablet las tres cajas se ven juntas: se apaga la rotación */
  .trio,
  .trio--rotativo { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  /* Se anulan también las reglas de .es-activa: son las que el carrusel deja
     puestas y, al pesar más, le ganaban al efecto del mouse. Sin esto la
     tarjeta no se levantaba y el cambio de color arrancaba 180 ms tarde. */
  .trio--rotativo .trio__caja,
  .trio--rotativo .trio__caja.es-activa {
    grid-area: auto;
    padding: 20px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: background-color var(--transicion), border-color var(--transicion),
                transform var(--transicion), box-shadow var(--transicion);
  }
  .trio--rotativo .trio__caja:hover,
  .trio--rotativo .trio__caja.es-activa:hover { transform: translateY(-4px); }
  .trio--rotativo .trio__caja h3 { font-size: 15px; margin-bottom: 6px; }
  .trio--rotativo .trio__caja p  { font-size: 12.5px; line-height: 1.6; }
  .trio__puntos { display: none; }
}

@media (min-width: 900px) {
  .marca img { height: 40px; }
  .cabecera.esta-compacta .marca img { height: 32px; }
  .portada__bajar { display: flex; }

  .menu-boton { display: none; }

  .navegacion {
    position: static;
    max-height: none;
    overflow: visible;
    visibility: visible;
    background: none;
    backdrop-filter: none;
    border: 0;
    /* Sin esto quedaba la sombra del menú desplegable, que sobre el header
       blanco se veía como una mancha detrás de los enlaces. */
    box-shadow: none;
  }
  .navegacion__lista {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px clamp(14px, 2vw, 26px);
    padding: 0;
  }
  .navegacion__enlace {
    padding: 0;
    font-size: 13.5px;
    border: 0;
  }
  .navegacion__cta { margin-top: 0; }
  .navegacion__cta .boton { width: auto; }

  /* Los seis servicios: 3 arriba y 3 abajo */
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .hitos    { grid-template-columns: repeat(4, 1fr); }

  /* Página de servicios: presentación a la izquierda, puntos o foto a la
     derecha, y el botón debajo del texto (columna izquierda, segunda fila). */
  .detalle {
    grid-template-columns: 0.85fr 1.15fr;
    /* La primera fila mide exactamente lo que ocupa el texto. Sin esto, la
       columna derecha (más alta) repartía su sobrante entre las dos filas y
       el botón quedaba descolgado, muy lejos del título. */
    grid-template-rows: max-content 1fr;
    align-items: start;
    row-gap: 22px;
  }
  .detalle__intro  { grid-column: 1; grid-row: 1; }
  .puntos,
  .detalle__foto,
  .detalle__lista-simple { grid-column: 2; grid-row: 1 / span 2; }
  .detalle__accion { grid-column: 1; grid-row: 2; align-self: start; }


  /* Contacto: vías a la izquierda, formulario a la derecha. Las dos columnas
     miden lo mismo y las tarjetas crecen para igualar el alto del formulario. */
  .contacto-doble {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .contacto-doble .vias { height: 100%; }
  .contacto-doble .via { flex: 1 1 auto; padding: 24px 26px; }
  .contacto-doble .via__icono { width: 56px; height: 56px; }
  .contacto-doble .via h2 { font-size: 18.5px; }
  .contacto-doble .via p  { font-size: 14.5px; }

  /* La columna izquierda de las preguntas acompaña el scroll */
  .faq__intro { position: sticky; top: calc(var(--alto-cabecera) + 34px); }
}

@media (min-width: 1260px) {
  /* Las ocho plataformas entran en una sola fila: se compactan un poco */
  .plataformas__lista { gap: 8px; flex-wrap: nowrap; }
  .plataforma {
    padding: 10px 14px;
    gap: 8px;
    font-size: 13px;
    white-space: nowrap;
    flex: 0 0 auto;   /* que no se compriman: el texto se cortaría */
  }
  .plataforma img { width: 18px; height: 19px; }
}

@media (min-width: 1080px) {
  /* Ya entran los seis pasos en una fila: la línea de tiempo pasa a ser
     horizontal, arriba, y se apagan el círculo y la línea de cada paso. */
  .proceso__riel  { display: block; position: relative; height: 38px; margin-bottom: 20px; }
  .proceso__pasos { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-left: 0; }
  .paso::before,
  .paso::after { display: none; }
}