/* =====================================================================
   Lucía Rendón — Portafolio
   Paleta clara (marfil/salvia) + secciones de contraste en verde bosque.
   Tipos: Josefin Sans (UI/títulos) + Cormorant Garamond (editorial).
   ===================================================================== */

:root{
  --papel:#F5F0DC; --papel2:#EFE8CE; --marfil:#FFFDF6; --crema:#F3ECD6;
  --salvia:#A8C0A0; --salvia-claro:#DCE5D5;
  --oliva:#5A6B4A; --bosque:#3E4A32;
  --topo:#7A5A5A; --gris:#9A9A9A;
  --tinta:#2B2A24; --acento:#7A5A5A;
  --r:28px; --maxw:1120px;
  --shadow:0 -14px 40px rgba(30,36,20,.16);
  --font-title:"Josefin Sans",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta); overflow-x:hidden;
  font-family:var(--font-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand,.btn,.top nav a,.lang button,.theme-btn,.kicker,.eyebrow,.badge,.count,.mini,.subnav button,.gbtn,.arrow,.drag-hint,.tl-year,.edu-year,.stats b,.stat b{font-family:var(--font-title)}
/* marca de agua floral muy sutil sobre el fondo claro */
body::before{
  content:""; position:fixed; z-index:0; pointer-events:none;
  top:-60px; right:-40px; width:min(46vw,560px); height:740px;
  background:url(../assets/floral-olive.svg) no-repeat center/contain; opacity:.045;
}
body > *{position:relative; z-index:1}

h1,h2,h3{margin:0 0 .35em; font-weight:600; letter-spacing:-.02em; line-height:1.08}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%; display:block}
small{font-size:.82em}
::selection{background:var(--acento); color:#fff}
:focus-visible{outline:2.5px solid var(--acento); outline-offset:3px}

.kicker{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--oliva); font-weight:600}
.serif,.lead{font-family:var(--font-body)}

/* ---------------- Botones (barrido de color, paleta del proyecto) ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background-image:linear-gradient(90deg,var(--bosque) 50%,var(--acento) 50%);
  background-size:200% 100%; background-position:0 0; background-repeat:no-repeat;
  color:var(--marfil); border:2px solid var(--bosque);
  padding:13px 28px; border-radius:999px; text-decoration:none; font:inherit;
  font-weight:600; cursor:pointer;
  transition:background-position .42s cubic-bezier(.7,0,.2,1), color .25s ease, transform .2s ease, box-shadow .2s ease, border-color .25s ease;
}
.btn:hover{background-position:100% 0; border-color:var(--acento); transform:translateY(-2px); box-shadow:0 12px 26px rgba(62,74,50,.3)}
.btn.ghost{
  background-image:linear-gradient(90deg,transparent 50%,var(--acento) 50%);
  background-size:200% 100%; background-position:0 0; background-repeat:no-repeat;
  color:var(--bosque);
}
.btn.ghost:hover,.btn.ghost:active{background-position:100% 0; color:var(--marfil); border-color:var(--acento)}

/* ---------------- Cabecera flotante (píldora) ---------------- */
.top{
  position:sticky; top:12px; z-index:60; display:flex; gap:18px; align-items:center;
  justify-content:space-between; width:calc(100% - 32px); max-width:1180px;
  margin:12px auto 0; padding:9px 12px 9px 22px;
  background:rgba(255,253,246,.86); border:1px solid rgba(0,0,0,.08);
  border-radius:999px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 40px rgba(35,43,26,.12);
}
.top .brand{font-weight:700; text-decoration:none; font-size:20px; display:flex; align-items:center; gap:10px}
.top .brand .dot{width:8px; height:8px; border-radius:50%; background:var(--acento)}
.top-right{display:flex; align-items:center; gap:10px}
.top-nav{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.top-nav a{
  font-family:var(--font-title); font-size:13px; letter-spacing:.02em;
  padding:8px 14px; border-radius:999px; border:1px solid rgba(0,0,0,.14);
  color:inherit; text-decoration:none; white-space:nowrap;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.top-nav a:hover,.top-nav a.active{background:var(--marfil); color:var(--tinta); border-color:var(--marfil)}
.lang{display:flex; gap:6px}
.lang button{border:1px solid rgba(0,0,0,.14); background:transparent; border-radius:999px; padding:6px 13px; cursor:pointer; font:inherit; font-size:13px; font-weight:600; transition:.2s; color:inherit}
.lang button.on{background:var(--bosque); color:var(--marfil); border-color:var(--bosque)}
.theme-btn{border:1px solid rgba(0,0,0,.14); background:transparent; border-radius:999px; width:38px; height:34px; cursor:pointer; font-size:16px; line-height:1; display:grid; place-items:center; transition:.2s; color:inherit}
.theme-btn:hover{border-color:var(--bosque)}

/* ---------------- Hero ---------------- */
.hero-home{
  position:relative; max-width:var(--maxw); margin:0 auto;
  padding:64px 28px 24px; display:grid; grid-template-columns:1.08fr .92fr;
  gap:48px; align-items:center;
}
.hero-home .floral-hero{position:absolute; left:-30px; bottom:-40px; width:190px; opacity:.18; pointer-events:none; z-index:0}
.hero-txt{position:relative; z-index:1}
.hero-home h1{font-size:clamp(30px,4.2vw,52px); line-height:1.06; margin:.2em 0}
@media(min-width:481px){.hero-home h1 .l2{white-space:nowrap}}
.hero-txt .sub{font-family:var(--font-body); font-size:19px; line-height:1.55; max-width:600px; color:#3b3b31}
.cta-row{display:flex; gap:14px; margin:26px 0 30px; flex-wrap:wrap}
.stats{display:flex; gap:36px; margin-top:6px}
.stats b{font-size:28px; display:block}
.stats span{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--oliva)}

.hero-photo{
  position:relative; border-radius:36px; aspect-ratio:4/5; overflow:hidden;
  box-shadow:0 30px 70px rgba(35,43,26,.3);
  background:linear-gradient(140deg,#DCE5D5,#E8D9C8 55%,#DCCFC0);
}
.hero-photo::after{content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,transparent 55%,rgba(35,43,26,.28)); pointer-events:none}
.hero-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; z-index:2}
.photo-ph{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; text-align:center; color:#3E4A32}
.photo-ph::before{content:""; position:absolute; width:300px; height:300px; background:url(../assets/floral-olive.svg) no-repeat center/contain; opacity:.28}
.photo-ph b{position:relative; font-family:var(--font-body); font-size:76px; line-height:1; letter-spacing:.02em}
.photo-ph span{position:relative; font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.75; max-width:220px}
.chip{position:absolute; z-index:4; background:rgba(255,253,246,.94); color:var(--tinta); border-radius:999px; padding:9px 17px; font-size:14px; font-weight:600; box-shadow:0 10px 26px rgba(0,0,0,.18); animation:float 5s ease-in-out infinite}
.c1{top:24px; left:20px}.c2{top:45%; right:16px; animation-delay:1.2s}.c3{bottom:26px; left:28px; animation-delay:2.1s}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* ---------------- Stacks de categorías ---------------- */
.stacks{max-width:var(--maxw); margin:44px auto 0; padding:0 28px 44px; display:flex; flex-direction:column}
.card-stack{
  position:sticky; top:80px; border-radius:var(--r); padding:30px 32px;
  margin-top:-16px; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  display:block; overflow:hidden; transition:transform .28s ease, box-shadow .28s ease;
}
.card-stack:first-child{margin-top:0}
.card-stack:hover{transform:translateY(-6px); box-shadow:0 -18px 50px rgba(30,36,20,.26)}
.card-stack .row{display:flex; justify-content:space-between; align-items:stretch; gap:30px}
.stack-txt{max-width:640px; min-width:0}
.stack-visual{position:relative; flex:0 0 168px; display:flex; flex-direction:column; align-items:flex-end; gap:14px}
.stack-img{width:168px; height:190px; object-fit:cover; border-radius:20px; border:1px solid rgba(255,255,255,.35); box-shadow:0 16px 34px rgba(0,0,0,.2)}
.eyebrow{font-size:12px; letter-spacing:.2em; text-transform:uppercase; opacity:.72}
.card-stack h2{font-size:clamp(28px,4vw,46px); margin:.15em 0 .22em}
.card-stack p{font-family:var(--font-body); font-size:17px; margin:0; max-width:540px; opacity:.92}
.count{background:rgba(0,0,0,.1); border-radius:999px; padding:7px 16px; font-weight:700; white-space:nowrap; text-align:center; line-height:1.1}
.card-stack.dark .count{background:rgba(255,255,255,.18)}
.count small{display:block; font-weight:400; font-size:11px; letter-spacing:.14em}
.arrow{margin-top:16px; display:inline-block; border:1.6px solid currentColor; border-radius:999px; padding:9px 20px; font-size:14px; font-weight:600; transition:transform .25s ease}
.card-stack:hover .arrow{transform:translateX(5px)}

/* ---------------- Banda suave (Sobre mí + Contacto) ---------------- */
.deep{
  position:relative; margin-top:48px; border-radius:56px 56px 0 0; overflow:hidden;
  background:linear-gradient(180deg, var(--papel2), var(--salvia-claro));
  color:var(--tinta);
}
.deep::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.06; background:url(../assets/floral-olive.svg) no-repeat; background-position:right -50px top -40px; background-size:440px}
.deep::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 12% 0%, rgba(122,90,90,.1), transparent 62%),
    radial-gradient(60% 55% at 100% 100%, rgba(90,107,74,.1), transparent 60%);}
.deep > *{position:relative; z-index:1}

.about,.contact{max-width:var(--maxw); margin:0 auto; padding:84px 28px}
.about h2,.contact h2,.exp h2{color:var(--bosque); font-size:clamp(30px,4.6vw,54px)}
.about-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:52px; align-items:start; margin-top:34px}
.about-grid>*,.contact-grid>*,.hero-home>*{min-width:0}
.about-photo{position:relative; border-radius:28px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 24px 55px rgba(62,74,50,.22)}
.about-photo img{width:100%; height:100%; object-fit:cover}
.about-photo .photo-tag{position:absolute; left:16px; bottom:16px; background:rgba(255,253,246,.9); backdrop-filter:blur(6px); color:var(--oliva); font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:7px 13px; border-radius:999px}
.about .lead{font-size:18px; line-height:1.6; color:#4a4a40; margin-bottom:26px}
.mini{font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--oliva); margin:0 0 14px; font-weight:600}
.services{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.svc{border:1px solid rgba(62,74,50,.14); border-radius:18px; padding:16px 18px; background:rgba(255,253,246,.55)}
.svc b{display:block; font-size:15px; color:var(--bosque); margin-bottom:3px}
.svc span{font-size:13px; color:#5f5b4c}
.clients{margin-top:30px; padding-top:22px; border-top:1px solid rgba(62,74,50,.14); overflow:hidden}
.clients i{font-style:normal; display:block; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gris); margin-bottom:14px}
.marquee{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__track{display:flex; align-items:center; width:max-content; animation:marquee 26s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__dup{display:flex; align-items:center}
.marquee .logo{display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 22px; white-space:nowrap}
.logo-img{height:30px; width:auto; max-width:130px; object-fit:contain; display:block}
.logo-txt{font-family:var(--font-title); font-weight:600; font-size:20px; letter-spacing:.05em; color:var(--oliva); opacity:.9}
html.theme-dark .logo-img{filter:brightness(0) invert(1); opacity:.85}
.marquee .logo::after{content:"·"; margin-left:44px; opacity:.4; color:var(--oliva)}
html.theme-dark .marquee .logo::after{color:#8f8878}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.quote{border-left:2px solid var(--acento); padding-left:22px; margin:30px 0 0}
.quote p{font-family:var(--font-body); font-size:22px; font-style:italic; color:#3f3f34; margin-bottom:8px}
.quote cite{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); font-style:normal}

/* ---------------- Experiencia + herramientas + formación ---------------- */
.exp{max-width:var(--maxw); margin:0 auto; padding:0 28px 84px}
.lead2{font-family:var(--font-body); font-size:16px; line-height:1.6; color:#4a4a40; margin:0 0 24px}
.tools{margin-top:26px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips span{border:1px solid rgba(62,74,50,.2); border-radius:999px; padding:6px 13px; font-size:13px; background:rgba(255,253,246,.55); color:#4a4a40}
.timeline{list-style:none; margin:26px 0 0; padding:0}
.timeline li{display:grid; grid-template-columns:118px 1fr; gap:22px; padding:18px 0; border-top:1px solid rgba(62,74,50,.16)}
.timeline li:last-child{border-bottom:1px solid rgba(62,74,50,.16)}
.tl-year{font-size:13px; letter-spacing:.06em; color:var(--oliva); font-weight:600}
.tl-body b{display:block; font-size:18px; color:var(--bosque)}
.tl-place{display:block; font-size:13px; letter-spacing:.05em; color:#7a7666; margin:2px 0 6px}
.tl-body p{margin:0; font-family:var(--font-body); font-size:15.5px; line-height:1.55; color:#4f4f45}
.edu{margin-top:48px; padding-top:28px; border-top:1px solid rgba(62,74,50,.16)}
.edu-list{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.edu-list li{display:grid; grid-template-columns:118px 1fr; gap:22px}
.edu-year{font-size:13px; color:var(--oliva); font-weight:600}
.edu-list b{display:block; color:var(--bosque)}
.edu-list i{font-style:normal; font-size:13px; color:#7a7666}
.lang-line{font-family:var(--font-body); font-size:15.5px; color:#4f4f45; margin:18px 0 0}
.contact-lines{display:flex; gap:20px; flex-wrap:wrap; margin:0 0 20px}
.contact-lines a{text-decoration:none; font-weight:600; border-bottom:1.5px solid transparent; transition:.2s; color:var(--bosque)}
.contact-lines a:hover{border-color:var(--acento)}
html.theme-dark .contact-lines a{color:var(--crema-txt)}

/* ---------------- Contacto ---------------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:start; margin-top:30px}
.contact .lead{font-family:var(--font-body); font-size:18px; line-height:1.6; color:#4a4a40; margin-bottom:22px}
.socials{display:flex; gap:20px; flex-wrap:wrap; margin:0 0 26px}
.socials a{color:var(--bosque); font-weight:600; text-decoration:none; border-bottom:1.5px solid transparent; transition:.2s}
.socials a:hover{border-color:var(--acento)}
.btns{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px}
.contact .loc{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--oliva)}

form#cform{background:var(--marfil); color:var(--tinta); border:1px solid rgba(62,74,50,.1); border-radius:24px; padding:26px; display:flex; flex-direction:column; gap:15px; box-shadow:0 20px 50px rgba(62,74,50,.14)}
form#cform label{font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:#5c5c50; display:flex; flex-direction:column; gap:7px}
form#cform input,form#cform textarea{border:1px solid rgba(0,0,0,.15); border-radius:14px; padding:12px 15px; font:inherit; font-weight:400; letter-spacing:normal; text-transform:none; background:#fff; color:var(--tinta)}
form#cform input:focus,form#cform textarea:focus{outline:2px solid var(--salvia); border-color:var(--salvia)}
form#cform .btn{background-image:linear-gradient(90deg,var(--bosque) 50%,var(--acento) 50%); color:var(--marfil); border-color:var(--bosque)}
form#cform .btn:hover{color:var(--marfil); border-color:var(--acento)}
html.theme-dark form#cform .btn{background-image:linear-gradient(90deg,var(--bosque) 50%,var(--acento) 50%); color:var(--marfil); border-color:var(--bosque)}
form#cform .ok{color:var(--oliva); font-weight:600; margin:2px 0 0}
form#cform .err{color:var(--topo); font-weight:600; margin:2px 0 0}

/* ---------------- Pie ---------------- */
footer{background:var(--papel2); color:#00000088; text-align:center; padding:36px 24px; font-size:13px; border-top:1px solid rgba(0,0,0,.06)}
footer a{color:var(--bosque); text-decoration:none; border-bottom:1.5px solid transparent; transition:.2s}
footer a:hover{border-color:var(--acento)}
footer .foot-nav{display:flex; gap:20px; justify-content:center; margin-bottom:12px; flex-wrap:wrap}

/* ---------------- Detalle de categoría ---------------- */
.detail-hero{position:relative; max-width:var(--maxw); margin:0 auto; padding:52px 28px 0}
.detail-hero h1{font-size:clamp(34px,6vw,64px); margin:.15em 0}
.detail-hero .sub{font-family:var(--font-body); font-size:18px; line-height:1.55; color:#4b4b40; max-width:660px}
.detail-hero .floral-detail{position:absolute; right:28px; top:20px; width:150px; opacity:.14; pointer-events:none}
.subnav{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.subnav button{border-radius:999px; border:1.5px solid rgba(0,0,0,.15); background:transparent; padding:9px 18px; cursor:pointer; font:inherit; font-weight:600; transition:.2s}
.subnav button:hover{border-color:var(--bosque)}
.subnav button.on{background:var(--bosque); color:var(--marfil); border-color:var(--bosque)}

.gallery{position:relative; margin-top:6px}
.hscroll{
  display:flex; align-items:flex-start; gap:26px; overflow-x:auto; padding:30px 28px 26px;
  scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab;
}
.hscroll::-webkit-scrollbar{height:0}
.hscroll.dragging{cursor:grabbing; scroll-snap-type:none}
.gallery__arrows{position:absolute; top:46%; transform:translateY(-50%); width:100%; display:flex; justify-content:space-between; padding:0 12px; pointer-events:none; z-index:6}
.gbtn{pointer-events:auto; width:50px; height:50px; border-radius:50%; border:none; background:var(--bosque); color:var(--marfil); font-size:24px; line-height:1; cursor:pointer; box-shadow:0 12px 26px rgba(0,0,0,.28); display:grid; place-items:center; transition:.2s}
.gbtn:hover{background:var(--acento)}
.gbtn[disabled]{opacity:0; pointer-events:none}
.gallery__bar{max-width:var(--maxw); margin:0 auto; height:4px; background:rgba(0,0,0,.09); border-radius:4px; position:relative; overflow:hidden}
.gallery__progress{position:absolute; top:0; left:0; height:100%; width:30%; background:var(--bosque); border-radius:4px}
.drag-hint{max-width:var(--maxw); margin:14px auto 64px; padding:0 28px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--oliva)}

.proj{
  flex:0 0 min(430px,84vw); scroll-snap-align:center; background:var(--marfil);
  border-radius:22px; overflow:hidden; border:1px solid rgba(0,0,0,.07);
  box-shadow:0 14px 40px rgba(35,43,26,.1); cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease;
}
.proj:hover{transform:translateY(-6px); box-shadow:0 26px 60px rgba(35,43,26,.2)}
.cover{position:relative; overflow:hidden; background:linear-gradient(140deg,#E8D9C8,#DCE5D5); display:grid; place-items:center}
.cover--long{aspect-ratio:16/9}
.cover--vertical{aspect-ratio:9/16}
/* Todas las portadas que no sean verticales (UGC/TikTok) usan el mismo marco 16:9
   que la ficha de referencia (Video · «Eres para mí»). */
.cover--photo{aspect-ratio:16/9}
/* La imagen/vídeo se ancla al marco para que object-fit y object-position
   funcionen de verdad (antes la imagen desbordaba y se recortaba desde arriba). */
.cover img,.cover video,.cover iframe{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; display:block; transition:transform .5s ease}
.proj .cover img{ -webkit-user-drag:none; user-select:none }
.proj:hover .cover img{transform:scale(1.06)}
.cover .ph{font-family:var(--font-body); font-size:22px; color:#6b6656; text-align:center; padding:22px; line-height:1.5}
.play{position:absolute; inset:0; display:grid; place-items:center; background:rgba(35,43,26,.16); opacity:0; transition:.25s}
.proj:hover .play{opacity:1}
.play span{width:60px; height:60px; border-radius:50%; background:var(--marfil); color:var(--bosque); display:grid; place-items:center; font-size:20px; padding-left:4px; box-shadow:0 10px 24px rgba(0,0,0,.3)}
/* Bloque de texto uniforme: todas las fichas miden igual (título y descripción
   limitados a 2 líneas; el enlace queda siempre abajo). */
.meta{padding:18px 20px; min-height:205px; display:flex; flex-direction:column; align-items:flex-start}
.badge{font-size:11px; letter-spacing:.14em; text-transform:uppercase; background:var(--salvia-claro); color:#3a4a34; border-radius:999px; padding:5px 11px}
.meta h3{font-size:21px; margin:.55em 0 .2em; color:var(--bosque); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.meta p{font-family:var(--font-body); font-size:15.5px; line-height:1.55; color:#5a5a50; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.meta .more{display:inline-block; margin-top:auto; padding-top:12px; font-size:13px; font-weight:600; color:var(--bosque); transition:transform .2s, color .2s}
.proj:hover .meta .more{transform:translateX(4px); color:var(--acento)}

/* ---------------- Ficha de proyecto (tipo Behance) ---------------- */
.proj-hero{position:relative; max-width:var(--maxw); margin:0 auto; padding:44px 28px 0}
.proj-hero .back{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--marfil); border:1px solid rgba(62,74,50,.18);
  border-radius:999px; padding:8px 18px 8px 9px; margin-bottom:26px;
  color:var(--bosque); text-decoration:none;
  box-shadow:0 8px 20px rgba(35,43,26,.08);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.proj-hero .back .back-arrow{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--salvia-claro); color:var(--bosque); font-size:16px; line-height:1;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.proj-hero .back .back-txt{display:flex; flex-direction:column; line-height:1.12; text-align:left}
.proj-hero .back .back-txt small{font-family:var(--font-body); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--oliva); font-weight:600}
.proj-hero .back .back-txt b{font-family:var(--font-title); font-size:14px; font-weight:700; color:inherit}
.proj-hero .back:hover{background:var(--bosque); color:var(--marfil); border-color:var(--bosque); transform:translateX(-3px)}
.proj-hero .back:hover .back-arrow{background:var(--marfil); color:var(--bosque); transform:translateX(-2px)}
.proj-hero .back:hover .back-txt small{color:var(--salvia)}
.proj-hero h1{font-size:clamp(34px,6vw,68px); max-width:960px; margin:.1em 0}
.proj-hero .sub{font-family:var(--font-body); font-size:18px; line-height:1.55; color:#4a4a40; max-width:720px}
.proj-meta{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:34px 0 0; padding:22px 0; border-top:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1)}
.proj-meta .m span{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gris); margin-bottom:5px}
.proj-meta .m b{font-weight:600; font-size:16px; color:var(--bosque)}
.proj-tags{display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 0}
.proj-tags span{background:var(--salvia-claro); border-radius:999px; padding:7px 15px; font-size:13px; color:#3a4a34}

.proj-body{max-width:960px; margin:0 auto; padding:48px 28px 10px}
.proj-body .txt{font-family:var(--font-body); font-size:18px; line-height:1.65; color:#3f3f34; max-width:740px; margin:0 0 34px}
.proj-body .blk{margin:0 0 30px}
.proj-body .blk img,.proj-body .blk video,.proj-body .blk iframe{width:100%; border-radius:18px; display:block; border:0; background:#ece6d4}
.proj-body .blk--long iframe{aspect-ratio:16/9}
.proj-body .blk--long video{aspect-ratio:auto; height:auto}
.proj-body .blk--vertical{max-width:440px; margin-left:auto; margin-right:auto}
.proj-body .blk--vertical video{aspect-ratio:9/16; object-fit:cover}
.proj-body .blk--square{max-width:600px; margin-left:auto; margin-right:auto}
.proj-body .blk--square video{aspect-ratio:1/1; height:auto; object-fit:cover}
.proj-body .cap{font-family:var(--font-body); font-style:italic; font-size:16px; color:#75715f; margin-top:10px; text-align:center}
.proj-body .blk-txt{max-width:740px; margin:48px 0 26px}
.proj-body .blk-txt h3{font-family:var(--font-title); font-size:clamp(22px,3vw,34px); line-height:1.12; color:var(--bosque); margin:0 0 12px}
.proj-body .blk-txt p{font-family:var(--font-body); font-size:17.5px; line-height:1.7; color:#3f3f34; margin:0}
.proj-body .blk-txt a{color:var(--acento); text-decoration:underline}
html.theme-dark .proj-body .blk-txt h3{color:var(--marfil)}
html.theme-dark .proj-body .blk-txt p{color:#E4DCC4}
html.theme-dark .proj-body .blk-txt a{color:var(--oro)}
.proj-body .blk-cta{margin:34px 0 10px}
.proj-body .blk-cta--big{text-align:center; margin:30px 0 34px}
.ctas-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:18px 0 12px}
.btn--big{font-size:18px; padding:18px 42px; box-shadow:0 16px 38px rgba(62,74,50,.28)}
.proj-body .blk-conclusion{max-width:740px; margin:46px 0 12px; padding:24px 26px; border-left:4px solid var(--acento); background:rgba(122,90,90,.07); border-radius:0 18px 18px 0}
.proj-body .blk-conclusion h3{font-family:var(--font-title); font-size:clamp(20px,2.6vw,28px); line-height:1.15; color:var(--bosque); margin:0 0 10px}
.proj-body .blk-conclusion p{font-family:var(--font-body); font-size:17.5px; line-height:1.7; color:#3f3f34; margin:0}
html.theme-dark .proj-body .blk-conclusion{background:rgba(203,185,132,.10); border-left-color:var(--oro)}
html.theme-dark .proj-body .blk-conclusion h3{color:var(--marfil)}
html.theme-dark .proj-body .blk-conclusion p{color:#E4DCC4}
.proj-note{max-width:960px; margin:0 auto; padding:0 28px}
.proj-note p{background:rgba(122,90,90,.08); border:1px dashed rgba(122,90,90,.4); color:#5f4343; border-radius:16px; padding:14px 18px; font-size:14px; margin:0}

.proj-nav{max-width:var(--maxw); margin:56px auto 0; padding:26px 28px; display:flex; justify-content:space-between; gap:16px; border-top:1px solid rgba(0,0,0,.1); flex-wrap:wrap}
.proj-nav a{display:flex; flex-direction:column; gap:4px; text-decoration:none; max-width:46%}
.proj-nav a span{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gris)}
.proj-nav a b{font-size:18px; color:var(--bosque)}
.proj-nav a:hover b{color:var(--acento)}
.proj-nav .next{text-align:right; margin-left:auto}
.proj-cta{max-width:var(--maxw); margin:34px auto 84px; padding:0 28px; text-align:center}

/* ---------------- 404 ---------------- */
.center{max-width:640px; margin:0 auto; padding:96px 24px; text-align:center; position:relative}
.center .floral-404{width:150px; margin:0 auto 10px; opacity:.35}
.center h1{font-size:clamp(34px,6vw,60px)}
.center .sub{font-family:var(--font-body); font-size:18px; color:#4b4b40}

/* ---------------- Animaciones ---------------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
.card-stack{animation:rise .5s ease backwards}
.card-stack:nth-child(2){animation-delay:.05s}.card-stack:nth-child(3){animation-delay:.1s}
@keyframes rise{from{opacity:0; transform:translateY(30px)}to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
  /* El carrusel de marcas debe seguir moviéndose aunque el sistema reduzca el movimiento */
  .marquee__track{animation:marquee 26s linear infinite !important}
}

/* ---------------- Responsive ---------------- */
@media(max-width:900px){
  .hero-home{grid-template-columns:1fr; gap:30px; padding-top:44px}
  .hero-photo{aspect-ratio:4/5}
  .hero-home .floral-hero{display:none}
  .about-grid{grid-template-columns:1fr; gap:30px}
  .about-photo{max-width:380px; margin:0 auto}
  .contact-grid{grid-template-columns:1fr; gap:32px}
  .services{grid-template-columns:1fr}
  .gallery__arrows{display:none}
  .proj-meta{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .top{flex-wrap:wrap; padding:9px 12px; top:8px; width:calc(100% - 20px); gap:8px; border-radius:26px}
  .top .brand{font-size:17px}
  .top-nav{order:3; width:100%; justify-content:center; gap:5px; padding-top:6px}
  .top-nav a{padding:7px 11px; font-size:12px}
  .top-right{gap:6px; margin-left:auto}
  .lang button{padding:5px 10px; font-size:12px}
  .theme-btn{width:34px; height:32px}
  .hero-home h1{font-size:clamp(28px,7.4vw,40px)}
  .stats{gap:24px}
  .stacks{padding:0 18px 32px}
  .card-stack{position:static; top:auto; margin-top:16px; padding:22px}
  .card-stack:first-child{margin-top:0}
  .card-stack .row{gap:16px}
  .stack-visual{flex:0 0 108px; gap:10px}
  .stack-img{width:108px; height:126px; border-radius:16px}
  .about,.contact{padding:60px 20px}
  .deep{border-radius:34px 34px 0 0}
  .proj{flex-basis:80vw}
  .drag-hint{padding:0 20px}
  .detail-hero{padding:36px 20px 0}
  .detail-hero .floral-detail{display:none}
  .proj-hero{padding:30px 20px 0}
  .proj-body{padding:34px 20px 6px}
  .proj-nav a{max-width:100%}
  .proj-nav .next{margin-left:0}
  .exp{padding:0 20px 60px}
  .timeline li,.edu-list li{grid-template-columns:1fr; gap:4px}
}

/* =====================================================================
   MODO OSCURO (previsualización) — se activa con ?theme=dark
   Fondo tierra oscura. Las tarjetas conservan sus colores.
   Los textos sobre el fondo pasan a crema / amarillo suave.
   ===================================================================== */
html.theme-dark{--tierra:#0D0D0B; --tierra2:#070706; --tierra3:#141410; --crema-txt:#F3EAD2; --oro:#CBB984}
html.theme-dark body{background:var(--tierra); color:var(--crema-txt)}
html.theme-dark body::before{background-image:url(../assets/floral-cream.svg); opacity:.05}

html.theme-dark .top{background:rgba(20,20,16,.86); border-color:rgba(255,255,255,.14); box-shadow:0 14px 40px rgba(0,0,0,.34)}
html.theme-dark .lang button{border-color:rgba(255,255,255,.25)}
html.theme-dark .lang button.on{background:var(--marfil); color:var(--tierra)}
html.theme-dark .top-nav a{border-color:rgba(255,255,255,.25)}
html.theme-dark .top-nav a:hover,html.theme-dark .top-nav a.active{background:var(--marfil); color:var(--tinta); border-color:var(--marfil)}

html.theme-dark .kicker{color:var(--oro)}
html.theme-dark .hero-txt .sub{color:#DED5BC}
html.theme-dark .stats span{color:var(--oro)}

html.theme-dark .btn{background-image:linear-gradient(90deg,var(--marfil) 50%,var(--acento) 50%); color:var(--tierra); border-color:var(--marfil)}
html.theme-dark .btn:hover{color:var(--marfil); border-color:var(--acento)}
html.theme-dark .btn.ghost{background-image:linear-gradient(90deg,transparent 50%,var(--acento) 50%); color:var(--marfil); border-color:var(--marfil)}
html.theme-dark .btn.ghost:hover,html.theme-dark .btn.ghost:active{color:var(--marfil); border-color:var(--acento)}

html.theme-dark .count{background:rgba(255,255,255,.18)}

html.theme-dark .deep{background:linear-gradient(180deg,var(--tierra3),var(--tierra2))}
html.theme-dark .deep::before{background-image:url(../assets/floral-cream.svg)}
html.theme-dark .about h2,html.theme-dark .contact h2{color:var(--marfil)}
html.theme-dark .about .lead,html.theme-dark .contact .lead{color:#DED5BC}
html.theme-dark .mini{color:var(--oro)}
html.theme-dark .svc{border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04)}
html.theme-dark .svc b{color:var(--marfil)}
html.theme-dark .svc span{color:#BFB69C}
html.theme-dark .clients{border-top-color:rgba(255,255,255,.14)}
html.theme-dark .clients b{color:#D8CDAA}
html.theme-dark .clients i{color:#8f8878}
html.theme-dark .marquee .logo{color:#D8CDAA}
html.theme-dark .quote p{color:#EDE4CC}
html.theme-dark .quote cite{color:#a49c86}
html.theme-dark .socials a{color:var(--marfil)}
html.theme-dark .contact .loc{color:var(--oro)}
html.theme-dark .exp h2{color:var(--marfil)}
html.theme-dark .lead2{color:#DED5BC}
html.theme-dark .chips span{border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:#DED5BC}
html.theme-dark .timeline li,html.theme-dark .timeline li:last-child,html.theme-dark .edu{border-color:rgba(255,255,255,.14)}
html.theme-dark .tl-year,html.theme-dark .edu-year{color:var(--oro)}
html.theme-dark .tl-body b,html.theme-dark .edu-list b{color:var(--marfil)}
html.theme-dark .tl-place,html.theme-dark .edu-list i{color:#a49c86}
html.theme-dark .tl-body p,html.theme-dark .lang-line{color:#DED5BC}
html.theme-dark .floral-hero,html.theme-dark .floral-detail,html.theme-dark .floral-404{filter:brightness(0) invert(1)}

html.theme-dark footer{background:var(--tierra2); color:#a49c86; border-top-color:rgba(255,255,255,.1)}
html.theme-dark footer a{color:var(--marfil)}

/* detalle de categoría */
html.theme-dark .detail-hero .sub,html.theme-dark .proj-hero .sub{color:#DED5BC}
html.theme-dark .subnav button{color:var(--crema-txt); border-color:rgba(255,255,255,.25)}
html.theme-dark .subnav button:hover{border-color:var(--marfil)}
html.theme-dark .subnav button.on{background:var(--marfil); color:var(--tierra); border-color:var(--marfil)}
html.theme-dark .drag-hint{color:var(--oro)}
html.theme-dark .gallery__bar{background:rgba(255,255,255,.14)}
html.theme-dark .gallery__progress{background:var(--salvia)}
html.theme-dark .gbtn{background:var(--marfil); color:var(--tierra)}
html.theme-dark .gbtn:hover{background:var(--oro); color:var(--tierra)}

/* ficha de proyecto */
html.theme-dark .proj-hero .back{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); color:var(--crema-txt); box-shadow:none}
html.theme-dark .proj-hero .back .back-arrow{background:rgba(168,192,160,.2); color:var(--marfil)}
html.theme-dark .proj-hero .back .back-txt small{color:var(--oro)}
html.theme-dark .proj-hero .back:hover{background:var(--marfil); color:var(--tierra); border-color:var(--marfil)}
html.theme-dark .proj-hero .back:hover .back-arrow{background:var(--bosque); color:var(--marfil)}
html.theme-dark .proj-hero .back:hover .back-txt small{color:var(--oliva)}
html.theme-dark .proj-meta{border-color:rgba(255,255,255,.16)}
html.theme-dark .proj-meta .m span{color:#a49c86}
html.theme-dark .proj-meta .m b{color:var(--crema-txt)}
html.theme-dark .proj-body .txt{color:#E4DCC4}
html.theme-dark .proj-body .cap{color:#b7ae94}
html.theme-dark .proj-note p{background:rgba(203,185,132,.12); border-color:rgba(203,185,132,.45); color:#E7D9A8}
html.theme-dark .proj-nav{border-top-color:rgba(255,255,255,.16)}
html.theme-dark .proj-nav a span{color:#a49c86}
html.theme-dark .proj-nav a b{color:var(--crema-txt)}
html.theme-dark .proj-nav a:hover b{color:var(--oro)}

/* 404 */
html.theme-dark .center .sub{color:#DED5BC}

/* ---- Galería tipo collage + lightbox ---- */
.proj-body .blk-gal{margin:14px 0 42px}
.gal-title{display:inline-block; background:var(--salvia); color:#26301c; font-family:var(--font-title); font-weight:700; font-size:clamp(24px,3.6vw,42px); line-height:1.05; padding:12px 30px; border-radius:16px; margin:6px 0 20px}
.gal-grid{column-count:3; column-gap:10px}
.gal-grid img{width:100%; display:block; margin:0 0 10px; border-radius:12px; cursor:zoom-in; break-inside:avoid; transition:transform .25s ease, filter .25s ease}
.gal-grid img:hover{transform:scale(1.012); filter:brightness(1.03)}
@media(max-width:820px){ .gal-grid{column-count:2} }

/* ---- Carrusel de reels ---- */
.proj-body .blk-reels{margin:14px 0 42px}
.reels{display:flex; gap:16px; overflow-x:auto; padding:4px 2px 16px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.reel{flex:0 0 260px; scroll-snap-align:start}
.reel .thumb{position:relative; aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:#000; cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,.18)}
.reel .thumb video,.reel .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.reel .thumb .playicon{position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:30px; background:rgba(0,0,0,.22); transition:background .2s}
.reel .thumb:hover .playicon{background:rgba(0,0,0,.35)}
.reel .thumb .reel-badge{position:absolute; left:10px; top:10px; z-index:2; background:rgba(255,255,255,.92); color:#222; font-size:11px; letter-spacing:.06em; border-radius:999px; padding:4px 10px}
.reel-cap{padding:12px 2px 0}
.reel-cap b{display:block; font-size:15px; color:var(--bosque)}
.reel-cap .reel-met{display:block; margin-top:6px; font-size:12.5px; font-weight:600; color:var(--oliva); letter-spacing:.02em}
html.theme-dark .reel-cap b{color:var(--marfil)}
html.theme-dark .reel-cap .reel-met{color:var(--oro)}
@media(max-width:760px){ .reel{flex:0 0 200px} }

/* ---- Lightbox ---- */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.93); display:none; align-items:center; justify-content:center; z-index:300; padding:24px}
.lightbox.open{display:flex}
.lb-content{display:flex; align-items:center; justify-content:center; max-width:92vw; max-height:90vh}
.lightbox img{max-width:92vw; max-height:90vh; border-radius:12px; display:block}
.lightbox video{max-width:92vw; max-height:90vh; border-radius:12px; background:#000; display:block}
.lb-iframe{width:min(420px,92vw); height:min(740px,90vh); border:0; border-radius:14px; background:#fff}
.lb-close{position:absolute; top:12px; right:20px; font-size:38px; line-height:1; color:#fff; background:none; border:0; cursor:pointer; z-index:2}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); font-size:50px; line-height:1; color:#fff; background:none; border:0; cursor:pointer; padding:10px; opacity:.8; z-index:2}
.lb-nav:hover{opacity:1}
.lb-prev{left:10px}
.lb-next{right:10px}

/* Imagen a sangre (proyecto destacado) */
.proj-body .blk--wide{width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-top:48px; margin-bottom:8px}
.proj-body .blk--wide img{width:100%; height:auto; border-radius:0; display:block}

/* ---- Bloque de cifras (stats) ---- */
.proj-body .blk-stats{margin:26px 0 32px}
.blk-stats .stat-h{font-family:var(--font-title); font-size:22px; color:var(--bosque); margin:0 0 14px}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.blk-stats .stat{background:var(--salvia-claro); border-radius:16px; padding:18px 16px}
.blk-stats .stat b{display:block; font-family:var(--font-title); font-size:30px; line-height:1; color:var(--bosque)}
.blk-stats .stat span{display:block; font-size:12.5px; color:#4a4a40; margin-top:6px}
html.theme-dark .blk-stats .stat{background:rgba(203,185,132,.12)}
html.theme-dark .blk-stats .stat b{color:var(--marfil)}
html.theme-dark .blk-stats .stat span{color:#cfc7ad}
html.theme-dark .blk-stats .stat-h{color:var(--marfil)}

/* ---- Gráfico de barras ---- */
.proj-body .blk-bars{margin:22px 0 34px}
.bar-groups{display:grid; grid-template-columns:1fr 1fr; gap:28px}
@media(max-width:760px){ .bar-groups{grid-template-columns:1fr; gap:16px} }
.bar-group h4{font-family:var(--font-title); font-size:17px; color:var(--bosque); margin:0 0 12px}
.bar{display:grid; grid-template-columns:minmax(90px,140px) 1fr 52px; align-items:center; gap:12px; margin:9px 0}
.bar-l{font-size:14px; color:#4a4a40}
.bar-track{height:16px; background:rgba(0,0,0,.08); border-radius:999px; overflow:hidden}
.bar-fill{display:block; height:100%; border-radius:999px; background:var(--salvia); animation:growBar 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes growBar{from{width:0 !important}}
.bar-v{font-weight:700; text-align:right; color:var(--bosque); font-size:14px}
html.theme-dark .bar-group h4{color:var(--marfil)}
html.theme-dark .bar-l{color:#DED5BC}
html.theme-dark .bar-track{background:rgba(255,255,255,.12)}
html.theme-dark .bar-fill{background:var(--oro)}
html.theme-dark .bar-v{color:var(--marfil)}
@media (prefers-reduced-motion: reduce){ .bar-fill{animation:none} }

/* ---- Capturas (carrete de pantallazos) ---- */
.shots{display:flex; gap:16px; overflow-x:auto; padding:6px 2px 18px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.shots .shot{flex:0 0 240px; scroll-snap-align:start; margin:0}
.shots .shot img{width:100%; height:430px; object-fit:cover; object-position:top center; border-radius:16px; cursor:zoom-in; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.18); display:block}
.shots .shot .cap{font-family:var(--font-body); font-style:italic; font-size:14px; color:#75715f; text-align:center; margin-top:8px}
html.theme-dark .shots .shot .cap{color:#b7ae94}
.shots.shots--natural .shot{flex:0 0 min(340px,74vw)}
.shots.shots--natural .shot img{height:auto; object-fit:contain; background:transparent; box-shadow:0 10px 26px rgba(0,0,0,.14)}
.empty-msg{font-family:var(--font-body); font-size:20px; color:var(--oliva); padding:30px 8px}
html.theme-dark .empty-msg{color:var(--oro)}
.cat-intro{max-width:720px; margin:14px 0 6px; font-family:var(--font-body); font-size:18px; line-height:1.6; color:#3f3f34}
html.theme-dark .cat-intro{color:#DED5BC}
/* Aviso de cookies */
.cookiebar{position:fixed; left:16px; right:16px; bottom:16px; z-index:200; background:var(--marfil); color:var(--tinta); border:1px solid rgba(0,0,0,.12); border-radius:16px; padding:14px 18px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; box-shadow:0 14px 40px rgba(0,0,0,.22); max-width:920px; margin:0 auto}
.cookiebar .cb-txt{font-family:var(--font-body); font-size:14px; flex:1; min-width:200px}
.cookiebar .cb-link{font-size:13px; color:var(--bosque)}
.cookiebar .btn{padding:9px 20px}
html.theme-dark .cookiebar{background:#1b1b1b; color:var(--crema-txt); border-color:rgba(255,255,255,.14)}
html.theme-dark .cookiebar .cb-link{color:var(--oro)}
.proj-body .blk-embed{margin:22px 0 32px; display:flex; flex-direction:column; align-items:center}
.blk-embed iframe{width:100%; border:0; border-radius:16px; background:#fff}
.blk-embed.embed--vertical iframe{max-width:420px; height:660px}
.blk-embed:not(.embed--vertical) iframe{max-width:900px; aspect-ratio:16/9}
.blk-embed.embed--phone iframe{max-width:390px; height:800px; border-radius:28px; box-shadow:0 20px 50px rgba(0,0,0,.28); border:10px solid #1b1b1b; background:#000}