/* ==========================================================================
   sections.css — hero, biografía, proyectos, contacto y pie
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabeceras de sección
   -------------------------------------------------------------------------- */

.cabecera {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto var(--e-5);
}

.cabecera h2 {
  font-size: var(--t-xl);
}

.cabecera__sub {
  margin-top: var(--e-2);
  color: var(--c-gris);
  font-size: var(--t-md);
}

.etiqueta {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-lila-fuerte);
}

/* --------------------------------------------------------------------------
   Hero
   Split editorial: el bloque de texto a la izquierda y el retrato a sangre por
   la derecha. El retrato es de medio cuerpo, así que la composición centrada
   anterior ya no funciona: no dejaba aire para el mensaje.

   Móvil primero — retrato arriba y texto debajo. A partir de 900 px se abre el
   split a dos columnas.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
}

/* Dos halos lila: uno grande detrás del retrato y otro tenue en la esquina
   opuesta, para que la composición no quede pesada de un solo lado.
   z-index 0 y no negativo: así queda bajo el contenido sin salirse del
   contexto de apilamiento normal. */
.hero__halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 78% 18%,
      var(--c-lila) 0%,
      rgba(218, 184, 255, 0.55) 24%,
      rgba(218, 184, 255, 0) 46%
    ),
    radial-gradient(
      circle at 4% 104%,
      rgba(218, 184, 255, 0.55) 0%,
      rgba(218, 184, 255, 0) 34%
    );
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--e-3);
  justify-items: center;
  width: min(100% - 2rem, var(--ancho));
  padding-bottom: var(--e-4);
  text-align: center;
}

/* En móvil el retrato se recorta a la altura del pecho: a tamaño completo se
   comería media pantalla y dejaría el titular fuera del primer vistazo. */
/* Se corre a la izquierda del centro para despejar el selector de idioma: sin
   esto el cabello le pasa por detrás en la banda del navbar. Menos recorrido
   que en escritorio, porque aquí el hueco hasta la marca es estrecho.

   Con margen y no con translateX: el centrado del grid reparte el margen, así
   que 2.5rem desplazan 1.25rem. Un transform metería el retrato en una capa
   propia y su mask-image deja de componerse bien sobre ella. */
.hero__figura {
  width: min(78vw, 22rem);
  margin-right: 2.5rem;
}

.hero__retrato {
  /* Sube por encima de la línea del navbar: el cabello cruza la barra y la
     escena deja de leerse como dos bandas apiladas. Va en relative y no con
     margen negativo porque el hero centra su contenido en vertical: un cambio
     de altura se repartiría entre arriba y abajo y sólo subiría la mitad. */
  position: relative;
  top: calc(-1 * var(--hero-solape));
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  /* El recorte cuadrado deja un corte horizontal seco a la altura del torso.
     Un desvanecido en el borde inferior lo disuelve y hace que se lea como una
     decisión de composición y no como una imagen cortada. */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

.hero__texto {
  display: grid;
  gap: var(--e-3);
  justify-items: center;
}

.hero__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-lila-fuerte);
}

.hero__raya {
  display: none;
  width: 2.5rem;
  height: 1.5px;
  background: var(--c-lila);
}

.hero__titulo {
  font-size: var(--t-hero);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--c-lila);
}

.hero__lema {
  max-width: 30ch;
  font-size: var(--t-md);
  line-height: 1.5;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2);
}

.hero__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  width: 100%;
  padding-top: var(--e-3);
  border-top: 1px solid var(--c-borde);
}

.hero__redes {
  display: flex;
  gap: 0.6rem;
  list-style: none;
}

.hero__redes a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--c-borde);
  border-radius: var(--r-full);
  transition:
    background-color var(--t-rapido) var(--ease),
    border-color var(--t-rapido) var(--ease);
}

.hero__redes a:hover,
.hero__redes a:focus-visible {
  border-color: var(--c-lila);
  background: rgba(218, 184, 255, 0.3);
}

.hero__dato {
  display: grid;
  gap: 0.15rem;
  line-height: 1.2;
}

.hero__cifra {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero__cifra-pie {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gris);
}

/* Indicador decorativo; en móvil no cabe sin estorbar a los CTA. */
.hero__desliza {
  display: none;
}

/* Reserva la banda inferior donde vive el botón flotante de WhatsApp, para que
   no se superponga a los CTA del hero. */
@media (max-width: 560px) {
  .hero__inner {
    padding-bottom: 5.5rem;
  }

  /* En móvil pequeño el retrato a 22rem empujaba el contador por debajo del
     pliegue y contra el botón flotante de WhatsApp. */
  .hero__figura {
    width: min(66vw, 18rem);
  }

  .hero__acciones {
    gap: 0.6rem;
  }

  .hero__acciones .btn {
    padding-inline: 1.15rem;
  }
}

/* --------------------------------------------------------------------------
   Split editorial
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: center;
    /* justify-items vuelve a stretch: en móvil los bloques van centrados, pero
       aquí la columna del retrato no tiene contenido en flujo (la imagen es
       absoluta) y con "center" colapsaría a cero de ancho. */
    justify-items: stretch;
    /* El inner ocupa el alto útil del hero para que el retrato pueda anclarse
       al borde inferior de la pantalla y salir a sangre. */
    min-height: calc(100svh - var(--nav-h));
    gap: var(--e-4);
    padding-bottom: 0;
    text-align: left;
  }

  /* El retrato entra a sangre por abajo, así que su columna ocupa toda la
     altura del hero y la imagen se ancla al borde inferior. */
  .hero__figura {
    order: 2;
    position: relative;
    align-self: stretch;
    width: auto;
    /* En el split el retrato se coloca con `right`, no desplazando la figura. */
    margin-right: 0;
  }

  .hero__retrato {
    position: absolute;
    /* Se sale del contenedor hacia el margen derecho para acercarse al borde de
       la pantalla, como en el mockup. El tope es 2rem y no más: por encima, el
       cabello se acerca demasiado al selector de idioma. En pantallas de
       1240 px o menos no hay margen que aprovechar y vale 0. */
    right: calc(-1 * clamp(0px, (100vw - var(--ancho)) / 2 - 2rem, 2rem));
    /* Crece hacia la barra de navegación, que en su estado en escena es
       transparente y deja pasar el cabello. La altura va explícita y no con
       top+bottom: en un elemento reemplazado, height:auto resuelve al tamaño
       intrínseco e ignora bottom. */
    top: calc(-1 * var(--hero-solape));
    bottom: auto;
    width: auto;
    height: calc(100% + var(--hero-solape));
    aspect-ratio: auto;
    object-fit: contain;
    object-position: bottom;
    /* Aquí sale a sangre por el borde inferior: no hay corte que disimular. */
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__texto {
    order: 1;
    justify-items: start;
    align-content: center;
    max-width: 34rem;
    gap: var(--e-3);
  }

  .hero__raya {
    display: block;
  }

  .hero__titulo {
    /* El mockup pide 7.5rem; el token llega a 9rem, así que se acota aquí sin
       tocar la escala global. */
    font-size: clamp(4.5rem, 6.2vw, 9rem);
    line-height: 0.86;
    letter-spacing: -0.05em;
  }

  .hero__lema {
    max-width: 26ch;
  }

  .hero__acciones {
    justify-content: flex-start;
  }

  .hero__pie {
    justify-content: flex-start;
    gap: 1.25rem;
  }

  /* Los iconos de redes tienen un aro de 44px que añade aire visual a su
     alrededor; a este tamaño de fuente, el texto se ve más grande que ese
     aro y rompe la alineación óptica con los iconos. */
  .hero__cifra-pie {
    font-size: 0.66rem;
  }

  .hero__desliza {
    position: absolute;
    left: max(1rem, calc(50vw - var(--ancho) / 2));
    bottom: var(--e-3);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-gris);
  }

  .hero__desliza-linea {
    display: block;
    width: 1px;
    height: 2.5rem;
    background: linear-gradient(var(--c-lila), rgba(218, 184, 255, 0));
    animation: desliza 2.4s var(--ease) infinite;
  }
}

@keyframes desliza {
  0%,
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
  50% {
    transform: scaleY(0.6);
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__desliza-linea {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Sobre mí
   -------------------------------------------------------------------------- */

.bio {
  position: relative;
  background: linear-gradient(180deg, var(--c-blanco) 0%, var(--c-lila-tenue) 100%);
}

.bio__grid {
  display: grid;
  gap: var(--e-5);
  align-items: center;
}

@media (min-width: 900px) {
  .bio__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--e-6);
  }
}

.bio__titulo {
  font-size: var(--t-xl);
  margin-bottom: var(--e-3);
}

.bio__texto p {
  margin-bottom: var(--e-2);
  max-width: 60ch;
}

.bio__texto strong {
  font-weight: 600;
}

.bio__lateral {
  display: grid;
  gap: var(--e-3);
}

.bio__foto {
  width: 100%;
  /* El original es muy vertical (675×1200) y a ancho completo dominaría la
     sección. Se recorta a una proporción más contenida: es una imagen de
     apoyo, no la protagonista. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(88, 45, 140, 0.16);
}

/* Los cuatro conceptos que originan el logotipo. */
.conceptos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-2);
}

.conceptos li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(218, 184, 255, 0.5);
  border-radius: var(--r-full);
}

.conceptos img {
  width: 22px;
  height: auto;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Proyectos
   -------------------------------------------------------------------------- */

.proyectos {
  background: var(--c-lila-tenue);
}

.galeria {
  display: grid;
  gap: var(--e-4);
}

@media (min-width: 860px) {
  .galeria {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: var(--e-3);
  }

  /* La tarjeta central se eleva, como en la referencia de sala de galería. */
  .proyecto--centro {
    transform: translateY(-2.5rem);
  }
}

.proyecto__btn {
  display: grid;
  gap: var(--e-2);
  width: 100%;
  text-align: left;
  border-radius: var(--r-lg);
}

.proyecto__marco {
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-blanco);
  box-shadow: 0 10px 30px rgba(88, 45, 140, 0.12);
  transition:
    transform var(--t-medio) var(--ease),
    box-shadow var(--t-medio) var(--ease);
}

.proyecto__marco img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--t-lento) var(--ease);
}

.proyecto__btn:hover .proyecto__marco {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(88, 45, 140, 0.24);
}

.proyecto__btn:hover .proyecto__marco img {
  transform: scale(1.06);
}

.proyecto__pie {
  display: grid;
  gap: 0.2rem;
  padding-inline: 0.35rem;
}

.proyecto__nombre {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.proyecto__tipo {
  font-size: var(--t-xs);
  color: var(--c-gris);
}

.proyecto__ver {
  margin-top: 0.35rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-lila-fuerte);
}

.proyecto__ver::after {
  content: ' →';
  display: inline-block;
  transition: transform var(--t-rapido) var(--ease);
}

.proyecto__btn:hover .proyecto__ver::after {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Otros proyectos
   Deliberadamente más pequeños y de menor contraste: el usuario tiene que
   buscarlos, no deben competir con los tres principales.
   -------------------------------------------------------------------------- */

.otros {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.otros__titulo {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gris);
  text-align: center;
  margin-bottom: var(--e-3);
}

.otros__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e-2);
  max-width: 640px;
  margin-inline: auto;
}

.otro {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.55);
  color: var(--c-gris);
  transition:
    color var(--t-rapido) var(--ease),
    border-color var(--t-rapido) var(--ease),
    background-color var(--t-rapido) var(--ease),
    transform var(--t-rapido) var(--ease);
}

.otro:hover {
  color: var(--c-negro);
  background: var(--c-blanco);
  border-color: var(--c-lila);
  transform: translateY(-2px);
}

.otro__n {
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-lila-fuerte);
}

.otro__nombre {
  font-size: var(--t-sm);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */

.contacto {
  position: relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(218, 184, 255, 0.55) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(218, 184, 255, 0.4) 0%, transparent 45%),
    var(--c-blanco);
}

.contacto__tarjeta {
  display: grid;
  gap: var(--e-4);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--r-lg);
}

@media (min-width: 880px) {
  .contacto__tarjeta {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-6);
    align-items: start;
  }
}

.contacto__intro h2 {
  font-size: var(--t-xl);
  margin-block: 0.4rem var(--e-2);
}

.contacto__texto {
  color: var(--c-gris);
  max-width: 40ch;
}

.contacto__datos {
  display: grid;
  gap: 0.4rem;
  margin-top: var(--e-3);
  font-size: var(--t-sm);
}

.contacto__datos a {
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-rapido) var(--ease);
}

.contacto__datos a:hover {
  border-bottom-color: var(--c-lila-fuerte);
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.pie {
  padding-top: var(--e-5);
  background: var(--c-negro);
  color: var(--c-blanco);
}

.pie__grid {
  display: grid;
  gap: var(--e-4);
}

@media (min-width: 720px) {
  .pie__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--e-5);
  }
}

.pie__marca img {
  width: 42px;
  margin-bottom: var(--e-1);
}

.pie__nombre {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pie__tagline {
  font-size: var(--t-sm);
  color: var(--c-lila);
}

.pie__h {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-lila);
  margin-bottom: var(--e-2);
}

.pie__lista {
  display: grid;
  gap: 0.5rem;
  font-size: var(--t-sm);
}

.pie__lista a {
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-rapido) var(--ease);
}

.pie__lista a:hover {
  border-bottom-color: var(--c-lila);
}

.pie__base {
  margin-top: var(--e-5);
  padding-block: var(--e-2);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.6);
  /* Deja aire para que el botón de WhatsApp no tape el texto legal. */
  padding-right: 4.5rem;
}