/* =========================================================
   ESSENCIA · psicología
   Sistema de estilos — minimalismo cálido, editorial y sereno
   Paleta: vino profundo + crema lino + nude
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --wine-900:#2c0d1c;
  --wine-800:#42142a;
  --wine:#5b1d3c;
  --wine-600:#6d2749;
  --wine-400:#9b5c78;
  --wine-200:#d7bdc8;

  --nude:#c9a18b;
  --nude-soft:#e6d3c6;
  --gold:#c2a06b;

  --cream:#faf6f1;
  --cream-2:#f3ece4;
  --cream-3:#eae0d5;

  --ink:#2a2126;
  --body:#5f5259;
  --muted:#6e616a;
  --white:#ffffff;

  --font-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:'Jost', 'Segoe UI', system-ui, sans-serif;

  --container:1220px;
  --radius-s:10px;
  --radius:18px;
  --radius-l:28px;
  --radius-xl:44px;

  --shadow-s:0 2px 10px rgba(64,20,42,.05);
  --shadow:0 18px 40px -22px rgba(64,20,42,.30);
  --shadow-l:0 40px 80px -40px rgba(64,20,42,.45);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --header-h:86px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:16.5px;
  line-height:1.75;
  color:var(--body);
  background:
    radial-gradient(60vw 55vh at 8% 12%,rgba(201,161,139,.20),transparent 70%) fixed,
    radial-gradient(50vw 60vh at 95% 85%,rgba(91,29,60,.07),transparent 70%) fixed,
    radial-gradient(40vw 40vh at 75% 8%,rgba(194,160,107,.12),transparent 70%) fixed,
    var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--wine);color:var(--cream)}

/* Foco visible consistente con la marca, solo para navegación por teclado */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--wine-400);outline-offset:3px;border-radius:4px;
}
.btn:focus-visible{outline-color:var(--cream);outline-offset:3px}

/* Enlace "saltar al contenido" — invisible hasta recibir foco por teclado */
.skip-link{
  position:fixed;top:-60px;left:14px;z-index:2100;background:var(--wine);color:var(--cream);
  padding:.8rem 1.3rem;border-radius:0 0 12px 12px;font-size:.8rem;letter-spacing:.08em;
  transition:top .3s var(--ease-out);
}
.skip-link:focus{top:0}

::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--cream-2)}
::-webkit-scrollbar-thumb{background:var(--wine-200);border-radius:99px;border:3px solid var(--cream-2)}
::-webkit-scrollbar-thumb:hover{background:var(--wine-400)}

/* Grano sutil sobre todo el sitio */
body::after{
  content:"";position:fixed;inset:0;z-index:1400;pointer-events:none;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{font-family:var(--font-serif);color:var(--ink);font-weight:400;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.9rem,6.4vw,5.1rem)}
h2{font-size:clamp(2.1rem,4.3vw,3.5rem)}
h3{font-size:clamp(1.35rem,2vw,1.7rem)}
h4{font-size:1.15rem}
p{max-width:66ch}
em{font-style:italic;color:var(--wine)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  font-weight:400;color:var(--wine-400);
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--nude)}
.eyebrow.center::after{content:"";width:34px;height:1px;background:var(--nude)}

.lead{font-size:clamp(1.02rem,1.5vw,1.16rem)}
.text-wine{color:var(--wine)}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.section{padding:clamp(72px,10vw,140px) 0;position:relative}
.section--tight{padding:clamp(56px,7vw,96px) 0}
.section--cream{background:rgba(236,226,215,.55)}
.section--wine{background:var(--wine-900);color:var(--cream-3)}
.section--wine h1,.section--wine h2,.section--wine h3,.section--wine h4{color:var(--cream)}
.section--wine p{color:#d9c8d1}
.section--wine .eyebrow{color:var(--nude)}

.section-head{max-width:760px;margin-bottom:clamp(40px,5vw,68px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin:.9rem 0 1.1rem}
.section-head.center p{margin-inline:auto}

.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* ---------- Botones ---------- */
.btn{
  --bg:var(--wine);--fg:var(--cream);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.9rem;border-radius:999px;
  font-size:.79rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  background:var(--bg);color:var(--fg);overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),color .35s var(--ease);
  box-shadow:0 10px 26px -14px rgba(91,29,60,.75);
}
.btn::after{
  content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:var(--my,50%);
  width:var(--md,260px);aspect-ratio:1;border-radius:50%;background:var(--wine-900);
  transform:translate(-50%,-50%) scale(0);transition:transform .6s var(--ease-out);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 34px -16px rgba(91,29,60,.7)}
.btn:hover::after{transform:translate(-50%,-50%) scale(1)}
.btn:active{transform:translateY(-1px)}
.btn .ico{transition:transform .4s var(--ease-out)}
.btn:hover .ico{transform:translateX(4px)}
.btn--ghost{--bg:transparent;--fg:var(--wine);border:1px solid var(--wine-200);box-shadow:none}
.btn--ghost:hover{--fg:var(--cream);box-shadow:0 16px 30px -18px rgba(91,29,60,.6)}
.btn--light{--bg:var(--cream);--fg:var(--wine-900)}
.btn--light::after{background:var(--nude)}
.btn--sm{padding:.7rem 1.35rem;font-size:.7rem}
.btn:disabled,.btn[disabled]{opacity:.6;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none}

.link-arrow{
  display:inline-flex;align-items:center;gap:.55rem;color:var(--wine);
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;padding-bottom:3px;
  background-image:linear-gradient(var(--wine),var(--wine));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease-out),color .35s;
}
.link-arrow:hover{background-size:100% 1px}
.link-arrow svg{transition:transform .4s var(--ease-out)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ---------- Preloader ---------- */
.preloader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:var(--cream);
  transition:opacity .7s var(--ease),visibility .7s}
.preloader.done{opacity:0;visibility:hidden}
.preloader__inner{display:grid;justify-items:center}
.preloader__mark{width:104px;overflow:visible;fill:none;stroke:var(--wine);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.preloader__mark path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s var(--ease) calc(var(--i) * .09s) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.preloader__word{margin-top:16px;font-family:var(--font-serif);font-size:1.5rem;letter-spacing:.06em;color:var(--wine);
  opacity:0;animation:preIn 1.2s var(--ease-out) .9s forwards}
.preloader__bar{width:150px;height:1px;background:var(--cream-3);margin-top:24px;overflow:hidden;position:relative}
.preloader__bar::after{content:"";position:absolute;inset:0;background:var(--wine);transform:translateX(-100%);
  animation:preBar 2s var(--ease) forwards}
@keyframes preIn{0%{opacity:0;transform:translateY(14px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes preBar{to{transform:translateX(0)}}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--header-h);display:flex;align-items:center;
  transition:height .4s var(--ease),transform .5s var(--ease)}
.header::before{
  content:"";position:absolute;inset:0;background:rgba(250,246,241,.84);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .45s var(--ease);border-bottom:1px solid rgba(91,29,60,.08);
}
.header.scrolled{height:70px}
.header.scrolled::before{opacity:1}
.header.hidden{transform:translateY(-102%)}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:2rem;position:relative;z-index:2}

.brand{display:flex;align-items:center;gap:.75rem}
.brand__mark{width:42px;transition:transform .6s var(--ease-out)}
.brand:hover .brand__mark{transform:rotate(-6deg) scale(1.06)}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--font-serif);font-size:1.5rem;color:var(--wine);letter-spacing:.02em}
.brand__sub{font-size:.56rem;letter-spacing:.42em;color:var(--nude);margin-top:3px}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.1rem)}
.nav a{position:relative;font-size:.79rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);
  padding:.4rem 0;transition:color .3s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--wine);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav a:hover{color:var(--wine)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1);transform-origin:left}
.nav a.active{color:var(--wine)}
.header__cta{display:flex;align-items:center;gap:1rem}

.burger{display:none;width:44px;height:44px;position:relative;z-index:1200}
.burger span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--wine);border-radius:2px;
  transition:transform .45s var(--ease-out),opacity .25s,width .3s}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:22px;width:15px}
.burger span:nth-child(3){top:27px}
.burger.open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);width:22px}

.mobile-menu{
  position:fixed;inset:0;z-index:1100;background:var(--cream);
  clip-path:circle(0% at calc(100% - 46px) 44px);transition:clip-path .8s var(--ease-out);
  display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,8vw,64px);overflow:hidden;
}
.mobile-menu.open{clip-path:circle(150% at calc(100% - 46px) 44px)}
.mobile-menu a.mm-link{
  font-family:var(--font-serif);font-size:clamp(2rem,8vw,3rem);color:var(--ink);padding:.3rem 0;
  opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.mobile-menu.open a.mm-link{opacity:1;transform:none}
.mobile-menu a.mm-link:hover{color:var(--wine)}
.mobile-menu__foot{margin-top:2.4rem;display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;color:var(--muted);position:relative;z-index:2}
.mobile-menu__mark{pointer-events:none;position:absolute;right:-70px;bottom:-50px;width:min(65vw,340px);opacity:.07}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--header-h) + 40px);padding-bottom:80px;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:float 18s ease-in-out infinite}
.blob--1{width:min(46vw,560px);aspect-ratio:1;background:radial-gradient(circle,#e9d3c6,transparent 68%);top:-12%;right:-8%}
.blob--2{width:min(38vw,440px);aspect-ratio:1;background:radial-gradient(circle,#e3cdd8,transparent 68%);bottom:-14%;left:-10%;animation-delay:-7s}
.blob--3{width:min(26vw,300px);aspect-ratio:1;background:radial-gradient(circle,#f0e2cd,transparent 70%);top:38%;left:44%;animation-delay:-12s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(28px,-26px) scale(1.06)}66%{transform:translate(-22px,20px) scale(.96)}}

.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,60px);align-items:center;position:relative;z-index:2}
.hero h1{margin:1.5rem 0 1.5rem}
.line{display:block;overflow:hidden}
.line > span{display:block;transform:translateY(105%);animation:lineUp 1.05s var(--ease-out) forwards}
@keyframes lineUp{to{transform:translateY(0)}}
.fade-up{opacity:0;transform:translateY(22px);animation:fadeUp .95s var(--ease-out) forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}
.hero__desc{max-width:52ch;margin-bottom:2.1rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

.hero__visual{position:relative;display:grid;place-items:center}
.hero__orb{position:relative;width:100%;display:grid;place-items:center;aspect-ratio:1/1.04}
.hero__badges{display:contents}
.hero__glow{pointer-events:none;position:absolute;inset:2%;border-radius:50%;
  background:radial-gradient(circle,rgba(201,161,139,.30),rgba(201,161,139,0) 66%);filter:blur(14px)}
.hero__disc{pointer-events:none;position:absolute;inset:13%;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#fffdfb,#f1e6dc 62%,#e7d8ca);box-shadow:var(--shadow-l)}
.hero__logo{position:relative;width:46%;filter:drop-shadow(0 20px 30px rgba(91,29,60,.18));animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.02)}}

.hero__badge{
  position:absolute;display:flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.88);backdrop-filter:blur(8px);
  border:1px solid rgba(201,161,139,.34);border-radius:999px;padding:.6rem 1.05rem;
  font-size:.74rem;letter-spacing:.06em;color:var(--wine);box-shadow:var(--shadow);white-space:nowrap;
}
.hero__badge svg{flex:none}
a.hero__badge{transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .4s}
a.hero__badge:hover{border-color:var(--wine-200);box-shadow:0 18px 34px -18px rgba(91,29,60,.55)}
.hero__badge--1{top:3%;left:8%;animation:floatY 6s ease-in-out infinite}
.hero__badge--2{bottom:8%;right:-4%;animation:floatY 6s ease-in-out infinite -3s}
.hero__badge--3{bottom:1%;left:14%;animation:floatY 7s ease-in-out infinite -1.5s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.65rem;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.scroll-cue__line{width:1px;height:52px;background:linear-gradient(var(--nude),transparent);position:relative;overflow:hidden}
.scroll-cue__line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--wine);animation:cue 2.1s var(--ease) infinite}
@keyframes cue{to{top:110%}}

/* ---------- Marquee ---------- */
.marquee{background:var(--wine-900);color:var(--nude-soft);padding:.95rem 0;overflow:hidden}
.marquee__track{display:flex;gap:3.5rem;width:max-content;animation:slide 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:flex;align-items:center;gap:.85rem;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.marquee__item i{font-style:normal;color:var(--nude)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split--reverse .split__media{order:2}
.split__media{position:relative;display:flex;flex-direction:column;gap:1.15rem}
.frame{position:relative;border-radius:var(--radius-xl) var(--radius-xl) var(--radius-xl) 120px;overflow:hidden;
  background:var(--cream-3);aspect-ratio:4/4.4;box-shadow:var(--shadow-l)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.frame:hover img{transform:scale(1.05)}
.frame--logo{display:grid;place-items:center;background:radial-gradient(circle at 40% 30%,#fffcf9,#f0e5da 70%,#e6d6c8)}
.split--editorial{grid-template-columns:.95fr 1.05fr;align-items:start}
.split__head{position:sticky;top:calc(var(--header-h) + 40px)}
.split__head h2{margin-bottom:0}
.split--editorial .lead{margin-top:.4rem}
.pullquote{margin:2.2rem 0 0;padding:.4rem 0 .4rem 1.5rem;border-left:2px solid var(--nude);font-family:var(--font-serif);font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.35;color:var(--wine-900)}
.frame--quote{display:grid;place-items:center;padding:clamp(28px,5vw,60px);text-align:center;background:radial-gradient(circle at 40% 30%,#fffcf9,#f0e5da 70%,#e6d6c8)}
.frame--quote blockquote{font-family:var(--font-serif);font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.3;color:var(--wine-900)}
.frame--quote em{color:var(--wine)}
.frame__year{display:block;font-size:clamp(3.4rem,7vw,5.5rem);line-height:1;color:var(--wine);margin-bottom:.6rem}
/* Antes flotaba encima de la esquina de la foto (una tarjeta tapando a otra).
   Ahora es una tarjeta de pie de foto aparte, debajo, sin superponerse nunca. */
.frame__tag{align-self:flex-start;background:var(--cream);
  padding:1rem 1.6rem;border-radius:var(--radius);border:1px solid #efe6dd;box-shadow:var(--shadow);
  font-family:var(--font-serif);color:var(--wine);white-space:nowrap}
.frame__tag b{display:block;font-size:2rem;line-height:1;font-weight:500}
.frame__tag small{font-family:var(--font-sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

.deco-dots{pointer-events:none;position:absolute;width:120px;height:120px;opacity:.5;z-index:-1;
  background-image:radial-gradient(var(--nude) 1.4px,transparent 1.4px);background-size:14px 14px}
.deco-dots--tr{top:-30px;right:-30px}
.deco-dots--bl{bottom:-30px;left:-30px}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.6rem;padding-top:2.2rem;border-top:1px solid var(--cream-3)}
.stat b{display:block;font-family:var(--font-serif);font-size:clamp(2rem,3.4vw,2.8rem);color:var(--wine);line-height:1;font-weight:500}
.stat small{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- Cards ---------- */
.card{
  position:relative;background:var(--white);border:1px solid #efe6dd;border-radius:var(--radius-l);
  padding:clamp(24px,3vw,36px);overflow:hidden;isolation:isolate;height:100%;
  display:flex;flex-direction:column;gap:1rem;
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .4s;
}
.card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,var(--wine) 0%,var(--wine-900) 100%);opacity:0;transition:opacity .5s var(--ease)}
.card:hover{transform:translateY(-9px);box-shadow:var(--shadow-l);border-color:transparent}
.card:hover::before{opacity:1}
.card:hover h3,.card:hover p,.card:hover .card__meta{color:var(--cream)}
.card:hover .card__num{color:rgba(250,246,241,.22)}
.card:hover .card__icon{background:rgba(250,246,241,.14);border-color:rgba(250,246,241,.3)}
.card:hover .card__icon svg{stroke:var(--cream)}
.card:hover .link-arrow{color:var(--nude-soft);background-image:linear-gradient(var(--nude-soft),var(--nude-soft))}
.card h3,.card p,.card__meta,.card__num{transition:color .4s var(--ease)}
.card__icon{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;
  background:var(--cream-2);border:1px solid #ece0d5;transition:background .4s,border-color .4s}
.card__icon svg{stroke:var(--wine);transition:stroke .4s}
.card__num{position:absolute;top:18px;right:26px;font-family:var(--font-serif);font-size:2.6rem;color:var(--cream-3);line-height:1}
.card p{font-size:.95rem}
.card__meta{margin-top:auto;padding-top:.5rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.card__list{display:grid;gap:.5rem;font-size:.92rem}
.card__list li{display:flex;gap:.6rem;align-items:flex-start}
.card__list li svg{flex:none;margin-top:6px}
.card--flat::before{display:none}
.card--flat:hover{transform:translateY(-6px);border-color:var(--nude-soft)}
.card--flat:hover h3,.card--flat:hover p,.card--flat:hover .card__meta{color:inherit}
.card--flat:hover .card__icon{background:var(--cream-2);border-color:#ece0d5}
.card--flat:hover .card__icon svg{stroke:var(--wine)}

/* ---------- Tabs ---------- */
.tabs{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,56px);align-items:start}
.tabs__list{display:flex;flex-direction:column;gap:.3rem}
.tab-btn{display:flex;align-items:center;gap:1rem;text-align:left;width:100%;
  padding:1.05rem 1.2rem;border-radius:var(--radius);color:var(--ink);border:1px solid transparent;
  transition:background .4s var(--ease),color .4s,box-shadow .4s,border-color .4s}
.tab-btn b{font-family:var(--font-serif);font-size:1.22rem;font-weight:500}
.tab-btn i{font-style:normal;font-size:.66rem;letter-spacing:.2em;color:var(--nude);
  border:1px solid var(--nude-soft);border-radius:99px;padding:.2rem .6rem;flex:none;transition:all .4s var(--ease)}
.tab-btn:hover{background:var(--white);border-color:#eee1d6}
.tab-btn:active{transform:scale(.98)}
.tab-btn.active{background:var(--wine);color:var(--cream);box-shadow:var(--shadow)}
.tab-btn.active i{color:var(--wine);background:var(--nude-soft);border-color:transparent}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeIn .6s var(--ease-out)}
@keyframes fadeIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tab-panel h3{margin-bottom:.9rem}
.tab-panel ul{margin-top:1.4rem;display:grid;gap:.75rem}
.tab-panel li{display:flex;gap:.8rem;align-items:flex-start;font-size:.95rem}
.tab-panel li svg{flex:none;margin-top:6px}
.panel-box{background:var(--white);border:1px solid #efe6dd;border-radius:var(--radius-l);
  padding:clamp(26px,3.4vw,44px);box-shadow:var(--shadow)}

/* ---------- Proceso ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px);position:relative}
.steps::before{content:"";position:absolute;top:34px;left:9%;right:9%;height:1px;
  background:repeating-linear-gradient(90deg,var(--nude-soft) 0 8px,transparent 8px 16px)}
.step{position:relative;text-align:center}
.step__dot{width:68px;height:68px;margin:0 auto 1.3rem;border-radius:50%;display:grid;place-items:center;
  background:var(--cream);border:1px solid var(--nude-soft);font-family:var(--font-serif);font-size:1.5rem;
  color:var(--wine);position:relative;z-index:2;transition:all .5s var(--ease-out)}
.section--cream .step__dot{background:var(--cream-2)}
.step:hover .step__dot{background:var(--wine);color:var(--cream);border-color:var(--wine);transform:translateY(-6px) scale(1.06)}
.step h4{margin-bottom:.5rem}
.step p{font-size:.9rem;margin-inline:auto}

/* ---------- Testimonios ---------- */
.slider{position:relative;overflow:hidden}
.slider__track{display:flex;transition:transform .8s var(--ease-out)}
.slide{min-width:100%;padding:0 clamp(4px,3vw,50px)}
.quote{background:var(--white);border-radius:var(--radius-l);padding:clamp(30px,4vw,56px);text-align:center;
  box-shadow:var(--shadow);border:1px solid #f0e7de;position:relative}
.quote::before{content:"\201C";position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  font-family:var(--font-serif);font-size:7rem;color:var(--nude-soft);line-height:1}
.quote p{font-family:var(--font-serif);font-size:clamp(1.25rem,2.3vw,1.7rem);line-height:1.55;color:var(--ink);
  margin:1.7rem auto 1.6rem;max-width:44ch;font-style:italic}
.quote__author{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wine)}
.quote__stars{display:flex;gap:.3rem;justify-content:center;color:var(--gold)}
.slider__nav{display:flex;align-items:center;justify-content:center;gap:1.6rem;margin-top:2.2rem}
.slider__btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--nude-soft);display:grid;place-items:center;
  color:var(--wine);transition:all .4s var(--ease-out)}
.slider__btn:hover{background:var(--wine);color:var(--cream);border-color:var(--wine);transform:scale(1.07)}
.slider__btn:active{transform:scale(.94)}
.dots{display:flex;gap:.2rem}
.dot{
  width:24px;height:24px;display:grid;place-items:center;background:none;border-radius:99px;
  transition:transform .2s var(--ease-out);
}
.dot:active{transform:scale(.88)}
.dot::after{
  content:"";width:7px;height:7px;border-radius:99px;background:var(--nude-soft);
  transition:all .4s var(--ease-out);
}
.dot.active::after{width:26px;background:var(--wine)}

/* ---------- Acordeón ---------- */
.acc{border-top:1px solid var(--cream-3)}
.acc__item{border-bottom:1px solid var(--cream-3)}
.acc__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem 0;
  text-align:left;font-family:var(--font-serif);font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--ink);transition:color .35s}
.acc__head:hover{color:var(--wine)}
.acc__head:active{opacity:.75}
.acc__icon{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--nude-soft);
  display:grid;place-items:center;position:relative;transition:all .45s var(--ease-out)}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;background:var(--wine);
  transition:transform .45s var(--ease-out),background .3s}
.acc__icon::before{width:12px;height:1.4px}
.acc__icon::after{width:1.4px;height:12px}
.acc__item.open .acc__icon{background:var(--wine);border-color:var(--wine);transform:rotate(90deg)}
.acc__item.open .acc__icon::before,.acc__item.open .acc__icon::after{background:var(--cream)}
.acc__item.open .acc__icon::after{transform:scaleY(0)}
.acc__body{overflow:hidden;height:0;transition:height .5s var(--ease-out)}
.acc__body p{padding:0 0 1.6rem;font-size:.97rem;max-width:80ch}

/* ---------- Equipo ---------- */
.member{text-align:center}
.member__photo{position:relative;aspect-ratio:1/1.12;border-radius:200px 200px var(--radius-l) var(--radius-l);
  overflow:hidden;background:radial-gradient(circle at 45% 32%,#fffcf9,#f0e5da 70%,#e5d5c6);
  display:grid;place-items:center;margin-bottom:1.3rem;border:1px solid #ece1d6;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.member:hover .member__photo{transform:translateY(-8px);box-shadow:var(--shadow-l)}
.member__ico{width:50%;color:var(--wine-400);opacity:.7;transition:transform .8s var(--ease-out)}
.member:hover .member__ico{transform:scale(1.06) rotate(-3deg)}
.member h4{font-size:1.3rem}
.member .role{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wine-400);margin-top:.3rem}
.member .cop{font-size:.82rem;color:var(--muted);margin-top:.35rem}
.tagset{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:.9rem}
.tag{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wine);
  border:1px solid var(--nude-soft);border-radius:99px;padding:.28rem .72rem;background:var(--white)}

/* ---------- Precios / detalle servicio ---------- */
.svc{position:relative;display:flex;flex-direction:column;padding:clamp(26px,3vw,40px);
  background:var(--white);border:1px solid #efe6dd;border-radius:var(--radius-xl);
  transition:box-shadow .5s var(--ease-out),transform .5s var(--ease-out),border-color .4s}
.svc:hover{box-shadow:var(--shadow-l);transform:translateY(-5px);border-color:var(--nude-soft)}
.svc > *{min-width:0}
.svc__media{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;
  margin-bottom:1.4rem;padding-bottom:1.2rem;border-bottom:1px solid #f1e8df}
.svc__ico{width:56px;height:56px;padding:13px;border-radius:50%;background:var(--cream-2);color:var(--wine);stroke-width:1.3}
.svc__media .card__num{position:static;font-size:2.4rem;color:var(--nude);opacity:.7}
.svc__body{display:flex;flex-direction:column;flex:1}
.svc__body .link-arrow{margin-top:auto;align-self:flex-start}
.svc__body h3{margin-bottom:.7rem}
.svc__meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.svc__list{display:grid;gap:.55rem;margin:1.3rem 0;font-size:.94rem}
.svc__list li{display:flex;gap:.65rem;align-items:flex-start}
.svc__list li svg{flex:none;margin-top:6px}

/* ---------- Formulario ---------- */
.form{display:grid;gap:1.15rem}
.field{position:relative;display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;padding:.92rem 1.05rem;background:var(--white);
  border:1px solid #e8ddd2;border-radius:14px;font-size:.95rem;font-weight:300;
  transition:border-color .35s,box-shadow .35s}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--wine-400);
  box-shadow:0 0 0 4px rgba(155,92,120,.12)}
.field.error input,.field.error select,.field.error textarea{border-color:#c0483f;box-shadow:0 0 0 4px rgba(192,72,63,.1)}
.field .msg{font-size:.74rem;color:#c0483f;height:0;opacity:0;overflow:hidden;transition:all .3s}
.field.error .msg{height:auto;opacity:1}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.84rem;color:var(--muted)}
.check input{width:18px;height:18px;accent-color:var(--wine);margin-top:3px;flex:none}
.check a{color:var(--wine);text-decoration:underline}
.check-wrap .msg{display:block;font-size:.74rem;color:#c0483f;height:0;opacity:0;overflow:hidden;
  margin-top:.35rem;margin-left:2.1rem;transition:all .3s}
.check-wrap.error .msg{height:auto;opacity:1}
.check-wrap.error .check{color:#c0483f}
.form-ok,.form-err{display:none;align-items:center;gap:.8rem;padding:1rem 1.2rem;border-radius:14px;
  font-size:.9rem;margin-bottom:1.15rem}
.form-ok{background:#eef4ec;color:#2f6b46;border:1px solid #cfe3d3}
.form-err{background:#fbecea;color:#9c3a30;border:1px solid #f0cdc7}
.form-ok.show,.form-err.show{display:flex;animation:fadeIn .5s var(--ease-out)}
.form-ok svg,.form-err svg{flex:none}

/* ---------- Info ---------- */
.info{display:flex;gap:1.1rem;align-items:flex-start;padding:1.4rem 1.5rem;background:var(--white);
  border:1px solid #efe6dd;border-radius:var(--radius);transition:transform .45s var(--ease-out),box-shadow .45s,border-color .4s}
.info:hover{transform:translateX(6px);box-shadow:var(--shadow);border-color:var(--nude-soft)}
.info__ico{width:46px;height:46px;flex:none;border-radius:14px;background:var(--cream-2);display:grid;place-items:center}
.info b{display:block;font-family:var(--font-serif);font-size:1.12rem;color:var(--ink);font-weight:500}
.info div span{font-size:.9rem;display:block}
.info a:hover{color:var(--wine)}

/* ---------- Page hero ---------- */
.page-hero{position:relative;padding:calc(var(--header-h) + clamp(56px,8vw,96px)) 0 clamp(44px,7vw,84px);
  background:linear-gradient(180deg,var(--cream-2),var(--cream));overflow:hidden;text-align:center}
.page-hero__mark{pointer-events:none;position:absolute;right:-70px;top:8%;width:min(46vw,380px);opacity:.06;animation:breathe 9s ease-in-out infinite}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem);margin:1rem 0 1.1rem}
.page-hero p{margin-inline:auto}
.page-hero > .container{position:relative;z-index:2}
.crumbs{display:flex;gap:.55rem;justify-content:center;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:1.6rem}
.crumbs a:hover{color:var(--wine)}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;background:var(--wine-900);border-radius:var(--radius-xl);
  padding:clamp(40px,6vw,86px);text-align:center;color:var(--cream)}
.cta::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,161,139,.28),transparent 66%);top:-40%;left:-10%}
.cta::after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(155,92,120,.35),transparent 66%);bottom:-45%;right:-8%}
.cta > *{position:relative;z-index:2}
.cta h2{color:var(--cream);margin:1rem auto 1.2rem;max-width:20ch}
.cta p{color:#dcc9d3;margin:0 auto 2rem}
.cta__mark{width:72px;margin:0 auto 1.3rem;filter:brightness(0) invert(1);opacity:.85}
.cta__actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{background:var(--wine-900);color:#cbb6c1;padding:clamp(54px,7vw,90px) 0 30px;position:relative;overflow:hidden}
.footer__mark{pointer-events:none;position:absolute;left:50%;top:-110px;transform:translateX(-50%);width:440px;opacity:.05;filter:brightness(0) invert(1)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,48px);position:relative;z-index:2}
.footer h5{font-family:var(--font-serif);color:var(--cream);font-size:1.1rem;margin-bottom:1.1rem;font-weight:400}
.footer li{margin-bottom:.55rem;font-size:.92rem}
.footer li a{transition:color .3s,padding-left .3s;display:inline-block}
.footer li a:hover{color:var(--nude);padding-left:5px}
.footer__brand .brand__name{color:var(--cream)}
.footer__brand p{font-size:.92rem;margin-top:1rem;color:#b8a2ae;max-width:34ch}
.footer__mark-img{width:42px;filter:brightness(0) invert(1);opacity:.9}
.socials{display:flex;gap:.6rem;margin-top:1.4rem}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(233,214,224,.22);
  display:grid;place-items:center;transition:all .4s var(--ease-out)}
.socials a:hover{background:var(--nude);border-color:var(--nude);color:var(--wine-900);transform:translateY(-4px)}
.socials a:active{transform:scale(.92)}
.footer__notice{
  display:flex;align-items:center;gap:.6rem;margin-top:clamp(28px,4vw,44px);padding:.9rem 1.2rem;
  background:rgba(250,246,241,.06);border:1px solid rgba(233,214,224,.16);border-radius:var(--radius);
  font-size:.82rem;color:#d9c8d1;position:relative;z-index:2;
}
.footer__notice svg{flex:none;color:var(--nude)}
.footer__notice a{color:var(--nude);text-decoration:underline;white-space:nowrap}
.footer__notice a:hover{color:var(--cream)}
.footer__bottom{margin-top:clamp(24px,3vw,32px);padding-top:22px;border-top:1px solid rgba(233,214,224,.13);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:#9d8894;position:relative;z-index:2}
.footer__bottom a{text-decoration:underline}
.footer__bottom a:hover{color:var(--nude)}

/* ---------- Flotantes ---------- */
.whatsapp{position:fixed;right:22px;bottom:22px;z-index:900;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.6);transition:transform .4s var(--ease-out)}
.whatsapp::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:pulse 2.4s ease-out infinite}
.whatsapp:hover{transform:scale(1.1) rotate(6deg)}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.to-top{position:fixed;left:22px;bottom:22px;z-index:900;width:46px;height:46px;border-radius:50%;
  background:var(--wine);color:var(--cream);display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(14px);transition:all .45s var(--ease-out)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--wine-800)}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--wine),var(--nude));z-index:1500}

/* ---------- Reveal ---------- */
[data-reveal]{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal]:not(.in){opacity:0;transform:translateY(30px)}
[data-reveal="left"]:not(.in){transform:translateX(-40px)}
[data-reveal="right"]:not(.in){transform:translateX(40px)}
[data-reveal="zoom"]:not(.in){transform:scale(.94)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero__desc{margin-inline:auto}
  .hero__actions{justify-content:center}
  .hero__visual{max-width:430px;margin:0 auto;order:-1}
  .hero__badge--1{left:-2%}
  .hero__badge--2{right:-2%}
  /* El hero pasa a una sola columna centrada en todo este rango y el
     contenido queda más alto que en escritorio; "Desliza" (pensado para
     el layout de dos columnas) termina encima del botón "Ver servicios"
     en vez de pegado al fondo real de la sección. Se quita en todo el
     rango ≤1024px en vez de solo en el de móvil más angosto. */
  .scroll-cue{display:none}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .tabs{grid-template-columns:1fr}
  .tabs__list{flex-direction:row;overflow-x:auto;padding-bottom:.5rem;gap:.5rem}
  .tab-btn{white-space:nowrap;flex-direction:column;align-items:flex-start;gap:.4rem;min-width:200px}
  .steps{grid-template-columns:repeat(2,1fr);gap:2.2rem 1rem}
  .steps::before{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .split__head{position:static}
  .split--reverse .split__media{order:0}
}
/* El menú completo (nav + botón "Reservar cita") deja de caber bien antes
   de llegar a los 760px del resto de ajustes "móviles" — a 768px (el ancho
   de tablets en vertical, ej. iPad) el botón terminaba cortado fuera de la
   pantalla. Este corte vive en su propio breakpoint, más ancho, para no
   mezclarlo con los demás ajustes de layout que sí siguen sirviendo recién
   a partir de 760px. */
@media (max-width:900px){
  .nav,.header__cta .btn{display:none}
  .burger{display:block}
}
@media (max-width:760px){
  /* Las 3 cápsulas del hero (badges) flotaban con posiciones en porcentaje
     sobre el disco; a este ancho el círculo se achica más que las cápsulas
     y terminan cayendo encima del propio logo (ya había pasado una vez con
     dos cápsulas pisándose, y el parche anterior solo movió el problema).
     Solución de raíz: dejan de flotar y pasan a ser una fila real debajo
     del disco — sin position:absolute no hay forma de que se superpongan. */
  .hero__orb{max-width:300px;margin-inline:auto}
  .hero__visual{margin-top:.5rem}
  .hero__badges{
    display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
    margin-top:1.3rem;position:relative;
  }
  .hero__badge{position:static;animation:none}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:1.3rem;text-align:center}
  .footer__grid{grid-template-columns:1fr;text-align:center}
  .footer__brand p{margin-inline:auto}
  .socials{justify-content:center}
  .info{text-align:left}
  .brand__mark{width:36px}
  .brand__name{font-size:1.3rem}
  .frame{border-radius:var(--radius-l) var(--radius-l) var(--radius-l) 80px}
  .frame__tag{padding:.8rem 1.2rem}
  .frame__tag b{font-size:1.6rem}
  .marquee__item{font-size:.66rem;letter-spacing:.18em}
  .to-top{display:none}
  .quote::before{font-size:5rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .line > span{transform:none!important}
  .fade-up{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* =========================================================
   Capa premium (27/10/2026): líneas de fondo, titulares con
   máscara, ornamentos, guía "¿Qué te trae hoy?", respiración,
   formulario por pasos, testimonios editoriales, footer,
   transiciones entre páginas y scroll suave
   ========================================================= */

/* Líneas fluidas de fondo (las inyecta main.js). Fijas detrás de todo;
   la máscara las borra en el centro para que nunca crucen el texto. */
.bg-lines{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.9) 6%,transparent 17%,transparent 83%,rgba(0,0,0,.9) 94%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.9) 6%,transparent 17%,transparent 83%,rgba(0,0,0,.9) 94%,#000 100%)}
.bg-lines svg{position:absolute;width:min(46vw,640px);height:auto;overflow:visible;fill:none;
  stroke:var(--nude);stroke-width:1.15;stroke-linecap:round;opacity:.8;translate:0 var(--py,0px)}
.bg-lines__a{right:-15vw;top:-6vh}
.bg-lines__b{left:-17vw;bottom:-12vh;rotate:180deg}
.bg-lines path{transform-box:fill-box;transform-origin:50% 50%;
  animation:sway 16s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -2.4s)}
@keyframes sway{from{transform:translate(0,0) rotate(0)}to{transform:translate(-16px,20px) rotate(1.8deg)}}

/* Ornamento que se dibuja sobre los encabezados centrados */
.ornament{display:block;width:132px;height:20px;margin:0 auto 1.2rem;overflow:visible;color:var(--nude)}
.ornament path{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s var(--ease-out) .15s}
.ornament circle{fill:var(--wine-400);opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;
  transition:opacity .6s var(--ease) 1.1s,transform .8s var(--ease-out) 1.1s}
.in .ornament path{stroke-dashoffset:0}
.in .ornament circle{opacity:1;transform:none}
.section--wine .ornament circle{fill:var(--nude)}

/* Titulares que suben desde una máscara, palabra por palabra */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .1em .14em 0;margin:0 -.1em -.14em 0}
.w > span{display:inline-block;transform:translateY(112%);
  transition:transform 1.15s var(--ease-out);transition-delay:calc(var(--i) * 48ms)}
.words-in .w > span{transform:none}

/* ---------- ¿Qué te trae hoy? ---------- */
.guide__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;max-width:900px;margin:0 auto}
.chip{padding:.8rem 1.4rem;border-radius:999px;border:1px solid var(--nude-soft);background:rgba(255,255,255,.72);
  font-family:var(--font-serif);font-size:1.1rem;color:var(--ink);
  transition:background .4s var(--ease),color .3s,border-color .4s,transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.chip:hover{border-color:var(--wine-200);transform:translateY(-2px);box-shadow:var(--shadow)}
.chip:active{transform:translateY(0) scale(.98)}
.chip[aria-pressed="true"]{background:var(--wine);color:var(--cream);border-color:var(--wine);
  box-shadow:0 14px 28px -16px rgba(91,29,60,.8)}
.guide__answer{position:relative;max-width:780px;margin:2.6rem auto 0;min-height:200px;overflow:hidden;
  background:var(--white);border:1px solid #efe6dd;border-radius:var(--radius-l);
  padding:clamp(26px,3.6vw,44px);box-shadow:var(--shadow)}
.guide__answer::before{content:"";position:absolute;width:280px;height:280px;right:-90px;top:-120px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,161,139,.22),transparent 70%);pointer-events:none}
.guide__empty{display:flex;gap:.8rem;align-items:center;justify-content:center;min-height:120px;
  color:var(--muted);font-size:.98rem;text-align:center}
.guide__empty svg{color:var(--nude);flex:none}
.guide__res{position:relative;animation:guideIn .7s var(--ease-out)}
.guide__res h3{margin:.7rem 0 .8rem}
.guide__res p{margin-bottom:1.6rem}
.guide__actions{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:center}
.guide__note{text-align:center;font-size:.8rem;color:var(--muted);margin:1.6rem auto 0}
.guide__note a{color:var(--wine);text-decoration:underline;white-space:nowrap}
@keyframes guideIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Un minuto para ti (respiración) ---------- */
.breathe{overflow:hidden}
.breathe::before{content:"";position:absolute;width:720px;height:720px;left:58%;top:50%;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(201,161,139,.16),transparent 65%);pointer-events:none}
.breathe__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.breathe h2 em{color:var(--nude)}
.breathe .lead{margin-top:1.2rem}
.breathe__legend{display:grid;gap:.75rem;margin-top:2.2rem;max-width:420px}
.breathe__legend li{display:flex;gap:1.1rem;align-items:baseline;color:#d9c8d1;font-size:.95rem;
  padding-bottom:.75rem;border-bottom:1px solid rgba(233,214,224,.12)}
.breathe__legend b{font-family:var(--font-serif);font-weight:400;font-size:1.3rem;color:var(--nude);min-width:2.6ch}
.breathe__stage{display:grid;justify-items:center;gap:2.4rem}
.breathe__orb{position:relative;width:min(76vw,360px);aspect-ratio:1;display:grid;place-items:center}
.breathe__ring,.breathe__core{position:absolute;border-radius:50%}
.breathe__ring{inset:0;border:1px solid rgba(201,161,139,.34)}
.breathe__ring + .breathe__ring{inset:-10%;border-color:rgba(201,161,139,.14)}
.breathe__core{inset:14%;background:radial-gradient(circle at 34% 28%,#fbf1ea,#d9b6a2 62%,#b8897a);
  box-shadow:0 0 90px -8px rgba(201,161,139,.55),inset 0 -14px 40px rgba(91,29,60,.18);
  transform:scale(.8);transition:transform var(--dur,4s) cubic-bezier(.45,0,.55,1);
  animation:idle 5.5s ease-in-out infinite}
.breathe__orb.is-running .breathe__core{animation:none}
.breathe__orb.is-in .breathe__core{transform:scale(1)}
.breathe__orb.is-out .breathe__core{transform:scale(.6)}
@keyframes idle{0%,100%{transform:scale(.78)}50%{transform:scale(.84)}}
.breathe__label,.breathe__count{position:relative;z-index:2;text-align:center}
.breathe__label{font-family:var(--font-serif);font-size:clamp(1.3rem,2.2vw,1.65rem);color:var(--wine-900);line-height:1.2}
.breathe__count{position:absolute;bottom:31%;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--wine)}

/* ---------- Formulario por pasos ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fstep{border:0;padding:0;margin:0;min-width:0;display:grid;gap:1.15rem}
.fstep__title{padding:0;font-family:var(--font-serif);font-size:clamp(1.4rem,2.2vw,1.8rem);color:var(--ink);line-height:1.2;margin-bottom:.3rem}
.fsteps{display:none}
.fnav{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:.4rem}
.fnav__step{display:none}
.form__req{font-size:.78rem;color:var(--muted)}
.btn:hover .ico--back{transform:translateX(-4px)}
.form.is-stepped .fsteps{display:flex;list-style:none;margin-bottom:.8rem}
.fsteps li{display:flex;align-items:center;gap:.6rem;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);transition:color .4s}
.fsteps li:not(:last-child){flex:1}
.fsteps li:not(:last-child)::after{content:"";flex:1;height:1px;margin:0 .8rem;
  background:var(--cream-3);transition:background .6s var(--ease)}
.fsteps li.done::after{background:var(--wine-200)}
.fsteps span{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--nude-soft);font-family:var(--font-serif);font-size:.98rem;letter-spacing:0;
  transition:background .45s var(--ease-out),color .3s,border-color .45s}
.fsteps li.active{color:var(--wine)}
.fsteps li.active span{background:var(--wine);color:var(--cream);border-color:var(--wine)}
.fsteps li.done span{background:var(--nude-soft);border-color:var(--nude-soft);color:var(--wine)}
.form.is-stepped .fstep{display:none}
.form.is-stepped .fstep.active{display:grid;animation:stepIn .6s var(--ease-out)}
.form.is-stepped .fstep.active.back{animation-name:stepBack}
.form.is-stepped .fnav__step{display:inline-flex}
.form.is-stepped .fnav__send{display:none}
.form.is-stepped[data-step="1"] #fPrev{display:none}
.form.is-stepped[data-step="3"] #fNext{display:none}
.form.is-stepped[data-step="3"] .fnav__send{display:inline-flex}
@keyframes stepIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes stepBack{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}

/* ---------- Testimonios editoriales ---------- */
.quote{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(18px,3vw,40px);align-items:start;text-align:left}
.quote::before{position:relative;top:auto;left:auto;transform:none;grid-row:span 2;
  font-size:clamp(5.5rem,9vw,8.5rem);line-height:.78;color:var(--nude-soft)}
.quote p{font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.5;margin:0 0 1.8rem;max-width:none}
.quote__author{display:flex;align-items:center;gap:.95rem;letter-spacing:normal;text-transform:none;color:inherit}
.quote__avatar{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--cream-2);border:1px solid var(--nude-soft);color:var(--wine);
  font-style:normal;font-family:var(--font-serif);font-size:1.02rem;letter-spacing:.06em}
.quote__author b{display:block;font-weight:400;color:var(--ink);font-size:.98rem}
.quote__author small{display:block;margin-top:.1rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wine-400)}

/* ---------- Footer: frase de cierre ---------- */
.footer__quote{position:relative;z-index:2;text-align:center;
  padding-bottom:clamp(38px,5vw,60px);margin-bottom:clamp(38px,5vw,60px);border-bottom:1px solid rgba(233,214,224,.13)}
.footer__quote p{max-width:none;margin:0 auto;font-family:var(--font-serif);font-size:clamp(1.7rem,3.6vw,2.9rem);
  line-height:1.2;color:var(--cream)}
.footer__quote em{color:var(--nude)}
.footer__quote span{display:block;margin-top:1.1rem;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:#b8a2ae}

/* ---------- Transiciones entre páginas (View Transitions, sin JS) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .3s var(--ease) both}
::view-transition-new(root){animation:vtIn .65s var(--ease-out) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(12px)}}

/* ---------- Scroll suave (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

@media (max-width:1024px){
  .breathe__grid{grid-template-columns:1fr;text-align:center}
  .breathe__legend{margin-inline:auto;text-align:left}
  .breathe .eyebrow{justify-content:center}
}
@media (max-width:760px){
  .bg-lines svg{width:78vw;opacity:.55}
  .chip{font-size:.98rem;padding:.7rem 1.1rem}
  .quote{grid-template-columns:1fr}
  .quote::before{grid-row:auto;font-size:4.6rem;margin-bottom:-.4rem}
  .fsteps li:not(.active){font-size:0;gap:0}
  .fsteps li:not(:last-child)::after{margin:0 .5rem}
}
@media (prefers-reduced-motion:reduce){
  .w > span{transform:none!important}
  .ornament path{stroke-dashoffset:0!important}
  .ornament circle{opacity:1!important;transform:none!important}
  .preloader__mark path{stroke-dashoffset:0!important}
  .bg-lines path{animation:none!important}
  .breathe__core{transition:none!important;animation:none!important}
  @view-transition{navigation:none}
}

/* ---------- Respiración: acceso desde todas las páginas ---------- */
.breath-trigger{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1.1rem;border-radius:999px;
  border:1px solid var(--nude-soft);background:rgba(255,255,255,.55);color:var(--wine);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  transition:background .4s var(--ease),border-color .4s,transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.breath-trigger span:last-child{line-height:1}
.breath-trigger:hover{background:var(--white);border-color:var(--wine-200);transform:translateY(-2px);box-shadow:var(--shadow)}
.breath-trigger__dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--nude);animation:breathDot 4.5s ease-in-out infinite}
@keyframes breathDot{0%,100%{transform:scale(.65);box-shadow:0 0 0 0 rgba(201,161,139,.55)}50%{transform:scale(1.15);box-shadow:0 0 0 8px rgba(201,161,139,0)}}
.hero__pause{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.8rem;font-size:.9rem;color:var(--muted);text-align:left;
  transition:color .3s}
.hero__pause u{text-decoration-color:var(--nude);text-underline-offset:4px;transition:text-decoration-color .3s}
.hero__pause:hover{color:var(--wine)}
.hero__pause:hover u{text-decoration-color:var(--wine)}

/* Mensaje final del ejercicio: fuera del círculo, legible sobre el vino */
.breathe__label{max-width:62%}
.breathe__msg{min-height:1.6em;margin:-1rem auto 0;max-width:34ch;text-align:center;font-family:var(--font-serif);
  font-size:clamp(1.1rem,1.8vw,1.3rem);font-style:italic;color:var(--nude-soft)}
.breathe__msg:empty{visibility:hidden}

/* Pantalla completa de respiración */
.bmodal{position:fixed;inset:0;z-index:1900;display:grid;place-items:center;overflow-y:auto;
  background:radial-gradient(circle at 50% 42%,#4b1b33,var(--wine-900) 72%);color:var(--cream);
  clip-path:circle(0px at var(--ox,50%) var(--oy,50%));visibility:hidden;
  transition:clip-path .9s var(--ease-out),visibility 0s linear .9s}
.bmodal.open{clip-path:circle(150vmax at var(--ox,50%) var(--oy,50%));visibility:visible;
  transition:clip-path 1s var(--ease-out),visibility 0s}
.bmodal__inner{display:grid;justify-items:center;gap:clamp(1.2rem,3vh,2.2rem);padding:72px 20px 32px;text-align:center;
  opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .8s var(--ease-out)}
.bmodal.open .bmodal__inner{opacity:1;transform:none;transition-delay:.35s}
.bmodal .eyebrow{color:var(--nude)}
.bmodal .breathe__orb{width:min(72vw,400px,50vh)}
.bmodal__hint{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#b8a2ae}
.bmodal__close{position:absolute;top:22px;right:22px;width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;color:var(--cream);border:1px solid rgba(233,214,224,.25);
  transition:background .3s,transform .4s var(--ease-out)}
.bmodal__close:hover{background:rgba(233,214,224,.1);transform:rotate(90deg)}

@media (min-width:901px) and (max-width:1120px){
  /* con el menú completo no hay espacio para el texto: queda solo el punto que respira */
  .breath-trigger{padding:.8rem}
  .breath-trigger span:last-child{display:none}
}
@media (max-width:900px){
  .breath-trigger{padding:.5rem .85rem;font-size:.64rem}
}
@media (max-width:330px){
  .breath-trigger span:last-child{display:none}
  .breath-trigger{padding:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .breath-trigger__dot{animation:none}
  .bmodal,.bmodal.open{transition:none}
}

/* ---------- Respiración 4-7-8: segundos, anillo de avance, pausa ---------- */
.breathe__sec{position:absolute;top:31%;z-index:2;font-family:var(--font-serif);font-size:clamp(1.9rem,3.2vw,2.6rem);
  line-height:1;color:var(--wine)}
.breathe__sec:empty{display:none}
.breathe__progress{position:absolute;inset:0;z-index:1;width:100%;height:100%;rotate:-90deg;overflow:visible;pointer-events:none}
.breathe__progress circle{fill:none;stroke:var(--nude);stroke-width:.7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.breathe__orb.is-hold .breathe__core{animation:holdGlow 7s ease-in-out}
@keyframes holdGlow{
  0%,100%{box-shadow:0 0 90px -8px rgba(201,161,139,.55),inset 0 -14px 40px rgba(91,29,60,.18)}
  50%{box-shadow:0 0 130px 6px rgba(201,161,139,.7),inset 0 -14px 40px rgba(91,29,60,.12)}}
.breathe__note{font-size:.78rem;color:#b8a2ae;max-width:40ch;margin:0 auto;text-align:center}
.breathe__note--left{margin:1.6rem 0 0;text-align:left}
@media (max-width:1024px){ .breathe__note--left{margin-inline:auto;text-align:center} }
@media (prefers-reduced-motion:reduce){ .breathe__progress circle{transition:none!important} }