/* ============================================
   LIGHT & SOUL WEDDINGS — Editorial Cinematic
   ============================================ */

:root{
  --black: #120e0b;
  --black-2: #1a1410;
  --charcoal: #241d17;
  --cream: #f4efe4;
  --cream-2: #ece5d4;
  --gold: #c9a15a;
  --gold-soft: #ddc08a;
  --rose: #8c3a52;       /* wine rose — bouquets, toasts, candlelit blush */
  --rose-soft: #b8748c;
  --white: #fbf9f4;

  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
  --container: 1280px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
input,textarea{ font-family:inherit; }

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

:focus-visible{ outline: 1px solid var(--gold); outline-offset: 3px; }
.skip-link{
  position:absolute; left: 1rem; top:-60px; z-index: 10001;
  background: var(--gold); color: var(--black); padding:.8rem 1.2rem;
  font-family: var(--sans); font-size:.85rem; letter-spacing:.04em;
  border-radius: 2px; transition: top .25s var(--ease);
}
.skip-link:focus{ top: 1rem; }

h1,h2,h3{
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  letter-spacing: .01em;
}

.eyebrow{
  display:inline-block;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: currentColor;
  opacity: .42;
  margin-bottom: 1.3rem;
}

.section-head{
  max-width: 720px;
  margin: 0 auto 4rem;
  padding: 0 6vw;
  text-align: center;
}
.section-head h2{ font-size: clamp(2.1rem, 4vw, 3.2rem); }
.section-sub{ margin-top: 1.1rem; opacity: .75; font-size: 1.02rem; }

section{ position: relative; }

/* ---------- utility reveal ---------- */
.reveal-up{ opacity: 0; transform: translateY(28px); }
.reveal-line > span{ display:inline-block; transform: translateY(110%); }

/* ---------- grain + ambient light + 3D cursor ---------- */
.grain-overlay{
  position: fixed; inset:0; z-index: 9990; pointer-events:none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Ambient light — slow-drifting warm bokeh, like out-of-focus reception
   candlelight. Used sparingly: only in the hero and the closing CTA, the
   two emotional high points, not as page-wide decoration. */
.ambient-lights{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;
}
.ambient-lights span{
  position:absolute; border-radius:50%;
  background: radial-gradient(circle, rgba(221,192,138,.65), rgba(221,192,138,0) 68%);
  filter: blur(2px);
  opacity:.55;
  animation: driftLight 23s ease-in-out infinite;
}
.ambient-lights span:nth-child(1){ width:10px; height:10px; left:14%; top:62%; animation-duration: 21s; }
.ambient-lights span:nth-child(2){ width:6px; height:6px; left:82%; top:28%; animation-duration: 26s; animation-delay: -7s;
  background: radial-gradient(circle, rgba(184,116,140,.65), rgba(184,116,140,0) 68%); }
.ambient-lights span:nth-child(3){ width:14px; height:14px; left:60%; top:80%; animation-duration: 29s; animation-delay: -14s; }
.ambient-lights span:nth-child(4){ width:7px; height:7px; left:35%; top:20%; animation-duration: 18s; animation-delay: -3s;
  background: radial-gradient(circle, rgba(184,116,140,.65), rgba(184,116,140,0) 68%); }
.ambient-lights span:nth-child(5){ width:9px; height:9px; left:90%; top:70%; animation-duration: 24s; animation-delay: -10s; }

@keyframes driftLight{
  0%, 100%{ transform: translate(0,0) scale(1); opacity:.4; }
  50%{ transform: translate(18px,-26px) scale(1.4); opacity:.75; }
}

/* ---------- click flash: a camera going off ----------
   Fires on click across the site — a nod to the photographer behind it.
   Skipped for form fields (typing shouldn't strobe the screen), rate-
   limited so rapid clicking can't flicker, and skipped entirely under
   prefers-reduced-motion (see main.js). */
.flash-overlay{
  position: fixed; inset:0; z-index: 9997; pointer-events:none;
  background: var(--white); opacity:0;
}
.flash-overlay.flash{ animation: cameraFlash .38s ease-out; }
@keyframes cameraFlash{
  0%{ opacity:0; }
  6%{ opacity:.85; }
  100%{ opacity:0; }
}

/* ---------- 3D cursor: a small rose, shedding petals ----------
   Desktop/fine-pointer only (hover:hover + pointer:fine), and only once
   main.js confirms it initialised (html.has-cursor3d) — if JS never runs,
   the native cursor stays exactly as it was; nothing is ever hidden by
   CSS alone. Respects prefers-reduced-motion (main.js skips init). */
@media (hover:hover) and (pointer:fine){
  /* !important is deliberate and narrowly scoped: several elements below
     set their own `cursor` (button{cursor:pointer}, .gallery-item img
     {cursor:zoom-in}, .faq-item summary{cursor:pointer}) at equal-or-
     higher CSS specificity and later in the file, so without this the
     native pointer/zoom-in cursor was winning back on exactly the
     elements the custom cursor is meant to replace — showing both at
     once. Only ever applies once JS has confirmed init (has-cursor3d). */
  html.has-cursor3d, html.has-cursor3d *{ cursor: none !important; }
}
.cursor3d{
  position: fixed; top:0; left:0; z-index: 9995; pointer-events:none;
  display:none;
}
@media (hover:hover) and (pointer:fine){
  html.has-cursor3d .cursor3d{ display:block; }
}
.cursor3d-stage{
  position:absolute; left:0; top:0; width:34px; height:34px;
  perspective: 240px;
  transform: translate(-50%,-50%) scale(1);
  opacity:0;
  transition: opacity .35s var(--ease), transform .4s var(--ease);
}
.cursor3d.is-visible .cursor3d-stage{ opacity:1; }
.cursor3d.is-hover .cursor3d-stage{ transform: translate(-50%,-50%) scale(1.5); }
.cursor3d.is-down .cursor3d-stage{ transform: translate(-50%,-50%) scale(.78); }

.cursor3d-rose{
  position:absolute; inset:0; margin:auto; width:30px; height:30px;
  display:block; overflow:visible;
  transform-style: preserve-3d;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
  /* Opacity only — main.js sets .style.transform on this element every
     animation frame (the 3D tilt), so a transform-based show/hide here
     would just get overwritten next frame. Opacity is untouched by JS,
     so it's the safe property to animate the rose<->petal crossfade on. */
  transition: opacity .3s var(--ease);
}
.cursor3d-rose .petal-shape{ fill: var(--gold); transition: fill .3s; }
.cursor3d-rose .petal-shape:nth-of-type(even){ fill: var(--gold-soft); }
.cursor3d-rose .rose-center{ fill: var(--charcoal); transition: fill .3s; }

/* Over a clickable area the rose (a "what am I about to touch" cursor)
   gives way to a single petal tipped like a pointer (a "you can click
   here" cursor) — same gilded motif, different job. */
.cursor3d.is-hover .cursor3d-rose{ opacity:0; }
.cursor3d-petal{
  position:absolute; inset:0; margin:auto; width:22px; height:22px;
  display:block; overflow:visible;
  opacity:0; transform: rotate(-38deg) scale(.45);
  transform-origin: 55% 40%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
  transition: opacity .28s var(--ease), transform .32s var(--ease);
}
.cursor3d-petal .petal-pointer-shape{ fill: var(--gold); }
.cursor3d-petal .petal-pointer-vein{ stroke: var(--charcoal); stroke-width:.6; opacity:.4; fill:none; }
.cursor3d.is-hover .cursor3d-petal{ opacity:1; transform: rotate(-38deg) scale(1); }

/* Petals the cursor sheds while moving — spawned by main.js, each one
   animates once and removes itself. */
.petal-field{
  position: fixed; inset:0; z-index: 9994; pointer-events:none; overflow:hidden;
}
.cursor-petal{
  position:absolute; top:0; left:0;
  border-radius: 60% 60% 60% 0;
  animation: petalFall var(--dur,1.5s) ease-in forwards;
}
@keyframes petalFall{
  0%{ transform: translate(0,0) rotate(var(--r0,0deg)); opacity:.85; }
  100%{ transform: translate(var(--dx,20px), var(--dy,90px)) rotate(var(--r1,220deg)); opacity:0; }
}

/* ---------- cookie consent (gates Google Analytics) ---------- */
.cookie-banner{
  position: fixed; left: 1.6rem; bottom: 1.6rem; z-index: 9998;
  max-width: 340px;
  background: var(--black); color: var(--cream);
  border: 1px solid rgba(201,161,90,.35); border-radius: 4px;
  padding: 1.3rem 1.4rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.cookie-banner.visible{ opacity:1; transform: translateY(0); pointer-events: all; }
.cookie-banner p{ font-size:.85rem; line-height:1.5; opacity:.85; margin:0 0 1.1rem; }
.cookie-banner-actions{ display:flex; gap:.7rem; }
.cookie-reject, .cookie-accept{
  font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
  padding:.6rem 1.05rem; border-radius:2px;
  transition: background .25s, color .25s, border-color .25s;
}
.cookie-reject{ border:1px solid rgba(244,239,228,.3); color: var(--cream); background:transparent; }
.cookie-reject:hover{ border-color: rgba(244,239,228,.6); }
.cookie-accept{ background: var(--gold); color: var(--black); }
.cookie-accept:hover{ background: var(--gold-soft); }
@media (max-width: 700px){
  .cookie-banner{ left:1rem; right:1rem; bottom:1rem; max-width:none; }
}
.cookie-banner p a{ color: var(--gold-soft); border-bottom: 1px solid rgba(221,192,138,.4); }

/* ---------- loader ---------- */
.loader{
  position: fixed; inset:0; z-index: 10000;
  background: var(--black);
  display:flex; align-items:center; justify-content:center;
}
.loader-mark{
  font-family: var(--serif); font-size: 2rem; letter-spacing:.3em;
  color: var(--gold); opacity:.9;
}

/* ============ HEADER ============ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 1.5rem 0;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  background: rgba(18,14,11,.82);
  backdrop-filter: blur(10px);
  padding: 1rem 0;
  border-color: rgba(255,255,255,.08);
}
.header-inner{
  max-width: var(--container); margin:0 auto; padding: 0 5vw;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family: var(--serif); font-size: 1.3rem; letter-spacing:.04em;
  color: var(--white);
}
.logo span{ color: var(--gold); font-style: italic; }

.main-nav{ display:flex; align-items:center; gap: 2.2rem; }
.main-nav a{
  font-size: .84rem; letter-spacing:.06em; text-transform: uppercase;
  opacity:.82; transition: opacity .25s, color .25s;
  position: relative;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:-5px; width:0; height:1px;
  background: var(--cream); transition: width .3s var(--ease);
}
.main-nav a:hover::after{ width:100%; }
.main-nav a:hover{ opacity:1; }
.nav-cta{ opacity:.82; }

.nav-cta{
  opacity:1; padding: .55rem 1.15rem;
  border: 1px solid rgba(201,161,90,.5); border-radius: 999px;
  transition: background .3s var(--ease), color .3s, border-color .3s;
}
.nav-cta::after{ content: none; }
.nav-cta:hover{ background: var(--gold); color: var(--black); border-color: var(--gold); }

.header-controls{ display:flex; align-items:center; gap:1.4rem; }
.lang-toggle{ font-size:.78rem; letter-spacing:.08em; opacity:.85; }
.lang-toggle .active{ color: var(--gold); }

.burger{ display:none; flex-direction:column; gap:5px; width:26px; }
.burger span{ height:1px; background: var(--cream); width:100%; transition: transform .3s, opacity .3s; }
.burger.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-nav{
  position: fixed; inset:0; z-index: 490; background: var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 1.8rem;
  transform: translateY(-100%); transition: transform .5s var(--ease);
}
.mobile-nav.open{ transform: translateY(0); }
.mobile-nav a{ font-family: var(--serif); font-size: 1.8rem; }

/* ============ HERO ============ */
.hero{
  height: 100svh; min-height: 560px;
  position: relative; overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero-bg-wrap{ position:absolute; inset:0; }
.hero-bg{
  width:100%; height:100%; object-fit: cover; object-position: center 20%;
  transform: scale(1.12);
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(16,12,9,0) 0%, rgba(16,12,9,0) 44%, rgba(16,12,9,.4) 100%),
    linear-gradient(180deg, rgba(16,12,9,.35) 0%, rgba(16,12,9,.25) 35%, rgba(16,12,9,.75) 82%, rgba(16,12,9,.95) 100%);
}
.hero-content{
  position: relative; z-index: 2;
  padding: 0 6vw 8rem;
  max-width: 900px;
}
.hero-kicker{
  font-size: .72rem; letter-spacing:.3em; text-transform:uppercase;
  color: var(--cream); opacity:.55; margin: 0 0 1.4rem; font-weight: 400;
}
.hero-title{
  font-size: clamp(3.6rem, 11vw, 8.5rem);
  line-height: .95;
  color: var(--white);
}
.hero-title .line{ overflow:hidden; display:block; }
.hero-sub{
  font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem,2vw,1.5rem);
  margin: 1.6rem 0 0; color: var(--cream-2); max-width: 480px;
}
.hero-scroll{
  display:inline-flex; margin-top: 3.2rem;
  opacity:.6; transition: opacity .3s;
}
.hero-scroll:hover{ opacity:1; }
.hero-scroll i{
  width:1px; height: 46px; background: linear-gradient(var(--cream), transparent);
  position: relative; display:block;
}

/* ============ MANIFESTO ============ */
.manifesto{ padding: 9rem 0; background: var(--black); }
.manifesto-grid{
  max-width: var(--container); margin:0 auto; padding: 0 6vw;
  display:grid; grid-template-columns: .8fr 1fr; gap: 5vw; align-items:center;
}
.manifesto-image{
  aspect-ratio: 4/5; overflow:hidden; border-radius: 2px;
}
.manifesto-image img{ width:100%; height:100%; object-fit:cover; transform: scale(1.15); }

@media (max-width: 900px){
  .manifesto-grid{ grid-template-columns: 1fr; gap: 2.4rem; }
  .manifesto-image{ aspect-ratio: 3/2; max-width: 420px; }
}

.manifesto-text h2{
  font-size: clamp(1.7rem, 3vw, 2.5rem); font-style: italic; color: var(--white);
  margin-bottom: 1.6rem;
}
.manifesto-text p{ opacity:.78; font-size: 1.05rem; max-width: 46ch; }
.text-link{
  display:inline-block; margin-top: 1.8rem; font-size:.85rem; letter-spacing:.08em;
  text-transform:uppercase; color: var(--gold-soft); border-bottom: 1px solid rgba(221,192,138,.4); padding-bottom: 4px;
}

/* ============ PORTFOLIO / GALLERY ============ */
.portfolio{ padding: 6rem 0 8rem; background: var(--black-2); }
.gallery{
  max-width: 1400px; margin: 0 auto; padding: 0 4vw;
  display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 15vw;
  grid-auto-flow: dense;
  gap: 1.1rem;
}
.gallery-item{
  margin:0; position:relative; overflow:hidden; border-radius: 2px;
  grid-column: span 3; grid-row: span 2;
  perspective: 900px;
}
.gallery-item[data-size="wide"]{ grid-column: span 4; grid-row: span 2; }
.gallery-item[data-size="tall"]{ grid-column: span 2; grid-row: span 3; }
.gallery-item[data-size="normal"]{ grid-column: span 2; grid-row: span 2; }

.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--ease), filter .7s var(--ease);
  filter: saturate(1) brightness(1);
  cursor: zoom-in;
}
.gallery-item:hover img{ transform: scale(1.06); }
/* Captions read at a glance on every device by default — a museum-wall
   label, not a hover secret — and gain a fuller scrim + settle into
   place on hover/focus for devices that have it. This also covers touch,
   which has no :hover at all. */
.gallery-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: 1.1rem 1.3rem;
  background: linear-gradient(0deg, rgba(0,0,0,.5), transparent 75%);
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color: var(--cream);
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
  opacity:.82; transform: translateY(3px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), background .4s var(--ease), padding .4s var(--ease);
}
.gallery-item:hover figcaption, .gallery-item:focus-within figcaption{
  opacity:1; transform: translateY(0);
  background: linear-gradient(0deg, rgba(0,0,0,.78), transparent 75%);
  padding-bottom: 1.5rem;
}
.gallery-item::after{
  content:''; position:absolute; inset:0; border:1px solid rgba(244,239,228,0);
  transition: border-color .4s; pointer-events:none;
}
.gallery-item:hover::after{ border-color: rgba(244,239,228,.25); }

.gallery-note{
  text-align:center; max-width: 560px; margin: 3.5rem auto 0; padding: 0 6vw;
  opacity:.6; font-size:.92rem; font-style: italic; font-family: var(--serif);
}

@media (max-width: 900px){
  .gallery{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 42vw; }
  .gallery-item, .gallery-item[data-size="wide"], .gallery-item[data-size="tall"], .gallery-item[data-size="normal"]{
    grid-column: span 1; grid-row: span 1;
  }
}

/* ============ ESTILO ============ */
.estilo{ padding: 9rem 0; background: var(--black); }
.estilo-grid{
  max-width: var(--container); margin:0 auto; padding: 0 6vw;
  display:grid; grid-template-columns: 1fr .85fr; gap: 6vw; align-items:start;
}
.estilo-text h2{ font-size: clamp(2rem,3.4vw,3rem); color: var(--white); margin-bottom: 3.4rem; }
.estilo-point{ padding: 2.1rem 0; border-top: 1px solid rgba(244,239,228,.12); }
.estilo-point:last-child{ border-bottom: 1px solid rgba(244,239,228,.12); }
.estilo-point h3{ font-size: 1.25rem; margin-bottom:.6rem; color: var(--white); font-weight: 400; font-family: var(--serif); }
.estilo-point p{ opacity:.68; font-size: .96rem; max-width: 42ch; }

.estilo-visual{ position: sticky; top: 7rem; }
.estilo-image-main{ aspect-ratio: 5/6; overflow:hidden; border-radius: 2px; }
.estilo-image-main img{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 900px){
  .estilo-grid{ grid-template-columns: 1fr; }
  .estilo-visual{ position:static; margin-top: 3rem; }
}

/* ============ SOBRE MI ============ */
.sobre-mi{ padding: 9rem 0; background: var(--cream); color: var(--black); }
.sobre-mi-grid{
  max-width: var(--container); margin:0 auto; padding: 0 6vw;
  display:grid; grid-template-columns: .8fr 1fr; gap: 6vw; align-items:center;
}
.sobre-mi-image{ position:relative; aspect-ratio: 4/5; overflow:hidden; border-radius: 2px; }
.sobre-mi-image img{ width:100%; height:100%; object-fit:cover; filter: grayscale(0.1) contrast(1.05); }

@media (max-width: 900px){
  .sobre-mi-grid{ grid-template-columns: 1fr; gap: 2.4rem; }
  .sobre-mi-image{ aspect-ratio: 3/2; max-width: 420px; }
}
.sobre-mi-tag{
  position:absolute; bottom: 1.2rem; left: 1.2rem;
  background: rgba(18,14,11,.75); backdrop-filter: blur(4px);
  padding: .6rem 1rem; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-soft);
}
.sobre-mi-text .eyebrow{ color: var(--rose); opacity: 1; }
.sobre-mi-text h2{ font-size: clamp(1.9rem,3.2vw,2.7rem); margin-bottom: 1.6rem; }
.sobre-mi-text p{ opacity:.78; font-size: 1.04rem; max-width: 52ch; margin-bottom: 1.1rem; }
.sobre-mi-text p:last-of-type{ margin-bottom: 0; }

/* ============ SERVICIOS ============ */
.servicios{ padding: 9rem 0 7rem; background: var(--black); }
/* A quiet photographic pause between the section intro and the list —
   Servicios and Contacto are the one stretch of the site with no imagery
   at all otherwise, which breaks the editorial rhythm everywhere else. */
.servicios-visual-wrap{ max-width: 1000px; margin: 0 auto 5.5rem; padding: 0 6vw; }
.servicios-visual{ aspect-ratio: 16/7; overflow:hidden; border-radius: 2px; }
.servicios-visual img{
  width:100%; height:100%; object-fit:cover; object-position: center 40%;
  transform: scale(1.15);
  filter: grayscale(.08) brightness(.92);
}
@media (max-width: 700px){
  .servicios-visual{ aspect-ratio: 4/5; }
  .servicios-visual-wrap{ margin-bottom: 3rem; }
}

.services-list{
  max-width: 880px; margin: 0 auto; padding: 0 6vw;
}
.service-row{
  padding: 2.6rem 0; border-top: 1px solid rgba(244,239,228,.14);
  display:grid; grid-template-columns: 1fr 1.4fr; gap: 2.5rem; align-items:baseline;
}
.services-list .service-row:last-child{ border-bottom: 1px solid rgba(244,239,228,.14); }
.service-row h3{ font-size: 1.7rem; color: var(--white); font-weight:400; }
.service-row p{ opacity:.74; font-size:1rem; margin: 0; }
.service-scope{
  margin-top: .9rem !important; font-size:.82rem !important; letter-spacing:.02em;
  font-style: italic; font-family: var(--serif); opacity:.55 !important;
}
.services-note{
  text-align:center; max-width: 560px; margin: 3.6rem auto 0; padding: 0 6vw;
  opacity:.55; font-size:.86rem;
}
.services-note a{ opacity: 1; color: var(--gold-soft); border-bottom: 1px solid rgba(221,192,138,.4); }

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

/* ============ PROCESO ============ */
.proceso{ padding: 9rem 0; background: var(--cream); color: var(--black); }
.proceso .eyebrow{ color: var(--rose); opacity: 1; }
.proceso-grid{
  max-width: var(--container); margin:0 auto; padding: 0 6vw;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 3rem 2.4rem;
}
.proceso-step{ border-top: 1px solid rgba(18,14,11,.14); padding-top: 1.6rem; }
.proceso-num{
  display:block; font-family: var(--serif); font-style: italic; font-size: 2rem;
  color: var(--rose); opacity: .5; margin-bottom: 1rem;
}
.proceso-step h3{ font-size: 1.1rem; margin-bottom:.6rem; font-weight:400; }
.proceso-step p{ opacity:.68; font-size:.92rem; max-width: 32ch; }

@media (max-width: 900px){
  .proceso-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .proceso-grid{ grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ============ FAQ ============ */
.faq{ padding: 9rem 0; background: var(--black-2); }
.faq-list{ max-width: 760px; margin: 0 auto; padding: 0 6vw; }
.faq-item{ border-top: 1px solid rgba(244,239,228,.14); }
.faq-list .faq-item:last-child{ border-bottom: 1px solid rgba(244,239,228,.14); }
.faq-item summary{
  list-style:none; cursor:pointer; padding: 1.7rem 0;
  display:flex; justify-content:space-between; align-items:center; gap: 1.4rem;
  font-family: var(--serif); font-size: 1.1rem; color: var(--white); font-weight:400;
  -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; flex:none; font-size: 1.5rem; line-height:1; color: var(--gold);
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item summary:hover{ color: var(--gold-soft); }
.faq-item p{ margin: -.4rem 0 1.8rem; opacity:.68; font-size:.96rem; max-width: 62ch; }

/* ============ LEGAL / PRIVACIDAD ============ */
.legal-hero{ background: var(--black); padding: 11rem 6vw 5rem; text-align:center; }
.legal-back{
  display:block; margin: 0 0 2.4rem; font-size:.82rem;
  color: var(--gold-soft); opacity:.8;
  text-decoration: underline; text-decoration-color: rgba(221,192,138,.35); text-underline-offset: 3px;
}
.legal-back:hover{ opacity:1; }
.legal-hero h1{
  font-family: var(--serif); font-weight:400; color: var(--white);
  font-size: clamp(2.1rem, 4.4vw, 3.2rem); max-width: 720px; margin: 0 auto 1.2rem;
}
.legal-sub{ opacity:.72; max-width: 560px; margin: 0 auto; font-size: 1.02rem; }
.legal-updated{ display:block; margin-top: 1.8rem; font-size:.76rem; opacity:.52; letter-spacing:.04em; }

.legal{ padding: 6rem 0 9rem; background: var(--cream); color: var(--black); }
.legal-inner{ max-width: 740px; margin: 0 auto; padding: 0 6vw; }
.legal-block{ padding: 2.2rem 0; border-top: 1px solid rgba(18,14,11,.14); }
.legal-inner .legal-block:last-child{ border-bottom: 1px solid rgba(18,14,11,.14); margin-bottom: 3rem; }
.legal-block h2{ font-size: 1.25rem; font-weight:400; margin-bottom: 1rem; }
.legal-block h3{ font-size: 1rem; font-weight: 500; font-family: var(--sans); margin: 1.4rem 0 .5rem; }
.legal-block p{ opacity:.78; font-size:.98rem; max-width: 64ch; margin: 0 0 1rem; }
.legal-block p:last-child{ margin-bottom: 0; }
.legal-block ul{ margin: 0 0 1rem; padding-left: 1.2rem; max-width: 60ch; }
.legal-block ul li{ list-style: disc; opacity:.78; font-size:.98rem; margin-bottom:.4rem; }
.legal-note{ font-size:.85rem; opacity:.6; font-style:italic; }
.legal-cookie-reset{
  margin-top: .3rem; font-size:.82rem; padding:.65rem 1.1rem;
  border: 1px solid rgba(18,14,11,.32); border-radius:2px;
  transition: background .25s, color .25s, border-color .25s;
}
.legal-cookie-reset:hover{ background: var(--black); color: var(--cream); border-color: var(--black); }
.legal-closing{ text-align:center; margin-top: -1rem; }
.legal-closing a{ color: var(--rose); border-bottom: 1px solid rgba(140,58,82,.4); }

/* ============ TESTIMONIOS ============ */
.testimonios{ padding: 7rem 0 9rem; background: var(--black-2); }
.testimonials-track{
  max-width: 780px; margin:0 auto; padding: 0 6vw;
  display:flex; flex-direction:column;
}
.testimonial-card{
  padding: 2.6rem 0; border-top: 1px solid rgba(244,239,228,.12); text-align:center;
}
.testimonials-track .testimonial-card:last-child{ border-bottom: 1px solid rgba(244,239,228,.12); }
.testimonial-card p{
  font-family: var(--serif); font-style: italic; font-size: 1.3rem; opacity:.82; margin: 0 0 1rem;
  line-height: 1.45;
}
.testimonial-card span{ font-size:.76rem; letter-spacing:.05em; opacity:.5; text-transform: uppercase; }

/* ============ CTA BANDA ============ */
.cta-banda{ position:relative; padding: 10rem 6vw; overflow:hidden; text-align:center; }
.cta-parallax{ position:absolute; inset:-10% 0; z-index:0; }
.cta-parallax img{ width:100%; height:100%; object-fit:cover; filter: grayscale(.2) brightness(.55); }
.cta-banda::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(18,14,11,.55), rgba(18,14,11,.85));
}
.cta-content{ position:relative; z-index:2; max-width: 700px; margin: 0 auto; }
.cta-content h2{ font-size: clamp(2.2rem,4.5vw,3.6rem); color: var(--white); font-style: italic; }
.cta-content p{ margin: 1.4rem 0 2.2rem; opacity:.82; font-size: 1.05rem; }

.btn-primary{
  display:inline-block; padding: 1rem 2.4rem; background: var(--gold);
  color: var(--black); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  border-radius: 2px; transition: background .3s, transform .3s;
}
.btn-primary:hover{ background: var(--gold-soft); transform: translateY(-2px); }

.btn-outline{
  display:inline-block; padding: .85rem 2rem; background: transparent;
  border: 1px solid currentColor; color: inherit;
  font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  border-radius: 2px; transition: background .3s, color .3s;
}
.btn-outline:hover{ background: var(--black); color: var(--cream); }

/* ============ CONTACTO ============ */
.contacto{ padding: 9rem 0; background: var(--cream); color: var(--black); }
.contacto-grid{
  max-width: var(--container); margin:0 auto; padding: 0 6vw;
  display:grid; grid-template-columns: .85fr 1fr; gap: 6vw;
}
.contacto-text .eyebrow{ color: var(--rose); opacity: 1; }
.contacto-text h2{ font-size: clamp(1.9rem,3.2vw,2.7rem); margin-bottom: 1.4rem; }
.contacto-text p{ opacity:.75; max-width: 40ch; margin-bottom: 1.8rem; }
.contact-links{ display:flex; flex-direction:column; gap:.6rem; }
.contact-links a{
  font-family: var(--serif); font-size: 1.3rem; font-style: italic; color: var(--rose);
  border-bottom: 1px solid transparent; width: fit-content;
}
.contact-links a:hover{ border-color: var(--rose); }
.contact-note{ margin-top: 1.4rem; font-size:.78rem; opacity:.5; }

.contact-form{ display:flex; flex-direction:column; gap: 1.1rem; }
.hidden-field{ position:absolute; left:-9999px; }
.form-row{ display:flex; flex-direction:column; gap:.45rem; }
.form-row--half{ flex-direction:row; gap: 1.1rem; }
.form-row--half > div{ flex:1; display:flex; flex-direction:column; gap:.45rem; }
label{ font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; opacity:.6; }
input, textarea{
  border:none; border-bottom: 1px solid rgba(18,14,11,.3); background:transparent;
  padding: .7rem .1rem; font-size: 1rem; color: var(--black); outline:none;
  transition: border-color .3s;
}
input:focus, textarea:focus{ border-color: var(--rose); }
.contact-form .btn-outline{ margin-top: .6rem; text-align:center; }
.form-success{ font-size:.9rem; color: var(--rose); font-style:italic; }

@media (max-width: 900px){
  .contacto-grid{ grid-template-columns: 1fr; }
  .form-row--half{ flex-direction:column; }
}

/* ============ FOOTER ============ */
.site-footer{ background: var(--black); padding: 4rem 0 1.6rem; }
.footer-inner{
  max-width: var(--container); margin:0 auto; padding: 0 6vw;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 1.6rem;
  padding-bottom: 2.4rem; border-bottom: 1px solid rgba(244,239,228,.1);
}
.footer-inner nav{ display:flex; gap: 1.6rem; flex-wrap:wrap; }
.footer-inner nav a{ font-size:.82rem; opacity:.7; }
.footer-inner nav a:hover{ opacity:1; }
.footer-ig{ font-size:.82rem; opacity:.7; transition: opacity .25s; }
.footer-ig:hover{ opacity:1; }
.footer-bottom{
  max-width: var(--container); margin: 1.6rem auto 0; padding: 0 6vw;
  display:flex; align-items:center; justify-content:space-between;
  font-size:.76rem; opacity:.5;
}
.to-top{ opacity:.6; font-size:1.1rem; transition: opacity .3s; }
.to-top:hover{ opacity:1; }

/* ============ WHATSAPP FLOTANTE ============
   Deliberately not the stock WhatsApp green — a dark pill with a gold
   ring, so it reads as part of this site's own language instead of a
   bolted-on plugin widget. Expands to show a label on hover; icon-only
   and slightly smaller on small screens. */
.whatsapp-float{
  position: fixed; right: 1.7rem; bottom: 1.7rem; z-index: 480;
  height: 52px; padding: 0 16px;
  display:inline-flex; align-items:center; gap:0;
  border-radius: 999px;
  background: var(--black); color: var(--gold-soft);
  border: 1px solid rgba(201,161,90,.45);
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
  transition: background .3s var(--ease), color .3s, border-color .3s, box-shadow .3s, transform .3s var(--ease), padding .35s var(--ease);
}
.whatsapp-float svg{ flex: none; }
.whatsapp-float-label{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-size:.82rem; letter-spacing:.03em;
  transition: max-width .35s var(--ease), margin-left .35s var(--ease);
}
.whatsapp-float:hover{
  background: var(--gold); color: var(--black); border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  padding: 0 20px;
}
.whatsapp-float:hover .whatsapp-float-label{ max-width: 140px; margin-left: 10px; }

@media (max-width: 700px){
  .whatsapp-float{ height:48px; padding:0 13px; right:1.1rem; bottom:1.1rem; transition: bottom .3s var(--ease), background .3s var(--ease), color .3s, border-color .3s, box-shadow .3s, transform .3s var(--ease), padding .35s var(--ease); }
  .whatsapp-float:hover{ padding:0 13px; }
  .whatsapp-float-label{ display:none; }
  /* The cookie banner is nearly full-width on small screens and would
     otherwise sit directly on top of this button — lift it clear while
     the banner is up (see main.js, which toggles this on <body>). */
  body.cookie-banner-open .whatsapp-float{ bottom: 12rem; }
}

/* ============ LIGHTBOX ============ */
.lightbox{
  position: fixed; inset:0; z-index: 9000; background: rgba(14,10,7,.96);
  display:flex; align-items:center; justify-content:center; padding: 4vw;
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
}
.lightbox.open{ opacity:1; pointer-events:all; }
.lightbox img{
  max-width: 92vw; max-height: 88vh; object-fit:contain; border-radius:2px;
  transform: scale(.92);
  transition: transform .45s var(--ease);
}
.lightbox.open img{ transform: scale(1); }
.lightbox-close{
  position:absolute; top: 2rem; right: 2rem; font-size: 1.4rem; color: var(--cream);
  width: 44px; height:44px; border:1px solid rgba(244,239,228,.3); border-radius:50%;
  transition: background .25s, border-color .25s;
}
.lightbox-close:hover{ background: rgba(244,239,228,.12); border-color: rgba(244,239,228,.5); }
.lightbox-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(244,239,228,.3); color: var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; line-height:1; z-index:1;
  transition: background .25s, border-color .25s;
}
.lightbox-nav:hover{ background: rgba(244,239,228,.12); border-color: rgba(244,239,228,.5); }
.lightbox-prev{ left: 2rem; }
.lightbox-next{ right: 2rem; }
.lightbox-count{
  position:absolute; bottom: 1.8rem; left:0; right:0; text-align:center;
  font-size:.74rem; letter-spacing:.14em; color: var(--cream); opacity:.55;
}
@media (max-width: 700px){
  .lightbox-nav{ width:42px; height:42px; font-size:1.3rem; }
  .lightbox-prev{ left:.6rem; }
  .lightbox-next{ right:.6rem; }
  .lightbox-close{ top:1rem; right:1rem; }
}

/* ============ RESPONSIVE HEADER ============ */
@media (max-width: 860px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
}

/* ============ RESPONSIVE SECTION RHYTHM ============ */
/* Desktop vertical padding (7-10rem) reads as intentional breathing room;
   on a ~390px-wide screen the same values stack into dead, empty-looking
   space between sections. Tighten the rhythm below 700px without touching
   the desktop feel. */
@media (max-width: 700px){
  .manifesto{ padding: 5rem 0; }
  .portfolio{ padding: 4.5rem 0 5.5rem; }
  .estilo{ padding: 5.5rem 0; }
  .sobre-mi{ padding: 5.5rem 0; }
  .servicios{ padding: 5.5rem 0 4.5rem; }
  .testimonios{ padding: 4.5rem 0 5.5rem; }
  .cta-banda{ padding: 6rem 6vw; }
  .contacto{ padding: 5.5rem 0; }
}

/* ============ MOTION SAFETY ============ */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html{ scroll-behavior:auto; }
}