/* =========================================================
   Ana González — Psicóloga sanitaria
   Boceto / mockup · HTML + CSS + JS
   Paleta y tipografías según Manual de Marca
   ========================================================= */

/* ---------- Tipografías ---------- */
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Roboto:wght@300;400;500;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Colores de marca */
  --teal:        #008B8D;
  --teal-dark:   #006e70;
  --teal-deep:   #00585a;
  --sage:        #86BFBF;
  --sage-soft:   #b9dada;
  --salmon:      #EACFBD;
  --salmon-soft: #f4e3d7;
  --charcoal:    #2C3333;
  --charcoal-2:  #3d4444;

  /* Neutros cálidos */
  --cream:       #FBF7F3;
  --cream-2:     #F5ECE4;
  --cream-3:     #efe3d8;
  --white:       #ffffff;
  --line:        #e7ddd3;

  /* Texto */
  --text:        #2C3333;
  --text-soft:   #5d6363;
  --text-mut:    #8a8f8f;

  /* Tipografía */
  --serif: 'Alegreya', Georgia, 'Times New Roman', serif;
  --sans:  'Roboto', system-ui, -apple-system, sans-serif;

  /* Medidas */
  --container: 1200px;
  --container-narrow: 880px;
  --radius:    18px;
  --radius-lg: 32px;
  --radius-xl: 48px;

  /* Sombras suaves */
  --shadow-sm: 0 6px 20px rgba(44,51,51,.06);
  --shadow:    0 18px 50px rgba(44,51,51,.10);
  --shadow-lg: 0 30px 70px rgba(44,51,51,.14);

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 84px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-weight:400;
  color:var(--text);
  background:var(--cream);
  line-height:1.7;
  font-size:1.0625rem;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }

/* ---------- Tipografía base ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:700;
  line-height:1.12;
  color:var(--charcoal);
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.5rem, 5.4vw, 4.1rem); }
h2{ font-size:clamp(2rem, 3.8vw, 3rem); }
h3{ font-size:clamp(1.35rem, 2.2vw, 1.7rem); }
h4{ font-size:1.2rem; }
p{ color:var(--text-soft); }
strong{ color:var(--charcoal); font-weight:600; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); }
.narrow{ max-width:var(--container-narrow); }
.section{ padding:clamp(4rem,9vw,7rem) 0; position:relative; }
.section--tight{ padding:clamp(3rem,6vw,4.5rem) 0; }
.bg-cream2{ background:var(--cream-2); }
.bg-white{ background:var(--white); }
.bg-salmon{ background:linear-gradient(160deg,var(--salmon-soft),var(--salmon)); }
.text-center{ text-align:center; }

.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:.82rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--teal);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1rem;
}
.eyebrow::before{
  content:""; width:30px; height:1.5px; background:var(--sage);
}
.eyebrow.center::after{ content:""; width:30px; height:1.5px; background:var(--sage); }
.eyebrow.center{ justify-content:center; }

.section-head{ max-width:680px; margin-bottom:3rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ margin-top:1rem; font-size:1.12rem; }

.lead{ font-size:1.2rem; color:var(--text-soft); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--sans); font-weight:500; font-size:1rem;
  padding:.95rem 1.9rem; border-radius:50px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  will-change:transform; line-height:1; text-align:center;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:var(--teal); color:#fff; box-shadow:0 10px 26px rgba(0,139,141,.30); }
.btn-primary:hover{ background:var(--teal-dark); transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,139,141,.40); }
.btn-secondary{ background:transparent; color:var(--teal); box-shadow:inset 0 0 0 1.6px var(--teal); }
.btn-secondary:hover{ background:var(--teal); color:#fff; transform:translateY(-3px); }
.btn-light{ background:#fff; color:var(--teal); box-shadow:var(--shadow-sm); }
.btn-light:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.btn-ghost-light{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.55); }
.btn-ghost-light:hover{ background:#fff; color:var(--teal); transform:translateY(-3px); }
.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; }
.btn-row.center{ justify-content:center; }

.text-link{ color:var(--teal); font-weight:500; display:inline-flex; align-items:center; gap:.4rem; transition:gap .3s var(--ease); }
.text-link:hover{ gap:.75rem; }
.text-link::after{ content:"→"; transition:transform .3s var(--ease); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), height .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.site-header.scrolled{
  background:rgba(251,247,243,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 6px 24px rgba(44,51,51,.07);
  height:70px;
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:48px; width:auto; transition:height .4s var(--ease); }
.site-header.scrolled .brand img{ height:42px; }
/* logo blanco solo cuando el header es transparente sobre hero oscuro: usamos color por defecto */

.main-nav{ display:flex; align-items:center; gap:.35rem; }
.main-nav > li > a,
.nav-toggle-link{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.6rem .9rem; border-radius:30px;
  font-size:.97rem; font-weight:500; color:var(--charcoal);
  transition:color .25s, background .25s;
  position:relative;
}
.main-nav > li > a:hover,
.nav-toggle-link:hover{ color:var(--teal); }
.main-nav > li > a.active{ color:var(--teal); }
.main-nav > li > a.active::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.35rem; height:2px;
  background:var(--sage); border-radius:2px;
}

/* Dropdown */
.has-dropdown{ position:relative; }
.dropdown-toggle .chev{ width:14px; height:14px; transition:transform .3s var(--ease); }
.has-dropdown:hover .dropdown-toggle .chev{ transform:rotate(180deg); }
.dropdown{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(10px);
  background:#fff; border-radius:18px; padding:.6rem;
  min-width:300px; box-shadow:var(--shadow); border:1px solid var(--line);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown a{
  display:flex; gap:.85rem; align-items:flex-start;
  padding:.7rem .8rem; border-radius:12px; transition:background .2s;
}
.dropdown a:hover{ background:var(--cream-2); }
.dropdown a .d-ico{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:var(--cream-2); display:grid; place-items:center; font-size:1.1rem;
}
.dropdown a strong{ display:block; font-size:.96rem; color:var(--charcoal); font-weight:600; }
.dropdown a span{ display:block; font-size:.82rem; color:var(--text-mut); line-height:1.4; }

.header-cta{ display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.header-cta .btn{ padding:.7rem 1.4rem; font-size:.95rem; }

/* Hamburger */
.hamburger{ display:none; width:46px; height:46px; border-radius:50%; background:var(--cream-2); position:relative; flex-shrink:0; }
.hamburger span{ position:absolute; left:13px; right:13px; height:2px; background:var(--charcoal); border-radius:2px; transition:.3s var(--ease); }
.hamburger span:nth-child(1){ top:17px; }
.hamburger span:nth-child(2){ top:22px; }
.hamburger span:nth-child(3){ top:27px; }
body.nav-open .hamburger span:nth-child(1){ top:22px; transform:rotate(45deg); }
body.nav-open .hamburger span:nth-child(2){ opacity:0; }
body.nav-open .hamburger span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* =========================================================
   HERO (home)
   ========================================================= */
.hero{
  position:relative; padding-top:calc(var(--header-h) + clamp(2rem,5vw,4rem));
  padding-bottom:clamp(3rem,7vw,6rem);
  overflow:hidden;
  background:
    radial-gradient(1100px 600px at 85% -10%, var(--salmon-soft), transparent 60%),
    radial-gradient(900px 500px at -5% 100%, #e6f0ef, transparent 55%),
    var(--cream);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(2rem,5vw,4.5rem); }
.hero-text h1{ margin-bottom:1.4rem; }
.hero-text h1 .accent{ color:var(--teal); font-style:italic; }
.hero-text .lead{ margin-bottom:1.6rem; max-width:34ch; }
.hero-sub{ font-size:1rem; color:var(--text-mut); margin-bottom:2rem; max-width:42ch; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.5rem; }
.hero-badge{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:var(--text-soft); }
.hero-badge svg{ width:20px; height:20px; color:var(--teal); flex-shrink:0; }

.hero-visual{ position:relative; }
.hero-photo{
  position:relative; z-index:2;
  border-radius:46% 46% 46% 46% / 52% 52% 48% 48%;
  overflow:hidden; aspect-ratio:4/4.6;
  box-shadow:var(--shadow-lg);
  animation:morph 14s ease-in-out infinite;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
@keyframes morph{
  0%,100%{ border-radius:46% 46% 46% 46% / 52% 52% 48% 48%; }
  50%{ border-radius:52% 48% 50% 50% / 48% 50% 50% 52%; }
}
.hero-blob{ position:absolute; z-index:1; opacity:.55; }
.hero-blob.b1{ width:280px; top:-40px; right:-50px; }
.hero-blob.b2{ width:230px; bottom:-50px; left:-60px; transform:scaleX(-1); }
.hero-chip{
  position:absolute; z-index:3; background:#fff; border-radius:16px;
  padding:.85rem 1.1rem; box-shadow:var(--shadow); display:flex; align-items:center; gap:.7rem;
}
.hero-chip .ico{ width:40px; height:40px; border-radius:50%; background:var(--cream-2); display:grid; place-items:center; }
.hero-chip strong{ display:block; font-family:var(--serif); font-size:1.05rem; }
.hero-chip span{ font-size:.78rem; color:var(--text-mut); }
.hero-chip.c1{ bottom:42px; left:-30px; animation:float 6s ease-in-out infinite; }
.hero-chip.c2{ top:60px; right:-26px; animation:float 6s ease-in-out infinite .8s; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }

/* Marquee de especialidades */
.trust-band{ background:var(--charcoal); color:#fff; padding:1.1rem 0; overflow:hidden; }
.marquee{ display:flex; gap:3.5rem; white-space:nowrap; width:max-content; animation:scroll-x 32s linear infinite; }
.marquee span{ font-family:var(--serif); font-style:italic; font-size:1.15rem; opacity:.9; display:inline-flex; align-items:center; gap:1.2rem; }
.marquee span::after{ content:"✿"; color:var(--sage); font-style:normal; font-size:.8rem; }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }

/* =========================================================
   SERVICIOS / cards "¿En qué puedo ayudarte?"
   ========================================================= */
.cards-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.card{
  background:#fff; border-radius:var(--radius-lg); padding:2.2rem;
  box-shadow:var(--shadow-sm); border:1px solid rgba(231,221,211,.6);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  position:relative; overflow:hidden; display:flex; flex-direction:column;
}
.card::after{
  content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px;
  background:var(--cream-2); border-radius:50%; transition:transform .5s var(--ease); z-index:0;
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.card:hover::after{ transform:scale(2.4); background:var(--cream); }
.card > *{ position:relative; z-index:1; }
.card-ico{
  width:62px; height:62px; border-radius:20px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--sage-soft),var(--salmon-soft));
  margin-bottom:1.4rem; font-size:1.7rem;
}
.card h3{ margin-bottom:.7rem; }
.card p{ font-size:.97rem; margin-bottom:1.3rem; flex-grow:1; }
.card .text-link{ font-size:.95rem; }
.card--featured{ background:linear-gradient(160deg,var(--teal),var(--teal-deep)); }
.card--featured h3,.card--featured p{ color:#fff; }
.card--featured p{ opacity:.9; }
.card--featured .card-ico{ background:rgba(255,255,255,.16); }
.card--featured .text-link{ color:#fff; }
.card--featured::after{ background:rgba(255,255,255,.08); }
.card--featured:hover::after{ background:rgba(255,255,255,.12); }

/* =========================================================
   SPLIT (texto + imagen) — "Cómo trabajo" / about
   ========================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(2rem,5vw,4.5rem); }
.split.rev .split-media{ order:2; }
.split-media{ position:relative; }
.split-media img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow); object-fit:cover; }
.split-media .deco-dot{ position:absolute; z-index:-1; width:60%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,var(--sage-soft),transparent 70%); opacity:.6; }
.split-media.b-tl .deco-dot{ top:-30px; left:-30px; }
.split-media.b-br .deco-dot{ bottom:-30px; right:-30px; background:radial-gradient(circle,var(--salmon),transparent 70%); }

.check-list{ display:grid; gap:1rem; margin-top:1.6rem; }
.check-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.check-list li .ck{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--sage-soft);
  display:grid; place-items:center; margin-top:2px;
}
.check-list li .ck svg{ width:14px; height:14px; color:var(--teal-dark); }
.check-list li span{ color:var(--text-soft); }
.check-list li strong{ color:var(--charcoal); }

/* =========================================================
   Claim / cita destacada
   ========================================================= */
.quote-band{ background:var(--cream-2); position:relative; overflow:hidden; }
.quote-band .container{ position:relative; z-index:1; }
.quote-band blockquote{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.32; color:var(--charcoal);
  max-width:900px; margin:0 auto; text-align:center;
}
.quote-band .q-mark{ font-size:5rem; color:var(--sage); line-height:.4; font-family:var(--serif); display:block; margin-bottom:.5rem; }
.quote-band cite{ display:block; margin-top:1.6rem; font-style:normal; font-family:var(--sans);
  font-size:.95rem; letter-spacing:.05em; color:var(--teal); font-weight:500; }
.quote-deco{ position:absolute; opacity:.4; width:340px; }
.quote-deco.qd1{ top:-80px; left:-90px; }
.quote-deco.qd2{ bottom:-90px; right:-90px; transform:rotate(180deg); }

/* =========================================================
   Pasos / proceso
   ========================================================= */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; counter-reset:step; }
.step{ position:relative; padding:2rem 1.6rem; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--serif); font-size:2.4rem; font-weight:700; color:var(--sage);
  display:block; margin-bottom:.6rem;
}
.step h4{ margin-bottom:.5rem; color:var(--charcoal); }
.step p{ font-size:.95rem; }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{
  background:linear-gradient(155deg,var(--teal),var(--teal-deep));
  color:#fff; border-radius:var(--radius-xl); padding:clamp(2.6rem,5vw,4.2rem);
  text-align:center; position:relative; overflow:hidden;
}
.cta-band h2{ color:#fff; max-width:18ch; margin:0 auto 1rem; }
.cta-band p{ color:rgba(255,255,255,.88); max-width:48ch; margin:0 auto 2rem; }
.cta-band .deco{ position:absolute; opacity:.16; width:360px; }
.cta-band .deco.d1{ top:-120px; left:-80px; }
.cta-band .deco.d2{ bottom:-130px; right:-80px; transform:rotate(180deg); }

/* =========================================================
   Inner page hero
   ========================================================= */
.page-hero{
  position:relative; overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(2.5rem,5vw,4rem));
  padding-bottom:clamp(2.5rem,5vw,4rem);
  background:
    radial-gradient(800px 420px at 90% -20%, var(--salmon-soft), transparent 60%),
    var(--cream);
}
.page-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.breadcrumb{ font-size:.85rem; color:var(--text-mut); margin-bottom:1.2rem; display:flex; gap:.5rem; align-items:center; }
.breadcrumb a:hover{ color:var(--teal); }
.breadcrumb span{ color:var(--sage); }
.page-hero h1{ margin-bottom:1.2rem; }
.page-hero .lead{ max-width:46ch; }
.page-hero-media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow); width:100%; aspect-ratio:4/3.4; object-fit:cover; object-position:center 25%; }
.page-hero--center{ text-align:center; }
.page-hero--center .breadcrumb{ justify-content:center; }
.page-hero--center .lead{ margin:0 auto; }

/* =========================================================
   "Preguntas internas" — empatía
   ========================================================= */
.q-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; }
.q-card{
  background:#fff; border-radius:var(--radius); padding:1.5rem 1.6rem;
  border-left:3px solid var(--sage); box-shadow:var(--shadow-sm);
  font-family:var(--serif); font-style:italic; font-size:1.12rem; color:var(--charcoal-2);
  transition:transform .4s var(--ease), border-color .4s;
}
.q-card:hover{ transform:translateY(-5px); border-color:var(--teal); }

/* =========================================================
   "Problemas que se trabajan" — chips
   ========================================================= */
.chips{ display:flex; flex-wrap:wrap; gap:.7rem; }
.chip{
  background:#fff; border:1px solid var(--line); border-radius:50px;
  padding:.6rem 1.2rem; font-size:.92rem; color:var(--text-soft);
  display:inline-flex; align-items:center; gap:.5rem; transition:.3s var(--ease);
}
.chip::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--sage); }
.chip:hover{ background:var(--teal); color:#fff; border-color:var(--teal); transform:translateY(-2px); }
.chip:hover::before{ background:#fff; }

/* dos columnas de texto en "cómo ayuda" */
.help-list{ columns:2; column-gap:3rem; }
.help-list li{ break-inside:avoid; display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.9rem; }
.help-list li .ck{ flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--salmon); display:grid; place-items:center; margin-top:3px; }
.help-list li .ck svg{ width:12px; height:12px; color:var(--charcoal); }

/* highlight box "enfoque diferencial" */
.highlight{
  background:linear-gradient(150deg,#fff,var(--cream-2));
  border-radius:var(--radius-lg); padding:clamp(1.8rem,4vw,2.8rem);
  box-shadow:var(--shadow-sm); border:1px solid var(--line); position:relative;
}
.highlight .tag{ display:inline-block; font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--teal); font-weight:600; margin-bottom:.8rem; }
.highlight p{ font-size:1.1rem; color:var(--text); }

/* sub-temas (subpáginas SEO) */
.subtopics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.subtopic{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.4rem;
  transition:.3s var(--ease); }
.subtopic:hover{ border-color:var(--teal); transform:translateX(5px); box-shadow:var(--shadow-sm); }
.subtopic span{ font-weight:500; color:var(--charcoal); }
.subtopic .arr{ color:var(--teal); transition:transform .3s var(--ease); }
.subtopic:hover .arr{ transform:translateX(4px); }

/* =========================================================
   Sobre mí
   ========================================================= */
.creds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; }
.cred{ background:#fff; border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); text-align:center; }
.cred .num{ font-family:var(--serif); font-size:2.6rem; font-weight:700; color:var(--teal); line-height:1; }
.cred p{ font-size:.92rem; margin-top:.5rem; }
.formacion{ display:grid; gap:1rem; }
.formacion li{ display:flex; gap:1rem; padding:1.2rem 1.4rem; background:#fff; border-radius:14px; box-shadow:var(--shadow-sm); }
.formacion li .yr{ font-family:var(--serif); font-weight:700; color:var(--sage); flex-shrink:0; min-width:60px; }
.formacion li strong{ display:block; color:var(--charcoal); }
.formacion li span{ font-size:.9rem; color:var(--text-mut); }

/* =========================================================
   Contacto
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.info-list{ display:grid; gap:1.2rem; margin-top:1.5rem; }
.info-item{ display:flex; gap:1rem; align-items:flex-start; }
.info-item .ico{ width:48px; height:48px; border-radius:14px; background:var(--cream-2); display:grid; place-items:center; flex-shrink:0; }
.info-item .ico svg{ width:22px; height:22px; color:var(--teal); }
.info-item strong{ display:block; color:var(--charcoal); }
.info-item span,.info-item a{ font-size:.95rem; color:var(--text-soft); }
.info-item a:hover{ color:var(--teal); }

.price-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem; }
.price-card{ background:#fff; border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); border:1px solid var(--line); text-align:center; }
.price-card .p{ font-family:var(--serif); font-size:2.4rem; font-weight:700; color:var(--teal); }
.price-card .p small{ font-size:1rem; color:var(--text-mut); font-weight:400; }
.price-card h4{ margin-bottom:.4rem; }
.price-card span{ font-size:.85rem; color:var(--text-mut); }

.form-card{ background:#fff; border-radius:var(--radius-lg); padding:clamp(1.8rem,4vw,2.6rem); box-shadow:var(--shadow); border:1px solid var(--line); }
.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-size:.9rem; font-weight:500; color:var(--charcoal); margin-bottom:.45rem; }
.field input,.field textarea,.field select{
  width:100%; padding:.85rem 1.1rem; border:1.5px solid var(--line); border-radius:12px;
  font-family:var(--sans); font-size:1rem; color:var(--text); background:var(--cream);
  transition:border-color .25s, box-shadow .25s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,139,141,.10); background:#fff;
}
.field textarea{ resize:vertical; min-height:130px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-note{ font-size:.82rem; color:var(--text-mut); margin-top:1rem; text-align:center; }
.form-msg{ display:none; background:var(--sage-soft); color:var(--teal-deep); padding:1rem 1.2rem; border-radius:12px; margin-bottom:1.2rem; font-size:.95rem; }
.form-msg.show{ display:block; }

/* =========================================================
   FAQ accordion
   ========================================================= */
.faq{ max-width:780px; margin:0 auto; display:grid; gap:.8rem; }
.faq-item{ background:#fff; border-radius:16px; box-shadow:var(--shadow-sm); border:1px solid var(--line); overflow:hidden; }
.faq-q{ width:100%; text-align:left; padding:1.3rem 1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--charcoal); }
.faq-q .pm{ flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--cream-2); position:relative; transition:background .3s; }
.faq-q .pm::before,.faq-q .pm::after{ content:""; position:absolute; background:var(--teal); border-radius:2px; left:50%; top:50%; transition:.3s var(--ease); }
.faq-q .pm::before{ width:12px; height:2px; transform:translate(-50%,-50%); }
.faq-q .pm::after{ width:2px; height:12px; transform:translate(-50%,-50%); }
.faq-item.open .faq-q .pm{ background:var(--teal); }
.faq-item.open .faq-q .pm::before,.faq-item.open .faq-q .pm::after{ background:#fff; }
.faq-item.open .faq-q .pm::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a-inner{ padding:0 1.5rem 1.4rem; color:var(--text-soft); font-size:.98rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--charcoal); color:#cfd4d4; padding:clamp(3rem,6vw,4.5rem) 0 2rem; position:relative; overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; margin-bottom:3rem; }
.footer-brand img{ height:64px; margin-bottom:1.2rem; }
.footer-brand p{ color:#9aa0a0; font-size:.92rem; max-width:32ch; }
.footer-col h5{ font-family:var(--sans); font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; color:var(--sage); margin-bottom:1.1rem; }
.footer-col ul{ display:grid; gap:.65rem; }
.footer-col a{ color:#b6bcbc; font-size:.94rem; transition:color .25s, padding .25s; }
.footer-col a:hover{ color:#fff; padding-left:4px; }
.footer-social{ display:flex; gap:.7rem; margin-top:1.3rem; }
.footer-social a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:.3s var(--ease); }
.footer-social a:hover{ background:var(--teal); transform:translateY(-3px); }
.footer-social svg{ width:18px; height:18px; color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.85rem; color:#8a9090; }
.footer-bottom a:hover{ color:#fff; }
.footer-deco{ position:absolute; bottom:-120px; right:-60px; width:380px; opacity:.06; }

/* =========================================================
   Animaciones scroll-reveal
   ========================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
.reveal-left{ opacity:0; transform:translateX(-34px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-left.in{ opacity:1; transform:none; }
.reveal-right{ opacity:0; transform:translateX(34px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-right.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal,.reveal-left,.reveal-right{ opacity:1; transform:none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ max-width:460px; margin:0 auto; order:-1; }
  .hero-text .lead{ max-width:none; }
  .split{ grid-template-columns:1fr; }
  .split.rev .split-media{ order:-1; }
  .page-hero-grid{ grid-template-columns:1fr; }
  .page-hero-media{ order:-1; max-width:520px; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
  .help-list{ columns:1; }
}
@media (max-width:760px){
  .header-cta .btn-text{ display:none; }
  .main-nav, .header-cta .btn-secondary{ display:none; }
  .hamburger{ display:block; }

  /* Menú móvil */
  .mobile-nav{
    position:fixed; inset:0; z-index:99; background:var(--cream);
    padding:calc(var(--header-h) + 1rem) clamp(1.5rem,6vw,2.5rem) 2rem;
    transform:translateX(100%); transition:transform .45s var(--ease);
    display:flex; flex-direction:column; overflow-y:auto;
  }
  body.nav-open .mobile-nav{ transform:none; }
  .mobile-nav a{ font-family:var(--serif); font-size:1.5rem; padding:.85rem 0; border-bottom:1px solid var(--line); color:var(--charcoal); display:block; }
  .mobile-nav a.sub{ font-family:var(--sans); font-size:1.05rem; padding-left:1rem; color:var(--text-soft); }
  .mobile-nav .m-label{ font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; color:var(--teal); margin-top:1.4rem; }
  .mobile-nav .btn{ margin-top:1.8rem; }
  .field-row{ grid-template-columns:1fr; }
  .price-cards{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
  .quote-band blockquote{ font-size:1.5rem; }
}
@media (min-width:761px){ .mobile-nav{ display:none; } }

.fade-page{ animation:fadeIn .6s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }


/* =========================================================
   Mobile fixes y breakpoints adicionales
   ========================================================= */

/* ---- 760px: correcciones específicas para móvil ---- */
@media (max-width:760px){
  /* Ocultar chips flotantes del hero (desbordaban el viewport) */
  .hero-chip{ display:none; }
  /* Contener blobs dentro del visual */
  .hero-visual{ overflow:hidden; }
  .hero-blob.b1{ width:160px; right:0; top:-10px; }
  .hero-blob.b2{ width:140px; bottom:-10px; left:0; }
  /* Foto menos alta en móvil */
  .hero-photo{ aspect-ratio:4/3.6; }
  /* 2 columnas de cards en tablet/móvil grande */
  .cards-grid{ grid-template-columns:1fr 1fr; }
  /* Radio reducido en CTA band */
  .cta-band{ border-radius:var(--radius-lg); }
  /* Asegurar padding lateral en sección de pasos */
  .steps{ gap:1rem; }
  /* Header: botón CTA más pequeño */
  .header-cta .btn{ padding:.65rem 1.1rem; font-size:.9rem; }
}

/* ---- 480px: teléfonos pequeños ---- */
@media (max-width:480px){
  /* Tipografía */
  h1{ font-size:clamp(2rem, 8vw, 2.5rem); }
  h2{ font-size:clamp(1.65rem, 6.5vw, 2rem); }

  /* Botones en columna */
  .btn-row{ flex-direction:column; align-items:stretch; }
  .btn-row .btn{ width:100%; justify-content:center; }
  .btn-row.center{ align-items:center; }
  .btn-row.center .btn{ max-width:290px; }

  /* Hero */
  .hero-badges{ flex-direction:column; gap:.75rem; }
  .hero-visual{ max-width:100%; }
  .hero-photo{ aspect-ratio:4/3.2; }
  .hero-sub{ font-size:.95rem; }

  /* Grids: 1 columna en móvil pequeño */
  .cards-grid{ grid-template-columns:1fr; }
  .q-cards{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .subtopics{ grid-template-columns:1fr; }
  .creds{ grid-template-columns:1fr 1fr; }
  .price-cards{ grid-template-columns:1fr; }

  /* CTA band compacto */
  .cta-band{ border-radius:var(--radius); padding:2rem 1.4rem; }
  .cta-band .deco{ display:none; }
  .cta-band h2{ font-size:1.6rem; }

  /* Cita */
  .quote-band blockquote{ font-size:1.2rem; }
  .quote-band .q-mark{ font-size:3.5rem; }

  /* Sección head */
  .section-head{ margin-bottom:1.8rem; }
  .section-head p{ font-size:1rem; }

  /* Formulario */
  .form-card{ padding:1.5rem 1.2rem; }

  /* Chips de servicios */
  .chip{ font-size:.88rem; padding:.5rem 1rem; }

  /* Footer */
  .footer-brand img{ height:52px; }
  .footer-bottom{ font-size:.82rem; }

  /* Check list en páginas interiores */
  .check-list{ gap:.8rem; }

  /* Formacion */
  .formacion li{ flex-direction:column; gap:.3rem; }
  .formacion li .yr{ min-width:auto; }

  /* Subtopic sin hover transform lateral en touch */
  .subtopic:hover{ transform:none; }
}


/* =========================================================
   Offcanvas nav + chips ocultos (override v2)
   ========================================================= */

/* Chips: ocultos desde tablet (hero en 1 col desde 980px) */
@media (max-width:980px){
  .hero-chip{ display:none !important; }
  .hero-visual{ overflow:hidden; }
}

/* Overlay del offcanvas (siempre en DOM, visible solo en mobile) */
.nav-overlay{
  position:fixed; inset:0; z-index:198;
  background:rgba(44,51,51,.48);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .38s cubic-bezier(.22,.61,.36,1), visibility .38s;
}
body.nav-open .nav-overlay{ opacity:1; visibility:visible; pointer-events:auto; }
@media (min-width:761px){ .nav-overlay{ display:none !important; } }

/* Panel offcanvas lateral */
@media (max-width:760px){
  /* Override del inset:0 del bloque original: panel lateral derecho */
  .mobile-nav{
    inset:0 0 0 auto;
    width:min(84vw, 310px);
    padding:0 0 2.5rem;
    z-index:200;
    transform:translateX(105%);
    border-left:1px solid var(--line);
    box-shadow:-14px 0 60px rgba(44,51,51,.2);
  }
  body.nav-open .mobile-nav{ transform:translateX(0) !important; }

  /* Cabecera interna del panel */
  .nav-panel-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:1.1rem 1.5rem;
    border-bottom:1px solid var(--line);
    flex-shrink:0; margin-bottom:.4rem;
  }
  .nav-panel-header img{ height:36px; width:auto; }

  /* Boton X cerrar */
  .nav-close-btn{
    width:40px; height:40px; border-radius:50%;
    background:var(--cream-2); border:none; cursor:pointer;
    display:grid; place-items:center; flex-shrink:0;
    transition:background .25s, transform .3s;
  }
  .nav-close-btn:hover{ background:var(--line); transform:rotate(90deg); }
  .nav-close-btn svg{ width:18px; height:18px; color:var(--charcoal); pointer-events:none; }

  /* Links con padding lateral */
  .mobile-nav > a{
    padding-left:1.5rem; padding-right:1.5rem;
    font-size:1.28rem;
  }
  .mobile-nav > a.sub{ padding-left:2.4rem; }
  .mobile-nav .m-label{
    padding-left:1.5rem; padding-right:1.5rem;
    margin-top:1rem;
  }
  /* Boton CTA al fondo del panel */
  .mobile-nav > .btn{
    margin:auto 1.5rem 0;
    width:calc(100% - 3rem);
    justify-content:center;
  }
}


/* =========================================================
   Header móvil — fix v3 (logo, botón, overflow)
   ========================================================= */
@media (max-width:760px){
  /* Header más compacto */
  .site-header{ height:64px; }
  .site-header.scrolled{ height:58px; }

  /* Quitar el botón 'Reservar cita' del header en móvil */
  .header-cta .btn-primary{ display:none !important; }

  /* Logo más pequeño para que no domine */
  .brand img{ height:36px !important; }
  .site-header.scrolled .brand img{ height:32px !important; }

  /* El header-cta solo contiene la hamburguesa */
  .header-cta{ gap:0; }

  /* Hamburguesa un poco más pequeña */
  .hamburger{ width:42px; height:42px; }

  /* Evitar cualquier desbordamiento lateral */
  .site-header .container{ gap:1rem; }

  /* Ajustar altura de referencia para el hero (usaba --header-h:84px) */
  .hero{ padding-top:calc(64px + clamp(1.5rem,5vw,3rem)); }
  .page-hero{ padding-top:calc(64px + clamp(2rem,5vw,3rem)); }
  .mobile-nav .nav-panel-header{ padding-top:1rem; }
}


/* =========================================================
   Header + offcanvas — fix DEFINITIVO v4
   ========================================================= */
@media (max-width:760px){

  /* ---------- HEADER ---------- */
  /* Fondo sólido siempre (no transparente) para que se lea limpio */
  .site-header{
    height:62px;
    background:rgba(251,247,243,.95);
    backdrop-filter:blur(10px);
    box-shadow:0 1px 0 var(--line);
  }
  .site-header.scrolled{ height:58px; box-shadow:0 6px 20px rgba(44,51,51,.08); }

  .site-header .container{
    padding-left:1.1rem; padding-right:1.1rem; gap:.75rem;
  }

  /* Logo: limitar por ancho (es horizontal y muy largo) */
  .brand{ min-width:0; overflow:hidden; }
  .brand img{
    height:auto !important;
    width:auto;
    max-height:30px;
    max-width:185px;
  }
  .site-header.scrolled .brand img{ max-height:28px !important; }

  /* Botón del header fuera */
  .header-cta .btn-primary{ display:none !important; }
  .header-cta{ gap:0; }
  .hamburger{ width:42px; height:42px; }

  /* Reajustar el hero al nuevo alto del header */
  .hero{ padding-top:calc(62px + clamp(1.5rem,5vw,2.5rem)); }
  .page-hero{ padding-top:calc(62px + clamp(1.5rem,5vw,2.5rem)); }

  /* ---------- BOTÓN CTA DEL OFFCANVAS ---------- */
  /* Reset total: el <a class='btn'> heredaba estilo de link de menú */
  .mobile-nav a.btn,
  .mobile-nav a.btn.btn-primary{
    display:flex !important;
    align-items:center; justify-content:center;
    box-sizing:border-box;
    width:calc(100% - 3rem) !important;
    margin:auto 1.5rem 0 !important;
    padding:1rem 1.25rem !important;
    border:none !important;
    border-bottom:none !important;
    border-radius:50px !important;
    background:var(--teal) !important;
    color:#fff !important;
    font-family:var(--sans) !important;
    font-size:1rem !important;
    font-weight:500 !important;
    box-shadow:0 10px 24px rgba(0,139,141,.28);
  }
  /* Separación del bloque de links de arriba */
  .mobile-nav a.btn{ margin-top:2rem !important; }
}


/* =========================================================
   FIX v5 — restaurar logo (el SVG solo tiene viewBox y
   colapsaba a 0x0 con height:auto). Altura explícita.
   ========================================================= */
@media (max-width:760px){
  .brand img{
    height:32px !important;
    width:auto !important;
    max-height:32px !important;
    max-width:200px !important;
  }
  .site-header.scrolled .brand img{ height:28px !important; max-height:28px !important; }
}


/* =========================================================
   FIX v6 — botón offcanvas: quitar margin-top:auto que lo
   empujaba fuera del viewport. Margen fijo + panel scrollable.
   ========================================================= */
@media (max-width:760px){
  .mobile-nav{ overflow-y:auto !important; }
  .mobile-nav a.btn.btn-primary{
    margin:1.6rem 1.5rem .5rem !important;
  }
}


/* =========================================================
   FIX v7 — header en móvil pintaba mal al cargar y se
   corregía al hacer scroll. Causa: backdrop-filter sobre
   position:fixed (bug de repintado en navegadores móviles).
   Solución: fondo 100% opaco, sin blur, capa propia.
   ========================================================= */
@media (max-width:760px){
  .site-header,
  .site-header.scrolled{
    background:#fbf7f3 !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    will-change:auto;
  }
}


/* =========================================================
   FIX v8 — CAUSA REAL del header mal al cargar:
   .fade-page anima la opacidad de TODO el <body> (fadeIn .6s).
   El header (hijo del body) se ve semitransparente durante la
   animación y solo se 'acomoda' al terminar. Se desactiva el
   fade global de página (el header fixed no puede excluirse
   de la opacidad de un ancestro).
   ========================================================= */
body.fade-page{
  animation:none !important;
  opacity:1 !important;
}


/* =========================================================
   FIX v9 — Quitar animaciones de entrada en móvil.
   Las animaciones del home (reveal, morph, marquee, fade)
   forzaban repintados que dejaban el header mal hasta que
   terminaban. En móvil el contenido aparece ya colocado.
   ========================================================= */
@media (max-width:760px){
  /* Contenido visible al instante, sin transición de entrada */
  .reveal,
  .reveal-left,
  .reveal-right{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  /* Detener animaciones de keyframes (entrada y decorativas) */
  .fade-page,
  .hero,
  .hero *,
  .hero-photo,
  .hero-chip,
  .hero-blob,
  .marquee{
    animation:none !important;
  }
  /* La foto del hero conserva su forma final sin morphing */
  .hero-photo{ border-radius:46% 46% 46% 46% / 52% 52% 48% 48%; }
}


/* =========================================================
   FIX v10 — Header 100% estático en móvil: misma altura
   en reposo y al hacer scroll, y SIN transición, para que
   no haya ningún 'acomodo' visible al cargar.
   ========================================================= */
@media (max-width:760px){
  .site-header,
  .site-header.scrolled{
    height:60px !important;
    transition:none !important;
    background:#fbf7f3 !important;
    box-shadow:0 1px 0 var(--line) !important;
  }
  .brand img,
  .site-header.scrolled .brand img{
    height:30px !important;
    max-height:30px !important;
    transition:none !important;
  }
}