/* =====================================================================
   INTEGRANDO SENTIDOS — Sistema visual compartido
   Paleta pastel del logo · tipografía redondeada · cálido y profesional
   ===================================================================== */

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

/* ---------- Tokens ---------- */
:root{
  /* Neutros cálidos */
  --cream:        #faf7f1;
  --cream-2:      #f3eee5;
  --paper:        #ffffff;
  --ink:          #4c4842;
  --ink-soft:     #7c766c;
  --ink-faint:    #a9a299;
  --line:         #ece6da;
  --line-strong:  #ddd5c7;

  /* Pasteles del logo (oklch, chroma/lightness armónicos) */
  --c-yellow: oklch(0.90 0.095 95);
  --c-coral:  oklch(0.83 0.090 48);
  --c-pink:   oklch(0.83 0.085 5);
  --c-purple: oklch(0.80 0.080 305);
  --c-blue:   oklch(0.82 0.075 255);
  --c-cyan:   oklch(0.87 0.065 215);
  --c-green:  oklch(0.88 0.075 150);

  /* Tintes suaves para fondos */
  --t-yellow: oklch(0.965 0.030 95);
  --t-coral:  oklch(0.962 0.028 48);
  --t-pink:   oklch(0.962 0.026 5);
  --t-purple: oklch(0.962 0.026 305);
  --t-blue:   oklch(0.963 0.024 255);
  --t-cyan:   oklch(0.967 0.022 215);
  --t-green:  oklch(0.968 0.026 150);

  /* Texto sobre pastel (versión saturada/oscura del mismo tono) */
  --d-coral:  oklch(0.52 0.11 45);
  --d-purple: oklch(0.50 0.11 305);
  --d-blue:   oklch(0.50 0.10 255);
  --d-cyan:   oklch(0.48 0.08 215);
  --d-green:  oklch(0.48 0.09 150);
  --d-pink:   oklch(0.52 0.11 5);

  /* Acento de marca por defecto */
  --brand:    var(--c-purple);
  --brand-d:  var(--d-purple);

  --radius:   22px;
  --radius-lg:32px;
  --radius-sm:14px;
  --shadow:   0 18px 48px -28px rgba(76,72,66,.34);
  --shadow-sm:0 8px 22px -16px rgba(76,72,66,.32);
  --shadow-lg:0 34px 80px -40px rgba(76,72,66,.42);

  --maxw: 1180px;
  --gut:  clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
/* Tamaño por defecto seguro para íconos SVG (las reglas de componente lo sobreescriben) */
svg{ width:1.2em; height:1.2em; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:'Quicksand',sans-serif; color:var(--ink); line-height:1.12; margin:0; font-weight:600; letter-spacing:-.01em; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
:focus-visible{ outline:3px solid var(--c-purple); outline-offset:3px; border-radius:6px; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(56px,9vw,108px); position:relative; }
.section--tint{ background:var(--cream-2); }
.center{ text-align:center; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--ink-soft); max-width:62ch; }
.center .lead{ margin-inline:auto; }

/* ---------- Eyebrow + título de sección ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:'Quicksand',sans-serif; font-weight:600;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-d);
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:currentColor; opacity:.5;
}
.eyebrow svg{ width:1.2em; height:1.2em; flex:none; }
.center .eyebrow::after{
  content:""; width:26px; height:2px; border-radius:2px;
  background:currentColor; opacity:.5;
}
.s-title{ font-size:clamp(1.9rem,4vw,3rem); margin:.5em 0 .35em; }
.s-head{ max-width:60ch; }
.center .s-head{ margin-inline:auto; }

/* ---------- Botones ---------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 1.6em; border-radius:999px; border:1.5px solid transparent;
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:1rem;
  background:var(--bg); color:var(--fg); white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  box-shadow:var(--shadow-sm);
}
.btn svg{ width:1.2em; height:1.2em; flex:none; }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0); }
.btn--brand{ --bg:var(--brand-d); --fg:#fff; }
.btn--cream{ --bg:#fff; --fg:var(--ink); border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line-strong); box-shadow:none; }
.btn--ghost:hover{ background:#fff; }
.btn--block{ width:100%; }
.btn--lg{ padding:1.05em 1.9em; font-size:1.08rem; }
.btn .ico{ width:1.15em; height:1.15em; }

/* ---------- Pills / badges ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.4em .9em; border-radius:999px;
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:.85rem;
  background:#fff; border:1.5px solid var(--line); color:var(--ink-soft);
}
.dot{ width:.62em; height:.62em; border-radius:50%; flex:none; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.site-header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 10px 30px -26px rgba(76,72,66,.5); }
.nav{ display:flex; align-items:center; gap:1.4rem; min-height:78px; }
.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand img{ width:46px; height:46px; border-radius:50%; }
.brand b{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:1.12rem; letter-spacing:.01em; color:var(--ink); line-height:1; }
.brand .sub{ display:block; font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.nav-links{ display:flex; align-items:center; gap:.35rem; }
.nav-links a{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:.97rem;
  padding:.5em .85em; border-radius:999px; color:var(--ink-soft);
  transition:color .2s, background .2s;
}
.nav-links a:hover{ color:var(--ink); background:#fff; }
.nav-links a.active{ color:var(--brand-d); background:#fff; box-shadow:var(--shadow-sm); }
.nav-cta{ display:flex; align-items:center; gap:.6rem; }
.nav-access{ font-family:'Quicksand',sans-serif; font-weight:600; font-size:.95rem; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.4em; white-space:nowrap; }
.nav-access svg{ width:1.05em; height:1.05em; flex:none; }
.nav-access:hover{ color:var(--ink); }
.burger{ display:none; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line-strong); background:#fff; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.burger span{ width:19px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }
body.menu-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:940px){
  .burger{ display:flex; }
  .nav-links{
    position:fixed; inset:78px 0 auto 0; flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--cream); padding:1.1rem var(--gut) 1.6rem; border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.28s var(--ease);
    box-shadow:var(--shadow);
  }
  body.menu-open .nav-links{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ padding:.7em .9em; font-size:1.05rem; }
  .nav-access{ display:none; }
}

/* ---------- Logo brain-dots motif ---------- */
.dots-row{ display:flex; gap:7px; justify-content:center; }
.dots-row i{ width:11px; height:11px; border-radius:50%; display:block; }

/* ---------- Decoración: blobs ---------- */
.blob{ position:absolute; border-radius:50%; filter:blur(46px); opacity:.5; pointer-events:none; z-index:0; }
.section > .wrap{ position:relative; z-index:1; }
/* Fundido inferior: evita que las manchas pastel se corten al pasar de sección */
.hero::after, .page-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:240px;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--cream) 55%, transparent) 55%, var(--cream));
  pointer-events:none;
}

/* ===================================================================
   HERO
   =================================================================== */
.hero{ position:relative; overflow:hidden; padding-block:clamp(48px,7vw,86px) clamp(56px,8vw,96px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero h1{ font-size:clamp(2.4rem,5.4vw,4rem); font-weight:700; letter-spacing:-.02em; }
.hero h1 em{ font-style:normal; color:var(--brand-d); }
.hero .lead{ margin-top:1.2rem; font-size:clamp(1.1rem,1.8vw,1.35rem); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:1.4rem 2rem; margin-top:2.4rem; }
.hero-meta div{ display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--ink-soft); font-size:.95rem; }
.hero-meta .ico{ width:1.4em; height:1.4em; color:var(--brand-d); flex:none; }
.hero-meta div > svg{ width:1.4em; height:1.4em; color:var(--brand-d); flex:none; }

/* Collage del hero */
.hero-art{ position:relative; aspect-ratio:1/1; }
.hero-art .ph{ position:absolute; border-radius:28px; overflow:hidden; box-shadow:var(--shadow-lg); background:var(--cream-2); }
.hero-art img{ width:100%; height:100%; object-fit:cover; }
.hero-art .ph1{ inset:0 26% 30% 0; z-index:2; }
.hero-art .ph2{ width:46%; aspect-ratio:3/4; right:0; top:8%; z-index:3; border:6px solid var(--cream); }
.hero-art .ph3{ width:40%; aspect-ratio:4/3; right:6%; bottom:0; z-index:4; border:6px solid var(--cream); }
.hero-badge{
  position:absolute; left:-2%; bottom:8%; z-index:5;
  background:#fff; border-radius:18px; padding:.9rem 1.1rem; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:.8rem; max-width:230px;
}
.hero-badge .em{ font-family:'Quicksand'; font-weight:700; font-size:1.5rem; color:var(--brand-d); line-height:1; }
.hero-badge small{ color:var(--ink-soft); font-size:.82rem; font-weight:600; line-height:1.25; }

@media (max-width:880px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ max-width:520px; margin-inline:auto; width:100%; }
}

/* ===================================================================
   CARDS
   =================================================================== */
.grid{ display:grid; gap:clamp(18px,2.4vw,28px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; } }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card h3{ font-size:1.28rem; margin-bottom:.45rem; }
.card p{ color:var(--ink-soft); font-size:.98rem; }

/* Tarjeta de servicio con color */
.svc{ --col:var(--c-purple); --tint:var(--t-purple); --deep:var(--d-purple); }
.svc:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.svc .ic{
  width:58px; height:58px; border-radius:18px; display:grid; place-items:center;
  background:var(--tint); color:var(--deep); margin-bottom:1.1rem;
}
.svc .ic svg{ width:30px; height:30px; }
.svc .tag{ color:var(--deep); font-weight:700; font-family:'Quicksand'; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.svc::after{ content:""; position:absolute; left:0; top:0; width:100%; height:5px; background:var(--col); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.svc:hover::after{ transform:scaleX(1); }

/* Feature simple con punto */
.feat{ display:flex; gap:1rem; }
.feat .ic{ width:46px; height:46px; border-radius:14px; flex:none; display:grid; place-items:center; background:var(--tint,var(--t-purple)); color:var(--deep,var(--d-purple)); }
.feat .ic svg{ width:24px; height:24px; }
.feat h3{ font-size:1.12rem; margin-bottom:.25rem; }
.feat p{ color:var(--ink-soft); font-size:.95rem; }

/* ===================================================================
   GALERÍA
   =================================================================== */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; grid-auto-rows:170px; }
.gallery figure{ margin:0; border-radius:20px; overflow:hidden; position:relative; box-shadow:var(--shadow-sm); }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery figure:hover img{ transform:scale(1.06); }
.gallery figcaption{
  position:absolute; left:14px; bottom:12px; z-index:2;
  background:color-mix(in srgb,#fff 88%, transparent); backdrop-filter:blur(6px);
  padding:.32em .8em; border-radius:999px; font-family:'Quicksand'; font-weight:600; font-size:.82rem; color:var(--ink);
}
.g-a{ grid-column:span 5; grid-row:span 2; }
.g-b{ grid-column:span 4; grid-row:span 1; }
.g-c{ grid-column:span 3; grid-row:span 1; }
.g-d{ grid-column:span 4; grid-row:span 2; }
.g-e{ grid-column:span 4; grid-row:span 1; }
.g-f{ grid-column:span 4; grid-row:span 1; }
@media (max-width:760px){
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .gallery figure{ grid-column:span 1 !important; grid-row:span 1 !important; }
  .g-a{ grid-column:span 2 !important; }
}

/* ===================================================================
   FAJA DE COLORES (cerebro) + estadísticas
   =================================================================== */
.brain-strip{ height:8px; display:flex; }
.brain-strip i{ flex:1; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,40px); }
.stat .n{ font-family:'Quicksand'; font-weight:700; font-size:clamp(2.2rem,5vw,3.2rem); color:var(--brand-d); line-height:1; letter-spacing:-.02em; }
.stat p{ color:var(--ink-soft); font-weight:600; margin-top:.4rem; }
@media (max-width:620px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ===================================================================
   CTA banda
   =================================================================== */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:clamp(36px,6vw,72px); background:linear-gradient(135deg,var(--t-purple),var(--t-cyan)); border:1px solid var(--line); }
.cta-band h2{ font-size:clamp(1.7rem,3.6vw,2.6rem); }
.cta-band .lead{ margin-top:.7rem; }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer{ background:#33302b; color:#d8d2c8; padding-block:clamp(48px,7vw,80px) 28px; margin-top:0; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(26px,4vw,52px); }
.site-footer h4{ color:#fff; font-size:1rem; letter-spacing:.04em; margin-bottom:1rem; font-weight:600; }
.site-footer a{ color:#cfc8bd; transition:color .2s; }
.site-footer a:hover{ color:#fff; }
.footer-brand{ display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; }
.footer-brand img{ width:52px; height:52px; border-radius:50%; }
.footer-brand b{ font-family:'Quicksand'; font-weight:700; color:#fff; font-size:1.15rem; }
.footer-brand .sub{ display:block; font-size:.64rem; letter-spacing:.32em; text-transform:uppercase; color:#9a9388; }
.flist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; font-size:.95rem; }
.flist li{ display:flex; gap:.6rem; align-items:flex-start; }
.flist .ico{ width:1.15em; height:1.15em; margin-top:.25em; color:#8f877b; flex:none; }
.flist li > svg{ width:1.15em; height:1.15em; margin-top:.25em; color:#8f877b; flex:none; }
.footer-note{ color:#9a9388; font-size:.92rem; }
.footer-bottom{ border-top:1px solid #4a463f; margin-top:2.6rem; padding-top:1.4rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.86rem; color:#9a9388; }
.footer-badges{ display:flex; flex-wrap:wrap; gap:.5rem; }
.footer-badges span{ border:1px solid #4a463f; border-radius:999px; padding:.3em .8em; font-family:'Quicksand'; font-weight:600; font-size:.74rem; letter-spacing:.06em; color:#bdb6aa; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ===================================================================
   PAGE HERO (cabecera de subpáginas)
   =================================================================== */
.page-hero{ position:relative; overflow:hidden; padding-block:clamp(48px,7vw,88px) clamp(36px,5vw,56px); }
.page-hero .eyebrow{ margin-bottom:.4rem; }
.page-hero h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:700; }
.page-hero .lead{ margin-top:1rem; }
.crumb{ font-family:'Quicksand'; font-weight:600; font-size:.85rem; color:var(--ink-faint); margin-bottom:.9rem; display:flex; gap:.5rem; align-items:center; }
.crumb a:hover{ color:var(--brand-d); }

/* ===================================================================
   FORMULARIOS
   =================================================================== */
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-family:'Quicksand'; font-weight:600; font-size:.92rem; margin-bottom:.45rem; color:var(--ink); }
.field .req{ color:var(--d-coral); }
.input, .select, textarea.input{
  width:100%; padding:.9em 1.05em; border-radius:14px; border:1.5px solid var(--line-strong);
  background:#fff; color:var(--ink); font:inherit; transition:border-color .2s, box-shadow .2s;
}
.input::placeholder{ color:var(--ink-faint); }
.input:focus, .select:focus, textarea.input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%, transparent); }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237c766c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1em center; padding-right:2.6em; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.help{ font-size:.84rem; color:var(--ink-faint); margin-top:.4rem; }

/* Opciones tipo tarjeta seleccionable */
.choice-grid{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.choice{
  position:relative; border:1.5px solid var(--line-strong); border-radius:16px; padding:1rem 1.1rem;
  background:#fff; cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .2s; display:flex; gap:.85rem; align-items:flex-start;
}
.choice:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice .ic{ width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center; background:var(--tint,var(--t-purple)); color:var(--deep,var(--d-purple)); }
.choice .ic svg{ width:22px; height:22px; }
.choice b{ font-family:'Quicksand'; font-weight:600; display:block; font-size:1rem; }
.choice small{ color:var(--ink-soft); font-size:.85rem; line-height:1.4; }
.choice .check{ position:absolute; top:.7rem; right:.7rem; width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong); display:grid; place-items:center; transition:.2s; }
.choice .check svg{ width:13px; height:13px; color:#fff; opacity:0; }
.choice:has(input:checked){ border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%, transparent); }
.choice:has(input:checked) .check{ background:var(--brand-d); border-color:var(--brand-d); }
.choice:has(input:checked) .check svg{ opacity:1; }

/* ===================================================================
   TURNOS — stepper
   =================================================================== */
.book{ display:grid; grid-template-columns:280px 1fr; gap:clamp(24px,4vw,48px); align-items:start; }
@media (max-width:860px){ .book{ grid-template-columns:1fr; } }
.steps{ position:sticky; top:100px; display:flex; flex-direction:column; gap:.2rem; }
@media (max-width:860px){ .steps{ position:static; flex-direction:row; overflow-x:auto; gap:.4rem; padding-bottom:.5rem; } }
.step{ display:flex; gap:.9rem; align-items:center; padding:.8rem .9rem; border-radius:14px; color:var(--ink-faint); transition:.25s; }
.step .num{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:'Quicksand'; font-weight:700; background:#fff; border:1.5px solid var(--line-strong); color:var(--ink-faint); transition:.25s; }
.step b{ font-family:'Quicksand'; font-weight:600; font-size:.98rem; white-space:nowrap; }
.step small{ display:block; font-size:.78rem; color:var(--ink-faint); }
.step.active{ background:#fff; box-shadow:var(--shadow-sm); color:var(--ink); }
.step.active .num{ background:var(--brand-d); border-color:var(--brand-d); color:#fff; }
.step.done .num{ background:var(--d-green); border-color:var(--d-green); color:#fff; }
.step.done{ color:var(--ink-soft); }

.panel{ display:none; animation:fade .4s var(--ease); }
.panel.active{ display:block; }
@keyframes fade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.panel h2{ font-size:1.5rem; margin-bottom:.3rem; }
.panel .sub{ color:var(--ink-soft); margin-bottom:1.6rem; }
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow-sm); }
.form-nav{ display:flex; justify-content:space-between; gap:1rem; margin-top:1.8rem; }

/* Calendario simple */
.cal{ background:var(--cream); border:1px solid var(--line); border-radius:18px; padding:1.1rem; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.cal-head b{ font-family:'Quicksand'; font-weight:600; text-transform:capitalize; }
.cal-nav{ width:36px; height:36px; border-radius:50%; border:1.5px solid var(--line-strong); background:#fff; display:grid; place-items:center; }
.cal-nav:hover{ border-color:var(--brand); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-grid .dow{ text-align:center; font-size:.74rem; font-weight:700; color:var(--ink-faint); font-family:'Quicksand'; padding:.3em 0; text-transform:uppercase; }
.cal-day{ aspect-ratio:1; border:none; background:#fff; border:1.5px solid transparent; border-radius:11px; font-family:'Quicksand'; font-weight:600; color:var(--ink); transition:.15s; font-size:.95rem; }
.cal-day:hover:not(:disabled){ border-color:var(--brand); }
.cal-day.empty{ background:transparent; }
.cal-day:disabled{ color:var(--line-strong); background:transparent; cursor:not-allowed; }
.cal-day.sel{ background:var(--brand-d); color:#fff; }
.cal-day.has::after{ content:""; display:block; width:5px; height:5px; border-radius:50%; background:var(--d-green); margin:2px auto 0; }
.cal-day.sel.has::after{ background:#fff; }

.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:.6rem; }
.slot{ padding:.7em .4em; border-radius:12px; border:1.5px solid var(--line-strong); background:#fff; font-family:'Quicksand'; font-weight:600; transition:.15s; }
.slot:hover{ border-color:var(--brand); }
.slot.sel{ background:var(--brand-d); color:#fff; border-color:var(--brand-d); }
.slot:disabled{ opacity:.4; text-decoration:line-through; cursor:not-allowed; }

/* Resumen lateral / confirmación */
.summary{ background:var(--t-purple); border-radius:18px; padding:1.3rem 1.4rem; }
.summary h4{ font-family:'Quicksand'; font-weight:700; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-d); margin-bottom:.9rem; }
.summary dl{ margin:0; display:grid; gap:.7rem; }
.summary .row{ display:flex; justify-content:space-between; gap:1rem; font-size:.95rem; }
.summary dt{ color:var(--ink-soft); }
.summary dd{ margin:0; font-weight:700; text-align:right; }
.confirm-ic{ width:90px; height:90px; border-radius:50%; background:var(--t-green); color:var(--d-green); display:grid; place-items:center; margin:0 auto 1.4rem; }
.confirm-ic svg{ width:48px; height:48px; }

/* ===================================================================
   LOGIN
   =================================================================== */
.auth{ min-height:calc(100dvh - 78px); display:grid; grid-template-columns:1.1fr 1fr; }
@media (max-width:900px){ .auth{ grid-template-columns:1fr; min-height:auto; } }
.auth-aside{ position:relative; overflow:hidden; background:linear-gradient(150deg,var(--t-purple),var(--t-pink) 55%,var(--t-cyan)); padding:clamp(36px,5vw,64px); display:flex; flex-direction:column; justify-content:space-between; }
@media (max-width:900px){ .auth-aside{ display:none; } }
.auth-aside .q{ font-family:'Quicksand'; font-weight:600; font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--ink); line-height:1.25; max-width:18ch; }
.auth-aside .who{ display:flex; align-items:center; gap:.7rem; color:var(--ink-soft); font-weight:600; }
.auth-main{ display:grid; place-items:center; padding:clamp(28px,5vw,56px); }
.auth-card{ width:100%; max-width:400px; }
.auth-card .brand-c{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:1.8rem; }
.auth-card .brand-c h1{ margin:.25rem 0 .2rem; }
.auth-card .brand-c img{ width:72px; height:72px; border-radius:50%; margin-bottom:.8rem; }
.role-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; background:var(--cream-2); padding:.35rem; border-radius:14px; margin-bottom:1.6rem; }
.role-toggle button{ padding:.7em; border:none; background:transparent; border-radius:10px; font-family:'Quicksand'; font-weight:600; color:var(--ink-soft); transition:.2s; display:flex; align-items:center; justify-content:center; gap:.5em; white-space:nowrap; }
.role-toggle button svg{ width:1.15em; height:1.15em; flex:none; }
.role-toggle button.active{ background:#fff; color:var(--brand-d); box-shadow:var(--shadow-sm); }
.role-toggle button .ico{ width:1.1em; height:1.1em; }
.input-ico{ position:relative; }
.input-ico > svg{ position:absolute; left:1em; top:50%; transform:translateY(-50%); width:1.2em; height:1.2em; color:var(--ink-faint); pointer-events:none; }
.input-ico .ico{ position:absolute; left:1em; top:50%; transform:translateY(-50%); width:1.2em; height:1.2em; color:var(--ink-faint); }
.input-ico .input{ padding-left:2.8em; }
.auth-row{ display:flex; justify-content:space-between; align-items:center; font-size:.9rem; margin:.2rem 0 1.4rem; }
.auth-row a{ color:var(--brand-d); font-weight:600; }
.check-line{ display:flex; align-items:center; gap:.5em; color:var(--ink-soft); font-weight:600; }
.auth-foot{ text-align:center; margin-top:1.4rem; color:var(--ink-soft); font-size:.92rem; }
.auth-foot a{ color:var(--brand-d); font-weight:700; }

/* ===================================================================
   MISC
   =================================================================== */
.kicker-list{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.8rem; }
.kicker-list li{ display:flex; gap:.8rem; align-items:flex-start; font-weight:600; color:var(--ink); }
.kicker-list .ck{ width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--t-green); color:var(--d-green); margin-top:.1em; }
.kicker-list .ck svg{ width:15px; height:15px; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,68px); align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); position:relative; }
.media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.media--tall img{ aspect-ratio:3/4; }

/* Placeholder de mapa */
.map-ph{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); min-height:280px; position:relative; background:
  repeating-linear-gradient(45deg, var(--cream-2), var(--cream-2) 14px, var(--cream) 14px, var(--cream) 28px); display:grid; place-items:center; }
.map-ph .pin{ text-align:center; color:var(--ink-soft); font-family:'Quicksand'; font-weight:600; }
.map-ph .pin .ico{ width:34px; height:34px; color:var(--brand-d); margin:0 auto .4rem; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- Tamaño seguro para íconos en cualquier contexto ---------- */
.ic svg{ width:54%; height:54%; }
.who svg{ width:1.2em; height:1.2em; flex:none; }
.auth-foot a svg{ width:1em; height:1em; vertical-align:-.12em; }
.map-ph .pin .ico svg{ width:100%; height:100%; }
.summary svg, .feat svg, .crumb svg{ flex:none; }

/* Accordion (servicios/faq) */
.acc{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.acc details{ border-bottom:1px solid var(--line); }
.acc details:last-child{ border-bottom:none; }
.acc summary{ list-style:none; cursor:pointer; padding:1.2rem 1.4rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; font-family:'Quicksand'; font-weight:600; font-size:1.08rem; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .pl{ width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--t-purple); color:var(--brand-d); transition:.3s; }
.acc details[open] summary .pl{ transform:rotate(45deg); }
.acc .body{ padding:0 1.4rem 1.3rem; color:var(--ink-soft); }

/* Cita / valores */
.quote{ font-family:'Quicksand'; font-weight:500; font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.35; color:var(--ink); max-width:24ch; }
.quote em{ font-style:normal; color:var(--brand-d); }