/* Plantilla de las páginas de función (docs/plans/web-funciones). Solo tokens de helix-web.css: oscuro en :root,
   claro con [data-theme="light"]. Tarjetas que flotan, un acento coral, curva única --v5-eo. */

/* Hero partido: texto | clip del panel */
.hf-hero { padding-top: clamp(110px, 14vw, 150px); padding-bottom: clamp(30px, 5vw, 56px); }
.hf-hero-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hf-hero--solo .hf-hero-grid { grid-template-columns: minmax(0, 820px); }
.hf-hero .hx-h1 { margin-top: 18px; }
.hf-sub { max-width: 560px; margin-top: 18px; }
.hf-hero .hw-btn-row { margin-top: 26px; }

/* Clip del panel: una tarjeta que flota, sin marcos dibujados */
.hf-clip { border-radius: var(--hx-r-seccion); background: var(--v5-card); aspect-ratio: 1280 / 800;
  box-shadow: 0 0 0 .5px var(--v5-edge), var(--v5-sh1); }
.hf-clip--hero { box-shadow: 0 0 0 .5px var(--v5-edge), inset 0 1px 0 var(--v5-hl), var(--v5-shg); }

/* Qué hace: filas con clip alternas y, después, tarjetas */
.hf-que-hace h2 { margin-top: 12px; max-width: 760px; }
.hf-fila { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 64px); align-items: center;
  margin-top: clamp(40px, 7vw, 80px); }
.hf-fila--inv .hf-fila-texto { order: 2; }
.hf-fila-texto h3 { margin-bottom: 12px; }
.hf-enlace { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--hx-link); font-weight: 600;
  text-decoration: none; }
.hf-enlace .icon { width: 16px; height: 16px; transition: transform .3s var(--v5-eo); }
.hf-enlace:hover .icon, .hf-enlace:focus-visible .icon { transform: translateX(3px); }
.hf-tarjetas { margin-top: clamp(32px, 5vw, 56px); }
.hf-tarjeta { padding: 24px; display: flex; flex-direction: column; gap: 8px; }

/* Paso a paso */
.hf-pasos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hf-paso { background: var(--v5-card); border-radius: var(--hx-r-seccion); box-shadow: var(--v5-sh1); padding: 22px;
  display: flex; flex-direction: column; gap: 6px; }
.hf-paso-n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; margin-bottom: 8px;
  background: var(--hx-acc-bg); color: var(--hx-acc-text); font-weight: 700; }

/* Todo lo que incluye */
.hf-incluye { padding: clamp(22px, 3.4vw, 40px); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(20px, 4vw, 48px);
  align-items: start; }
.hf-incluye-lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.hf-incluye-lista li { display: flex; gap: 10px; align-items: flex-start; }
.hf-incluye-lista .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--hx-acc-text); }

/* Funciones relacionadas */
.hf-rels { margin-top: 28px; }
.hf-rel { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; color: inherit;
  text-decoration: none; }
.hf-rel .t-h3 { margin-top: 2px; }
.hf-rel-ir { position: absolute; top: 20px; right: 20px; color: var(--hx-acc-text); }
.hf-rel-ir .icon { transition: transform .3s var(--v5-eo); }
.hf-rel:hover .hf-rel-ir .icon, .hf-rel:focus-visible .hf-rel-ir .icon { transform: translateX(3px); }

/* Preguntas */
.hf-faq-sec .hx-faqs { margin-top: 24px; }

/* Cierre */
.hf-cierre { padding: clamp(28px, 4.6vw, 52px); text-align: center; }
.hf-cierre p { margin: 12px auto 0; max-width: 560px; }
.hf-cierre .hw-btn-row { margin-top: 24px; justify-content: center; }

/* Cómo funciona: funciones de cada etapa del recorrido */
.hx-recorrido .rb-ss { margin-top: clamp(28px, 4vw, 44px); }
main ul.hx-cf-fn { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 6px; }
main ul.hx-cf-fn li a { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 14px;
  color: var(--v5-t1); text-decoration: none; transition: background .3s var(--v5-eo); }
main ul.hx-cf-fn li a:hover, main ul.hx-cf-fn li a:focus-visible { background: var(--hx-acc-bg); }
.hx-cf-fn-ic { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: var(--hx-acc-bg); color: var(--hx-acc-text); }
.hx-cf-fn-ic .icon { width: 16px; height: 16px; }
.hx-cf-fn b { display: block; font-size: 15px; font-weight: 650; }
.hx-cf-fn small { display: block; font-size: 13.5px; color: var(--v5-t2); }

/* Setter IA: el clip bajo el hero */
.hx-setter-clip .hf-clip { max-width: 1040px; margin: 0 auto; }

/* Precios: tabla «Qué trae cada plan» */
.hx-tabla-planes { margin-top: clamp(28px, 4vw, 44px); }
.hx-tabla-planes h2 { margin-bottom: 18px; }
.hx-tabla-planes td:not(:first-child), .hx-tabla-planes th:not(:first-child) { text-align: center; }
.hx-tabla-si { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--hx-acc-bg); color: var(--hx-acc-text); }
.hx-tabla-si .icon { width: 15px; height: 15px; }
.hx-tabla-no { color: var(--v5-t3); font-weight: 700; }

@media (max-width: 960px) {
  .hf-hero-grid, .hf-fila, .hf-incluye { grid-template-columns: 1fr; }
  .hf-fila--inv .hf-fila-texto { order: 0; }
}
@media (max-width: 600px) {
  .hf-incluye-lista { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-enlace .icon, .hf-rel-ir .icon { transition: none; }
}

/* Sin Helix / Con Helix (guía de mensajes §8) */
.hf-contraste { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.4vw, 24px); align-items: stretch; }
.hf-sin, .hf-con { padding: clamp(22px, 3vw, 34px); border-radius: var(--hx-r-seccion); }
.hf-sin { box-shadow: inset 0 0 0 .5px var(--v5-edge); background: var(--hx-sunken); }
.hf-con { box-shadow: 0 0 0 .5px var(--v5-edge), var(--v5-sh1), 0 24px 60px -32px color-mix(in srgb, var(--v5-acc) 55%, transparent); }
.hf-sin ul, .hf-con ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 14px; }
.hf-sin li, .hf-con li { display: flex; gap: 12px; align-items: flex-start; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.45; }
.hf-sin li { color: var(--v5-t2); }
.hf-sin .icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--v5-t3); }
.hf-con .icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--hx-acc-text); }
.hf-prueba { padding-top: 0; }
@media (max-width: 760px) { .hf-contraste { grid-template-columns: 1fr; } }

/* Banda de resultados reales (la misma de la home, helix-home.css) para las páginas de función con `prueba` */
.hf-prueba.hx-prueba { padding: 0 0 clamp(28px, 5vh, 56px); }
.hx-prueba-banda { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 28px; overflow: hidden; background: var(--v5-card);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--v5-t1) 3.5%, transparent), 0 0 0 6.5px var(--v5-edge), var(--v5-sh1); }
.hx-prueba-banda > div { padding: clamp(20px, 2.4vw, 30px); }
.hx-prueba-banda > div + div { box-shadow: inset 1px 0 0 var(--v5-line); }
.hx-prueba-banda .kpi-n { font-size: clamp(34px, 3.8vw, 52px); letter-spacing: -0.05em; font-weight: 650; }
.hx-kpi-brasa { color: var(--hx-acc-text); }
.hx-prueba-fuente { text-align: center; margin: 14px auto 0; max-width: none; }
@media (max-width: 760px) { .hx-prueba-banda { grid-template-columns: 1fr 1fr; } .hx-prueba-banda > div:nth-child(3) { box-shadow: inset 0 1px 0 var(--v5-line); } .hx-prueba-banda > div:nth-child(4) { box-shadow: inset 1px 0 0 var(--v5-line), inset 0 1px 0 var(--v5-line); } }

/* Precios: el Pro es la Holo Card del panel (js/helix-plan-holo.js + css/helix-plan-holo.css). Aquí solo la etiqueta,
   a la derecha del nombre como en Ajustes › Cuenta. */
.hx-plan--pro .t-h3 { position: relative; }
.hx-plan--pro .hx-etiqueta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; padding: 4px 11px;
  font-size: 12px; background: var(--v5-acc); }

/* Móvil (19-10) */
@media (max-width: 600px) {
  .hf-hero { padding-top: 36px; padding-bottom: 24px; }
  .hf-fila { margin-top: 44px; }
  /* «Qué trae cada plan» cabe entera a 390 px: columna de la función ancha y tres de plan estrechas */
  .hx-tabla-planes .tabla { min-width: 0; table-layout: fixed; font-size: 12.5px; }
  .hx-tabla-planes .tabla th:first-child, .hx-tabla-planes .tabla td:first-child { width: 43%; padding-left: 14px; }
  .hx-tabla-planes .tabla th, .hx-tabla-planes .tabla td { padding: 10px 5px; overflow-wrap: anywhere; }
  .hx-tabla-planes .tabla th:last-child, .hx-tabla-planes .tabla td:last-child { padding-right: 10px; }
}