/* ===================================================================
   Psicóloga Paloma Quevedo — 2026
   Modern, fast, light theme. "Golden roses" palette.
   Self-contained (no framework). Mobile · iPad · Desktop.
   =================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Brand */
  --wine:        #7F464C;   /* marca principal (burdeos) */
  --wine-deep:   #623640;
  --rose:        #d99a9e;   /* rosa polvo del hero */
  --rose-soft:   #f5e2e3;
  --rose-tint:   #fbeff0;
  --gold:        #b9882c;   /* dorado intenso */
  --gold-soft:   #e3bf6e;
  --gold-bright: #cf9f3a;
  --gold-ink:    #8f5e12;   /* dorado profundo (firma, acentos) */
  --rosegold:    #b76e79;   /* oro rosa */

  /* Neutrals (light theme) */
  --ink:         #2c2329;   /* texto principal cálido */
  --ink-soft:    #574a50;   /* texto secundario (cálido, sin desvanecer) */
  --line:        #ece0dd;
  --bg:          #fffaf8;   /* fondo crema */
  --bg-alt:      #fbf1ee;   /* sección alterna rosada */
  --card:        #ffffff;
  --white:       #ffffff;

  /* Gradients */
  --grad-gold:   linear-gradient(120deg, var(--gold) 0%, var(--rose) 100%);
  --grad-wine:   linear-gradient(120deg, var(--wine) 0%, var(--wine-deep) 100%);
  --grad-soft:   linear-gradient(180deg, #fff8f5 0%, #fbeef0 100%);

  /* Shape & depth */
  --radius:      22px;
  --radius-sm:   14px;
  --radius-pill: 999px;
  --shadow-sm:   0 4px 18px rgba(124, 70, 76, .08);
  --shadow:      0 18px 50px -18px rgba(124, 70, 76, .28);
  --shadow-lg:   0 40px 90px -30px rgba(98, 54, 64, .40);

  /* Type */
  --serif:  "Fraunces", "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --sans:   "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --script: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;

  /* Layout */
  --maxw: 1180px;
  --gut:  clamp(20px, 5vw, 56px);
  --nav-h: 76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:clamp(16px, 1.05vw, 17.5px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg{ max-width:100%; display:block; height:auto; }
a{ color:var(--wine); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--wine-deep); }
ul{ margin:0; padding:0; list-style:none; }
strong{ font-weight:700; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:6px; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.12; color:var(--ink); margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:clamp(2.3rem, 5.4vw, 3.85rem); font-weight:600; }
h2{ font-size:clamp(1.85rem, 3.6vw, 2.7rem); }
h3{ font-size:clamp(1.2rem, 2vw, 1.45rem); }
p{ margin:0 0 1rem; }
.lead{ font-size:clamp(1.06rem, 1.5vw, 1.22rem); color:var(--ink-soft); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-weight:700; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--wine);
  margin:0 0 1rem;
}
.eyebrow::before{ content:""; width:30px; height:2px; border-radius:2px; background:var(--grad-gold); }
/* Handwritten signature for the name in the H1 — solid, warm, no fade */
.signature{
  display:inline-block;
  font-family:var(--script);
  font-weight:700;
  color:var(--gold-ink);
  font-size:1.38em;
  line-height:1;
  letter-spacing:.4px;
  padding-bottom:.06em;
  transform:rotate(-2deg);
}

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px, 9vw, 120px); }
.section--alt{ background:var(--bg-alt); }
.section--soft{ background:var(--grad-soft); }
.center{ text-align:center; }
.measure{ max-width:62ch; }
.section__head{ max-width:720px; margin:0 auto clamp(40px,5vw,64px); }
.section--left .section__head{ margin-inline:0; }

/* ---------- Buttons ---------- */
.btn{
  --b: var(--grad-wine);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-weight:700; font-size:.96rem; letter-spacing:.01em;
  padding:.95em 1.7em; border-radius:var(--radius-pill);
  border:2px solid transparent; cursor:pointer;
  background-image:var(--b); color:#fff !important;
  box-shadow:0 12px 26px -12px rgba(124,70,76,.7);
  transition:transform .22s ease, box-shadow .22s ease, background-color .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -12px rgba(124,70,76,.75); color:#fff; }
.btn--gold{ --b:var(--grad-gold); box-shadow:0 12px 26px -12px rgba(195,154,85,.7); color:#3a2b14 !important; }
.btn--gold:hover{ color:#3a2b14; }
.btn--ghost{
  background-image:none; background:transparent; color:var(--wine) !important;
  border-color:var(--wine); box-shadow:none;
}
.btn--ghost:hover{ background:var(--wine); color:#fff !important; box-shadow:var(--shadow-sm); }
.btn--lg{ padding:1.05em 2em; font-size:1.02rem; }
.btn svg{ width:1.15em; height:1.15em; fill:currentColor; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,250,248,.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.site-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 8px 30px -20px rgba(98,54,64,.5); }
.nav{
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.brand{ display:inline-flex; align-items:center; gap:.65em; font-family:var(--serif); font-weight:600; font-size:1.12rem; color:var(--ink); }
.brand img{ width:38px; height:38px; }
.brand small{ display:block; font-family:var(--sans); font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
/* Header sits on white — use the deeper gold for sufficient contrast (AA) */
.site-header .brand small{ color:var(--gold-ink); }
/* Brand name in the handwritten script, like the H1 signature */
.brand__name{
  display:block; font-family:var(--script); font-weight:700;
  font-size:1.55em; line-height:.95; letter-spacing:.3px;
  color:var(--gold-ink); white-space:nowrap;
}
.nav__menu{ display:flex; align-items:center; gap:6px; }
.nav__menu a:not(.btn){
  font-weight:600; font-size:.95rem; color:var(--ink); padding:.5em .9em; border-radius:var(--radius-pill);
  transition:background-color .2s ease, color .2s ease;
}
.nav__menu a:not(.btn):hover{ background:var(--rose-tint); color:var(--wine); }
.nav__actions{ display:flex; align-items:center; gap:12px; }
.nav__cta-mobile{ display:none; }
.nav__loc{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:var(--white);
  color:var(--wine); transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.nav__loc:hover{ background:var(--rose-tint); border-color:var(--rose); color:var(--wine-deep); }
.nav__loc svg{ width:20px; height:20px; }
.nav__toggle{
  display:none; width:46px; height:46px; border:1px solid var(--line); background:var(--white);
  border-radius:12px; cursor:pointer; align-items:center; justify-content:center;
}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:.25s ease;
}
.nav__toggle span::before{ position:absolute; top:-6px; }
.nav__toggle span::after{ position:absolute; top:6px; }
.nav__toggle[aria-expanded="true"] span{ background:transparent; }
.nav__toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:900px){
  .nav__toggle{ display:inline-flex; }
  .nav__menu{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--white); padding:18px var(--gut) 26px;
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .nav__menu.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav__menu a:not(.btn){ padding:.85em 1em; font-size:1.05rem; }
  .nav__menu .btn{ margin-top:8px; }
  .nav__cta-mobile{ display:inline-flex; }
  .nav__cta-desktop{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 60% at 85% 10%, rgba(231,207,159,.45), transparent 60%),
    radial-gradient(55% 55% at 8% 90%, rgba(217,154,158,.35), transparent 60%),
    var(--bg);
}
.hero__grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,64px);
  align-items:center; padding-block:clamp(40px,6vw,84px);
}
.hero__badge{
  display:inline-flex; align-items:center; gap:.6em; padding:.5em 1em;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-pill);
  font-size:.82rem; font-weight:600; color:var(--ink-soft); box-shadow:var(--shadow-sm); margin-bottom:1.4rem;
}
.hero__badge b{ color:var(--wine); }
/* Hand-marker highlight — feathered, slightly uneven, like a real highlighter swipe */
mark, .hero h1 mark, .hero p mark{
  color:var(--ink);
  text-decoration:none;
  background:transparent;
  padding:.02em .16em;
  margin:0 -.06em;
  border-radius:.28em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  background-image:linear-gradient(
    101deg,
    rgba(227,191,110,0)   0.6%,
    rgba(214,170,77,.95)  2.2%,
    rgba(227,191,110,.78) 6%,
    rgba(227,191,110,.66) 50%,
    rgba(227,191,110,.74) 93%,
    rgba(214,170,77,.95)  97.4%,
    rgba(227,191,110,0)   99.4%
  );
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:0 50%;
}

/* Desktop: keep the handwritten name on a single row */
@media (min-width:821px){
  .hero .signature{ white-space:nowrap; font-size:1.26em; }
}
.hero p{ max-width:46ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:1.8rem; }
.hero__trust{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; margin-top:2.2rem; }
.hero__stars{ color:var(--gold); font-size:1.1rem; letter-spacing:2px; }
.hero__trust small{ display:block; color:var(--ink-soft); font-size:.85rem; }
.hero__trust b{ font-size:1.05rem; }

.hero__media{ position:relative; }
.hero__media img{
  width:100%; border-radius:calc(var(--radius) + 8px);
  box-shadow:var(--shadow-lg);
}
.hero__media::after{
  content:""; position:absolute; inset:auto -14px -14px auto; width:62%; height:62%; z-index:-1;
  background:var(--grad-gold); border-radius:calc(var(--radius) + 8px); opacity:.18; filter:blur(8px);
}
.hero__chip{
  position:absolute; left:-12px; bottom:26px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:18px; padding:14px 18px;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:12px; max-width:240px;
}
.hero__chip .dot{ width:42px; height:42px; flex:none; border-radius:50%; background:var(--grad-gold); display:grid; place-items:center; color:#3a2b14; }
.hero__chip b{ display:block; font-family:var(--serif); font-size:1rem; line-height:1.1; }
.hero__chip span{ font-size:.78rem; color:var(--ink-soft); }

@media (max-width:820px){
  .hero__grid{ grid-template-columns:1fr; text-align:center; padding-top:10px; gap:14px; }
  .hero p{ margin-inline:auto; }
  .hero .eyebrow, .hero__badge{ margin-inline:auto; }
  .hero__cta, .hero__trust{ justify-content:center; }
  .hero__cta{ margin-top:1.2rem; }
  /* Show the portrait first so it's visible on opening */
  .hero__media{ order:-1; max-width:386px; margin:0 auto 2px; }
}
/* Phones: compress the hero so the CTA lands within the first screen */
@media (max-width:560px){
  .hero__grid{ gap:10px; padding-block:6px 14px; }
  .hero__media{ max-width:292px; }
  .hero h1{ font-size:2.05rem; margin-bottom:.9rem; }
  .hero .signature{ font-size:clamp(2.3rem, 12vw, 2.9rem); white-space:nowrap; }
  .hero .lead{ font-size:1rem; line-height:1.5; margin-bottom:.85rem; }
  .hero__cta{ margin-top:.9rem; gap:10px; }
}

/* ---------- Large desktops: let the hero grow on big screens ----------
   Laptops up to ~1499px keep the standard sizing. Above that the whole
   layout (nav + hero + sections stay aligned) and the hero type/image scale up. */
@media (min-width:1500px){
  :root{ --maxw:1320px; }
  .hero__grid{ gap:clamp(56px, 4.5vw, 92px); padding-block:clamp(72px, 6vw, 128px); }
  .hero h1{ font-size:clamp(3.85rem, 4.6vw, 5.2rem); }
  .hero .signature{ font-size:1.3em; }
  .hero .lead{ font-size:clamp(1.22rem, 1.35vw, 1.5rem); }
  .hero p{ max-width:50ch; }
  .hero__cta{ margin-top:2.2rem; }
  .hero__cta .btn{ font-size:1.06rem; padding:1.1em 2.15em; }
}
@media (min-width:1900px){
  :root{ --maxw:1480px; }
  .hero__grid{ gap:clamp(80px, 5vw, 120px); }
  .hero h1{ font-size:clamp(5.2rem, 4.6vw, 6.1rem); }
  .hero .lead{ font-size:clamp(1.5rem, 1.3vw, 1.72rem); }
}

/* ---------- Process (3 pasos) — modern connected timeline ---------- */
.steps{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,40px);
  counter-reset:step;
}
/* Gradient connector that links the three nodes (desktop) */
.steps::before{
  content:""; position:absolute; z-index:0;
  top:33px; left:16.66%; right:16.66%; height:3px;
  background:linear-gradient(90deg, var(--rose) 0%, var(--gold-soft) 50%, var(--gold) 100%);
  border-radius:3px; opacity:.7;
}
.step{
  position:relative; z-index:1;
  text-align:center; padding-inline:clamp(4px,1.4vw,16px);
}
.step__num{
  counter-increment:step;
  position:relative;
  width:66px; height:66px; margin:0 auto 22px;
  border-radius:50%;
  background:var(--grad-gold); color:#3a2b14;
  display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:1.6rem; line-height:1;
  /* solid ring in the page colour so the connector appears to plug into the node */
  box-shadow:0 0 0 8px var(--bg), 0 14px 28px -10px rgba(185,136,44,.6);
  transition:transform .3s ease, box-shadow .3s ease;
}
.step__num::before{ content:counter(step); }
.step:hover .step__num{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 0 0 8px var(--bg), 0 20px 36px -10px rgba(185,136,44,.78);
}
.step h3{ margin-bottom:.5rem; }
.step p{ margin:0 auto; max-width:34ch; color:var(--ink-soft); }

@media (max-width:760px){
  .steps{ grid-template-columns:1fr; gap:0; max-width:520px; margin-inline:auto; }
  .steps::before{ display:none; }            /* swap to per-step vertical segments */
  .step{
    display:grid; grid-template-columns:66px 1fr; column-gap:22px;
    text-align:left; padding:0 0 40px;
  }
  .step:last-child{ padding-bottom:0; }
  .step__num{ grid-column:1; grid-row:1 / span 2; align-self:start; margin:0; }
  /* vertical segment running from this node down to the next one */
  .step:not(:last-child)::after{
    content:""; position:absolute; z-index:0;
    left:31.5px; top:66px; bottom:0; width:3px;
    background:linear-gradient(180deg, var(--gold-soft), var(--rose));
    border-radius:3px; opacity:.7;
  }
  .step h3{ margin:0 0 .35rem; align-self:start; }
  .step p{ margin:0; max-width:none; }
}

/* ---------- Services ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--rose); }
.card__icon{
  width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  background:var(--rose-tint); color:var(--wine); margin-bottom:18px;
}
.card__icon svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.7; }
.card h3{ margin-bottom:.45rem; }
.card p{ margin:0; color:var(--ink-soft); font-size:.98rem; }
@media (max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; } }

/* ---------- About / Credentials ---------- */
.about{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(30px,5vw,64px); align-items:center; }
.about__media{ position:relative; }
.about__media img{ border-radius:var(--radius); box-shadow:var(--shadow); }
.about__main{ width:100%; display:block; }
.about__inset{
  position:absolute; left:-14px; bottom:-18px; width:52%;
  border-radius:var(--radius-sm); border:5px solid #fff;
  box-shadow:var(--shadow-lg);
}
.about__media .badge-float{
  position:absolute; right:-10px; top:24px; background:var(--white);
  border:1px solid var(--line); border-radius:16px; padding:12px 16px; box-shadow:var(--shadow);
  font-size:.82rem; line-height:1.3;
}
.about__media .badge-float b{ display:block; color:var(--wine); font-family:var(--serif); font-size:1.1rem; }
.creds{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.cred{ display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; }
.cred svg{ width:22px; height:22px; flex:none; color:var(--gold); fill:none; stroke:currentColor; stroke-width:1.8; margin-top:2px; }
.cred b{ display:block; font-size:.95rem; }
.cred span{ font-size:.85rem; color:var(--ink-soft); }
@media (max-width:820px){ .about{ grid-template-columns:1fr; } .about__media{ max-width:480px; margin-inline:auto; } .creds{ grid-template-columns:1fr; } }

/* ---------- Locations ---------- */
#consultorios{ scroll-margin-top:-100px; }
@media (max-width:760px){ #consultorios{ scroll-margin-top:-40px; } }
.locations{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.loc{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.loc:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.loc__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.loc__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.loc:hover .loc__media img{ transform:scale(1.05); }
.loc__tag{
  position:absolute; top:14px; left:14px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  color:var(--wine); font-weight:700; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.45em .9em; border-radius:var(--radius-pill); box-shadow:var(--shadow-sm);
}
.loc__body{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.loc__body h3{ margin-bottom:.35rem; }
.loc__addr{ color:var(--ink-soft); margin-bottom:18px; }
.loc__addr svg{ display:inline-block; width:16px; height:16px; vertical-align:-2px; margin-right:6px; color:var(--gold); fill:none; stroke:currentColor; stroke-width:1.8; }
.loc__body .btn{ margin-top:auto; align-self:flex-start; }
@media (max-width:820px){ .locations{ grid-template-columns:1fr; } }

/* ---------- Gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gallery figure{ margin:0; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); aspect-ratio:4/3; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.gallery figure:hover img{ transform:scale(1.08); }
/* Vertical portrait inside a horizontal cell: lift the crop so the face shows higher */
.gallery .gal-portrait{ object-position:center 15%; }
.gallery figure:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
@media (max-width:760px){ .gallery{ grid-template-columns:repeat(2,1fr); } .gallery figure:first-child{ grid-column:span 2; grid-row:auto; aspect-ratio:16/9; } }

/* ---------- Reviews ---------- */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.review__stars{ color:var(--gold); letter-spacing:2px; margin-bottom:12px; }
.review blockquote{ margin:0 0 18px; font-size:1.05rem; line-height:1.6; color:var(--ink); }
.review figcaption{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.review__avatar{ width:42px; height:42px; border-radius:50%; background:var(--grad-gold); color:#3a2b14; display:grid; place-items:center; font-weight:700; font-family:var(--serif); }
.review__name{ font-weight:700; font-size:.95rem; }
.review__date{ font-size:.82rem; color:var(--ink-soft); }
@media (max-width:900px){ .reviews{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; } }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq details{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  margin-bottom:14px; padding:0 24px; box-shadow:var(--shadow-sm); overflow:hidden;
}
.faq details[open]{ border-color:var(--rose); }
.faq summary{
  list-style:none; cursor:pointer; padding:20px 0; font-family:var(--serif); font-size:1.12rem;
  font-weight:600; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:none; width:30px; height:30px; border-radius:50%; background:var(--rose-tint);
  color:var(--wine); display:grid; place-items:center; font-size:1.3rem; line-height:1; transition:transform .25s ease, background-color .25s ease;
}
.faq details[open] summary::after{ content:"–"; background:var(--grad-gold); color:#3a2b14; }
.faq details p{ margin:0; padding:0 0 22px; color:var(--ink-soft); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; background:var(--grad-wine); color:#fff; border-radius:clamp(20px,3vw,34px); padding:clamp(40px,6vw,72px) clamp(28px,5vw,68px); text-align:center; }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 80% at 80% 0%, rgba(231,207,159,.35), transparent 60%); }
.cta-band > *{ position:relative; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.85); max-width:54ch; margin-inline:auto; }
.cta-band .btn--ghost{ color:#fff !important; border-color:rgba(255,255,255,.6); }
.cta-band .btn--ghost:hover{ background:#fff; color:var(--wine) !important; }

/* ---------- Contact ---------- */
.section--contact{ padding-top:clamp(12px, 2vw, 20px); }
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:36px; }
.contact-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; text-align:center; box-shadow:var(--shadow-sm); }
.contact-card .ic{ width:54px; height:54px; border-radius:50%; background:var(--rose-tint); color:var(--wine); display:grid; place-items:center; margin:0 auto 14px; }
.contact-card .ic svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; }
.contact-card h3{ font-size:1.05rem; margin-bottom:.3rem; }
.contact-card a{ font-weight:600; }
.contact-card p{ margin:0; color:var(--ink-soft); font-size:.95rem; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }

/* ---------- Footer ---------- */
.site-footer{ background:#2c2329; color:#e9dcd9; padding-block:54px 30px; }
.site-footer a{ color:#e9dcd9; }
.site-footer a:hover{ color:var(--gold-soft); }
.footer__top{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer__brand{ max-width:320px; }
.footer__brand .brand{ color:#fff; }
.footer__brand p{ color:#bcaaa6; font-size:.92rem; margin-top:12px; }
.footer__cols{ display:flex; flex-wrap:wrap; gap:40px; }
.footer__col h4{ color:#fff; font-family:var(--sans); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; }
.footer__col li{ margin-bottom:9px; font-size:.94rem; }
.footer__social{ display:flex; gap:10px; margin-top:14px; }
.footer__social a{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; transition:background-color .2s ease, border-color .2s ease; }
.footer__social a:hover{ background:rgba(255,255,255,.1); border-color:var(--gold-soft); }
.footer__social svg{ width:20px; height:20px; fill:currentColor; }
.footer__bottom{ padding-top:22px; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; color:#a99893; font-size:.85rem; }

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg, #d9a86a 0%, #c98a86 50%, var(--rosegold) 100%);
  color:#fff !important; display:grid; place-items:center;
  box-shadow:0 14px 30px -8px rgba(183,110,121,.6);
  /* hidden while the hero is in view; revealed once the user scrolls down */
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, box-shadow .25s ease;
}
.wa-float.is-visible{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.wa-float.is-visible:hover{ transform:scale(1.08); box-shadow:0 18px 38px -8px rgba(183,110,121,.75); }
.wa-float svg{ width:32px; height:32px; fill:currentColor; }
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:3px solid #c98a86; opacity:.5;
  animation:wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.55); opacity:0; } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Accessibility ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ----------  FACEBOOK / COMUNIDAD  ---------- */
.fb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.fb-card{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease; }
.fb-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.fb-card__media{ position:relative; aspect-ratio:1/1; background:var(--rose-tint); overflow:hidden; }
.fb-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.fb-card:hover .fb-card__media img{ transform:scale(1.04); }
.fb-card__media--empty{ display:grid; place-items:center; background:var(--grad-soft); }
.fb-card__media--empty svg{ width:52px; height:52px; fill:var(--rose); opacity:.7; }
.fb-card__body{ display:flex; flex-direction:column; gap:10px; padding:20px 22px 22px; flex:1; }
.fb-card__meta{ display:flex; align-items:center; gap:.55em; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-ink); }
.fb-card__meta svg{ width:16px; height:16px; fill:#1877f2; }
.fb-card__text{ color:var(--ink-soft); font-size:.95rem; line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.fb-card__link{ font-weight:700; font-size:.9rem; color:var(--wine); display:inline-flex; align-items:center; gap:.4em; margin-top:auto; }
.fb-card__link::after{ content:"→"; transition:transform .2s ease; }
.fb-card:hover .fb-card__link::after{ transform:translateX(4px); }
.fb-skeleton .fb-card__media{ animation:fbShimmer 1.4s ease-in-out infinite; }
.fb-skeleton .fb-line{ height:12px; border-radius:6px; background:var(--rose-tint); animation:fbShimmer 1.4s ease-in-out infinite; }
.fb-skeleton .fb-line--w60{ width:60%; }
@keyframes fbShimmer{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.fb-follow{ margin-top:clamp(30px,4vw,44px); }
.fb-follow .btn svg{ fill:currentColor; }
@media (max-width:900px){
  .fb-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  /* En móvil solo se muestra la publicación más reciente */
  .fb-grid .fb-card:nth-child(n+2){ display:none; }
}