/* ============================================================
   MAIN.CSS — heyaparicio.github.io
   Orden: Base → Utilidades → Componentes → Animaciones → Responsive
   ============================================================ */

:root {
  --color-bg:        #D2D9E7;
  --color-surface:   #EEF1F6;
  --color-text-base: #1e2435;
  --color-text-sec:  #4A5568;
  --color-accent:    #FB0040;
  --color-border-tertiary: #D2D9E7;
  --easing:          cubic-bezier(0.165, 0.84, 0.44, 1);
  --logo-stroke:     var(--color-bg);
  --space-6: clamp(5rem,  10vw, 10rem); /* entre secciones principales   */
  --space-5: clamp(3rem,  6vw,  6rem);  /* entre subsecciones            */
  --space-4: clamp(1.5rem, 3vw, 3rem);  /* entre elementos de una sección*/
  --space-3: clamp(1rem,  2vw,  2rem);  /* entre componentes internos    */
  --space-2: clamp(0.5rem, 1vw, 1rem);  /* espaciado tipográfico         */
}


/* ============================================================
   1. SELECCIÓN
   ============================================================ */

::selection      { color: #fff; background-color: rgba(64, 209, 192, 0.8); }
::-moz-selection { color: #fff; background-color: rgba(64, 208, 192, 0.8); }


/* ============================================================
   2. BASE
   ============================================================ */

html, body {
  color: var(--color-text-base);
  background-color: var(--color-surface);
  cursor: none;
}

a, button, .boton {
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  cursor: none;
}

/* ============================================================
   3. UTILIDADES DE ESPACIADO
   ============================================================ */

/* ── Nivel 6 — secciones principales ── */
.mt-6-x { margin-top:     var(--space-6) !important; }
.mb-6-x { margin-bottom:  var(--space-6) !important; }
.pt-6-x { padding-top:    var(--space-6) !important; }
.pb-6-x { padding-bottom: var(--space-6) !important; }
.py-6-x { padding-top:    var(--space-6) !important; padding-bottom: var(--space-6) !important; }

/* ── Nivel 5 — subsecciones ── */
.mt-5-x { margin-top:     var(--space-5) !important; }
.mb-5-x { margin-bottom:  var(--space-5) !important; }
.pt-5-x { padding-top:    var(--space-5) !important; }
.pb-5-x { padding-bottom: var(--space-5) !important; }
.py-5-x { padding-top:    var(--space-5) !important; padding-bottom: var(--space-5) !important; }

/* ── Nivel 4 — elementos de una sección ── */
.mt-4-x { margin-top:     var(--space-4) !important; }
.mb-4-x { margin-bottom:  var(--space-4) !important; }
.pt-4-x { padding-top:    var(--space-4) !important; }
.pb-4-x { padding-bottom: var(--space-4) !important; }
.py-4-x { padding-top:    var(--space-4) !important; padding-bottom: var(--space-4) !important; }

/* ── Nivel 3 — componentes internos ── */
.mt-3-x { margin-top:     var(--space-3) !important; }
.mb-3-x { margin-bottom:  var(--space-3) !important; }
.pt-3-x { padding-top:    var(--space-3) !important; }
.pb-3-x { padding-bottom: var(--space-3) !important; }
.py-3-x { padding-top:    var(--space-3) !important; padding-bottom: var(--space-3) !important; }

/* ── Nivel 2 — tipográfico ── */
.mt-2-x { margin-top:     var(--space-2) !important; }
.mb-2-x { margin-bottom:  var(--space-2) !important; }
.pt-2-x { padding-top:    var(--space-2) !important; }
.pb-2-x { padding-bottom: var(--space-2) !important; }
.py-2-x { padding-top:    var(--space-2) !important; padding-bottom: var(--space-2) !important; }


/* ============================================================
   4. UTILIDADES DE COLOR Y FORMA
   ============================================================ */

.br { border-radius: 26px; }

.bg-gris        { background: linear-gradient(45deg, #FaFaFa, #F7F7F7); border-radius: 20px; }
.bg-negro       { background: linear-gradient(45deg, #1E2435, #202020); border-radius: 20px 20px 0 0; }
.bg-negro-noise { background-color: var(--color-text-base); background-image: url(../img/noise.png); }

.dots {
  --dot-bg:    var(--color-surface);
  --dot-color: var(--color-text-base);
  --dot-size:  1.3px;
  --dot-space: 23px;
  background:
    linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%)
      center / var(--dot-space) var(--dot-space),
    linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%)
      center / var(--dot-space) var(--dot-space),
    var(--dot-color);
}


/* ============================================================
   5. BOTONES
   — .boton-base agrupa las 6 propiedades que .boton y .disabled comparten
   ============================================================ */

.boton-base,
.boton,
.disabled {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.boton-enlace {
  display: inline-block;
  padding: 14px 28px;
  background-color: transparent;
  color: var(--color-text-sec);
  font-size: 16px;
  font-weight: 500;
}
.boton-enlace:hover { color: var(--color-accent); }

.boton {
  font-family: var(--font-display);
  background-color: var(--color-text-sec);
  color: var(--color-surface);
  box-shadow: 0 4px 16px rgba(30, 36, 56, 0.4);
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.boton:hover {
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(251, 0, 64, 0.35);
}

.boton::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--color-accent);
  z-index: -1;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.boton:hover::before { width: 100%; }

.disabled {
  pointer-events: none;
  opacity: 0.6;
  background-color: var(--color-bg);
  color: var(--color-text-base);
}


/* ============================================================
   6. CURSOR PERSONALIZADO
   ============================================================ */

#cursor {
  position: fixed;
  top: 0; left: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background-color: rgba(251, 0, 64, 0.8);
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 9999;
  transform: translate(var(--cx, -100px), var(--cy, -100px)) translate(-50%, -50%) scale(var(--scale, 1));
  transition: transform 50ms linear, width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border 0.2s ease, opacity 0.3s ease;
  will-change: transform;
}

#cursor.magnet {
  width: 90px; height: 90px;
  background: transparent;
  border: 1px solid var(--color-accent);
}

#cursor.magnet::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  background: var(--color-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}


/* ============================================================
   7. NAVEGACIÓN
   ============================================================ */

.navbar {
  background: transparent;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  will-change: transform, opacity;
  z-index: 1030;
}

.navbar.nav-hide {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.navbar-transitioning { transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; }


/* ── Default ────────────────────────────────────────── */
header {
  position: relative;
  width: 100%;
  z-index: 1000;
}

/* ── Sticky: entra deslizando desde arriba ──────────── */
header.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-110%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* ── Visible (scroll hacia arriba) ─────────────────── */
header.fixed-top.scrolled { transform: translateY(0); opacity: 1; }

/* ── Oculto (scroll hacia abajo) ───────────────────── */
header.fixed-top.nav-hide { transform: translateY(-110%); }

/* ── Regreso al top: JS controla opacity inline      ── */
/* ── desactivamos transition para que sea scroll-linked */
header.fixed-top.returning { transition: none !important; }

#mainNavbar.fixed-top .header-glass { width: 100%; height: 100%; background-color: rgba(30, 36, 53, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#main.fixed-top .header-glass       { width: 100%; height: 100%; background-color: rgba(238, 241, 246, 0.8) ; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.header-pill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 6.25rem; overflow: hidden; background-color: transparent; }
header.fixed-top .header-pill  { border: 1px solid rgba(74, 85, 104, 0.1); }

.navbar.fixed-top .nav-link,
.navbar.fixed-top .navbar-brand span,
.navbar.fixed-top .navbar-toggler { color: var(--color-text-base); }

.navbar-toggler:focus:not(:focus-visible),
.btn-close:focus:not(:focus-visible) { outline: none; box-shadow: none; }

#aparicio,
#apariciolight { width: 1.875rem; height: 1.875rem; }

.navbar-brand { gap: 0.469rem; }

.navbar-brand svg,
.offcanvas-title svg { height: auto; fill: var(--color-accent); display: block; }

/* Navbar — variante clara */
#main { margin-top: 20px; padding-top: 1.6rem; padding-bottom: 1.6rem; }

#main nav .navbar-brand span { color: var(--color-text-base); font-weight: 600; font-size: 1.344rem; text-transform: capitalize; }

#navbar .navbar-nav .nav-item,
#mainNavbar .navbar-nav .nav-item { margin: 12px; }

/* Propiedades estructurales — aplican a todos */
#navbar .navbar-nav .nav-link,
#mainNavbar .navbar-nav .nav-link,
.enlace {
  padding: 0 !important;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}

/* Tipografía — solo para nav, no para .enlace genérico */
#navbar .navbar-nav .nav-link,
#mainNavbar .navbar-nav .nav-link {
  font-size: 0.938rem;
  font-weight: 500;
  letter-spacing: 0.08rem;
}

/* Colores por variante */
#navbar .navbar-nav .nav-item .nav-link,
.enlace { color: var(--color-text-base); }

#mainNavbar .navbar-nav .nav-item .nav-link { color: var(--color-surface); }

/* ── ::before — revela color de acento de izquierda a derecha ── */
#navbar .navbar-nav .nav-link::before,
#mainNavbar .navbar-nav .nav-link::before,
.enlace::before {
  content: attr(data-hover);
  position: absolute;
  inset: 0;
  white-space: nowrap;
  color: var(--color-accent);
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s ease;
  will-change: clip-path;
}

#navbar .navbar-nav .nav-link:hover::before,
#mainNavbar .navbar-nav .nav-link:hover::before,
.enlace:hover::before { clip-path: inset(0 0% 0 0); }

/* ── ::after — subrayado con scaleX ── */
#navbar .navbar-nav .nav-link::after,
#mainNavbar .navbar-nav .nav-link::after,
.enlace::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -4px; left: 0;
  height: 2px; width: 100%;
  background: var(--color-accent);
  opacity: 0.6;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform;
}

.enlace::after {
  height: 0.08em;
}

#navbar .navbar-nav .nav-link:hover::after,
#mainNavbar .navbar-nav .nav-link:hover::after,
.enlace:hover::after { transform: scaleX(1); opacity: 0.9; }

/* Navbar — variante oscura */
#mainNavbar nav, #main nav { padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; }
#mainNavbar .navbar-brand span { color: var(--color-surface); font-weight: 600; font-size: 1.344rem; }
#mainNavbar .navbar-toggler { border: none; color: var(--color-surface); }

/* Nav — reglas globales compartidas */
.navbar-nav .nav-link {
  color: var(--color-surface);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.938rem;
  letter-spacing: 0.25px;
  position: relative;
}

footer .nav .nav-link:hover,
.enlace:hover { color: var(--color-accent); }

.nav-link.active { color: var(--color-accent) !important; }
.nav-item { margin-left: 13px; }

#main .navbar-toggler { border: none; color: var(--color-text-base); }


/* ============================================================
   8. OFFCANVAS
   ============================================================ */

.offcanvas-header { padding-top: 40.6px; padding-left: 22px; }

.btn-close,
.offcanvas-title,
.offcanvas-body a.nav-link { color: #292929; }

.offcanvas-title { font-size: 1.25rem; }
.offcanvas-body a.nav-link:hover { color: var(--color-accent) !important; }


/* ============================================================
   9. HEADER / HERO
   ============================================================ */

/* Propiedades compartidas entre ambas variantes de header bg */
.header-bg-gris,
.header-bg-gris-single {
  background-color: var(--color-text-base);
  background-image: url(../img/noise.png);
  border-radius: 20px;
  margin: 20px;
}

/* Solo .header-bg-gris necesita altura completa */
.header-bg-gris { height: calc(100vh - 40px); }
.header-bg-gris header { padding-top: 1.6rem; padding-bottom: 1.6rem; }

.hero { min-height: 80vh; display: flex; align-items: center; }


/* ============================================================
   10. SPACER (banda tipográfica)
   ============================================================ */

.spacer {
  width: 100vw;
  height: 30vh;
  background-color: var(--color-text-sec);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-transform: uppercase;
  text-align: center;
}

.spacer > span {
  position: absolute;
  color: transparent;
  width: 500vw;
  font-size: 5em;
  font-weight: 900;
  font-family: var(--font-display);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--color-bg);
}


/* ============================================================
   11. CARDS
   ============================================================ */

.card { border-radius: 26px; border: none; }
.card .card-body { padding: 12px 12px 24px 12px; }
.card .card-header { border-radius: 26px 26px 0 0; padding: 12px; font-size: 1rem; font-weight: 600; }

.card .img-wrapper {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  overflow: hidden;
  display: inline-block;
  line-height: 0;
}

.card .img-wrapper img { clip-path: inset(0 round 14px); width: 100%; height: auto; }

.card-title a { font-weight: 800; margin-bottom: 12px; color: #292929; }

.card-title a:hover,
.card:hover .card-title a { color: var(--color-accent) !important; }


/* ============================================================
   12. HORIZONTAL SECTION
   ============================================================ */

.projects-horizontal{
    position:relative;
    width:100%;
    overflow:hidden;
    padding-block:0 6vh;
    background-color: var(--color-bg);
}

.projects-pin{
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding-block:3vh 6vh;
}

.projects-track{
    display:flex;
    align-items:center;
    gap:0;
    will-change:transform;
}

.project-card{
    flex:0 0 100vw;
    width:100vw;
    min-width:100vw;
    min-height:60vh;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    padding-inline:clamp(24px,6vw,120px);
}

.project-layout{
    width:min(1400px,100%);
    margin:0 auto;
    align-items:center;
}

.project-layout.row{
    margin-left:0;
    margin-right:0;
    --bs-gutter-x:0;
}

.project-layout > [class*="col-"]{
    padding-left:2rem;
    padding-right:2rem;
}

.card-img-container {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  width: 100%;
  height: auto;
  border: 10px solid #fff;
  background-color: #fff;
}

.card-img-container img { width:100%; height:auto; display:block; }
.img-zoom       { transition: transform 0.4s ease-in-out; width: auto; height: 100%; }
.img-zoom:hover { transform: scale(1.1); }



.project-content{
    max-width:100%;
    padding-left:4vw;
}

.project-content h2{
    margin-bottom:1.5rem;
}

@media (max-width:991px){

    .projects-horizontal{
        overflow:visible;
        padding-block:4rem;
    }

    .projects-pin{
        min-height:auto;
        overflow:visible;
        padding-block:0;
        display:block;
    }

    .projects-track{
        display:flex;
        flex-direction:column;
        gap:6rem;
        transform:none!important;
        width:100%;
    }

    .project-card{
        width:100%;
        min-width:100%;
        min-height:auto;
        padding-inline:1.5rem;
        opacity:1!important;
        transform:none!important;
    }

    .project-layout{
        max-width:100%;
    }

    .project-layout > [class*="col-"]{
        padding-left:0;
        padding-right:0;
    }

    .project-content{
        padding-left:0;
        margin-top:2rem;
    }

    .project-content h2{
        margin-bottom:1rem;
    }


}

@media (max-width:576px){

    .project-card{
        padding-inline:1rem;
    }

    .project-content{
        margin-top:1.5rem;
    }

}

/* ============================================================
   13. HERO ANIMATION SECTION
   ============================================================ */

.btl-1 { position: relative; width: 100%; }

.btl-1 img.alayer-1 { width: 100%; height: auto; object-fit: cover; display: block; position: relative; z-index: 5; }

.btl-1 img.alayer-2,
.btl-1 img.alayer-3,
.btl-1 img.alayer-4,
.btl-1 img.alayer-5,
.btl-1 img.alayer-0 {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.btl-1 img.alayer-2,
.btl-1 img.alayer-0 { z-index: 4; }
.btl-1 img.alayer-3 { z-index: 3; }
.btl-1 img.alayer-4 { z-index: 2; }
.btl-1 img.alayer-5 { z-index: 1; }

.btl-1 img.alayer-0 { animation: move_0 3s ease-in-out infinite alternate; }
.btl-1 img.alayer-1 { animation: move_1 6s ease-in-out infinite alternate; }
.btl-1 img.alayer-2 { animation: move_2 4s ease-in-out infinite alternate; }
.btl-1 img.alayer-3 { animation: move_3 4s ease-in-out infinite alternate; }
.btl-1 img.alayer-4 { animation: move_4 6s ease-in-out infinite alternate; }
.btl-1 img.alayer-5 { animation: move_5 8s ease-in-out infinite alternate; }




/* ============================================================
   13. FOOTER
   ============================================================ */

footer .nav .nav-link       { color: #eee; }
footer .nav .nav-link:hover { color: var(--color-accent); }


/* ============================================================
   14. ANIMACIONES (keyframes)
   ============================================================ */

@keyframes move_0 {
  0%   { transform: translate(-33px,  33px); }
  100% { transform: translate( 33px, -33px); }
}

@keyframes move_1 {
  0%   { transform: rotate(-5deg); }
  100% { transform: rotate( 5deg); }
}

@keyframes move_2 {
  0%   { transform: translate(-13px); }
  100% { transform: translate( 13px); }
}

@keyframes move_3 {
  0%   { transform: translate( 10px); }
  100% { transform: translate(-10px); }
}

@keyframes move_4 {
  0%, 100% { transform: translate(0, -10px); }
  50%       { transform: translate(0,  10px); }
}

@keyframes move_5 {
  0%, 100% { transform: translate(0,  4px); }
  50%       { transform: translate(0, -4px); }
}

/* ── Logo: shine unificado — stroke controlado por --logo-stroke ── */
#aparicio .logo-path,
#apariciolight .logo-path {
  fill: var(--color-accent);
  stroke: var(--logo-stroke);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 0, 596;
  stroke-opacity: 0;
}

/* La variante light sobreescribe solo el stroke */
#apariciolight { --logo-stroke: var(--color-text-base); }

#logo_erlen-masson:hover #aparicio .logo-path,
#logo_erlen-masson:hover #apariciolight .logo-path {
  animation: logo-shine 0.9s ease-in-out forwards;
}

@keyframes logo-shine {
  0%   { stroke-dasharray:   0, 596; stroke-dashoffset:    0; fill: var(--color-accent); stroke: var(--logo-stroke); stroke-opacity: 0; }
  10%  { stroke-dasharray:  60, 536; stroke-dashoffset:    0; fill: transparent;         stroke: var(--logo-stroke); stroke-opacity: 1; }
  80%  { stroke-dasharray:  60, 536; stroke-dashoffset: -536; fill: transparent;         stroke: var(--logo-stroke); stroke-opacity: 1; }
  100% { stroke-dasharray:   0, 596; stroke-dashoffset: -596; fill: var(--color-accent); stroke: var(--logo-stroke); stroke-opacity: 0; }
}


/* ============================================================
   15. RESPONSIVE
   ============================================================ */

@media screen and (min-width: 768px) {
  .overlapping-images { padding-top: 46.03%; }
  .image              { width: 50%; }
  .image.front-image  { width: 57.14%; }
  .image-group        { padding: 0 90px; }
}

@media (max-width: 768px) {
  .hero                             { padding-top: 60px; }
  .article                          { position: relative; width: 100%; height: 50vh; overflow: hidden; }
  .header-bg-gris                   { height: 100%; padding-top: 0; }
  .header-bg-gris                   { margin: 0.3rem;}
  .navbar                           { transition: transform 0.3s ease, opacity 0.3s ease; }


  header.fixed-top.scrolled .navbar { margin: 0.3rem 0.3rem 0 0.3rem; }
  header.fixed-top .header-pill     { margin: 0.3rem; left: 0; right: 0;}
  header.fixed-top.scrolled nav     { padding: 15px 15px!important;}

  header#main,  header#mainNavbar   { margin-top: 0; padding:10px 0 0 0s; }

  .spacer > span {
    font-size: 3em;
    font-weight: 900;
    font-family: var(--font-display);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--color-bg);
  }

  /* Tipografía responsive — mover a fonts.css */
  .rotating-text b {
    font-size: 2.8rem;
    font-weight: 500;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 100%;
    line-height: 1.2;
    vertical-align: top;
  }
}