/* Pantallas, igual que en Framer: escritorio ≥1200 · tableta 810–1199 · móvil ≤809 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-weight: 400;
  font-feature-settings: var(--rasgos);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: clip;
  background: var(--fondo);
}

/* ---------- Textos ---------- */
.t-h1, .t-h2, .t-precio, .menu__enlaces a { font-weight: 700; }
.t-entrada, .t-cuerpo, .pie__marca > p { font-weight: 400; }
.t-boton, .t-antetitulo, .t-tarjeta, .t-peque { font-weight: 500; }
.t-h1 { font-size: 68px; line-height: 1.2; letter-spacing: -.04em; text-align: center; }
.t-h2 { font-size: 54px; line-height: 1.1; letter-spacing: -.03em; }
.t-entrada { font-size: 22px; line-height: 1.3; letter-spacing: -.02em; color: var(--gris); }
.t-precio { font-size: 40px; line-height: 1.1; letter-spacing: -.03em; }
.t-tarjeta { font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.t-cuerpo { font-size: 16px; line-height: 1.4; letter-spacing: -.02em; color: var(--gris); }
.t-boton { font-size: 16px; line-height: 1.2; letter-spacing: -.02em; }
.t-peque { font-size: 14px; line-height: 1.2; letter-spacing: -.02em; }
.t-antetitulo { font-size: 16px; line-height: 1.2; letter-spacing: -.02em; color: var(--azul); text-align: center; }
.gris-claro { color: var(--gris-claro); }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .t-h1 { font-size: 54px; }
  .t-h2 { font-size: 44px; }
  .t-entrada { font-size: 20px; }
}
@media (max-width: 809.98px) {
  .t-h1 { font-size: 35px; }
  .t-h2 { font-size: 40px; }
  .t-entrada { font-size: 16px; }
  .t-precio { font-size: 36px; }
  .t-tarjeta { font-size: 16px; }
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 100px;
  background: var(--azul);
  color: var(--sobre-acento);
  text-align: center;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.boton:hover { background: var(--azul-hover); }
.boton--secundario { background: var(--secundario); color: var(--secundario-texto); }
.boton--secundario:hover { background: var(--secundario-hover); }

/* ---------- Apariciones ---------- */
/* Al cargar: fundido y 20 px (muelle sin rebote, 1 s) */
.entra {
  opacity: .001;
  translate: 0 20px;
  animation: entra var(--duracion, 1s) var(--muelle) var(--retraso, 0s) forwards;
}
@keyframes entra { to { opacity: 1; translate: 0 0; } }

/* Al verse la mitad: .aparece + variante; .visto la dispara */
.aparece { transition: opacity var(--duracion, .4s) var(--muelle) var(--retraso, 0s), scale var(--duracion, .4s) var(--muelle) var(--retraso, 0s), translate var(--duracion, .4s) var(--muelle) var(--retraso, 0s); }
.aparece--escala { opacity: 0; scale: .8; }
.aparece--sube { opacity: 0; translate: 0 20px; }
.aparece--fundido { opacity: 0; }
.aparece.visto { opacity: 1; scale: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .entra { animation: none; opacity: 1; translate: none; }
  .aparece { transition: none; opacity: 1; scale: 1; translate: none; }
}

/* ---------- Cabecera de sección (antetítulo, título, entrada) ---------- */
.cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: center;
}
.cabecera__textos { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.cabecera .t-h2 { width: 100%; max-width: 630px; text-align: center; }
.cabecera .t-entrada { width: 100%; max-width: 500px; text-align: center; }
.cabecera .t-antetitulo { width: 100%; max-width: 500px; }
@media (min-width: 810px) and (max-width: 1199.98px) { .cabecera .t-h2 { max-width: 530px; } }
@media (max-width: 809.98px) { .cabecera .t-h2, .cabecera .t-entrada, .cabecera .t-antetitulo { max-width: none; } }

.seccion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 100%;
  padding: 100px var(--margen);
  overflow: clip;
  position: relative;
}

/* ---------- Navegación ---------- */
.nav { position: fixed; z-index: 10; left: 50%; }
.nav--escritorio { top: calc(min(100vh, 100%) * .075); transform: translate(-50%, -50%); }
.nav__pastilla {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 50px;
  padding: 20px 20px 20px 15px;
  border-radius: 10000px;
  background: var(--pastilla);
  box-shadow: var(--sombra-nav);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.logo { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.logo img { width: 20px; height: 20px; }
.nav__separador { width: 2px; height: 20px; border-radius: 1000px; background: var(--separador); }
.nav__enlaces { display: flex; align-items: center; gap: 10px; }
.nav__enlaces a { color: var(--gris-nav); white-space: nowrap; }
.nav--movil { display: none; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .nav--escritorio { top: 30px; transform: translate(-50%, 0); }
}
@media (max-width: 809.98px) {
  .nav--escritorio { display: none; }
  .nav--movil { display: block; top: 0; left: 0; width: 100%; }
}
.nav__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 20px;
  background: var(--pastilla);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nav__menu-boton { position: relative; width: 14px; height: 14px; }
.nav__menu-boton span {
  position: absolute; inset: 0;
  background: var(--gris);
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
  transition: opacity .2s ease, scale .2s ease;
}
.nav__abrir { --icono: url("../img/svg/menu.svg"); }
.nav__cerrar { --icono: url("../img/svg/cerrar.svg"); inset: 1px !important; opacity: 0; scale: .8; }
.menu-abierto .nav__abrir { opacity: 0; scale: .8; }
.menu-abierto .nav__cerrar { opacity: 1; scale: 1; }

/* Menú móvil a pantalla completa */
.menu {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 0 28px;
  background: var(--fondo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.menu-abierto .menu { display: flex; }
.menu__hueco { height: 55px; width: 100%; flex: none; }
.menu__enlaces {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; flex: 1; padding: 28px 28px 0;
  opacity: 0;
}
.menu__enlaces a { font-size: 36px; line-height: 1.2; letter-spacing: -.04em; color: var(--tinta); }
.menu__cta { width: 100%; padding: 0 28px; opacity: 0; }
.menu__cta .boton { width: 100%; height: 40px; }
.menu-abierto .menu__enlaces { animation: funde .45s var(--muelle) .08s forwards; }
.menu-abierto .menu__cta { animation: funde .45s var(--muelle) .2s forwards; }
@keyframes funde { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 1 · Portada ---------- */
.portada {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 150px;
  position: relative;
}
.portada__arriba { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; z-index: 2; }
.portada__icono { width: 110px; height: 110px; }
.portada__textos { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 30px var(--margen); }
.portada__textos .t-h1 { width: 100%; }
.portada__textos .t-entrada { width: 100%; max-width: 500px; text-align: center; }
.portada__acciones { display: flex; justify-content: center; gap: 10px; width: 100%; padding: 0 var(--margen); }
.portada__imagen { width: 100%; aspect-ratio: 1272 / 1019; flex: none; position: relative; will-change: transform; }

@media (max-width: 809.98px) {
  .portada { padding-top: 130px; }
  .portada__icono { width: 85px; height: 85px; }
  .portada__textos { padding: 20px var(--margen) 30px; }
  .portada__textos .t-entrada { max-width: none; }
  .portada__imagen { width: 200%; max-width: 810px; }
}

/* ---------- 2 · Todo en una app ---------- */
.una-app {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 1400px;
  padding: 100px var(--margen);
  position: relative;
}
.una-app__contenido {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 100px;
  flex: 1 0 0;
  width: 1px;
  max-width: 1000px;
  overflow: clip;
  position: relative;
}
.una-app__titulo { width: 630px; max-width: 100%; }
.apps { display: flex; align-items: center; gap: 30px; position: relative; }
.apps__iconos { display: flex; align-items: center; gap: 30px; overflow: clip; position: relative; z-index: 1; }
.apps__iconos figure { width: 120px; aspect-ratio: 1; flex: none; }
.apps__linea {
  position: absolute; z-index: 0; left: 0; top: calc(50% - 4px);
  width: 200%; height: 8px; background: var(--linea);
}
.una-app__grande {
  position: absolute;
  z-index: 1;
  width: 32%;
  aspect-ratio: 1;
  top: 69%;
  right: -88px;
  pointer-events: none;
  transform: translateX(var(--x, 50px)) translateY(-50%) rotate(-26deg);
}
.apps__conector, .apps__grande-movil { display: none; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .una-app__contenido { max-width: 700px; }
  .una-app__titulo { width: 530px; }
  .apps__iconos figure { width: 90px; }
  .una-app__grande { top: auto; bottom: -8px; right: -91px; transform: translateX(var(--x, 50px)) rotate(-26deg); }
}
@media (max-width: 809.98px) {
  .una-app { flex-direction: column; padding: 50px var(--margen) 0; }
  .una-app__contenido { flex: none; width: 100%; max-width: 500px; gap: 50px; }
  .una-app__titulo { width: 100%; }
  .apps { flex-direction: column; gap: 0; width: 100%; }
  .apps__iconos { gap: 15px; width: 100%; justify-content: center; }
  .apps__iconos figure { width: auto; flex: 1 0 0; }
  .apps__linea, .una-app__grande { display: none; }
  .apps__conector { display: block; width: 78%; aspect-ratio: 1.71475; }
  .apps__conector svg { display: block; width: 100%; height: 100%; }
  .apps__grande-movil { display: block; width: 50%; aspect-ratio: 1; position: relative; z-index: 1; }
}

/* ---------- 3 · Todo en un sitio ---------- */
.cabecera--junta { gap: 10px; }
.moviles {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: clip;
  position: relative;
}
.moviles__central { width: 350px; aspect-ratio: 758 / 1481; position: relative; z-index: 2; flex: none; }
.moviles__lado {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 310px;
  aspect-ratio: 791 / 1522;
  pointer-events: none;
  transform: translate(-50%, -50%) translate(var(--x, 0px), var(--y, 0px));
}
.moviles__lado--izq { left: 29%; }
.moviles__lado--der { left: 71%; }
@media (max-width: 809.98px) {
  .moviles__central { width: 80%; }
  .moviles__lado { display: none; }
}

/* ---------- 4 · Precios ---------- */
.planes { display: flex; justify-content: center; width: 100%; max-width: 800px; overflow: clip; }
.planes__caja {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  width: 1px;
  padding: 20px;
  border-radius: 38px;
  background: var(--tarjeta);
  position: relative;
}
.planes__caja::after, .plan--premium::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--borde-precios);
}
.plan--premium::after { border: 2px dashed var(--borde-premium); }
.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  height: 550px;
  overflow: clip;
  position: relative;
}
.plan--gratis { flex: 1 0 0; width: 1px; padding: 40px 20px 40px 30px; }
.plan--premium {
  flex: none;
  width: 395px;
  padding: 40px;
  border-radius: 35px;
  background: var(--tarjeta-alta);
  transform: translate(var(--x, 150px), var(--y, 60px)) rotate(var(--r, 5deg));
}
.plan__contenido { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
.plan__icono { width: 40px; height: 40px; }
.plan__titulo { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.plan__precio { display: flex; align-items: center; gap: 10px; width: 100%; }
.plan__precio .t-cuerpo { flex: 1; }
.divisor { width: 100%; height: 2px; background: var(--divisor); flex: none; }
.plan__ventajas { display: flex; flex-direction: column; gap: 10px; width: 100%; list-style: none; margin: 0; padding: 0; }

@media (max-width: 809.98px) {
  .planes__caja { flex-direction: column; padding: 10px; border-radius: 32px; }
  .plan { height: auto; gap: 40px; }
  .plan--gratis { flex: none; width: 100%; padding: 20px; }
  .plan--premium { width: 100%; padding: 25px; border-radius: 26px; }
}

/* ---------- 5 · Opiniones ---------- */
.opiniones { display: flex; align-items: flex-start; justify-content: center; gap: 10px; }
.opiniones__columna { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.opinion {
  display: flex;
  width: 395px;
  padding: 20px;
  border-radius: 38px;
  background: var(--tarjeta);
}
.opinion__contenido { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex: 1; padding: 20px; }
.opinion__textos { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.opinion .divisor { background: var(--divisor-suave); }
.opinion__autor { display: flex; align-items: center; gap: 10px; width: 100%; }
.opinion__autor img { width: 32px; height: 32px; border-radius: 100%; flex: none; }
.opinion__autor p { color: var(--tinta); flex: 1; }
.opinion .t-tarjeta { color: var(--tinta); }

@media (max-width: 809.98px) {
  .opiniones { flex-direction: column; width: 100%; }
  .opiniones__columna { width: 100%; }
  .opinion { width: 100%; }
  .opinion__contenido { padding: 10px; }
}

/* ---------- 6 · Preguntas ---------- */
.preguntas { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 600px; }
.pregunta {
  width: 100%;
  border-radius: 18px;
  background: var(--tarjeta);
  overflow: clip;
  cursor: pointer;
  transition: border-radius .35s var(--muelle);
}
.pregunta__cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 20px;
  text-align: left;
  transition: padding .35s var(--muelle);
}
.pregunta__cabeza .t-boton { flex: 1; color: var(--tinta); }
.pregunta__mas {
  width: 14px; height: 14px; flex: none;
  background: var(--tinta);
  -webkit-mask: url("../img/svg/mas.svg") center / contain no-repeat;
  mask: url("../img/svg/mas.svg") center / contain no-repeat;
  transition: rotate .35s var(--muelle), width .35s var(--muelle), height .35s var(--muelle);
}
.pregunta__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--muelle); }
.pregunta__respuesta { overflow: hidden; min-height: 0; }
.pregunta__respuesta p {
  padding: 10px 20px 20px;
  opacity: 0;
  filter: blur(4px);
  transition: opacity .35s var(--muelle), filter .35s var(--muelle);
}
.pregunta.abierta { border-radius: 24px; }
.pregunta.abierta .pregunta__cabeza { padding-bottom: 0; }
.pregunta.abierta .pregunta__mas { width: 20px; height: 20px; rotate: 45deg; }
.pregunta.abierta .pregunta__cuerpo { grid-template-rows: 1fr; }
.pregunta.abierta .pregunta__respuesta p { opacity: 1; filter: blur(0); }

/* ---------- 7 · Descarga ---------- */
.descarga { padding: 100px 0 0; }
.descarga .cabecera { padding: 0 var(--margen); }
.descarga__icono { width: 120px; height: 120px; }
.descarga__escena { display: flex; justify-content: center; width: 100%; overflow: clip; position: relative; will-change: transform; }
.descarga__mano { width: 994px; aspect-ratio: 1448 / 1086; flex: none; }
@media (min-width: 810px) and (max-width: 1199.98px) {
  .descarga__icono { width: 90px; height: 90px; }
  .descarga__mano { width: 786px; }
}
@media (max-width: 809.98px) {
  .descarga__icono { width: 90px; height: 90px; }
  .descarga__mano { width: 484px; }
}

/* ---------- Pie ---------- */
.pie { display: flex; justify-content: center; width: 100%; background: var(--fondo); }
.pie__contenido {
  display: flex;
  flex-direction: column;
  gap: 150px;
  width: 100%;
  max-width: 1100px;
  padding: 50px var(--margen) 28px;
}
.pie__arriba { display: flex; justify-content: space-between; align-items: flex-start; }
.pie__marca { display: flex; flex-direction: column; gap: 10px; width: 250px; }
.pie__marca > p { color: var(--gris); }
.pie__enlaces { display: flex; align-items: center; gap: 70px; }
.pie__grupo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pie__grupo a { color: var(--gris); }
.pie__grupo a[aria-current] { color: var(--azul); }
.pie__legal { padding-top: 28px; }
@media (max-width: 809.98px) {
  .pie__arriba { flex-direction: column; gap: 40px; }
  .pie__enlaces { flex-direction: column; align-items: flex-start; gap: 40px; }
}

/* ---------- Añadidos IA360 Pymes ---------- */
/* Aviso de web no oficial: franja fija bajo el titular y nota en el pie */
.aviso-oficial {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 8px 14px; border-radius: 100px;
  background: var(--aviso); color: var(--azul-hover);
  font-size: 13px; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; text-align: center;
}
.aviso-oficial::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); flex: none; }
.plan__precio .t-precio { white-space: nowrap; }
.opinion__autor img { border-radius: 100%; }
.fuentes { width: 100%; max-width: 600px; text-align: center; }
.fuentes a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }
.pie__nota { max-width: 760px; }
@media (max-width: 809.98px) { .aviso-oficial { font-size: 12px; margin: 14px var(--margen) 0; } }

/* ---------- Registro (ventana sobre la página) ---------- */
.registro {
  width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 32px; background: var(--tarjeta-alta); color: var(--tinta);
  box-shadow: 0 40px 80px -20px rgb(24 24 24 / .25);
}
.registro::backdrop { background: rgb(24 24 24 / .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.registro[open] { animation: registro-entra .45s var(--muelle); }
@keyframes registro-entra { from { opacity: 0; translate: 0 20px; } }
.registro__caja { display: flex; flex-direction: column; gap: 24px; padding: 36px; position: relative; }
.registro__cabeza { display: flex; flex-direction: column; gap: 10px; }
.registro__cabeza img { width: 40px; height: 40px; }
.registro__cerrar { position: absolute; top: 22px; right: 22px; width: 36px; height: 36px; border-radius: 50%; background: var(--secundario); }
.registro__cerrar::before { content: ""; position: absolute; inset: 11px; background: var(--tinta); -webkit-mask: url("../img/svg/cerrar.svg") center / contain no-repeat; mask: url("../img/svg/cerrar.svg") center / contain no-repeat; }
.registro__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.registro__campos[hidden], .registro__cabeza[hidden] { display: none; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo > span, .canal legend { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.campo i { font-style: normal; color: var(--gris); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--tinta);
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linea); background: var(--fondo);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo textarea { resize: vertical; min-height: 84px; line-height: 1.4; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgb(27 27 27 / .15); }
.revisado .campo :invalid { border-color: #B3261E; }
.canal { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
.canal legend { margin-bottom: 8px; padding: 0; width: 100%; }
.canal label, .rgpd { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.4; color: var(--gris); }
.canal input, .rgpd input { accent-color: var(--azul); width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.rgpd a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }
.revisado .rgpd input:invalid { outline: 2px solid #B3261E; outline-offset: 2px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.registro__error { color: #B3261E; }
.registro__enviar { height: 44px; width: 100%; }
.registro__enviar:disabled { opacity: .6; cursor: progress; }
.registro__hecho { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding-top: 12px; }
.registro__hecho[hidden] { display: none; }
@media (max-width: 809.98px) {
  .registro__caja { padding: 28px 22px; }
  .registro__campos { grid-template-columns: 1fr; }
}
.registro [hidden] { display: none !important; }