/* AIFER · portada: titular, accesos a las cuatro áreas y el trazo. */

.portada {
  /* Cuatro paradas del trazo (cian → menta → lima), una por área */
  --area-ia: #16d4e6;
  --area-automatizacion: #29dcb8;
  --area-marketing: #58e089;
  --area-web: #a3e05a;
  padding-block: clamp(1rem, 0.25rem + 3vw, 3rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  overflow: clip;
}

.portada__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "trazo" "texto" "atajos";
}
.portada__texto { grid-area: texto; }
.portada__trazo { grid-area: trazo; }
.portada__atajos { grid-area: atajos; }

/* Titular: la tipografía condensada es la protagonista */
.portada__titulo {
  max-width: 12ch;
  font-family: var(--f-display);
  font-size: clamp(3rem, 0.5rem + 12.5vw, 4.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.portada__entradilla {
  max-width: 34em;
  margin-top: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  color: var(--gris-oscuro);
}
/* La pregunta de entrada al formulario: el trazo la separa del texto */
.portada__pregunta {
  position: relative;
  margin-top: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  padding-top: var(--s-5);
}
.portada__pregunta::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 4.5rem; height: 4px;
  border-radius: var(--r-pill);
  background: var(--trazo);
}
.portada__pregunta-titulo {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--blanco);
}
.portada__pregunta-nota {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  color: var(--gris-oscuro);
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* El trazo */
.portada__trazo { pointer-events: none; }
.trazo { width: 100%; height: auto; overflow: visible; }
.conexion { transition: opacity .3s var(--ease); }

/* Accesos directos a las cuatro áreas */
.portada__atajos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s-5);
  row-gap: var(--s-1);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: var(--s-4);
  border-top: 1px solid var(--linea-oscura);
}
.portada__atajos-intro {
  font-size: var(--t-small);
  color: var(--gris-oscuro);
}
.portada__atajos-lista {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-5);
  row-gap: 0;
}
.atajo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--blanco);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color .2s var(--ease);
}
.atajo:hover { text-decoration-color: currentColor; }
.atajo__glifo { flex: none; width: 1.625rem; height: auto; }
.atajo__glifo path { fill: none; stroke: var(--area); stroke-width: 2.6; stroke-linecap: round; }
.atajo__glifo circle { fill: var(--area); }
.atajo--ia { --area: var(--area-ia); }
.atajo--automatizacion { --area: var(--area-automatizacion); }
.atajo--marketing { --area: var(--area-marketing); }
.atajo--web { --area: var(--area-web); }

/* Al señalar un área, su conexión queda en primer plano */
.portada:has(.atajo--ia:is(:hover, :focus-visible)) .conexion:not(.conexion--ia),
.portada:has(.atajo--automatizacion:is(:hover, :focus-visible)) .conexion:not(.conexion--automatizacion),
.portada:has(.atajo--marketing:is(:hover, :focus-visible)) .conexion:not(.conexion--marketing),
.portada:has(.atajo--web:is(:hover, :focus-visible)) .conexion:not(.conexion--web) { opacity: .18; }

/* Móvil: el trazo arriba a la derecha, pequeño, sin empujar el titular fuera */
@media (max-width: 59.99em) {
  .portada__trazo {
    justify-self: end;
    width: min(50%, 19rem);
    margin-right: calc(-0.5 * var(--gutter));
    margin-bottom: var(--s-3);
  }
  .portada__acciones .boton { flex: 1 1 15rem; }
}
@media (max-width: 37.49em) {
  .portada__atajos { display: block; }
  .portada__atajos-lista { flex-direction: column; align-items: flex-start; margin-top: var(--s-1); }
}

@media (min-width: 60em) {
  .portada {
    display: flex;
    min-height: calc(100svh - var(--header-h));
  }
  .portada__rejilla {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    grid-template-areas: none;
    column-gap: var(--gutter);
  }
  .portada__texto {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
    align-self: center;
  }
  .portada__titulo { max-width: none; font-size: clamp(4rem, 2rem + 5vw, 6.75rem); }
  .portada__trazo {
    grid-column: 8 / -1;
    grid-row: 1;
    align-self: end;
    margin-right: calc(-1 * var(--gutter));
  }
  /* Los accesos, bajo el trazo: cada conexión lleva a un área */
  .portada__atajos {
    grid-column: 8 / -1;
    grid-row: 2;
    display: block;
    margin-top: var(--s-6);
  }
  .portada__atajos-lista {
    flex-direction: column;
    align-items: flex-start;
    margin-top: var(--s-1);
  }
}
@media (min-width: 75em) {
  .portada__atajos-lista {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: var(--s-6);
  }
  .atajo { white-space: nowrap; }
}
/* Secuencia de carga: el único movimiento automático de la web, una sola vez */
@media (prefers-reduced-motion: no-preference) {
  .trazo__linea {
    stroke-dasharray: 1 2;
    animation: portada-dibujar var(--dur, .9s) var(--ease) var(--retraso, 0s) both;
  }
  .trazo__punto {
    transform-box: fill-box;
    transform-origin: center;
    animation: portada-punto .4s var(--ease) var(--retraso, 0s) both;
  }

  .trazo__espina { --retraso: .1s; --dur: 1.3s; }
  .conexion--ia { --t0: .45s; }
  .conexion--automatizacion { --t0: .7s; }
  .conexion--marketing { --t0: .95s; }
  .conexion--web { --t0: 1.2s; }

  .trazo__linea--pre { --retraso: var(--t0); --dur: .3s; }
  .trazo__punto--inicio { --retraso: calc(var(--t0) + .1s); }
  .trazo__linea--conexion { --retraso: calc(var(--t0) + .2s); }
  .trazo__punto--fin { --retraso: calc(var(--t0) + .95s); }
  .trazo__linea--post { --retraso: calc(var(--t0) + 1.05s); --dur: .3s; }
  .trazo__punto--post { --retraso: calc(var(--t0) + 1.25s); }
}

@keyframes portada-dibujar {
  from { stroke-dashoffset: 1.01; }
  to { stroke-dashoffset: 0; }
}
@keyframes portada-punto {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}