/* ==========================================================================
   VISIONA CONTENT AGENCY — sistema de diseño
   Minimalismo cinematográfico · editorial de lujo · Liquid Glass
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=Montserrat:wght@300;400;500&display=swap');

:root{
  --black:#0a0a0a;
  --near-black:#111110;
  --white:#f6f5f2;
  --gray-1:#8a8a86;
  --gray-2:#3a3a38;
  --line:rgba(246,245,242,0.14);
  --line-strong:rgba(246,245,242,0.28);
  --glass-bg:rgba(10,10,10,0.55);
  --glass-border:rgba(246,245,242,0.12);

  --font-display:"Didot", "Bodoni Moda", "Bodoni MT", serif;
  --font-body:"Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-label:"Montserrat", sans-serif;

  --wrap-max:1240px;
  --pad-inline:clamp(1.25rem, 4vw, 3rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }

::selection{ background:var(--white); color:var(--black); }

:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }

.wrap{
  max-width:var(--wrap-max);
  margin-inline:auto;
  padding-inline:var(--pad-inline);
}

.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:0.01em;
}

.serif-italic{ font-style:italic; }

.label{
  font-family:var(--font-label);
  font-weight:400;
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gray-1);
}

.k{
  display:block;
  font-family:var(--font-label);
  font-size:0.68rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gray-1);
  margin-bottom:0.35rem;
}
.v{ font-family:var(--font-body); font-size:0.95rem; }
.t{ font-family:var(--font-display); font-size:1.05rem; }

/* ---------- reveal-on-scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- buttons ---------- */
.btn-solid,.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.85rem 1.9rem;
  border-radius:999px;
  font-family:var(--font-label);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  transition:background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  white-space:nowrap;
}
.btn-solid{
  background:var(--white);
  color:var(--black);
  border:1px solid var(--white);
}
.btn-solid:hover{ background:transparent; color:var(--white); }
.btn-ghost{
  background:transparent;
  color:var(--white);
  border:1px solid var(--line-strong);
}
.btn-ghost:hover{ background:var(--white); color:var(--black); border-color:var(--white); }

/* ---------- glass panel ---------- */
.glass-panel{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:1rem clamp(1rem, 3vw, 2rem);
}
.navbar-glass{
  max-width:var(--wrap-max);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:0.75rem 1.1rem 0.75rem 1.4rem;
  border-radius:999px;
  transition:background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.navbar.is-scrolled .navbar-glass{
  background:rgba(10,10,10,0.72);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.nav-logo.wordmark{
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:0.12em;
}
.nav-links{
  list-style:none;
  display:flex;
  gap:clamp(1.2rem, 2.5vw, 2.2rem);
  margin:0; padding:0;
  font-family:var(--font-label);
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.nav-links a{ opacity:0.72; transition:opacity 0.25s var(--ease); }
.nav-links a:hover,
.nav-links a[aria-current="page"]{ opacity:1; }
.nav-cta{
  font-family:var(--font-label);
  font-size:0.74rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:0.55rem 1.3rem;
  border:1px solid var(--line-strong);
  border-radius:999px;
  transition:background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav-cta:hover{ background:var(--white); color:var(--black); }
.nav-toggle{
  display:none;
  font-size:1.3rem;
  line-height:1;
}
.nav-mobile-panel{
  position:fixed;
  inset:0;
  z-index:99;
  background:rgba(8,8,8,0.97);
  backdrop-filter:blur(20px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.6rem;
  font-family:var(--font-display);
  font-size:1.6rem;
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
  transition:transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.nav-mobile-panel.is-open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.nav-mobile-cta{
  margin-top:0.6rem;
  font-family:var(--font-label);
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:0.75rem 1.6rem;
  border:1px solid var(--line-strong);
  border-radius:999px;
}

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:block; }
}

/* ==========================================================================
   HERO (index.html)
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  z-index:0;
}
.hero-media video,
.hero-fallback{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero-fallback{
  background:radial-gradient(circle at 50% 30%, #1c1c1a 0%, var(--black) 70%);
}
.hero-scrim{
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.85) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 var(--pad-inline) clamp(4rem,9vw,6.5rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero-eyebrow{ margin-bottom:1.6rem; }

/* --- Título principal: VISIONA / CONTENT AGENCY (branding tarjeta) --- */
.hero-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
}
.hero-title-main{
  font-family:"Didot","Bodoni Moda","Bodoni MT",serif;
  font-optical-sizing:auto;
  font-weight:400;
  font-style:normal;
  font-size:clamp(3.4rem, 12vw, 9rem);
  letter-spacing:0.09em;
  line-height:1;
}
.hero-title-sub{
  display:block;
  margin-top:0.85em;
  font-family:"Montserrat",var(--font-label),sans-serif;
  font-weight:300;
  font-style:normal;
  font-size:clamp(0.68rem, 1.4vw, 0.92rem);
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--white);
}

.hero-tagline{
  margin:1.8rem 0 0;
  font-family:var(--font-body);
  font-size:clamp(1rem,1.6vw,1.2rem);
  color:rgba(246,245,242,0.82);
}
.hero-actions{
  margin-top:2.4rem;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
}
.scroll-cue{
  position:absolute;
  bottom:1.6rem; left:50%;
  transform:translateX(-50%);
  z-index:2;
}
.scroll-cue .line{
  display:block;
  width:1px; height:2.6rem;
  background:linear-gradient(to bottom, rgba(246,245,242,0.9), transparent);
  animation:scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ transform:scaleY(0.3); opacity:0.3; transform-origin:top; }
  50%{ transform:scaleY(1); opacity:1; transform-origin:top; }
  100%{ transform:scaleY(0.3); opacity:0.3; transform-origin:bottom; }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue .line{ animation:none; opacity:0.6; }
}

/* ==========================================================================
   PAGE HERO (servicios / proyectos / equipo / contacto)
   ========================================================================== */
.page-hero{
  padding-top:clamp(8rem,16vw,11rem);
  padding-bottom:clamp(2.5rem,6vw,4rem);
  max-width:760px;
}
.page-hero .label{ margin-bottom:1rem; display:block; }
.page-hero h1{ margin:0 0 0.9rem; font-size:clamp(2rem,5vw,3.4rem); line-height:1.15; }
.page-hero p{ color:rgba(246,245,242,0.72); max-width:52ch; }

/* ==========================================================================
   SERVICIOS (services-list, reused on index + servicios.html)
   ========================================================================== */
.services-list{
  display:flex;
  flex-direction:column;
  margin-top:clamp(2rem,5vw,3rem);
}
.service-row{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  padding:clamp(2rem,4vw,3rem) 0;
  border-top:1px solid var(--line);
}
.services-list .service-row:last-child{ border-bottom:1px solid var(--line); }
.service-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--gray-2);
}
.service-media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(0.15);
  transition:transform 0.8s var(--ease);
}
.service-row:hover .service-media img{ transform:scale(1.04); }
.service-index{
  position:absolute; top:0.8rem; left:0.8rem;
  font-family:var(--font-label);
  font-size:0.7rem;
  letter-spacing:0.1em;
  color:var(--white);
  background:rgba(10,10,10,0.55);
  padding:0.25rem 0.55rem;
  border-radius:999px;
}
.service-copy .num{
  display:block;
  font-family:var(--font-label);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gray-1);
  margin-bottom:0.9rem;
}
.service-copy h3{ margin:0 0 0.8rem; font-size:clamp(1.3rem,2.6vw,1.9rem); }
.service-copy p{ margin:0; max-width:46ch; color:rgba(246,245,242,0.72); }

@media (max-width:720px){
  .service-row{ grid-template-columns:1fr; }
}

/* ==========================================================================
   PROYECTOS — extracto en index (grid)
   ========================================================================== */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.5vw,1.6rem);
  margin-top:clamp(2rem,5vw,3rem);
}
.projects-grid .cell{ position:relative; overflow:hidden; aspect-ratio:3/4; }
.projects-grid .cell img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.8s var(--ease);
}
.projects-grid .cell:hover img{ transform:scale(1.05); }
.cell-info{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.1rem 1.1rem 1.2rem;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
}
.cell-info .k{ color:rgba(246,245,242,0.7); }
.cell-info .t{ font-size:1.05rem; }

@media (max-width:760px){
  .projects-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   PROYECTOS — página completa (grid de tarjetas)
   ========================================================================== */
.projects-full-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1.6rem,3vw,2.6rem);
  margin-top:1rem;
  padding-bottom:clamp(3rem,6vw,4.5rem);
}
.project-card-media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--gray-2);
}
.project-card-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.8s var(--ease);
}
.project-card:hover .project-card-media img{ transform:scale(1.03); }
.project-card-info{ margin-top:1rem; }
.project-card-info .k{ margin-bottom:0.35rem; }
.project-card-info .t{ font-size:1.3rem; }

@media (max-width:760px){
  .projects-full-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   PROYECTO — subpágina individual (cabecera + galería)
   ========================================================================== */
.project-hero{
  padding-top:clamp(8rem,16vw,11rem);
  padding-bottom:clamp(2rem,5vw,3rem);
}
.project-hero .back-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family:var(--font-label);
  font-size:0.74rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gray-1);
  margin-bottom:1.6rem;
  transition:color 0.25s var(--ease);
}
.project-hero .back-link:hover{ color:var(--white); }
.project-hero h1{
  font-size:clamp(2rem,5vw,3.6rem);
  line-height:1.1;
  margin:0.6rem 0 0;
}
.project-hero .meta-row{
  display:flex;
  gap:clamp(1.5rem,4vw,3rem);
  margin-top:1.8rem;
  flex-wrap:wrap;
}
.project-gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2.5vw,1.6rem);
  padding-bottom:clamp(3rem,6vw,5rem);
}
.project-gallery figure{ margin:0; }
.project-gallery .g-media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--gray-2);
  position:relative;
}
.project-gallery .g-media img,
.project-gallery .g-media video{
  width:100%; height:100%;
}
.project-gallery .g-media img{ object-fit:cover; }
.project-gallery .g-media video{ object-fit:contain; background:#000; }
.project-gallery .g-wide{ grid-column:1 / -1; aspect-ratio:16/9; }
.project-gallery .g-portrait{ aspect-ratio:3/4; }
.project-gallery .g-landscape{ aspect-ratio:3/2; }

/* Grupo: una foto vertical a la izquierda (toda la altura) + 3 horizontales apiladas a la derecha */
/* Grupo: una foto vertical a la izquierda (toda la altura) + 3 horizontales apiladas a la derecha */
.project-gallery .gallery-split{
  grid-column:1 / -1;
  position:relative;
  width:100%;
  padding-top:62%;
  --split-gap:20px;
  --row-h:calc((100% - 2*var(--split-gap)) / 3);
}
.project-gallery .gallery-split figure{
  position:absolute;
  margin:0;
}
.project-gallery .gallery-split figure .g-media{
  width:100%;
  height:100%;
  aspect-ratio:auto;
}
.project-gallery .gallery-split .g-span-all{
  left:0; top:0;
  width:calc(50% - var(--split-gap) / 2);
  height:100%;
}
.project-gallery .gallery-split .g-stack-item{
  left:calc(50% + var(--split-gap) / 2);
  width:calc(50% - var(--split-gap) / 2);
  height:var(--row-h);
}
.project-gallery .gallery-split .g-stack-item:nth-child(2){ top:0; }
.project-gallery .gallery-split .g-stack-item:nth-child(3){ top:calc(var(--row-h) + var(--split-gap)); }
.project-gallery .gallery-split .g-stack-item:nth-child(4){ top:calc(2*var(--row-h) + 2*var(--split-gap)); }

@media (max-width:700px){
  .project-gallery .gallery-split{
    padding-top:0;
    display:flex;
    flex-direction:column;
    gap:clamp(1rem,2.5vw,1.6rem);
  }
  .project-gallery .gallery-split figure{
    position:static;
    width:100%;
    height:auto;
  }
  .project-gallery .gallery-split .g-span-all .g-media{ height:auto; aspect-ratio:3/4; }
  .project-gallery .gallery-split .g-stack-item .g-media{ height:auto; aspect-ratio:3/2; }
}
.project-gallery .g-center-alone{ grid-column:1 / -1; justify-self:center; width:50%; }

@media (max-width:700px){
  .project-gallery .g-center-alone{ width:100%; }
}
.project-gallery figcaption{
  margin-top:0.6rem;
  font-family:var(--font-label);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gray-1);
}

@media (max-width:700px){
  .project-gallery{ grid-template-columns:1fr; }
}

/* ==========================================================================
   EQUIPO
   ========================================================================== */
.team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.2rem,2.5vw,1.8rem);
}
.team-member{ text-align:left; }
.team-photo{
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--gray-2);
  margin-bottom:1.1rem;
}
.team-photo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1);
  transition:filter 0.6s var(--ease), transform 0.6s var(--ease);
}
.team-member:hover .team-photo img,
.team-member.is-active .team-photo img{
  filter:grayscale(0);
  transform:scale(1.03);
}
.team-info .name{ font-size:1.15rem; margin-bottom:0.25rem; }
.team-info .role{
  font-family:var(--font-label);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gray-1);
}
.team-bio{
  margin-top:0.6rem;
  font-size:0.92rem;
  color:rgba(246,245,242,0.72);
}

@media (max-width:860px){
  .team-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{
  text-align:center;
  padding:clamp(4.5rem,10vw,7rem) var(--pad-inline);
  border-top:1px solid var(--line);
}
.cta-band h2{ margin:0 0 1.8rem; font-size:clamp(1.7rem,4.4vw,3rem); }
.cta-band .actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5rem);
  padding-bottom:clamp(4rem,8vw,6rem);
}
.contact-info h1{ font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.15; margin:0 0 1rem; }
.contact-info > p{ color:rgba(246,245,242,0.72); max-width:46ch; }
.contact-details{
  margin-top:2.2rem;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.contact-details a{
  font-family:var(--font-display);
  font-size:1.15rem;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:0.15rem;
}
.contact-cta-card{
  margin-top:2.4rem;
  padding:1.6rem;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:flex-start;
}
.contact-cta-card p{ margin:0; color:rgba(246,245,242,0.82); }

.contact-form{
  padding:clamp(1.6rem,3vw,2.4rem);
  border-radius:18px;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.field{ display:flex; flex-direction:column; gap:0.5rem; }
.field label{
  font-family:var(--font-label);
  font-size:0.7rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gray-1);
}
.field input,
.field select,
.field textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line-strong);
  padding:0.6rem 0.1rem;
  color:var(--white);
  font-family:var(--font-body);
  font-size:0.98rem;
  resize:vertical;
}
.field select{ appearance:none; }
.field select option{ background:var(--black); color:var(--white); }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-color:var(--white); }
.form-submit{ margin-top:0.6rem; align-self:flex-start; }
.form-note{
  min-height:1.2em;
  font-family:var(--font-label);
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:var(--gray-1);
  margin:0;
}
.form-note.is-success{ color:var(--white); }
.form-note.is-error{ color:#e07a6b; }

@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{
  border-top:1px solid var(--line);
  padding:clamp(3rem,6vw,4.5rem) var(--pad-inline) clamp(1.5rem,3vw,2rem);
}
.footer-top{
  max-width:var(--wrap-max);
  margin-inline:auto;
  display:flex;
  justify-content:space-between;
  gap:clamp(2rem,6vw,4rem);
  flex-wrap:wrap;
}
.footer-brand .wordmark{ font-family:var(--font-display); font-size:1.4rem; letter-spacing:0.06em; }
.footer-brand .sub{
  font-family:var(--font-label);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gray-1);
  margin-top:0.4rem;
}
.footer-links{ display:flex; gap:clamp(2.5rem,6vw,5rem); }
.footer-col{ display:flex; flex-direction:column; gap:0.6rem; }
.footer-col a{ font-size:0.92rem; opacity:0.8; transition:opacity 0.25s var(--ease); }
.footer-col a:hover{ opacity:1; }
.footer-bottom{
  max-width:var(--wrap-max);
  margin-inline:auto;
  display:flex;
  justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-family:var(--font-label);
  font-size:0.72rem;
  letter-spacing:0.06em;
  color:var(--gray-1);
}

@media (max-width:600px){
  .footer-top,.footer-bottom{ flex-direction:column; gap:1.6rem; }
}