/* =============================================
   FUENTES
   ============================================= */
@font-face {
  font-family: "FutureBK";
  src: url(/estilos/fonts/Futurebk.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =============================================
   BÁSICOS
   ============================================= */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #000;
  background: #fff;
  overflow-x: hidden;
}

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: 2rem 8vw;
  overflow: hidden;
  background: #fff;
}

.hero-stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
  z-index: 10;
}

.hero-logo-text {
  margin: 0;
  font-family: "FutureBK", sans-serif;
  font-size: clamp(6rem, 14vw, 16rem);
  letter-spacing: .1rem;
  line-height: 1;
  color: #000;
  transition: color ease .5s;
}
.hero-logo-text:hover { color: #E57F12; }

/* =============================================
   NAV (arriba derecha)
   ============================================= */
.main-nav {
  position: absolute;
  top: 2.5rem;
  right: 2vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  font-size: 1.2rem;
  transition: all ease .3s;
  z-index: 20;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: #E57F12;
  text-decoration: none;
  white-space: nowrap;
}
.main-nav a:hover { color: #9CCDCE; }

.icono-links { display: inline-flex; align-items: center; }

.icono-links img,
.link-ver-mas-icono img {
  width: 1rem;
  height: 1rem;
}

.link-ver-mas-icono img { display: block; }

.icono-links .icono-links-normal { display: inline-block; }
.icono-links .icono-links-hover  { display: none; }
.main-nav a:hover .icono-links-normal { display: none; }
.main-nav a:hover .icono-links-hover  { display: inline-block; }

/* =============================================
   RECURSOS HERO
   ============================================= */
.hero-recursos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.hero-recurso img {
  display: block;
  max-width: 100%;
  height: auto;
}

.hero-recurso-izq {
  position: absolute;
  left: 8vw;
  bottom: 16vh;
}
.hero-recurso-izq img { width: clamp(25.875rem, 29vw, 29rem); }

.hero-recurso-der {
  position: absolute;
  right: 9vw;
  top: 0vh;
}
.hero-recurso-der img { width: clamp(25.875rem, 24vw, 29rem); }



/* =============================================
   LAYOUT COMÚN — ESPACIO, SERVICIOS, PRÓXIMAMENTE
   ============================================= */
.section {
  /* dar más aire vertical y horizontal a las secciones grandes */
  padding: 10rem 12vw;
}

/* Contenedor interno centrado */
.section-espacio-intro,
.section-servicios-intro,
.section-proximamente {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  align-items: center;
  justify-content: center;
  /* ampliar ancho máximo para ocupar más horizontalmente en escritorio */
  max-width: 90rem;          /* Evita que se ensanche infinito */
  margin: 0 auto;            /* Lo centra en pantalla */
}

.section-servicios-intro {
  min-height: 30rem;            /* aumentar para equiparar con nueva altura de imagen */
  align-items: stretch;         /* columnas llenan toda la altura */
}

/* =============================================
   ESPACIO
   ============================================= */
.section-espacio-text {
  flex: 1 1 20rem;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: default;
}

.section-espacio-recurso {
  flex: 1 1 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-espacio-recurso img {
  max-width: 100%;
  max-height: 30rem;   /* imagen más grande para escalar la sección */
  object-fit: contain;
}

/* =============================================
   SERVICIOS
   ============================================= */
.section-servicios-titulo {
  flex: 1 1 20rem;
  display: flex;
  justify-content: left;     
  align-items: center;         
  cursor: default;
}

.section-servicios-text {
  flex: 1 1 20rem;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: default;
}

/* Títulos compartidos */
.section-espacio-text h2,
.section-servicios-titulo h2 {
  color: #E57F12;
  font-size: 4rem;           
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: .1875rem;
  text-underline-offset: .375rem;
}
.section-espacio-text h2     { margin: 0 0 1.5rem; }
.section-servicios-titulo h2 { margin: 0; }

/* Párrafos compartidos */
.section-espacio-text p,
.section-servicios-text p {
  margin: 0 0 0.8rem;
  line-height: 1.5;
  font-size: 1rem;
}

/* =============================================
   VER MÁS
   ============================================= */
.link-ver-mas {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: 1rem;
  font-size: 1rem;
}
.link-ver-mas a { text-decoration: none; color: inherit; }
.link-ver-mas-texto { color: #E57F12; }
.link-ver-mas-texto:hover { text-decoration: underline; }

/* =============================================
   PRÓXIMAMENTE
   ============================================= */
.proximamente-media {
  flex: 1 1 35rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 4.5rem; 
}

.proximamente-slider {
  position: relative;
  width: 100%;
  max-width: 20rem;
  height: 23.75rem;
}

.slider-frame {
  position: absolute;
  inset: 0;
  border: .1875rem solid #E57F12;
  background: transparent;
  z-index: 1;
}
.slider-frame--1 { transform: translate(1rem, 1rem); }
.slider-frame--2 { transform: translate(2rem, 2rem); }

.proximamente-track {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: #fff;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(2rem);
  transition: opacity .4s ease, transform .4s ease;
}
.slide--active { opacity: 1; transform: translateX(0); }

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.proximamente-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  font-size: 2.5rem; 
  cursor: pointer;
  z-index: 10;
}

.proximamente-arrow-left  { 
  left: 0.5rem; 
}

.proximamente-arrow-right { 
  right: -1rem; 
}
.proximamente-content {
  flex: 1 1 20rem;
  max-width: 25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.proximamente-content h2 {
  text-transform: lowercase;
  color: #E57F12;
  font-size: 3rem;
  margin: 0 0 1.5rem;
  cursor: default;
}

.proximamente-content p {
  max-width: 22.5rem;
  margin: 0 0 1.5rem;
  cursor: default;
  font-size: 1.1rem;
}

.proximamente-down-arrow { font-size: 4rem; margin: .5rem 0 1.5rem; }

.proximamente-lista { list-style: none; padding: 0; margin: 0; font-size: 1rem;}
.proximamente-lista li { margin-bottom: .5rem; }
.proximamente-lista a { color: #000; text-decoration: underline; }

/* =============================================
   FOOTER
   ============================================= */
.footer-top {
  background: #9CCDCE;
  color: #000;
  padding: 3rem;
}

.footer-top-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2.5rem; 
  margin-left: auto;
  margin-right: auto;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: 1rem;
}
.footer-nav a {
  text-decoration: none;
  color: #000;
  text-transform: lowercase;
}

.footer-contact p { margin: .3rem 0; font-size: 1rem; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  font-size: 1rem;
  margin: 0 auto;
}
.footer-legal a { text-decoration: none; color: #000; }

/* =============================================
   RESPONSIVE
   ============================================= */

@media (min-width: 1025px) {
  .section-servicios-titulo {
    padding-right: 2rem;
  }
}

@media (max-width: 1024px) {
  /* Sustituimos variables por clases directas */
  .section {
    padding: 6rem 6vw;
  }
  /* volver a un ancho razonable en tablet y móviles grandes */
  .section-espacio-intro,
  .section-servicios-intro,
  .section-proximamente {
    max-width: 70rem;
  }
  .hero {
    padding: 2rem 6vw;
  }
  /* mantengo las posiciones originales de los recursos para que no se muevan */
}

@media (max-width: 768px) {
  /* Mantienen el padding lateral de 6vw que heredan del de 1024px */
  .section {
    padding: 4rem 6vw;
  }
  
  /* ========================================
     HERO — MODO ZOOM PROPORCIONAL EN MÓVILES
     Solo el contenedor cambia de tamaño;
     todos los elementos mantienen posición relativa.
     ======================================== */
  .hero {
    /* el contenedor escala proporcionalmente con el ancho de la pantalla */
    width: 100vw;
    height: auto;
    aspect-ratio: 1 / 1.3;  /* proporción base móvil: 375px x ~485px */
    padding: 0;
    overflow: visible;
    margin-left: calc(-50vw + 50%);
  }
  
  .hero-stage {
    /* contenedor interno también con la misma proporción */
    width: 100%;
    height: 100%;
    min-height: auto;
    position: relative;
  }
  
  /* logo centrado, tamaño relativo al ancho de la pantalla */
  .hero-logo {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .hero-logo-text {
    /* tamaño del texto basado en vw para escalar con la pantalla */
    font-size: 16vw;
    margin: 0;
  }
  
  /* contenedor de recursos: cubre todo el espacio, posición absoluta */
  .hero-recursos {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    pointer-events: none;
    z-index: 5;
  }
  
  /* ilustración izquierda */
  .hero-recurso-izq {
    position: absolute;
    left: 8%;
    bottom: 12%;
    width: 30vw;
    height: auto;
  }
  
  .hero-recurso-izq img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* ilustración derecha */
  .hero-recurso-der {
    position: absolute;
    right: 5%;
    top: 8%;
    width: 28vw;
    height: auto;
  }
  
  .hero-recurso-der img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* menú de navegación: posición relativa al contenedor del hero */
  .main-nav {
    position: absolute;
    top: 2.5%;
    right: 3%;
    font-size: 3.2vw;
  }
  
  .proximamente-slider {
    max-width: min(20rem, 82vw);
    height: clamp(18rem, 95vw, 23.75rem);
  }
  
  .section-espacio-text,
  .section-servicios-text,
  .proximamente-content {
    max-width: 100%;
  }

  /* apilar el slider debajo del texto en móviles */
  .section-proximamente {
    flex-direction: column-reverse;
    align-items: center;
  }
  
  .proximamente-media,
  .proximamente-content {
    width: 100%;
  }

  /* Alineación natural en móvil */
  .section-servicios-titulo {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  /* Mantienen el padding vertical de 4rem de 768px, pero estrechan el lateral a 5vw */
  .section {
    padding: 4rem 5vw;
  }
  .hero {
    padding: 1.5rem 5vw;
  }
  .main-nav {
    font-size: .8rem;
  }
  .icono-links img,
  .link-ver-mas-icono img {
    width: .75rem;
    height: .75rem;
  }
  /* mantener posición original de los recursos, no se mueven */
  .proximamente-arrow { 
    font-size: 1.8rem; 
  }
}