@import url("font-poppins-500.css");
@import url("font-poppins-600.css");
@import url("font-poppins-700.css");
@import url("font-poppins-800.css");
@import url("font-plus-jakarta-sans.css");
:root {
  /* Color de marca */
  --teal: #0A4A4C;
  --teal-hondo: #052B2E;
  --teal-medio: #0E7C74;
  --menta: #2EE0BE;
  --menta-oscura: #0FA69A;
  --crema: #F6F4EC;
  --blanco: #FDFEFD;
  --espuma: #D9F7EF;
  --tinta: #17363A;
  --gris: #54706F;
  --linea: #D9D5C6;
  --exito: #0B7A5B;
  --aviso: #9A6400;
  --error: #C2412D;

  /* Familia activa (marca madre por defecto) */
  --fam-1: #2EE0BE;
  --fam-2: #2EE0BE;
  --fam-1-hondo: #2EE0BE;
  --fam-2-hondo: #2EE0BE;
  --fam-texto: #15766D;
  --fam-tinte: #DAF1E6;
  --fam-patron: none;
  --fam-patron-hondo: none;

  /* Tipografía */
  --f-titulos: "Poppins", Arial, system-ui, sans-serif;
  --f-texto: "Plus Jakarta Sans", Arial, system-ui, sans-serif;

  /* Escala de espacio del manual: 4 8 12 16 24 32 48 64 96 */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --e-franja: clamp(64px, 9vw, 128px);

  /* Formas */
  --r-tarjeta: 18px;
  --r-campo: 12px;
  --r-pildora: 999px;
  --r-gota: 48px 18px 48px 48px;

  /* Movimiento */
  --entrar: cubic-bezier(.16, 1, .3, 1);
  --burbujear: cubic-bezier(.22, 1, .36, 1);

  /* Degradados aprobados */
  --deg-profundo: linear-gradient(135deg, #0A4A4C, #052B2E);
  --deg-marea: linear-gradient(135deg, #0A4A4C, #0E7C74);
  --liquido-profundo: radial-gradient(circle at 12% 95%, #2EE0BE40 0, transparent 42%), radial-gradient(circle at 92% 8%, #12A09088 0, transparent 48%), radial-gradient(circle at 70% 110%, #0E7C74 0, transparent 45%), #052B2E;
  --liquido-claro: radial-gradient(circle at 10% 100%, #2EE0BE33 0, transparent 45%), radial-gradient(circle at 95% 0%, #9AF3DF66 0, transparent 50%), #F6F4EC;

  /* Escala tipográfica: diez tamaños para todo el sitio (un rol, un tamaño). Los títulos se fluyen con clamp();
     el texto de lectura y las etiquetas son fijos. Para pasar una hoja a esta escala: node tools/escala-tipografica.cjs */
  --t-display: clamp(38px, 4.6vw, 64px);       /* h1 de portada */
  --t-declaracion: clamp(32px, 3.6vw, 52px);   /* manifiesto y cifra grande */
  --t-seccion: clamp(28px, 2.8vw, 40px);       /* h2 y cifra media */
  --t-gancho: clamp(24px, 2vw, 28px);          /* h3 destacado, nombre en el detalle */
  --t-tarjeta: clamp(20px, 1.6vw, 22px);       /* h3 de fichas, diferencias y caminos */
  --t-entrada: 18px;                           /* párrafo de entrada y nombres en listas */
  --t-subtitulo: var(--t-entrada);
  --t-texto: 16px;                             /* lectura */
  --t-detalle: 14px;                           /* fuentes, meta y etiquetas */
  --t-micro: 13px;                             /* sellos y píldoras diminutas */
  --t-cifra: var(--t-declaracion);
  --t-cifra-media: var(--t-seccion);
  --t-cifra-escena: clamp(88px, min(13vw, 24svh), 168px);  /* la cifra fija de la escena; una vez por página */

  --ancho: 1200px;
  --margen: clamp(16px, 5vw, 48px);
  --alto-encabezado: 76px;
}

/* Familias: tiñen solo burbujas y un acento */
[data-familia="start"]       { --fam-1: #1E76BD; --fam-2: #6FB6EA; --fam-1-hondo: #4FA3E3; --fam-2-hondo: #A5D2F5; --fam-texto: #1A66A1; --fam-tinte: #D8E2E5; --fam-patron: none; --fam-patron-hondo: none; }
[data-familia="interactive"] { --fam-1: #FF6B35; --fam-2: #F8B62D; --fam-1-hondo: #FF6B35; --fam-2-hondo: #F8B62D; --fam-texto: #905639; --fam-tinte: #F7E1D2; --fam-patron: none; --fam-patron-hondo: none; }
[data-familia="leadgen"]     { --fam-1: #5CC463; --fam-2: #2196F3; --fam-1-hondo: #5CC463; --fam-2-hondo: #2196F3; --fam-texto: #297551; --fam-tinte: #E0EDD9; --fam-patron: none; --fam-patron-hondo: none; }
[data-familia="neuro"]       { --fam-1: #8511C9; --fam-2: #B57BEA; --fam-1-hondo: #B57BEA; --fam-2-hondo: #DDC2F7; --fam-texto: #8511C9; --fam-tinte: #E6D4E7; --fam-patron: none; --fam-patron-hondo: none; }
[data-familia="academy"]     { --fam-1: #234FE8; --fam-2: #4FA8E5; --fam-1-hondo: #5B8CFF; --fam-2-hondo: #A9CBF7; --fam-texto: #234FE8; --fam-tinte: #D8DDEB; --fam-patron: none; --fam-patron-hondo: none; }
[data-familia="freshup"]     { --fam-1: #8BD943; --fam-2: #C9F27E; --fam-1-hondo: #8BD943; --fam-2-hondo: #C9F27E; --fam-texto: #347645; --fam-tinte: #E7F0D4; --fam-patron: none; --fam-patron-hondo: none; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-encabezado) + 16px); }
body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-texto);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--menta-oscura); outline-offset: 3px; border-radius: 6px; }
.profundo :focus-visible { outline-color: var(--menta); }
::selection { background: var(--espuma); color: var(--teal); }

h1, h2, h3, h4, .t-titulo { font-family: var(--f-titulos); color: var(--teal); margin: 0; font-weight: 700; text-wrap: balance; }
h1, .t-1 { font-size: var(--t-display); line-height: 1.04; font-weight: 800; letter-spacing: -0.025em; }
h2, .t-2 { font-size: var(--t-seccion); line-height: 1.1; letter-spacing: -0.02em; }
h3, .t-3 { font-size: var(--t-tarjeta); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
h4, .t-4 { font-size: var(--t-entrada); line-height: 1.35; font-weight: 600; }
.t-entrada { font-size: var(--t-tarjeta); line-height: 1.6; color: var(--tinta); max-width: 62ch; }
.t-chica { font-size: var(--t-detalle); line-height: 1.5; color: var(--gris); }
.t-texto { max-width: 66ch; }
strong, b { font-weight: 600; color: var(--teal); }

.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--teal); color: var(--crema); padding: 10px 18px; border-radius: var(--r-pildora); font-family: var(--f-titulos); font-weight: 600; text-decoration: none; transition: top .2s var(--entrar); }
.saltar:focus { top: 12px; }

/* ---------- Retícula ---------- */
.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.reticula { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); row-gap: var(--e-7); }
.col-12 { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .col-4 { grid-column-end: span 4; } .col-5 { grid-column-end: span 5; } .col-6 { grid-column-end: span 6; }
  .col-7 { grid-column-end: span 7; } .col-8 { grid-column-end: span 8; }
  .col-3 { grid-column-end: span 3; }
  .desde-2 { grid-column-start: 2; } .desde-7 { grid-column-start: 7; } .desde-8 { grid-column-start: 8; } .desde-9 { grid-column-start: 9; }
  .al-fondo { align-self: end; }
  .baja-1 { margin-top: var(--e-8); } .baja-2 { margin-top: calc(var(--e-9) + var(--e-6)); }
}
@media (max-width: 899px) { .reticula > * { grid-column: 1 / -1; } }

/* ---------- Franjas (secciones) ---------- */
.franja { position: relative; padding-block: var(--e-franja); isolation: isolate; }
.franja--corta { padding-block: clamp(48px, 6vw, 80px); }
.franja--espuma { background: var(--espuma); }
.franja--tinte { background: var(--fam-tinte); }
.profundo { background: var(--liquido-profundo); color: rgba(246, 244, 236, .86); }
.profundo h1, .profundo h2, .profundo h3, .profundo h4, .profundo .t-titulo, .profundo strong { color: var(--crema); }
.profundo .t-entrada { color: rgba(246, 244, 236, .9); }
.profundo .t-chica { color: rgba(246, 244, 236, .72); }
.profundo { --fam-1: var(--fam-1-hondo); --fam-2: var(--fam-2-hondo); }
.franja__encabezado { max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.franja__encabezado .t-entrada { margin-top: var(--e-5); }

/* Fondo suave con el patrón de la familia (detrás de texto) */
.con-patron::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--fam-patron); background-size: 520px auto; background-repeat: repeat;
  opacity: .22;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
  mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
}
.profundo.con-patron::before { background-image: var(--fam-patron-hondo); opacity: .18; }

/* La ola fuera del logo: solo como borde entre franjas.
   Vive dentro de la franja y se pinta con el color de la franja vecina (--onda),
   así el fondo propio (sólido o líquido) siempre empata. Dos crestas por pantalla. */
.franja:has(> .onda--arriba) { padding-top: calc(var(--e-franja) + 32px); }
.franja:has(> .onda--abajo) { padding-bottom: calc(var(--e-franja) + 32px); }
.franja > .contenedor { position: relative; z-index: 1; }
.onda { position: absolute; left: 0; right: 0; height: clamp(36px, 5vw, 72px); line-height: 0; pointer-events: none; z-index: 0; --onda: var(--crema); }
.onda svg { width: 100%; height: 100%; }
.onda--arriba { top: -1px; transform: scaleY(-1); }
.onda--abajo { bottom: -1px; }
.onda path { fill: var(--onda); }
.onda path.onda__espuma { fill: var(--menta); opacity: .22; }

/* ---------- Burbujas: el único adorno ---------- */
.burbujas { position: absolute; pointer-events: none; z-index: -1; }
.burbujas i { position: absolute; display: block; border-radius: 50%; background: var(--fam-1); }
.burbujas i:nth-child(2) { background: var(--fam-2); }
.burbujas--sube { width: 220px; height: 200px; }
.burbujas--sube i:nth-child(1) { width: 84px; height: 84px; left: 0; bottom: 0; }
.burbujas--sube i:nth-child(2) { width: 59px; height: 59px; left: 104px; bottom: 76px; }
.burbujas--sube i:nth-child(3) { width: 42px; height: 42px; left: 172px; bottom: 150px; background: var(--fam-1); opacity: .55; }
.burbujas--chica { width: 64px; height: 48px; }
.burbujas--chica i:nth-child(1) { width: 26px; height: 26px; left: 0; bottom: 0; }
.burbujas--chica i:nth-child(2) { width: 18px; height: 18px; left: 34px; bottom: 24px; }
.flota i { animation: flotar 2.4s ease-in-out 2 alternate; }
.flota i:nth-child(2) { animation-delay: .3s; }
.flota i:nth-child(3) { animation-delay: .6s; }
@keyframes flotar { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* Par de burbujas como marca de familia o de bloque */
.par { display: inline-block; position: relative; width: 34px; height: 26px; flex: none; }
.par::before, .par::after { content: ""; position: absolute; border-radius: 50%; }
.par::before { width: 18px; height: 18px; left: 0; bottom: 0; background: var(--fam-1); }
.par::after { width: 12px; height: 12px; left: 20px; top: 0; background: var(--fam-2); }

/* ---------- Etiqueta: una palabra con una burbuja delante, sin caja ---------- */
.etiqueta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-titulos); font-weight: 600; font-size: var(--t-texto); line-height: 1.3; color: var(--teal); }
.etiqueta::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--fam-1); flex: none; }
.profundo .etiqueta { color: var(--crema); }
.etiqueta--familia { color: var(--fam-texto); }
.profundo .etiqueta--familia { color: var(--crema); }
.titulo-con-etiqueta .etiqueta { margin-bottom: var(--e-5); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px; border-radius: var(--r-pildora);
  font-family: var(--f-titulos); font-weight: 600; font-size: var(--t-texto); line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform .15s var(--burbujear), background-color .2s, color .2s, border-color .2s;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0) scale(.98); }
.boton--principal { background: var(--menta); color: var(--teal); }
.boton--principal:hover { background: #4BE8C9; }
.boton--contorno { border-color: var(--teal); color: var(--teal); background: transparent; }
.boton--contorno:hover { background: var(--teal); color: var(--crema); }
.profundo .boton--contorno { border-color: rgba(246, 244, 236, .7); color: var(--crema); }
.profundo .boton--contorno:hover { background: var(--crema); color: var(--teal); }
.boton--chico { min-height: 44px; padding: 10px 20px; font-size: var(--t-texto); }
.boton .flecha { width: 18px; height: 18px; transition: transform .2s var(--entrar); }
.boton:hover .flecha { transform: translateX(3px); }
.enlace { font-family: var(--f-titulos); font-weight: 600; color: var(--teal); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--menta); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; transition: text-decoration-color .2s, gap .2s var(--entrar); }
.enlace:hover { text-decoration-color: currentColor; gap: 12px; }
.profundo .enlace { color: var(--crema); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) var(--e-6); margin-top: var(--e-6); }

/* ---------- Cifra destacada ---------- */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-6) clamp(24px, 4vw, 56px); }
.cifra { display: flex; flex-direction: column; gap: 6px; }
.cifra__valor { font-family: var(--f-titulos); font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-declaracion); line-height: 1; letter-spacing: -0.02em; color: var(--teal); }
.cifra__texto { font-size: var(--t-texto); line-height: 1.45; color: var(--tinta); max-width: 24ch; }
.cifra__fuente { font-size: var(--t-micro); line-height: 1.45; color: var(--gris); }
.profundo .cifra__valor { color: var(--crema); }
.profundo .cifra__texto { color: rgba(246, 244, 236, .9); }
.profundo .cifra__fuente { color: rgba(246, 244, 236, .66); }
.cifra--acento .cifra__valor { color: var(--menta); }
.cifra--acento:not(.profundo *) .cifra__valor { color: var(--teal); }

/* ---------- Bloques abiertos (sin cajas) ---------- */
.bloques { display: grid; gap: var(--e-7) clamp(24px, 4vw, 64px); }
@media (min-width: 760px) { .bloques--2 { grid-template-columns: repeat(2, 1fr); } .bloques--3 { grid-template-columns: repeat(3, 1fr); } .bloques--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bloques--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) {
  .bloques--escalonados > :nth-child(3n+2) { margin-top: var(--e-8); }
  .bloques--escalonados > :nth-child(3n+3) { margin-top: calc(var(--e-8) * 2); }
  .bloques--2.bloques--escalonados > :nth-child(even) { margin-top: var(--e-8); }
  .bloques--2.bloques--escalonados > :nth-child(odd) { margin-top: 0; }
}
.bloque { display: flex; flex-direction: column; gap: var(--e-3); }
.bloque h3 { margin-top: var(--e-2); }
.bloque p { color: var(--tinta); }
.profundo .bloque p { color: rgba(246, 244, 236, .82); }
.bloque .enlace { margin-top: auto; padding-top: var(--e-2); }

/* Iconos: trazo redondo con una burbuja menta */
.icono { width: 48px; height: 48px; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icono .a { fill: var(--fam-1); stroke: none; }
.profundo .icono { stroke: var(--crema); }

/* Lista con burbuja como viñeta */
.lista { list-style: none; display: grid; gap: var(--e-3); }
.lista li { position: relative; padding-left: 26px; }
.lista li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--fam-1); }

/* Lista de enlaces con flecha (industrias, rutas) */
.rutas { list-style: none; border-top: 1px solid var(--linea); }
.rutas li { border-bottom: 1px solid var(--linea); }
.rutas a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 24px; padding: 22px 4px; text-decoration: none; transition: padding .3s var(--entrar), background-color .2s; }
.rutas a:hover { padding-left: 14px; }
.rutas .rutas__nombre { font-family: var(--f-titulos); font-weight: 600; font-size: var(--t-tarjeta); color: var(--teal); }
.rutas .rutas__texto { grid-column: 1; color: var(--gris); font-size: var(--t-texto); }
.rutas .flecha { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; color: var(--teal); transition: transform .3s var(--entrar); }
.rutas a:hover .flecha { transform: translateX(4px); }
.profundo .rutas, .profundo .rutas li { border-color: rgba(246, 244, 236, .16); }
.profundo .rutas .rutas__nombre, .profundo .rutas .flecha { color: var(--crema); }
.profundo .rutas .rutas__texto { color: rgba(246, 244, 236, .7); }

/* Formas que fluyen: esquinas desiguales */
.gota { border-radius: var(--r-gota); overflow: hidden; }
.circulo { border-radius: 50%; overflow: hidden; aspect-ratio: 1; }

/* Cita */
.cita { font-family: var(--f-titulos); font-weight: 500; font-size: var(--t-gancho); line-height: 1.4; color: var(--teal); margin: 0; max-width: 34ch; }
.cita footer { font-family: var(--f-texto); font-size: var(--t-texto); font-weight: 400; color: var(--gris); margin-top: var(--e-5); }
.profundo .cita { color: var(--crema); }

/* Nombres de clientes en gris teal, del mismo alto */
.clientes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) clamp(28px, 4vw, 56px); list-style: none; }
.clientes li { font-family: var(--f-titulos); font-weight: 600; font-size: var(--t-entrada); color: var(--gris); white-space: nowrap; }

/* ---------- Formulario: etiqueta arriba, una línea sin caja ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-family: var(--f-titulos); font-weight: 600; font-size: var(--t-texto); color: var(--teal); }
.campo input, .campo select, .campo textarea {
  font: inherit; color: var(--tinta); background: transparent; border: 0; border-bottom: 2px solid var(--linea);
  border-radius: 0; padding: 10px 2px; min-height: 48px; width: 100%; transition: border-color .2s;
}
.campo textarea { min-height: 112px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--menta-oscura); }
.campo [aria-invalid="true"] { border-bottom-color: var(--error); }
.campo .campo__error { font-size: var(--t-detalle); color: var(--error); min-height: 0; }
.campo .campo__ayuda { font-size: var(--t-detalle); color: var(--gris); }
.profundo .campo label { color: var(--crema); }
.profundo .campo input, .profundo .campo select, .profundo .campo textarea { color: var(--crema); border-bottom-color: rgba(246, 244, 236, .3); }
.profundo .campo select option { color: var(--tinta); }
.formulario { display: grid; gap: var(--e-6) var(--e-6); }
@media (min-width: 700px) { .formulario--2 { grid-template-columns: 1fr 1fr; } .formulario .ancho-total { grid-column: 1 / -1; } }
.aviso-form { font-size: var(--t-texto); padding: 14px 18px; border-radius: var(--r-campo); }
.aviso-form--ok { background: #E1F4EC; color: var(--exito); }
.aviso-form--error { background: #F8E3DE; color: var(--error); }

/* ---------- Preguntas frecuentes ---------- */
.preguntas { border-top: 1px solid var(--linea); max-width: 860px; }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 2px; font-family: var(--f-titulos); font-weight: 600; font-size: var(--t-tarjeta); color: var(--teal); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--linea); flex: none; transition: background-color .2s, transform .3s var(--burbujear); }
.preguntas details[open] summary::after { background: var(--menta); transform: scale(1.3); }
.preguntas .respuesta { padding: 0 2px 28px; max-width: 68ch; }
.profundo .preguntas, .profundo .preguntas details { border-color: rgba(246, 244, 236, .16); }
.profundo .preguntas summary { color: var(--crema); }


body{background:#FDFEFD;padding:clamp(20px,4vw,48px)}.app-generic{max-width:860px;margin:auto}.frsko-calculator h2{font-size:32px;margin-bottom:24px}.frsko-calculator form{display:grid;gap:18px}.frsko-calculator label{display:grid;gap:8px}.frsko-calculator input{border:1px solid #aebdb8;padding:12px;border-radius:12px;font:inherit}.frsko-calculator button{padding:12px 22px;border-radius:40px;border:0;background:#2EE0BE;color:#0A4A4C;font:inherit;cursor:pointer}.frsko-calculator output{padding:24px;background:#D9F7EF;border-radius:20px;font-size:24px}