/*
Theme Name: Luis Design
Theme URI: https://example.com/luis-design
Author: Luis Design
Description: Portafolio visual animado para flyers, historias y motion flyers.
Version: 2.1.6
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: luis-design
*/

:root {
  --ink: #00030e;
  --coal: #191b22;
  --lavender: #bca4ff;
  --white: #ffffff;
  --muted: #a7a9b2;
  --blue: #083d66;
  --line: rgba(255, 255, 255, 0.16);
  --radius: 28px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --site-scale: .9;
  --site-max-width: none;
  --content-max-width: none;
  --card-width: 250px;
  --category-title-size: 44px;
  --root-font-size: 14.4px;
  --scaled-card-width: 225px;
  --scaled-category-title-size: 39.6px;
  --mobile-category-title-size: 28.5px;
  --menu-fluid: 9vw;
  --hero-fluid: 12.5vw;
  --client-fluid: 3.6vw;
  --footer-fluid: 13.5vw;
  --archive-fluid: 10.8vw;
  --mobile-hero-fluid: 17vw;
  --mobile-footer-fluid: 18vw;
  --modal-max-width: 96vw;
  --modal-max-height: 96svh;
  /* ==== ALTURA DE LA PORTADA (HERO) ====
     Cambia solo este valor para ajustar el mínimo de alto de la portada. */
  --hero-min-height: 300px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size:var(--root-font-size); }
body {
  margin: 0;
  color: var(--white);
  background: var(--ink);
  font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  min-height: 100svh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
body::before {
  content:""; position:fixed; z-index:450; inset:0; pointer-events:none; opacity:.055;
  background:
    repeating-radial-gradient(circle at 17% 23%, rgba(255,255,255,.7) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 73% 67%, rgba(255,255,255,.45) 0 1px, transparent 1px 5px);
  background-size:7px 7px,11px 11px; mix-blend-mode:soft-light;
}
body.menu-open { overflow: hidden; }
body.modal-open { overflow:hidden; }
main,.site-footer { width:100%; max-width:none; margin:0; }
main { overflow:hidden; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.site-loader {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: var(--lavender); color: var(--ink); transition: transform .9s var(--ease);
}
.site-loader.is-done { transform: translateY(-105%); }
.loader-logo { width: clamp(130px, 22vw, 260px); animation:logoReveal .85s var(--ease) both; }
@keyframes logoReveal { from { transform:scale(.72) rotate(-8deg); opacity:0; filter:blur(14px); } to { transform:none; opacity:1; filter:none; } }

.site-header { position: fixed; z-index: 100; inset: 24px 0 auto; pointer-events: none; }
.nav-pill {
  pointer-events:auto; width:min(580px,calc(100% - 32px)); height:58px; margin:auto;
  padding:6px 7px 6px 18px; border:1px solid rgba(255,255,255,.15);
  background:rgba(70,73,76,.66); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:10px;
  display:grid; grid-template-columns:1fr auto 1fr auto; align-items:center; gap:20px;
  box-shadow:0 18px 55px rgba(0,0,0,.24);
}
.brand { display:flex; align-items:center; justify-content:center; }
.brand-logo { width:40px; height:38px; object-fit:contain; }
.nav-direct { font-size:.72rem; font-weight:600; text-align:center; transition:opacity .25s; }
.nav-direct:hover { opacity:.55; }
.menu-toggle {
  border:0; color:var(--white); background:rgba(0,0,0,.22); border-radius:7px; min-width:76px; height:44px;
  display:flex; align-items:center; justify-content:center; gap:9px; font-size:.72rem; font-weight:700; cursor:pointer;
}
.menu-icon, .menu-icon::before { width: 16px; height: 2px; background: currentColor; display: block; transition: .3s; content: ""; }
.menu-icon::before { transform: translateY(5px); }
.menu-open .menu-icon { transform: rotate(45deg); }
.menu-open .menu-icon::before { transform: rotate(90deg); }

.menu-panel {
  position: fixed; z-index: 90; inset: 0; background: var(--lavender); color: var(--ink);
  display: grid; align-items: end; padding: clamp(100px, 15vh, 160px) clamp(24px, 6vw, 90px) 50px;
  transform: translateY(-105%); transition: transform .7s var(--ease);
}
.menu-open .menu-panel { transform: none; }
.menu-panel ul { list-style: none; padding: 0; margin: 0; }
.menu-panel a { display: block; font-size: clamp(3.5rem, var(--menu-fluid), 9rem); font-weight: 900; line-height: .88; letter-spacing: -.07em; transition: transform .25s; }
.menu-panel a:hover { transform: translateX(2vw); }
.menu-meta { display:flex; justify-content:space-between; gap:20px; border-top:1px solid rgba(0,3,14,.25); padding-top:20px; margin-top:40px; }

.hero {
  min-height: max(80svh, var(--hero-min-height)); display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden;
  padding:110px clamp(20px,4vw,64px) clamp(36px,5.5vw,70px);
  background:
    linear-gradient(180deg,rgba(188,164,255,.82) 0%,rgba(188,164,255,.28) 23%,rgba(0,3,14,.92) 64%,var(--ink) 100%),
    radial-gradient(circle at 70% 25%,rgba(188,164,255,.38),transparent 32%),var(--ink);
}
.hero-mark { position:absolute; width:min(48vw,680px); right:-8vw; top:8vh; opacity:.12; animation:heroMark 1.2s .45s var(--ease) both; }
@keyframes heroMark { from { transform:scale(.7) rotate(-12deg); opacity:0; } to { transform:none; opacity:.12; } }
.hero-kicker { letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; color: var(--lavender); }
.hero-title { margin:16px 0 0; max-width:84%; font-size:clamp(4rem,var(--hero-fluid),12.5rem); line-height:.72; letter-spacing:-.09em; font-weight:900; position:relative; z-index:2; }
.hero-title span { display:block; }
.hero-title .outline { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.5); margin-left: 12vw; }
.hero-orbit { position:absolute; width:min(42vw,580px); aspect-ratio:1; right:-5%; top:13%; border:1px solid rgba(188,164,255,.5); border-radius:50%; animation:spin 18s linear infinite; }
.hero-orbit::before,.hero-orbit::after { content:""; position:absolute; inset:9%; border:1px dashed rgba(255,255,255,.28); border-radius:50%; }
.hero-orbit::after { inset:43%; background:var(--lavender); border:0; box-shadow:0 0 90px var(--lavender); }
@keyframes spin { to { transform:rotate(1turn); } }
.scroll-note { position:absolute; right:4vw; bottom:4vw; font-size:.7rem; letter-spacing:.18em; writing-mode:vertical-rl; text-transform:uppercase; }
.hero-intro {
  position:absolute; z-index:3; right:clamp(28px,7vw,110px); bottom:clamp(80px,13vh,140px);
  width:min(290px,28vw); margin:0; font-size:clamp(.9rem,1.15vw,1.12rem); line-height:1.35; color:rgba(255,255,255,.84);
}
.hero-counter { position:absolute; z-index:3; left:clamp(20px,4vw,64px); top:38%; font-size:.8rem; letter-spacing:.12em; color:rgba(255,255,255,.5); }

.portfolio-section { position:relative; padding:0 0 28px; background:#d8d8d5; color:var(--ink); overflow:hidden; }
.portfolio-section.alt { background:var(--coal); color:var(--white); }
.portfolio-section.blue { background:#073e66; color:var(--white); }
.portfolio-section::before {
  content:attr(data-index); position:absolute; z-index:3; right:3vw; top:12px; font-size:.7rem; letter-spacing:.14em;
  color:currentColor; opacity:.38;
}
.section-title {
  position:relative; z-index:2; flex:none; margin:-15px 0 -9px; padding-left:clamp(24px,7vw,74px);
  font-size:var(--scaled-category-title-size); line-height:.9; letter-spacing:-.07em;
  color:var(--white); text-shadow:0 4px 0 rgba(0,0,0,.22); white-space:nowrap;
}
.news-rail { background:var(--ink); color:var(--white); min-height:38px; overflow:visible; border-block:1px solid rgba(255,255,255,.08); }
.category-band { width:100%; max-width:var(--content-max-width); margin-inline:auto; min-height:38px; display:flex; align-items:center; gap:16px; }
.news-window { flex:1; min-width:0; overflow:hidden; }
.news-track { display:flex; width:max-content; animation:newsMove 24s linear infinite; }
.news-track span { text-transform:uppercase; letter-spacing:.2em; font-size:.62rem; white-space:nowrap; padding-right:40px; }
.news-track b { color:var(--lavender); margin-right:16px; }
@keyframes newsMove { to { transform:translateX(-50%); } }

.cards {
  display:flex; align-items:flex-start; justify-content:center; width:100%; max-width:var(--content-max-width);
  gap:clamp(14px,1.8vw,22px); overflow-x:auto; margin-inline:auto;
  padding:42px clamp(20px,4vw,48px) 25px; scrollbar-width:none; cursor:grab; scroll-snap-type:x proximity;
}
.cards.is-overflowing { justify-content:flex-start; }
.cards::-webkit-scrollbar { display:none; }
.phone-card { display:block; flex:0 0 var(--scaled-card-width); position:relative; border-radius:38px; overflow:hidden; aspect-ratio:9/16; background:#101116; box-shadow:0 16px 12px -10px rgba(0,0,0,.68); isolation:isolate; transform:translateZ(0); scroll-snap-align:center; }
.phone-card { transition:transform .55s var(--ease),filter .4s,box-shadow .4s; }
.phone-card:hover { transform:translateY(-8px); box-shadow:0 20px 14px -10px rgba(0,0,0,.72); }
.phone-card.format-flyer { aspect-ratio:3/4; border-radius:34px; }
.phone-card.format-square { aspect-ratio:1/1; border-radius:30px; }
.phone-card.format-portrait { aspect-ratio:4/5; border-radius:34px; }
.phone-card.format-landscape { aspect-ratio:16/9; border-radius:28px; }
.phone-card.format-story,.phone-card.format-motion { aspect-ratio:9/16; }
.phone-card::before { display:none; }
.phone-card::after { content:""; position:absolute; z-index:3; inset:0; border:7px solid #111319; border-radius:38px; pointer-events:none; }
.phone-card.format-flyer::after { border-radius:34px; }
.phone-card.format-square::after { border-radius:30px; }
.phone-card.format-portrait::after { border-radius:34px; }
.phone-card.format-landscape::after { border-radius:28px; }
.phone-media {
  width:100%; height:100%; object-fit:contain; object-position:center;
  background:#05060a; transition:transform .8s var(--ease), filter .5s;
}
.phone-card:hover .phone-media,.phone-card:focus-visible .phone-media { transform:none; filter:saturate(1.12); }
.phone-card:active .phone-media { transform:none; }
.phone-placeholder { position:absolute; inset:0; background:radial-gradient(circle at 70% 25%, var(--lavender), transparent 25%), linear-gradient(145deg,#14151d,#5429b9 55%,#00030e); }
.card-overlay { position:absolute; z-index:4; inset:auto 7px 7px; padding:42px 18px 18px; border-radius:0 0 31px 31px; background:linear-gradient(transparent,rgba(0,0,0,.92)); color:white; }
.format-flyer .card-overlay { border-radius:0 0 27px 27px; }
.format-square .card-overlay { border-radius:0 0 23px 23px; padding-top:55px; }
.format-landscape .card-overlay { border-radius:0 0 21px 21px; padding-top:40px; }
.card-type { font-size:.62rem; letter-spacing:.17em; text-transform:uppercase; color:var(--lavender); }
.card-title { font-size:1.35rem; letter-spacing:-.04em; margin:6px 0 0; line-height:1; }
.section-cta { display:flex; justify-content:center; padding-top:24px; }
.pill-link { display:inline-flex; justify-content:center; align-items:center; min-width:210px; min-height:52px; padding:0 28px; border:1px solid currentColor; border-radius:999px; color:inherit; background:transparent; font-weight:700; font-size:.85rem; transition:transform .25s,background .25s,color .25s; }
.pill-link:hover { transform:scale(1.04); background:var(--white); color:var(--ink); }

.clients { background:var(--ink); padding:28px 0; overflow:hidden; border-block:1px solid var(--line); }
.client-track { display:flex; width:max-content; gap:80px; animation:clientMove 28s linear infinite; align-items:center; }
.client-track span { font-size:clamp(1.8rem,var(--client-fluid),4rem); font-weight:900; color:rgba(255,255,255,.38); white-space:nowrap; }
@keyframes clientMove { to { transform:translateX(-50%); } }

.site-footer { background:var(--lavender); color:var(--ink); padding:clamp(70px,10vw,150px) clamp(20px,4vw,64px) 28px; overflow:hidden; }
.footer-logo { width:clamp(74px,9vw,130px); margin-bottom:42px; }
.footer-kicker { text-transform:uppercase; letter-spacing:.25em; font-size:.7rem; }
.footer-title { font-size:clamp(4.5rem,var(--footer-fluid),15rem); line-height:.73; letter-spacing:-.09em; margin:30px 0 60px; }
.footer-title a { display:inline-block; transition:transform .3s; }
.footer-title a:hover { transform:translateX(2vw); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; padding-top:25px; border-top:1px solid rgba(0,3,14,.3); }
.footer-grid p { margin:0; }
.footer-grid a { text-decoration:underline; text-underline-offset:4px; }
.footer-bottom { display:flex; justify-content:space-between; margin-top:70px; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; }

.archive-hero,.single-hero { padding:180px 4vw 70px; }
.archive-title,.single-title { font-size:clamp(4rem,var(--archive-fluid),11rem); line-height:.8; letter-spacing:-.08em; margin:0; }
.archive-grid { padding:30px 4vw 100px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; }
.single-layout { display:grid; grid-template-columns:minmax(280px,520px) 1fr; gap:7vw; align-items:start; padding:30px 4vw 120px; }
.single-media { border-radius:38px; overflow:hidden; background:var(--coal); }
.single-copy { position:sticky; top:130px; font-size:1.15rem; line-height:1.6; }
.mobile-app-nav { display:none; }
.portfolio-modal {
  position:fixed; z-index:500; inset:0; padding:clamp(6px,1vw,14px);
  display:grid; place-items:center; background:rgba(0,3,14,.74);
  backdrop-filter:blur(24px) saturate(.72); -webkit-backdrop-filter:blur(24px) saturate(.72);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease),visibility .35s;
}
.portfolio-modal.is-open { opacity:1; visibility:visible; }
.portfolio-modal-dialog {
  position:relative; display:grid; place-items:center;
  width:min(var(--modal-max-width),calc(100vw - 32px));
  height:min(var(--modal-max-height),84svh);
  transform:scale(.92); opacity:0; transition:transform .45s var(--ease),opacity .35s;
}
.portfolio-modal.is-open .portfolio-modal-dialog { transform:none; opacity:1; }
.portfolio-modal-content {
  display:grid; place-items:center;
  width:min(var(--modal-max-width),760px,calc(100vw - 80px));
  height:min(var(--modal-max-height),80svh);
}
.portfolio-modal-content img,.portfolio-modal-content video {
  display:block; width:auto; height:100%; max-width:100%; max-height:100%; object-fit:contain;
  border-radius:22px; box-shadow:0 35px 110px rgba(0,0,0,.72);
  animation:modalMediaZoom .55s var(--ease) both;
}
@keyframes modalMediaZoom { from { opacity:0; transform:scale(.82); } to { opacity:1; transform:none; } }
.portfolio-modal-close {
  position:absolute; z-index:2; top:0; right:0; width:48px; height:48px; border:1px solid rgba(255,255,255,.28);
  border-radius:50%; background:rgba(0,3,14,.72); color:white; font-size:1.8rem; line-height:1;
  display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(10px);
}
.single-layout.media-only { grid-template-columns:1fr; max-width:1000px; margin-inline:auto; }
.single-layout.media-only .single-media { width:min(100%,700px); margin-inline:auto; }
.reveal-ready .portfolio-section .category-band,
.reveal-ready .portfolio-section .phone-card,
.reveal-ready .clients {
  opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.reveal-ready .portfolio-section.is-visible .category-band,
.reveal-ready .portfolio-section.is-visible .phone-card,
.reveal-ready .clients.is-visible { opacity:1; transform:none; }
.reveal-ready .portfolio-section.is-visible .phone-card:hover { transform:translateY(-10px); }
.reveal-ready .portfolio-section .phone-card:nth-child(2) { transition-delay:70ms; }
.reveal-ready .portfolio-section .phone-card:nth-child(3) { transition-delay:140ms; }
.reveal-ready .portfolio-section .phone-card:nth-child(4) { transition-delay:210ms; }
.reveal-ready .portfolio-section .phone-card:nth-child(5) { transition-delay:280ms; }

@media (max-width: 1024px) {
  body { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  .site-header { top:calc(12px + env(safe-area-inset-top)); }
  .nav-pill { width:calc(100% - 24px); border-radius:20px; }
  .hero { min-height:max(85svh, var(--hero-min-height)); padding-top:calc(100px + env(safe-area-inset-top)); }
  .hero-mark { width:76vw; right:-22vw; top:17vh; }
  .phone-card { flex-basis:min(var(--scaled-card-width),68vw); }
  .section-head { align-items:center; }
  .archive-grid { grid-template-columns:repeat(2,1fr); gap:18px; }
  .single-layout { grid-template-columns:1fr; }
  .single-copy { position:static; }
  .footer-grid { grid-template-columns:1fr; }
  .site-footer { border-radius:32px 32px 0 0; padding-bottom:42px; }
  .mobile-app-nav {
    position:fixed; z-index:80; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom));
    height:64px; padding:6px; border:1px solid rgba(255,255,255,.13); border-radius:22px;
    background:rgba(25,27,34,.88); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    display:grid; grid-template-columns:repeat(3,1fr); box-shadow:0 16px 50px rgba(0,0,0,.38);
  }
  .mobile-app-nav a { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; border-radius:16px; color:var(--muted); font-size:.62rem; font-weight:700; }
  .mobile-app-nav a:active,.mobile-app-nav a:hover { color:var(--ink); background:var(--lavender); }
  .mobile-app-nav b { font-size:1.1rem; line-height:1; }
  .phone-card { scroll-snap-align:center; border-radius:34px; }
  .cards { scroll-snap-type:x mandatory; padding-inline:14vw; touch-action:pan-x; }
}
@media (max-width: 520px) {
  .hero-title { font-size:var(--mobile-hero-fluid); }
  .archive-grid { grid-template-columns:1fr; }
  .menu-meta,.footer-bottom { flex-direction:column; }
  .nav-pill { height:58px; }
  .nav-pill { display:flex; justify-content:space-between; padding-left:16px; }
  .nav-direct { display:none; }
  .menu-toggle { height:44px; min-width:94px; }
  .section-title { padding-left:20px; font-size:var(--mobile-category-title-size); }
  .category-band { gap:10px; }
  .footer-title { font-size:var(--mobile-footer-fluid); }
  .portfolio-modal { padding:12px; }
  .portfolio-modal-dialog { width:100%; height:86svh; }
  .portfolio-modal-close { top:8px; right:8px; }
  .portfolio-modal-content { width:calc(100vw - 32px); height:80svh; }
  .portfolio-modal-content img,.portfolio-modal-content video { width:auto; height:100%; max-width:100%; max-height:100%; border-radius:16px; object-fit:contain; }
  .hero-intro { position:relative; right:auto; bottom:auto; width:min(82vw,310px); margin:26px 0 0 auto; }
  .hero-counter { top:29%; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
  .cards { grid-auto-columns:minmax(260px,34vw); }
  .hero-title { font-size:17vw; }
  .archive-grid { grid-template-columns:repeat(3,1fr); }
}
@media (display-mode: standalone) {
  .site-header { top:calc(14px + env(safe-area-inset-top)); }
  body { user-select:none; -webkit-user-select:none; }
  input,textarea,[contenteditable] { user-select:text; -webkit-user-select:text; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

.luis-login-page {
  min-height:100svh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(circle at 15% 15%,rgba(188,164,255,.24),transparent 32%),
    radial-gradient(circle at 85% 85%,rgba(8,61,102,.5),transparent 34%),var(--ink);
}
.login-shell {
  width:min(100%,430px); padding:38px; border:1px solid rgba(255,255,255,.14); border-radius:26px;
  background:rgba(25,27,34,.8); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  box-shadow:0 35px 100px rgba(0,0,0,.48);
}
.login-brand { display:block; width:78px; margin:0 auto 28px; }
.login-shell h1 { margin:0 0 8px; font-size:2.5rem; letter-spacing:-.06em; text-align:center; }
.login-shell > p { margin:0 0 30px; color:var(--muted); text-align:center; }
.login-shell label { display:block; margin-bottom:7px; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
.login-shell input[type="text"],.login-shell input[type="password"] {
  width:100%; min-height:50px; padding:0 15px; border:1px solid rgba(255,255,255,.14); border-radius:12px;
  color:white; background:rgba(0,3,14,.66); outline:none;
}
.login-shell input:focus { border-color:var(--lavender); box-shadow:0 0 0 3px rgba(188,164,255,.15); }
.login-shell .login-remember label { display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; }
.login-shell .button-primary {
  width:100%; min-height:52px; border:0; border-radius:12px; background:var(--lavender); color:var(--ink); font-weight:900; cursor:pointer;
}
.login-home { display:block; margin-top:22px; text-align:center; color:var(--muted); font-size:.8rem; }
.login-error { padding:12px 14px; margin-bottom:20px; border-radius:10px; background:rgba(190,30,45,.2); color:#ffb7bf; }