/* ===========================================================================
   features.css — el panel "Desarrollos propios" (/features) y su adelanto en
   la portada, más el carrusel de testimonios.
   Spec: docs/specs/SPEC_2026-09-24_features_y_testimonios.md

   Reglas del sitio que se respetan acá (skill tdp-web):
   - Ningún hex nuevo: todo sale de los tokens de css/base.css (var(--c-*)).
     Las transparencias van con color-mix sobre esos tokens.
   - Sin @keyframes propios: solo transiciones (los keyframes viven en fx.css).
   - Todo lo que se mueve, dentro de prefers-reduced-motion: no-preference.
   - estilo.css pinta dorado a TODOS los <button>: los botones de acá se
     resetean explícitamente (.fx-voz, .fx-tst-controles button).
   =========================================================================== */

.fx-pagina { --fx-borde: color-mix(in srgb, var(--c-oro) 24%, transparent);
             --fx-borde-fuerte: color-mix(in srgb, var(--c-oro) 55%, transparent);
             --fx-velo: color-mix(in srgb, var(--c-negro) 88%, transparent); }
.tdp-features-adelanto { --fx-borde: color-mix(in srgb, var(--c-oro) 24%, transparent);
                         --fx-borde-fuerte: color-mix(in srgb, var(--c-oro) 55%, transparent);
                         --fx-velo: color-mix(in srgb, var(--c-negro) 88%, transparent); }

/* ---------- cabecera de la página ---------- */
.fx-hero { padding: var(--e-8) 0 var(--e-6); text-align: center; }
.fx-antetitulo { margin: 0 0 var(--e-2); font-family: var(--fuente-titulos); letter-spacing: .28em;
                 text-transform: uppercase; font-size: .82rem; color: var(--c-oro); }
.fx-hero h1 { margin: 0 0 var(--e-4); font-family: var(--fuente-titulos); font-size: clamp(1.8rem, 4.2vw, 2.9rem);
              line-height: 1.12; color: var(--c-oro-claro); }
.fx-lede { max-width: 680px; margin: 0 auto; font-size: 1.08rem; line-height: 1.6; color: var(--c-hueso); }
.fx-indice { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-6); }
.fx-indice a { padding: 7px 16px; border: 1px solid var(--fx-borde); border-radius: 999px; color: var(--c-hueso);
               text-decoration: none; font-size: .9rem; min-height: 24px;
               transition: border-color var(--dur-rapida) var(--ease-suave), color var(--dur-rapida) var(--ease-suave); }
.fx-indice a:hover, .fx-indice a:focus-visible { border-color: var(--c-oro); color: var(--c-oro-claro); }

/* ---------- capítulos ---------- */
.fx-capitulo { padding: var(--e-7) 0 var(--e-4); scroll-margin-top: 130px; }
.fx-capitulo > h2 { margin: 0 0 var(--e-2); font-family: var(--fuente-titulos); color: var(--c-oro-claro);
                    font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.fx-bajada { margin: 0 0 var(--e-5); color: var(--c-gris-calido); max-width: 640px; line-height: 1.55; }

.fx-grilla { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* ---------- la carta ---------- */
.fx-carta {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 430px; display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--fx-borde); border-radius: var(--radio-grande);
  background: var(--c-negro-2); scroll-margin-top: 130px;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--c-negro) 60%, transparent);
  transition: border-color var(--dur-media) var(--ease-suave), transform var(--dur-media) var(--ease-suave);
}
/* Reserva arriba para la imagen: sin esto, en una carta con mucho texto el
   titulo se montaba sobre el icono o la captura (visto en la primera maqueta). */
.fx-carta::before { content: ""; flex: 0 0 150px; }
.fx-carta:hover, .fx-carta:focus-within { border-color: var(--fx-borde-fuerte); }
.fx-carta:target { border-color: var(--c-oro); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-oro) 45%, transparent); }

/* La capa de medios: video/poster a sangre, detrás de todo. */
.fx-medio { position: absolute; inset: 0; z-index: -2; }
.fx-medio video, .fx-medio .fx-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-medio::after {  /* velo para que el texto se lea sobre cualquier toma */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-negro) 10%, transparent) 0%,
    color-mix(in srgb, var(--c-negro) 30%, transparent) 30%,
    color-mix(in srgb, var(--c-negro) 88%, transparent) 55%,
    var(--c-negro) 100%);
}
/* Sin toma real todavía: fondo de marca + el ícono real del cliente o el emblema. */
.fx-marca {
  position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 26px;
  background:
    radial-gradient(60% 45% at 50% 22%, color-mix(in srgb, var(--c-oro) 20%, transparent), transparent 70%),
    radial-gradient(120% 80% at 50% 110%, color-mix(in srgb, var(--c-navy) 90%, transparent), transparent 60%),
    var(--c-negro-2);
}
.fx-icono { width: 104px; height: 104px; filter: drop-shadow(0 10px 28px color-mix(in srgb, var(--c-oro) 35%, transparent)); }
.fx-emblema { width: 96px; height: 96px; color: var(--c-oro); opacity: .28; }

.fx-cuerpo { position: relative; padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }
.fx-carta h3 { margin: 0; font-family: var(--fuente-titulos); font-size: 1.3rem; line-height: 1.2; color: var(--c-oro-claro);
               text-shadow: 0 2px 12px var(--c-negro); }
.fx-gancho { margin: 0; font-size: 1.02rem; line-height: 1.45; color: var(--c-blanco); font-weight: 500;
             text-shadow: 0 1px 8px var(--c-negro); }
.fx-notas { list-style: none; margin: var(--e-1) 0 0; padding: 0; display: grid; gap: 6px; }
.fx-notas li { position: relative; padding-left: 18px; font-size: .92rem; line-height: 1.42; color: var(--c-hueso); }
.fx-notas li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px;
                       transform: rotate(45deg); background: var(--c-oro); }

.fx-pie { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e-2) var(--e-3); margin-top: var(--e-2); }
.fx-uso { flex: 1 1 100%; }
.fx-uso summary { cursor: pointer; color: var(--c-oro); font-weight: 600; font-size: .92rem; list-style: none;
                  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.fx-uso summary::-webkit-details-marker { display: none; }
.fx-uso summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px;
                          border: 1px solid var(--fx-borde-fuerte); border-radius: 50%; font-size: .8rem; }
.fx-uso[open] summary::before { content: "–"; }
.fx-uso ol { margin: var(--e-2) 0 0; padding-left: 20px; color: var(--c-hueso); font-size: .9rem; line-height: 1.5; }
.fx-uso ol li + li { margin-top: 3px; }
.fx-por-que { margin: var(--e-2) 0 0; padding: var(--e-2) var(--e-3); border-left: 2px solid var(--c-oro);
              background: color-mix(in srgb, var(--c-oro) 7%, transparent); color: var(--c-hueso);
              font-size: .88rem; line-height: 1.5; }

/* El botón de la voz: estilo.css le pondría el degradé dorado de todos los botones. */
.fx-voz {
  background: color-mix(in srgb, var(--c-negro) 55%, transparent); color: var(--c-oro-claro);
  border: 1px solid var(--fx-borde-fuerte); border-radius: 999px; padding: 7px 14px; font-size: .86rem;
  font-weight: 600; min-height: 24px; box-shadow: none;
}
.fx-voz:hover, .fx-voz:focus-visible { filter: none; border-color: var(--c-oro); background: color-mix(in srgb, var(--c-oro) 14%, transparent); }
.fx-voz[aria-pressed="true"] { background: var(--c-oro); color: var(--c-negro); }

.fx-credito { margin: var(--e-2) 0 0; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
              color: var(--c-gris-calido); }

/* En construcción: se ve distinto a propósito (y nunca lleva fecha). */
.fx-carta--construccion { border-style: dashed; }
.fx-carta--construccion .fx-medio { filter: saturate(.55); }
.fx-sello { align-self: flex-start; padding: 3px 10px; border: 1px solid var(--c-naranja); border-radius: 999px;
            color: var(--c-naranja); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
            background: color-mix(in srgb, var(--c-negro) 70%, transparent); }

/* Versión compacta (adelanto de la portada). */
.fx-carta--compacta { min-height: 300px; }
.fx-carta--compacta::before { flex-basis: 120px; }
.fx-carta--compacta h3 { font-size: 1.12rem; }
.fx-carta--compacta .fx-gancho { font-size: .94rem; }
.fx-carta--compacta .fx-notas li { font-size: .86rem; }
.fx-carta--compacta .fx-notas li:nth-child(n+3) { display: none; }
a.fx-carta-link { color: inherit; text-decoration: none; display: block; border-radius: var(--radio-grande); }
a.fx-carta-link:focus-visible { outline: 2px solid var(--c-oro); outline-offset: 3px; }

/* ---------- entrada animada (solo con JS y sin reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fx-activo .fx-carta:not(.visible) .fx-cuerpo > * { opacity: 0; transform: translateY(14px); }
  .fx-activo .fx-carta .fx-cuerpo > * {
    transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .fx-activo .fx-carta.visible .fx-cuerpo > *:nth-child(2) { transition-delay: .08s; }
  .fx-activo .fx-carta.visible .fx-cuerpo > *:nth-child(3) { transition-delay: .16s; }
  .fx-activo .fx-carta.visible .fx-cuerpo > *:nth-child(4) { transition-delay: .28s; }
  .fx-activo .fx-carta.visible .fx-cuerpo > *:nth-child(n+5) { transition-delay: .36s; }
  .fx-activo .fx-carta:not(.visible) .fx-notas li { opacity: 0; transform: translateX(-10px); }
  .fx-activo .fx-carta .fx-notas li { transition: opacity .5s ease, transform .5s ease; }
  .fx-activo .fx-carta.visible .fx-notas li:nth-child(1) { transition-delay: .34s; }
  .fx-activo .fx-carta.visible .fx-notas li:nth-child(2) { transition-delay: .46s; }
  .fx-activo .fx-carta.visible .fx-notas li:nth-child(3) { transition-delay: .58s; }
  .fx-carta:hover { transform: translateY(-3px); }
  .fx-medio video, .fx-medio .fx-poster { transition: transform 1.2s ease; }
  .fx-carta:hover .fx-medio video, .fx-carta:hover .fx-medio .fx-poster { transform: scale(1.03); }
}

/* ---------- testimonios ---------- */
.fx-testimonios { position: relative; margin-top: var(--e-4); }
/* Todas las citas en la MISMA celda: el alto lo pone la más larga y el
   carrusel no salta al cambiar. Solo la activa se ve. */
.fx-tst-pista { display: grid; }
.fx-tst {
  grid-area: 1 / 1; margin: 0; padding: var(--e-6) var(--e-6) var(--e-5);
  border: 1px solid var(--fx-borde); border-radius: var(--radio-grande);
  background:
    radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--c-oro) 10%, transparent), transparent 60%),
    var(--c-negro-2);
  visibility: hidden; opacity: 0;
}
.fx-tst.activa, .fx-tst:first-child:not([aria-hidden="true"]) { visibility: visible; opacity: 1; }
.fx-tst blockquote { margin: 0; position: relative; }
.fx-tst blockquote::before { content: "“"; position: absolute; left: -6px; top: -34px; font-family: var(--fuente-titulos);
                             font-size: 4.2rem; line-height: 1; color: color-mix(in srgb, var(--c-oro) 40%, transparent); }
.fx-tst blockquote p { margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.55; color: var(--c-blanco); font-style: italic; }
.fx-tst figcaption { margin-top: var(--e-4); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fx-tst figcaption strong { color: var(--c-oro-claro); font-family: var(--fuente-titulos); font-size: 1.05rem; }
.fx-tst-titulo { font-size: .78rem; padding: 2px 8px; border: 1px solid var(--fx-borde-fuerte); border-radius: 999px; color: var(--c-oro); }
.fx-tst-datos { flex-basis: 100%; font-size: .84rem; color: var(--c-gris-calido); }
.fx-tst-mas { margin-top: var(--e-3); }
.fx-tst-mas summary { cursor: pointer; color: var(--c-oro); font-size: .86rem; min-height: 24px; }
.fx-tst-mas p { margin: var(--e-2) 0 0; color: var(--c-hueso); font-size: .92rem; line-height: 1.55; }
.fx-tst-controles { display: flex; align-items: center; justify-content: center; gap: var(--e-3); margin-top: var(--e-3); }
.fx-tst-controles button {
  width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 1.4rem; line-height: 1;
  background: transparent; color: var(--c-oro-claro); border: 1px solid var(--fx-borde-fuerte); box-shadow: none;
}
.fx-tst-controles button:hover, .fx-tst-controles button:focus-visible { filter: none; border-color: var(--c-oro); background: color-mix(in srgb, var(--c-oro) 14%, transparent); }
.fx-tst-pos { min-width: 56px; text-align: center; color: var(--c-gris-calido); font-size: .88rem; }
.fx-tst-aviso { margin: var(--e-3) auto 0; max-width: 620px; text-align: center; font-size: .78rem; color: var(--c-gris-calido); }
@media (prefers-reduced-motion: no-preference) {
  .fx-tst { transition: opacity .6s ease, visibility 0s linear .6s; }
  .fx-tst.activa { transition: opacity .6s ease, visibility 0s; }
}

/* ---------- cierre ---------- */
.fx-cierre { margin: var(--e-8) 0 var(--e-4); padding: var(--e-7) var(--e-5); text-align: center;
             border: 1px solid var(--fx-borde); border-radius: var(--radio-grande);
             background: radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--c-oro) 12%, transparent), transparent 70%); }
.fx-cierre h2 { margin: 0 0 var(--e-2); font-family: var(--fuente-titulos); color: var(--c-oro-claro); }
.fx-cierre p { color: var(--c-hueso); }
.fx-cierre-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); margin-top: var(--e-4); }

/* ---------- adelanto en la portada ---------- */
.tdp-features-adelanto .fx-grilla { grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
.tdp-features-adelanto .fx-mas { margin-top: var(--e-5); text-align: center; }
.tdp-testimonios-portada .fx-testimonios { margin-top: var(--e-3); }

/* ---------- pantallas chicas ---------- */
@media (max-width: 900px) {
  .tdp-features-adelanto .fx-grilla { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .fx-hero { padding-top: var(--e-6); }
  .fx-grilla, .tdp-features-adelanto .fx-grilla { grid-template-columns: 1fr; gap: var(--e-4); }
  .fx-carta { min-height: 380px; }
  .fx-carta--compacta { min-height: 260px; }
  .fx-cuerpo { padding: var(--e-4); }
  .fx-tst { padding: var(--e-5) var(--e-4) var(--e-4); }
}