/* ==========================================================
   SECCIONES — lo propio de cada una, en el orden de la página.
   ========================================================== */

/* Estructura común a las secciones del cuerpo */
.seccion {
  position: relative; z-index: 1;
  padding-block: 82px;
  background: var(--grafito);
}
.seccion__cabecera { display: flex; flex-direction: column; gap: 18px; }
.seccion h2 {
  font-size: clamp(32px, 2.4vw + 13px, 44px);
  line-height: 1.14; letter-spacing: -.012em;
  color: var(--crema);
}


/* ==========================================================
   1 · HERO — con la órbita respirando
   ========================================================== */

.hero {
  --cresta: 190px;            /* distancia de la cresta de la órbita al borde inferior */
  --orbe: 2400px;             /* diámetro de la esfera */
  position: relative;
  min-height: 980px;
  padding: 148px 0 280px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--grafito-alto) 0%, var(--grafito) 58%);
}

/* Las capas de luz. Todas se ubican desde la cresta, así la órbita
   queda siempre abajo del texto, mida lo que mida el hero. */
.orbita { position: absolute; inset: 0; pointer-events: none; }
.orbita > * { position: absolute; }

.orbita__bruma {
  inset: 0;
  background: radial-gradient(ellipse 800px 520px at 50% calc(100% - var(--cresta)),
    rgba(226, 154, 88, .24) 0%, rgba(226, 154, 88, .10) 38%,
    rgba(226, 154, 88, .03) 60%, rgba(226, 154, 88, 0) 78%);
  transform-origin: 50% calc(100% - var(--cresta));
  animation: respira-bruma 12.5s ease-in-out infinite alternate;
}
.orbita__cuerpo,
.orbita__floracion,
.orbita__nucleo {
  left: 50%; top: calc(100% - var(--cresta));
  width: var(--orbe); height: var(--orbe);
  transform: translateX(-50%);
  border-radius: 50%;
}
.orbita__cuerpo {
  background: radial-gradient(closest-side, rgba(178, 109, 58, 0) 0 88%,
    rgba(178, 109, 58, .05) 94%, rgba(178, 109, 58, .14) 98.4%,
    rgba(178, 109, 58, .19) 99.4%, rgba(178, 109, 58, 0) 100%);
  filter: blur(9px);
}
.orbita__floracion {
  background: radial-gradient(closest-side, rgba(226, 154, 88, 0) 0 95.4%,
    rgba(226, 154, 88, .42) 98.2%, rgba(226, 154, 88, .78) 99.3%, rgba(226, 154, 88, 0) 100%);
  filter: blur(30px);
  animation: respira-floracion 10s ease-in-out infinite alternate;
}
.orbita__nucleo {
  background: radial-gradient(closest-side, rgba(255, 233, 207, 0) 0 99.02%,
    rgba(255, 233, 207, .96) 99.42%, rgba(255, 233, 207, 0) 100%);
  filter: blur(1.1px);
  /* mismo ciclo que la floración pero desfasado: las capas nunca respiran juntas */
  animation: respira-nucleo 10s ease-in-out -3.5s infinite alternate;
}

/* Cada capa con su período: así se siente orgánico y no un LED titilando */
@keyframes respira-bruma {
  from { opacity: .34; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.07); }
}
@keyframes respira-floracion {
  from { opacity: .4; }
  to   { opacity: 1; }
}
@keyframes respira-nucleo {       /* el núcleo respira menos: es la línea nítida */
  from { opacity: .66; }
  to   { opacity: 1; }
}

/* Fundido final: el hero se disuelve en la sección 2 sin costura.
   Llega al grafito sólido al 86%, no justo en el borde. */
.hero__fundido {
  position: absolute; left: 0; right: 0; bottom: 0; height: 190px;
  background: linear-gradient(180deg, rgba(23, 32, 43, 0) 0%, rgba(23, 32, 43, .42) 34%,
    rgba(23, 32, 43, .86) 64%, var(--grafito) 86%, var(--grafito) 100%);
}
/* Velo lateral: garantiza que la columna de texto se lea sobre el resplandor.
   Atenúa hacia el color de la página, nunca más allá. */
.hero__velo {
  position: absolute; inset: 0;
  background: linear-gradient(98deg, rgba(23, 32, 43, .96) 0%, rgba(23, 32, 43, .84) 32%,
    rgba(23, 32, 43, .36) 58%, rgba(23, 32, 43, 0) 80%);
}

.hero__contenido {
  position: relative;
  display: flex; flex-direction: column; gap: 26px;
}
.hero h1 {
  max-width: 860px;
  font-size: clamp(40px, 4vw + 15px, 66px);
  line-height: 1.04; letter-spacing: -.015em;
  color: var(--crema);
}
/* El kicker tiene que sostener peso de titular (validado 2026-09-25) */
.hero__kicker {
  font-size: clamp(22px, 1.6vw + 10.5px, 31px);
  line-height: 1.24; font-weight: 600;
  color: var(--texto-kicker);
}
.hero__bajada { max-width: 620px; font-size: 20px; line-height: 1.6; color: var(--texto-suave); }
.hero__botones { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.hero__micro { max-width: 470px; margin-top: 4px; font-size: 16px; line-height: 1.55; color: var(--texto-suave); }


/* ==========================================================
   2 · EL PROBLEMA
   ========================================================== */

/* Tapa de verdad el último píxel del hero (va por encima en el orden de capas) */
.problema { margin-top: -1px; }
.problema .contenedor { display: flex; flex-direction: column; gap: 34px; }
.problema h2 { max-width: 840px; }

.problema__grilla {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.problema__tarjeta { padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.problema__tarjeta h3 { font-size: 20px; line-height: 1.35; font-weight: 700; color: var(--crema); }
.problema__tarjeta p { font-size: 17px; line-height: 1.6; color: var(--texto-tarjeta); }

.problema .cierre { max-width: 760px; margin-top: 4px; }


/* ==========================================================
   3 · CÓMO TRABAJAMOS — el criterio, no el catálogo
   ========================================================== */

.criterio .contenedor { display: flex; flex-direction: column; gap: 34px; }

/* La bisagra es un párrafo más grande, no una cita: si le sumás
   peso gráfico se vuelve eslogan (decidido 2026-09-23) */
.criterio__entrada { max-width: 830px; display: flex; flex-direction: column; gap: 20px; }
.criterio__entrada p { font-size: 19px; line-height: 1.62; color: var(--texto-tarjeta); }
.criterio__entrada .criterio__bisagra { font-size: clamp(22px, 1vw + 13px, 26px); line-height: 1.32; font-weight: 600; color: var(--crema); }

.criterio__grilla {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin: 14px 0 0; padding: 0; list-style: none;
}
.criterio__regla { padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; }
.criterio__cabeza { display: flex; align-items: center; justify-content: space-between; }
.criterio__regla h3 { font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--crema); }
.criterio__regla p { font-size: 16px; line-height: 1.62; color: var(--texto-tarjeta); }

.criterio .cierre { margin-top: 14px; }


/* ==========================================================
   4 · CASOS DE USO — situación → resultado, en cuatro cajas
   ========================================================== */

.casos .contenedor { display: flex; flex-direction: column; gap: 40px; }
.casos__bajada { max-width: 640px; font-size: 19px; line-height: 1.6; color: var(--texto-tarjeta); }

.casos__grupos { display: flex; flex-direction: column; gap: 38px; }
.casos__grupo { display: flex; flex-direction: column; gap: 16px; }

/* Rótulo de grupo: numeral + título en mono + línea hasta el borde */
.casos__rotulo { display: flex; align-items: center; gap: 16px; margin: 0; font-weight: 500; }
.casos__rotulo .rotulo { font-size: 12px; letter-spacing: .12em; color: var(--texto-menu); }
.casos__rotulo::after {
  content: ""; flex: 1 1 24px; min-width: 24px; height: 1px;
  background: var(--divisor);
}

.casos__grilla {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.caso { padding: 26px 28px; display: flex; flex-direction: column; gap: 16px; }
.caso p { font-size: 17px; line-height: 1.6; }
.caso__situacion { color: var(--texto-situacion); }
.caso__resultado { font-weight: 600; color: var(--crema); }

/* El paso de una a otra: la flecha avanza 4px y el filete se entibia */
.caso__paso { display: flex; align-items: center; gap: 12px; }
.caso__paso svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--bronce-web); transition: transform var(--t-tarjeta); }
.caso__paso::after {
  content: ""; flex-grow: 1; height: 1px;
  background: var(--borde); transition: background-color var(--t-tarjeta);
}
.caso:hover .caso__paso svg { transform: translateX(4px); }
.caso:hover .caso__paso::after { background: var(--filete-hover); }
@media (prefers-reduced-motion: reduce) {
  .caso:hover .caso__paso svg { transform: none; }   /* el filete cambia igual; la flecha no se mueve */
}


/* ==========================================================
   6 · PROCESO — el funnel como espina numerada
   El orden de los pasos ES la información: por eso cuelgan
   de una línea y no van como tarjetas sueltas.
   ========================================================== */

.proceso .contenedor { display: flex; flex-direction: column; gap: 52px; }
.proceso__pasos { margin: 0; padding: 0; list-style: none; }

.paso { display: flex; gap: 28px; }

/* La espina: nodo con el número y la línea que baja hasta el paso siguiente */
.paso__espina { width: 40px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.paso__espina::after {
  content: ""; flex-grow: 1; margin-top: 10px;
  border-left: 1px solid var(--divisor);
}
.paso:last-child .paso__espina::after { display: none; }
.paso__nodo {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--filete-hover); border-radius: 50%;
  background: var(--fondo-nodo);
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: var(--bronce-web);
}
/* El 02 es el único nodo cálido: la jerarquía de la oferta se ve antes de leer */
.paso__nodo--destacado { border-color: #8A6438; background: #241F1A; color: #E8B184; }

.paso__cuerpo { flex-grow: 1; min-width: 0; padding-bottom: 44px; }
.paso:last-child .paso__cuerpo { padding-bottom: 0; }

.paso__texto { display: flex; flex-direction: column; gap: 14px; }
.paso__titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px 14px; }
.paso h3 { font-size: clamp(24px, 1vw + 15px, 27px); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: var(--crema); }
.paso__texto > p { max-width: 760px; font-size: 18px; line-height: 1.65; color: var(--texto-tarjeta); }

/* Paso 01: texto a la izquierda, diagrama a la derecha */
.paso--llamada .paso__cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start;
}


/* ---------- Diagrama: el recorrido de una consulta ----------
   Lleva el hover de tarjeta: el paso 02 ya se enciende al pasar
   el cursor, y el 01 responde igual (Lucas, 2026-09-26).
   El PDF sigue sin hover: ya es lo único claro de la página. */
.recorrido {
  margin: 0; width: 100%; max-width: 400px;
  padding: 22px 24px;
  background: var(--fondo-diagrama);
  border: 1px solid var(--divisor); border-radius: var(--radio-tarjeta);
}
.recorrido figcaption { margin-bottom: 16px; font-size: 11px; letter-spacing: .12em; color: var(--texto-menu); }
.recorrido ol { margin: 0; padding: 0; list-style: none; }
.recorrido li { position: relative; padding-left: 23px; }

/* Estación: un punto gris */
.recorrido__estacion { font-size: 14.5px; line-height: 20px; color: var(--texto-kicker); }
.recorrido__estacion::before {
  content: ""; position: absolute; left: 1px; top: 5.5px;
  width: 9px; height: 9px; border-radius: 50%; background: #5C6976;
}
/* Tramo sin problemas hasta la estación siguiente: línea lisa */
.recorrido__estacion--sigue { padding-bottom: 22px; }
.recorrido__estacion--sigue::after {
  content: ""; position: absolute; left: 5px; top: 20px; height: 22px;
  border-left: 1px solid var(--borde-dato);
}
/* La última estación: el punto bronce con halo */
.recorrido__estacion--final { font-weight: 600; color: var(--crema); }
.recorrido__estacion--final::before {
  left: 0; top: 4.5px; width: 11px; height: 11px;
  background: var(--bronce-web); box-shadow: 0 0 0 4px rgba(226, 154, 88, .16);
}
/* Fuga: el tramo punteado en bronce donde se cae */
.recorrido__fuga {
  min-height: 34px; padding-top: 5px; padding-bottom: 5px;
  font-size: 12.5px; line-height: 1.35; font-style: italic; color: var(--bronce-pildora);
}
.recorrido__fuga::before {
  content: ""; position: absolute; left: 5px; top: 0; bottom: 0;
  border-left: 1px dashed var(--bronce);
}


/* ---------- Paso 02: la tarjeta del relevamiento ----------
   Es el único paso en tarjeta porque es el único que tiene precio.
   Lleva resplandor fijo; al pasar el cursor crece. */
.relevamiento {
  padding: 34px; border-radius: 18px;
  border-color: var(--borde-destacada);
  box-shadow: 0 22px 64px -32px rgba(226, 154, 88, .38);
  display: flex; flex-direction: column; gap: 22px;
}
.relevamiento:hover { box-shadow: 0 24px 72px -26px rgba(226, 154, 88, .52); }

.relevamiento__lema { font-size: 19px; line-height: 1.5; font-weight: 600; color: var(--crema); }
.relevamiento__detalle {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; align-items: start;
}
.relevamiento__columna { display: flex; flex-direction: column; gap: 22px; }
.relevamiento__columna > p { font-size: 17px; line-height: 1.62; color: var(--texto-tarjeta); }

.llevas { display: flex; flex-direction: column; gap: 12px; }
.llevas .rotulo { margin: 0; font-size: 12px; letter-spacing: .12em; color: var(--texto-menu); }
.llevas ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.llevas li { display: flex; align-items: flex-start; gap: 11px; font-size: 16.5px; line-height: 1.55; color: var(--texto-kicker); }
.llevas li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 5px; color: var(--bronce-web); }
.llevas strong { font-weight: 600; color: var(--crema); }

.relevamiento__aclara { font-size: 17px; line-height: 1.6; color: var(--texto-menu); }
.relevamiento__credito {
  padding-left: 20px; border-left: 3px solid var(--bronce);
  font-size: 19px; line-height: 1.5; font-weight: 600; color: var(--crema);
}


/* ---------- El PDF: una hoja de papel ----------
   Va en crema a propósito: en una página oscura, el papel es lo único
   claro y se lleva la mirada. Sin hover (no hace falta dirigirla).
   Conserva esquinas de 2px y su propia paleta de papel. */
.pdf { margin: 0; width: 330px; display: flex; flex-direction: column; gap: 14px; }
.pdf__hojas { position: relative; width: 330px; height: 424px; }
.pdf__hojas::before {             /* la segunda hoja, asomando atrás */
  content: ""; position: absolute; left: 26px; top: 0;
  width: 296px; height: 404px; background: #DED7C8; border-radius: 2px;
}
.pdf__hoja {
  position: absolute; left: 0; top: 16px;
  width: 300px; height: 408px; padding: 24px 24px 20px;
  display: flex; flex-direction: column;
  background: var(--crema); border-radius: 2px;
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .62);
}
.pdf__hoja img { align-self: flex-start; height: 16px; width: auto; }
.pdf__filete { width: 30px; height: 2px; margin-top: 16px; background: var(--bronce); }
.pdf__titulo { margin-top: 26px; font-size: 24px; line-height: 1.15; font-weight: 600; color: var(--grafito); }
.pdf__cliente { margin-top: 7px; font-size: 12px; line-height: 1.4; color: #6B6157; }
.pdf__indice { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid #DDD6C8; }
.pdf__indice li {
  display: flex; align-items: baseline; gap: 10px; padding: 11px 0;
  font-size: 12px; line-height: 1.4; color: #3A4450;
}
.pdf__indice li + li { border-top: 1px solid #E7E1D5; }
.pdf__indice span {                /* bronce oscurecido: pasa AA sobre crema */
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #7E4A22;
}
.pdf__destacado {
  margin-top: auto; padding: 10px 12px;
  background: #F1EADC; border-radius: 2px;
  font-size: 11.5px; line-height: 1.45; color: #55402C;
}
.pdf figcaption { font-size: 13.5px; line-height: 1.4; color: var(--texto-tarjeta); }


/* ==========================================================
   7 · PARA QUIÉN ES — filas enfrentadas, sí contra no
   Las filas son parejas (orden B, 2026-09-23): cada descarte
   enfrenta a su par.

   Rediseño 2026-09-27: dejó de ser <table>. Cada columna es una
   tarjeta real (.filtro__grupo) — no un dibujo superpuesto — que
   usa CSS subgrid para heredar las filas de la grilla exterior:
   así el sí y su no quedan a la misma altura por pareja (el que
   tiene menos texto se amolda al que tiene más, casi siempre el
   no) sin perder ser una caja propia con un solo borde de una
   pieza. Nunca puede haber costuras porque nunca se arma pegando
   tramos: es un elemento, un borde.
   En teléfono, .filtro__grupo dejar de ser columna de grilla y
   pasa a ser una tarjeta apilada normal (ver responsive.css):
   primero todos los sí, después todos los no.
   ========================================================== */

.filtro .contenedor { display: flex; flex-direction: column; gap: 40px; }
.filtro__bajada { max-width: 830px; font-size: 18px; line-height: 1.62; color: var(--texto-tarjeta); }

.filtro__marco { position: relative; margin-top: 26px; }

/* Divisor central con el rótulo vertical, entre las dos columnas */
.filtro__divisor { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--borde); transform: translateX(-50%); }
.filtro__rotulo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl; background: var(--grafito); padding: 14px 6px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--texto-rotulo); z-index: 2;
}

.filtro__grilla { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); column-gap: 56px; row-gap: 0; }

/* La tarjeta: ocupa las 4 filas de la grilla exterior (subgrid) para
   que sus propias filas hereden el alto de esa pareja. Mismo relleno
   que el resto de las tarjetas del sitio (antes quedaba transparente
   y se veía "menos cargado" que las demás secciones). */
.filtro__grupo {
  position: relative; grid-row: 1 / 5; display: grid; grid-template-rows: subgrid;
  background: var(--tarjeta); border-radius: var(--radio-tarjeta);
  transition: border-color var(--t-tarjeta), background-color var(--t-tarjeta), box-shadow var(--t-tarjeta);
}
.filtro__grupo--si { grid-column: 1; border: 1.5px solid rgba(226, 154, 88, .4); }
.filtro__grupo--no { grid-column: 2; border: 1.5px solid var(--borde-boton); }
/* Se ilumina solo el lado sobre el que está el cursor, no los dos juntos.
   El resplandor es corto a propósito: no tiene que llegar al rótulo
   "Para quién es" del medio, o se ve un corte sucio contra su fondo. */
.filtro__grupo--si:hover { border-color: rgba(226, 154, 88, .8); background-color: var(--tarjeta-hover); box-shadow: 0 0 18px -8px rgba(226, 154, 88, .35); }
.filtro__grupo--no:hover { border-color: var(--borde-hover); background-color: var(--tarjeta-hover); }

/* La etiqueta flota sobre el borde superior de su propia tarjeta */
.filtro__etiqueta {
  position: absolute; top: -19px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px;
  border-radius: var(--radio-pildora); font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; z-index: 2;
}
.filtro__etiqueta svg { width: 13px; height: 13px; flex-shrink: 0; }
.filtro__etiqueta--si { background: var(--bronce-web); color: #201206; box-shadow: 0 8px 20px -8px rgba(226, 154, 88, .5); }
.filtro__etiqueta--no { background: var(--grafito); border: 1px solid var(--borde-boton); color: var(--texto-suave); }
.filtro__etiqueta--no svg { color: #8D96A1; }

.filtro__fila { display: flex; gap: 12px; padding: 17px 28px; align-items: flex-start; font-size: 15.5px; line-height: 1.6; }
.filtro__grupo > .filtro__fila:first-of-type { margin-top: 24px; }   /* espacio bajo la etiqueta flotante */

.filtro__fila.filtro__si { color: var(--crema); }
.filtro__fila.filtro__no { color: #8D96A1; }
.filtro__marca { flex-shrink: 0; width: 14px; margin-top: 4px; }
.filtro__marca svg { width: 14px; height: 14px; display: block; }
.filtro__si .filtro__marca { color: var(--bronce-web); }
.filtro__no .filtro__marca { color: #8D96A1; }

.filtro__cierre { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 6px; }
.filtro__cierre p { font-size: clamp(22px, 1.2vw + 12px, 27px); line-height: 1.4; font-weight: 600; color: var(--crema); }


/* ==========================================================
   8 · QUIÉN ESTÁ DETRÁS — el oficio como credencial de método
   ========================================================== */

.fundador .contenedor { display: flex; flex-direction: column; gap: 44px; }
.fundador h2 { max-width: 820px; }
.fundador__cuerpo { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 60px; align-items: start; }

/* Lugar reservado para la foto: 360×450, esquinas de 18px.
   Cuando exista, el div se reemplaza por un <img> con la clase fundador__foto */
.fundador__foto {
  width: 100%; max-width: 360px; aspect-ratio: 4 / 5;
  border-radius: 18px; overflow: hidden; object-fit: cover;
}
.fundador__reemplazo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px; text-align: center;
  border: 1px dashed #4E5A68;
  background: radial-gradient(ellipse 280px 300px at 50% 38%, rgba(226, 154, 88, .16) 0%,
    rgba(226, 154, 88, .05) 55%, rgba(226, 154, 88, 0) 80%), var(--tarjeta);
}
.fundador__reemplazo svg { width: 46px; height: 46px; color: #6E7A87; }
.fundador__reemplazo .rotulo { font-size: 11px; color: #8C94A0; }
.fundador__reemplazo p { max-width: 250px; font-size: 14px; line-height: 1.5; color: #8C94A0; }

.fundador__texto { display: flex; flex-direction: column; gap: 20px; }
.fundador__texto p { font-size: 18px; line-height: 1.65; color: var(--texto-tarjeta); }
.fundador__texto .cierre { margin-top: 8px; font-size: clamp(20px, .8vw + 13px, 23px); color: var(--crema); }
.fundador__texto .fundador__firma { margin-top: 8px; font-size: 19px; line-height: 1.6; font-weight: 600; color: var(--bronce-pildora); }


/* ==========================================================
   9 · FAQ — desplegable con <details>: cero JavaScript,
   accesible por teclado y anunciado por el lector de pantalla
   ========================================================== */

.faq .contenedor { display: flex; flex-direction: column; gap: 38px; }
.faq__lista { display: flex; flex-direction: column; gap: 14px; }

.pregunta summary {
  display: flex; align-items: center; gap: 24px;
  padding: 24px 28px; cursor: pointer; list-style: none;
  font-size: clamp(18px, .6vw + 14px, 21px); line-height: 1.35; font-weight: 700;
  color: #D6D2C9; transition: color .25s ease;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta:hover summary, .pregunta[open] summary { color: var(--crema); }
.pregunta summary:focus-visible { outline-offset: -3px; border-radius: var(--radio-tarjeta); }
.pregunta summary svg {
  width: 20px; height: 20px; flex-shrink: 0; margin-left: auto;
  color: var(--bronce-web); transition: transform var(--t-tarjeta);
}
.pregunta[open] summary svg { transform: rotate(180deg); }
.pregunta__respuesta { max-width: 820px; padding: 2px 28px 26px; font-size: 18px; line-height: 1.66; color: var(--texto-tarjeta); }

/* La abierta queda marcada aunque saques el cursor: con seis, si no, te perdés */
.pregunta[open] { border-color: #5C472F; background-color: #1F2A36; }
.pregunta[open]:hover { border-color: var(--borde-hover); }


/* ==========================================================
   10 · EMPEZAR — corta a propósito: solo saca la última fricción.
   La luz repite la órbita del hero, más baja y quieta.
   ========================================================== */

.empezar { overflow: hidden; padding-block: 120px 170px; }
.empezar__luz { position: absolute; inset: 0; pointer-events: none; }
.empezar__luz::before {            /* bruma */
  content: ""; position: absolute; left: 50%; top: calc(100% - 290px);
  width: 1100px; height: 640px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(226, 154, 88, .17) 0%,
    rgba(226, 154, 88, .07) 42%, rgba(226, 154, 88, .02) 64%, rgba(226, 154, 88, 0) 80%);
}
.empezar__luz::after {             /* el borde de la esfera */
  content: ""; position: absolute; left: 50%; top: calc(100% - 150px);
  width: 2400px; height: 2400px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(178, 109, 58, 0) 0 90%, rgba(178, 109, 58, .06) 95%,
    rgba(178, 109, 58, .16) 98.6%, rgba(178, 109, 58, .2) 99.4%, rgba(178, 109, 58, 0) 100%);
  filter: blur(8px);
}
.empezar__contenido { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.empezar .pildora { align-self: center; }
.empezar h2 { font-size: clamp(36px, 2.8vw + 14px, 52px); line-height: 1.1; letter-spacing: -.015em; }
.empezar__bajada { max-width: 600px; font-size: 20px; line-height: 1.6; color: var(--texto-suave); }
.empezar .boton--principal { margin-top: 14px; min-height: 58px; padding: 0 34px; }
.empezar__alternativa { margin-top: 2px; font-size: 16px; line-height: 1.55; color: var(--texto-suave); }


/* ==========================================================
   PIE — variante B: grafito más profundo, sin filete.
   El corte de fondo en línea recta es buscado (Lucas, 2026-09-26)
   ========================================================== */

.pie { position: relative; z-index: 1; padding: 64px 0 36px; background: var(--grafito-pie); }
.pie__grilla { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr; gap: 48px; }
.pie__marca { display: flex; flex-direction: column; gap: 18px; }
.pie__marca a { display: inline-flex; align-self: flex-start; }
.pie__marca img { height: 34px; width: auto; }
.pie__marca p { font-size: 17px; line-height: 1.5; color: var(--texto-suave); }

.pie__columna { display: flex; flex-direction: column; gap: 14px; }
.pie__columna ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.pie__columna .link-halo { font-size: 16px; }
.pie__contacto { display: inline-flex; align-items: center; gap: 10px; }
.pie__contacto svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--texto-rotulo); transition: color var(--t-luz); }
.pie__contacto:hover svg, .pie__contacto:focus-visible svg { color: var(--bronce-web); }
.pie__redes { display: flex; gap: 12px; margin-top: 8px; }

.pie__base {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 56px; padding-top: 22px; border-top: 1px solid #26303B;
  font-size: 14px; color: var(--texto-rotulo);
}
.pie__base .link-halo { font-size: 14px; }