/*
Theme Name: Solium
Theme URI: https://solium.cl
Author: Solium Lux
Author URI: https://solium.cl
Description: Tema a medida para Solium, portado desde el sitio estático (HTML/CSS/JS) que corre en solium.cl.
Version: 1.0
Requires PHP: 7.4
Text Domain: solium
*/

/* ==========================================================================
   A partir de aquí: mismo CSS del sitio estático (Pagina_Web_Solium/css/styles.css), sin cambios.
   ========================================================================== */

/* ==========================================================================
   SOLIUM — sistema de diseño compartido
   Paleta, tipografía y logo: SIN CAMBIOS respecto al sitio actual.
   Lo que cambia: jerarquía, aire, composición editorial y componentes
   reutilizables para un sitio multipágina.
   ========================================================================== */

:root{
  /* — Identidad (igual que el sitio actual, no tocar) — */
  --coral:#E55A4F;
  --coral-dark:#C8483E;
  --night:#1A2C3D;
  --night-2:#223A4F;
  --gold:#C9A84C;
  --teal:#0B7A8A;
  --mint:#2EC4A0;
  --snow:#F8FAFB;
  --gray-light:#E8ECEF;
  --gray-mid:#8A9BB0;
  --white:#FFFFFF;

  /* — Superficies — */
  --coral-soft:#FBEAE8;
  --gold-soft:#F7F0DD;
  --teal-soft:#E4F1F2;
  --green-soft:#E7F7EE;
  --green:#0F7A4A;

  /* — Radio y sombra — */
  --radius:16px;
  --radius-lg:24px;
  --radius-sm:10px;
  --shadow-sm: 0 10px 24px -14px rgba(26,44,61,.22);
  --shadow-md: 0 24px 48px -22px rgba(26,44,61,.28);
  --shadow-lg: 0 40px 80px -32px rgba(26,44,61,.34);

  /* — Escala de espaciado — */
  --sp-1:8px; --sp-2:12px; --sp-3:20px; --sp-4:32px; --sp-5:48px;
  --sp-6:72px; --sp-7:104px; --sp-8:148px;

  /* — Escala tipográfica — */
  --fs-eyebrow:12.5px;
  --fs-body:16px;
  --fs-body-lg:18px;
  --fs-h3:20px;
  --fs-h2:clamp(26px,3.4vw,38px);
  --fs-h1:clamp(34px,5.2vw,58px);
  --fs-display:clamp(40px,6.4vw,74px);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans', sans-serif;
  color:var(--night);
  background:var(--white);
  line-height:1.6;
  font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}
.wrap{max-width:1240px; margin:0 auto; padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

h1,h2,h3,h4{font-weight:800; line-height:1.12; text-wrap:balance;}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}
.subtitle{font-size:var(--fs-body-lg); color:var(--night-2); font-weight:500;}

/* ==========================================================================
   MOTION
   ========================================================================== */
@keyframes float{0%{transform:translateY(0px);}50%{transform:translateY(-16px);}100%{transform:translateY(0px);}}
.floaty{animation:float 6s ease-in-out infinite;}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;}
@media (prefers-reduced-motion: reduce){
  .reveal, .floaty{animation:none !important; transition:none !important; opacity:1 !important; transform:none !important;}
}

/* ==========================================================================
   EYEBROW / PILLS / TAGS
   ========================================================================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--coral-dark);
  background:var(--coral-soft); border:1px solid rgba(229,90,79,.2);
  padding:7px 15px; border-radius:999px;
}
.status-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  color:var(--green); background:var(--green-soft); padding:5px 13px; border-radius:999px;
}
.status-pill .dot{width:7px; height:7px; border-radius:50%; background:#2ECC71;}
.status-pill.pending{color:#8A7C63; background:#F1EADA;}
.status-pill.pending .dot{background:#C9A84C;}

.tag{font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:5px 12px; border-radius:999px; display:inline-block;}
.tag-real{background:var(--coral); color:var(--white);}
.tag-concept{background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.5); color:var(--white); backdrop-filter:blur(4px);}
.tag-concept.on-light{background:transparent; border-color:var(--gray-light); color:var(--gray-mid);}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{
  padding:13px 26px; border-radius:999px; font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s;
}
.btn:hover{transform:translateY(-2px);}
.btn-coral{background:var(--coral); color:var(--white);}
.btn-coral:hover{box-shadow:0 14px 28px -8px rgba(229,90,79,.4);}
.btn-outline{border:1.5px solid var(--night); color:var(--night); background:rgba(255,255,255,.6);}
.btn-outline:hover{background:var(--night); color:var(--white);}
.btn-outline.on-dark{border-color:rgba(255,255,255,.5); color:var(--white); background:rgba(255,255,255,.08);}
.btn-outline.on-dark:hover{background:var(--white); color:var(--night);}
.btn-teal{background:var(--teal); color:var(--white);}
.btn-teal:hover{box-shadow:0 14px 28px -8px rgba(11,122,138,.35);}
.btn-sm{padding:9px 18px; font-size:13.5px;}

/* ==========================================================================
   HEADER + NAV (con menú mobile funcional — corrige el bug <820px)
   ========================================================================== */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gray-light);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1240px; margin:0 auto;}
.brand img{height:28px; width:auto; display:block;}
nav.links{display:flex; align-items:center; gap:34px; font-weight:600; font-size:15px;}
nav.links a{color:var(--night-2); transition:color .2s; position:relative;}
nav.links a:hover{color:var(--coral);}
nav.links a.active{color:var(--coral);}
nav.links a.lux-link{color:var(--night);}
.nav-cta{
  background:var(--night); color:var(--white); padding:11px 24px;
  border-radius:999px; font-weight:600; font-size:14px; white-space:nowrap;
  transition:background .2s, transform .2s;
}
.nav-cta:hover{background:var(--coral); transform:translateY(-1px);}
.nav-right{display:flex; align-items:center; gap:22px;}

.nav-item{position:relative; display:flex; align-items:center;}
.nav-item > a{display:inline-flex; align-items:center; gap:5px;}
.nav-caret{transition:transform .18s ease; flex:none;}
.nav-item:hover .nav-caret{transform:rotate(180deg);}
.nav-dropdown{
  position:absolute; top:100%; left:0; padding-top:14px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events:none;
}
.nav-item:hover .nav-dropdown{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;}
.nav-dropdown-inner{
  background:var(--snow); border:1px solid var(--gray-light); border-radius:16px;
  box-shadow:var(--shadow-md); padding:20px 22px; min-width:280px; max-width:300px;
  position:relative; overflow:hidden;
}
.nav-dropdown-inner::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--coral);}
.nav-dropdown-inner .dd-label{display:block; font-size:10.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--coral-dark); margin-bottom:8px;}
.nav-dropdown-inner .dd-title{display:block; font-size:16.5px; font-weight:800; color:var(--night); margin-bottom:6px;}
.nav-dropdown-inner .dd-desc{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--night-2); white-space:normal; line-height:1.4; transition:gap .2s ease, color .2s ease;}
.nav-dropdown-inner .dd-desc svg{flex:none; width:13px; height:13px; color:var(--coral); transition:transform .2s ease;}
.nav-dropdown-inner a{display:block; padding:0; border-radius:0;}
.nav-dropdown-inner a:hover .dd-desc{color:var(--coral-dark); gap:10px;}

.mobile-submenu-link{padding-left:20px !important; font-size:16px !important; color:var(--night-2) !important; font-weight:600 !important;}

.nav-burger{display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer; background:none; border:none; padding:6px;}
.nav-burger span{display:block; height:2px; width:100%; background:var(--night); border-radius:2px; transition:transform .25s, opacity .25s;}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  display:none; position:fixed; inset:0; top:64px; z-index:90;
  background:var(--white); padding:12px 28px 32px; overflow-y:auto;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.mobile-menu.open{display:block; transform:translateY(0); opacity:1; pointer-events:auto;}
.mobile-menu a{display:block; padding:16px 0; font-size:19px; font-weight:700; color:var(--night); border-bottom:1px solid var(--gray-light);}
.mobile-menu a.active{color:var(--coral-dark);}
.mobile-menu .mobile-cta{
  margin:28px auto 0; display:flex; align-items:center; justify-content:center;
  width:fit-content; padding:17px 44px; font-size:16.5px; text-align:center; line-height:1;
}

@media (max-width:900px){
  nav.links{display:none;}
  .nav-burger{display:flex;}
}

/* ==========================================================================
   SECCIONES — más aire, jerarquía consistente
   ========================================================================== */
section.line{padding:var(--sp-7) 28px;}
@media (max-width:640px){ section.line{padding:var(--sp-5) 20px;} }
.line-head{max-width:640px; margin:0 auto var(--sp-4); text-align:center;}
.line-logo{height:30px; width:auto; margin:0 auto 18px;}
.line-head h2{margin-bottom:14px; color:var(--night);}
.line-head p{font-size:var(--fs-body-lg); color:var(--night-2);}
.center{text-align:center; margin-top:var(--sp-4);}

/* ==========================================================================
   TARJETAS (uso puntual — no repetir como patrón único de layout)
   ========================================================================== */
.card{
  background:var(--white); border:1px solid var(--gray-light); border-radius:var(--radius);
  overflow:hidden; transition:border-color .2s, transform .35s, box-shadow .35s;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.card .photo{width:100%; aspect-ratio:4/3; overflow:hidden;}
.card .photo img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.card:hover .photo img{transform:scale(1.06);}
.card-body{padding:22px 24px 24px;}
.card h3{font-size:16.5px; margin-bottom:8px;}
.card p{font-size:14px; color:var(--night-2);}

/* ==========================================================================
   BENTO — grilla editorial asimétrica (Proyectos, Home teaser)
   ========================================================================== */
.bento{display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:300px 260px; gap:20px;}
.bento-item{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); display:flex; align-items:flex-end; background:#0E1922;}
.bento-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:top center; transition:transform .5s ease;}
.bento-item:hover img{transform:scale(1.02);}
.bento-item .scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,16,22,0) 55%,rgba(9,14,20,.92) 100%); transition:opacity .3s;}
.bento-item .meta{position:relative; padding:24px 26px; color:var(--white); display:flex; flex-direction:column; gap:6px; width:100%;}
.bento-item .meta .name{font-size:22px; font-weight:800;}
.bento-item .meta .cat{font-size:13px; opacity:.88; font-weight:500;}
.bento-lead{grid-column:1; grid-row:1;}
.bento-feature{grid-column:2; grid-row:1/3;}
.bento-row{grid-column:1; grid-row:2; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.bento-row .bento-item{min-height:220px;}
@media (max-width:900px){
  .bento{grid-template-columns:1fr; grid-template-rows:none; gap:16px;}
  .bento-lead, .bento-feature{grid-column:1; grid-row:auto; min-height:280px;}
  .bento-row{grid-column:1; grid-row:auto; grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .bento-row{grid-template-columns:1fr;}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--snow); border-top:1px solid var(--gray-light); padding:56px 28px 32px;}
.foot-brand{height:26px; width:auto;}
.foot-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:22px;
  max-width:1240px; margin:0 auto 32px;
}
.foot-pills{display:flex; gap:12px; flex-wrap:wrap;}
.pill{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--night-2);
  border:1px solid var(--gray-light); border-radius:999px; padding:9px 16px; transition:border-color .2s, color .2s;
}
.pill svg{width:15px; height:15px;}
.pill:hover{border-color:var(--coral); color:var(--coral);}
.foot-bottom{
  max-width:1240px; margin:0 auto; padding-top:22px; border-top:1px solid var(--gray-light);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:13px; color:var(--gray-mid);
}
.foot-nav{display:flex; gap:22px; flex-wrap:wrap;}
.foot-nav a{font-size:13.5px; color:var(--gray-mid);}
.foot-nav a:hover{color:var(--coral);}

/* Footer de 2 columnas con texto institucional (Home) */
.footer-grid{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:start; max-width:1240px; margin:0 auto 32px;}
.footer-col-right{justify-self:end;}
.foot-institutional{font-size:14px; color:var(--night-2); max-width:340px; margin-top:14px; line-height:1.6;}
@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr; gap:24px;}
  .footer-col-right{justify-self:start;}
}

/* ==========================================================================
   CTA FINAL — bloque Night de cierre, compartido entre páginas
   ========================================================================== */
.cta-final{background:var(--night); color:var(--white); text-align:center; border-radius:var(--radius-lg); max-width:1180px; margin:0 auto; padding:var(--sp-5) var(--sp-4);}
.cta-final h2{color:var(--white); margin-bottom:12px;}
.cta-final p{color:rgba(255,255,255,.75); font-size:16px; margin-bottom:8px; max-width:480px; margin-left:auto; margin-right:auto;}
.cta-final .btn{margin-top:16px;}
.cta-final .cta-note{display:block; margin-top:14px; font-size:12.5px; color:rgba(255,255,255,.5);}

/* ==========================================================================
   FORMULARIOS (waitlist Hub / contacto)
   ========================================================================== */
.form-box{max-width:520px; margin:0 auto;}
.form-box input, .form-box textarea{
  width:100%; padding:14px 18px; border-radius:14px; border:1px solid var(--gray-light);
  background:var(--white); color:var(--night); font-family:inherit; font-size:14.5px;
}
.form-box textarea{border-radius:16px; resize:vertical; min-height:120px;}
.form-box input::placeholder, .form-box textarea::placeholder{color:var(--gray-mid);}
.form-box input:focus, .form-box textarea:focus{outline:none; border-color:var(--teal);}
.form-box .field-error{border-color:var(--coral-dark);}
.form-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.form-row input{flex:1; min-width:200px;}
.form-box button{border:none; cursor:pointer;}
.form-box button:disabled{opacity:.6; cursor:not-allowed; transform:none;}

.form-message{
  max-width:460px; margin:14px auto 0; padding:12px 18px; border-radius:12px;
  font-size:13.5px; font-weight:600; display:none; align-items:center; gap:8px; text-align:left;
}
.form-message.show{display:flex;}
.form-message.success{background:var(--green-soft); color:var(--green);}
.form-message.error{background:var(--coral-soft); color:var(--coral-dark);}
.form-message svg{width:16px; height:16px; flex-shrink:0;}

/* ==========================================================================
   CASE STUDY — plantilla compartida, uso variable por proyecto
   ========================================================================== */
.case-hero{position:relative; min-height:58vh; display:flex; align-items:flex-end; background-size:cover; background-position:center;}
.case-hero.short{min-height:46vh;}
.case-hero .scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,16,22,0) 30%,rgba(9,14,20,.88) 100%);}
.case-hero .case-hero-inner{position:relative; z-index:2; padding:var(--sp-5) 0 var(--sp-3); color:var(--white); max-width:720px;}
.case-hero .tag{margin-bottom:12px;}
.case-hero h1{font-size:var(--fs-h1); margin-bottom:10px;}
.case-hero p{font-size:var(--fs-body-lg); color:rgba(255,255,255,.85); max-width:560px;}

.case-back{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--night-2); padding:16px 0 0;}
.case-back:hover{color:var(--coral);}

.case-meta-row{display:flex; flex-wrap:wrap; gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:1px solid var(--gray-light); margin-bottom:var(--sp-4);}
.case-meta-item{flex:1; min-width:160px;}
.case-meta-item .lbl{font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gray-mid); margin-bottom:6px;}
.case-meta-item .val{font-size:15px; font-weight:600; color:var(--night);}

.case-section{max-width:720px; margin:0 auto var(--sp-4);}
.case-section.wide{max-width:960px;}
.case-section.wider{max-width:1100px;}
.case-section h2{margin-bottom:14px;}
.case-section .eyebrow-sm{display:block; font-size:11px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--coral-dark); margin-bottom:10px;}
.case-section p{font-size:var(--fs-body-lg); color:var(--night-2);}
.case-section ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:16px; color:var(--night-2);}
.case-section li::marker{color:var(--coral);}

.case-gallery{display:grid; gap:16px; max-width:1180px; margin:0 auto var(--sp-4);}
.case-gallery img{width:100%; border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.case-gallery.g-2{grid-template-columns:1fr 1fr;}
.case-gallery.g-full img{border-radius:var(--radius-lg); box-shadow:var(--shadow-md);}
.case-gallery.g-asym{grid-template-columns:1.4fr 1fr;}
.case-gallery.g-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){ .case-gallery.g-2, .case-gallery.g-asym, .case-gallery.g-3{grid-template-columns:1fr;} }

/* Captura principal de un sitio dentro de un case study — 75–82% del contenedor, nunca 100vw */
.case-showcase{max-width:920px; margin:0 auto var(--sp-4);}
.case-showcase img{width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);}
.case-showcase .tag-sm{display:inline-block; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gray-mid); background:var(--snow); border:1px solid var(--gray-light); padding:4px 10px; border-radius:999px; margin-bottom:10px;}

.case-identity{max-width:1180px; margin:0 auto var(--sp-4); background:var(--snow); border-radius:var(--radius-lg); padding:var(--sp-4);}
.case-identity-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:760px){ .case-identity-grid{grid-template-columns:1fr 1fr;} }
.case-identity-grid img{width:100%; border-radius:var(--radius-sm); background:var(--white); border:1px solid var(--gray-light);}

.case-detail{max-width:780px; margin:0 auto var(--sp-4); text-align:center;}
.case-detail img{border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); margin-bottom:14px; max-height:520px; width:auto; max-width:100%; margin-left:auto; margin-right:auto; object-fit:contain;}
.case-detail p{font-size:14px; color:var(--gray-mid); max-width:460px; margin:0 auto;}

/* Cierre de proyecto — dos columnas: CTA comercial + siguiente proyecto */
.case-next{background:var(--night); padding:var(--sp-5) 28px;}
.case-next .wrap{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); align-items:center;}
@media (max-width:760px){ .case-next .wrap{grid-template-columns:1fr; gap:var(--sp-4); text-align:center;} }
.case-next-cta h3{color:var(--white); font-size:22px; margin-bottom:8px;}
.case-next-cta p{color:rgba(255,255,255,.7); font-size:14.5px; margin-bottom:18px;}
.case-next-link{text-align:right;}
@media (max-width:760px){ .case-next-link{text-align:center;} }
.case-next-link .lbl{font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:8px; display:block;}
.case-next-link a.next-name{font-size:28px; font-weight:800; color:var(--white); display:block;}
.case-next-link a.next-name:hover{color:var(--coral);}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */
.text-center{text-align:center;}
.mt-1{margin-top:var(--sp-1);} .mt-2{margin-top:var(--sp-2);} .mt-3{margin-top:var(--sp-3);}
.mt-4{margin-top:var(--sp-4);} .mt-5{margin-top:var(--sp-5);}