/* ---------- Design tokens (from solofina-prop/simulador-prototype.html) ---------- */
:root{
  --sm-ink:#1f150f;
  --sm-ink-soft:#6b5b4f;
  --sm-paper:#faf5ef;
  --sm-paper-raised:#ffffff;
  --sm-orange-900:#5c220c;
  --sm-orange-800:#7a2e0e;
  --sm-orange-700:#a53d15;
  --sm-orange-600:#c4531f;
  --sm-orange-500:#e2792f;
  --sm-orange-400:#ea9257;
  --sm-orange-100:#fce8d8;
  --sm-teal-100:#e1efee;
  --sm-teal-200:#c1e1df;
  --sm-teal-300:#9ad0cd;
  --sm-teal-400:#69bfb9;
  --sm-teal-500:#43a8a1;
  --sm-teal-600:#307e79;
  --sm-teal-700:#1b4b48;
  --sm-teal-800:#143936;
  --sm-teal-900:#0d2625;
  --sm-line:#e8dccb;
  --sm-shadow:0 20px 40px -20px rgba(40,20,8,.35);
  --sm-radius:14px;
  --sm-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --lg-bg-color:rgba(255,255,255,.55);
  --lg-highlight:rgba(255,255,255,.85);
}

/* ---------- Site nav: floating glass bar (replaces #cabecera look) ---------- */
.sm-sitenav{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  width:min(1200px, calc(100% - 32px));
  z-index:500;border-radius:20px;
  box-shadow:0 6px 6px rgba(0,0,0,.15), 0 0 20px rgba(0,0,0,.08);
  font-family:var(--sm-sans);
}
.sm-glass-filter,.sm-glass-overlay,.sm-glass-specular{position:absolute;inset:0;border-radius:inherit;}
.sm-glass-filter{z-index:0;backdrop-filter:blur(4px);filter:url(#smLensFilter) saturate(120%) brightness(1.15);}
.sm-glass-overlay{z-index:1;background:var(--lg-bg-color);}
.sm-glass-specular{
  z-index:2;
  box-shadow:inset 1px 1px 0 var(--lg-highlight), inset 0 0 5px var(--lg-highlight);
}
.sm-glass-content{
  position:relative;z-index:3;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:14px 28px;
}
.sm-brand{display:flex;align-items:center;gap:12px;justify-self:center;order:2;}
.sm-brand img{
  height:40px;width:auto;flex-shrink:0;object-fit:contain;
  filter:drop-shadow(0 0px 6px rgba(255,255,255,.6));
}
.sm-navlinks{display:flex;align-items:center;gap:26px;justify-self:start;flex-wrap:wrap;order:1;}
.sm-navlinks a{
  font-size:13px;font-weight:700;color:var(--sm-ink);text-decoration:none;letter-spacing:.2px;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.sm-navlinks a:hover,.sm-navlinks a.current{color:var(--sm-orange-700);border-color:var(--sm-orange-500);}
.sm-navlinks .sm-dropdown{position:relative;}
.sm-navlinks .sm-dropdown-menu{
  display:none;position:absolute;top:100%;left:0;margin-top:10px;
  background:var(--sm-paper-raised);border:1px solid var(--sm-line);border-radius:10px;
  box-shadow:var(--sm-shadow);min-width:220px;padding:6px;
}
.sm-navlinks .sm-dropdown:hover .sm-dropdown-menu,
.sm-navlinks .sm-dropdown:focus-within .sm-dropdown-menu{display:block;}
.sm-dropdown-menu a{display:block;padding:8px 10px;border-bottom:none;font-size:12.5px;border-radius:7px;}
.sm-dropdown-menu a:hover{background:var(--sm-orange-100);}
.sm-navactions{display:flex;align-items:center;gap:10px;justify-self:end;order:3;}
.sm-navactions a,.sm-navactions button{
  font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.2px;
  padding:9px 16px;border-radius:9px;text-decoration:none;cursor:pointer;border:none;
  white-space:nowrap;
}
.sm-btn-outline{background:transparent;color:var(--sm-teal-700);border:1.5px solid var(--sm-line) !important;}
.sm-btn-outline:hover{border-color:var(--sm-orange-400) !important;color:var(--sm-orange-700);}
.sm-btn-solid{background:var(--sm-orange-500);color:#fff;}
.sm-btn-solid:hover{filter:brightness(1.06);}

/* User menu: name/avatar is now a dropdown trigger (Mi cuenta + Salir live
   inside it) so the navbar's primary action can be the Simulador button. */
.sm-navactions .sm-dropdown{position:relative;display:flex;}
.sm-navactions .sm-user-chip{
  display:flex;align-items:center;gap:8px;color:var(--sm-ink);font-size:12.5px;font-weight:700;
  text-decoration:none;padding:9px 12px;border-radius:9px;transition:background .2s ease;
}
.sm-navactions .sm-user-chip:hover{background:var(--sm-orange-100);}
.sm-user-chip svg:first-child{width:20px;height:20px;color:var(--sm-orange-700);flex-shrink:0;}
.sm-user-chip-caret{width:13px;height:13px;color:var(--sm-ink-soft);transition:transform .2s ease;flex-shrink:0;}
.sm-user-dropdown:hover .sm-user-chip-caret,
.sm-user-dropdown:focus-within .sm-user-chip-caret{transform:rotate(180deg);}
.sm-navactions .sm-dropdown-menu{
  display:none;position:absolute;top:100%;right:0;margin-top:10px;
  background:var(--sm-paper-raised);border:1px solid var(--sm-line);border-radius:10px;
  box-shadow:var(--sm-shadow);min-width:180px;padding:6px;z-index:10;
}
.sm-navactions .sm-dropdown:hover .sm-dropdown-menu,
.sm-navactions .sm-dropdown:focus-within .sm-dropdown-menu{display:block;}
/* Reclaim compact list-item styling for these links — the generic
   ".sm-navactions a" button rule above would otherwise win and make them
   look like stacked buttons instead of a dropdown menu. */
.sm-navactions .sm-dropdown-menu a{
  display:block;padding:8px 10px;font-size:12.5px;font-weight:700;
  border-radius:7px;color:var(--sm-ink);white-space:nowrap;
}
.sm-navactions .sm-dropdown-menu a:hover{background:var(--sm-orange-100);}

/* Simulador CTA: subtle skeuomorphic "key" — solid riser shadow, presses
   down on click. Same recipe as home3's .home3-btn-key, just teal + compact. */
.sm-btn-simulador{
  background:var(--sm-teal-600);color:#fff;
  box-shadow:0 3px 0 var(--sm-teal-800);
  transform:translateY(0);
  transition:transform .12s ease, box-shadow .12s ease;
}
.sm-btn-simulador:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--sm-teal-800);}
.sm-btn-simulador:active{transform:translateY(3px);box-shadow:0 0 0 var(--sm-teal-800);transition-duration:.06s;}

/* Canonical skeuomorphic "keycap" primary action — the orange, full-size
   sibling of .sm-btn-simulador above (same recipe as home3's .home3-btn-key).
   Use for primary form submits (login/register/etc.) and any other page's
   main CTA that isn't the compact navbar case .sm-btn-simulador covers. */
.sm-btn-key{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:9px;padding:13px 26px;font-size:14px;font-weight:800;
  letter-spacing:.2px;cursor:pointer;text-decoration:none;font-family:inherit;
  background:var(--sm-orange-500);color:#fff;
  box-shadow:0 4px 0 var(--sm-orange-800);
  transform:translateY(0);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s cubic-bezier(.34,1.56,.64,1), filter .15s ease;
}
.sm-btn-key:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--sm-orange-800);filter:brightness(1.04);color:#fff;}
.sm-btn-key:active{transform:translateY(4px);box-shadow:0 0 0 var(--sm-orange-800);transition-duration:.06s;filter:brightness(.98);}
.sm-btn-key:disabled,.sm-btn-key.is-disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:0 4px 0 var(--sm-orange-800);filter:none;}
.sm-btn-key-block{width:100%;}
@media (prefers-reduced-motion: reduce){.sm-btn-key{transition:box-shadow .12s ease;}}

/* Canonical "gentle waves" hero divider — three staggered copies of the same
   wave path drifting at different speeds/opacities. Markup: an <svg> with a
   <defs><path id="..."> and a <g class="sm-wave-parallax"> holding three
   <use> children (teal-600/teal-700/orange-500 fills, y-offset 0/3/6) — see
   .sim-hero-waves in simulador-wizard.css for the original, or any of the
   auth pages / home2 for a copy-pasteable example. */
.sm-wave-parallax>use{animation:sm-wave-move 55s cubic-bezier(.55,.5,.45,.5) infinite;}
.sm-wave-parallax>use:nth-child(1){animation-delay:-4s;animation-duration:16s;opacity:.85;}
.sm-wave-parallax>use:nth-child(2){animation-delay:-6s;animation-duration:22s;}
.sm-wave-parallax>use:nth-child(3){animation-delay:-9s;animation-duration:29s;}
@keyframes sm-wave-move{
  0%{transform:translate3d(-90px,0,0);}
  100%{transform:translate3d(85px,0,0);}
}
@media (prefers-reduced-motion: reduce){
  .sm-wave-parallax>use{animation:none;}
}

/* Canonical concentric-ring hero texture — same motif as the brand manual
   cover, echoing the logo's own roundel. Markup: a <div class="sm-hero-rings">
   with four empty <i> children, absolutely positioned inside a
   position:relative hero with overflow:hidden. Purely decorative (z-index:0,
   pointer-events:none) so it always sits behind the hero's real content. */
.sm-hero-rings{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.sm-hero-rings i{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.16);}
/* Top-anchored only — a hero's height varies a lot page to page (a compact
   auth hero vs. home2's much taller one), and a bottom-anchored ring ends up
   floating awkwardly right in the wave zone on the taller ones with no
   companions nearby. Two rings tucked in the top corner reads as a
   consistent, cohesive texture regardless of hero height. */
.sm-hero-rings i:nth-child(1){width:420px;height:420px;top:-160px;right:-120px;}
.sm-hero-rings i:nth-child(2){width:260px;height:260px;top:-30px;right:70px;border-color:rgba(255,255,255,.12);}
.sm-hero-rings i:nth-child(3),
.sm-hero-rings i:nth-child(4){display:none;}

.sm-hamburger-btn{
  display:none;border:none;background:transparent;color:var(--sm-ink);
  padding:6px;cursor:pointer;justify-self:end;order:4;
}
.sm-hamburger-btn svg{width:24px;height:24px;}

.sm-drawer-backdrop{
  position:fixed;inset:0;background:rgba(20,12,6,.45);z-index:600;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.sm-drawer-backdrop.show{opacity:1;pointer-events:auto;}
.sm-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(78vw, 320px);z-index:601;
  background:var(--sm-paper-raised);box-shadow:-8px 0 30px rgba(0,0,0,.25);
  padding:20px;display:flex;flex-direction:column;gap:20px;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  font-family:var(--sm-sans);
}
.sm-drawer.show{transform:translateX(0);}
.sm-drawer-close{align-self:flex-end;border:none;background:transparent;color:var(--sm-ink-soft);padding:6px;cursor:pointer;}
.sm-drawer-close svg{width:22px;height:22px;}
.sm-drawer-links{display:flex;flex-direction:column;gap:2px;}
.sm-drawer-links a{
  font-size:15px;font-weight:700;color:var(--sm-ink);text-decoration:none;
  padding:12px 4px;border-bottom:1px solid var(--sm-line);
}
.sm-drawer-links a.current,.sm-drawer-links a:hover{color:var(--sm-orange-700);}
.sm-drawer-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;}
.sm-drawer-actions a{
  text-align:center;font-size:13px;font-weight:800;padding:11px;border-radius:9px;text-decoration:none;
}

/* ---------- Footer ---------- */
.sm-sitefooter{background:#241a13;color:#d8cfc5;padding:52px 32px 0;font-family:var(--sm-sans);}
.sm-footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:36px;padding-bottom:36px;}
.sm-footer-logo-chip{background:#fff;display:inline-flex;padding:10px 16px;border-radius:10px;}
.sm-footer-logo-chip img{height:32px;width:auto;display:block;}
.sm-footer-brand p{font-size:13px;color:#a99c8f;margin:14px 0 0;line-height:1.6;}
.sm-sitefooter h4{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sm-orange-400);}
.sm-sitefooter a{color:#d8cfc5;text-decoration:none;font-size:13.5px;display:block;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.sm-sitefooter a:hover{color:var(--sm-orange-400);}
.sm-footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;text-align:center;font-size:12px;color:#8a7d70;}
.sm-footer-bottom p{margin:4px 0;}

.sm-whapp-float{position:fixed;right:20px;bottom:20px;z-index:400;}
.sm-whapp-float img{width:56px;height:56px;display:block;}
.sm-uptop{position:fixed;right:20px;bottom:86px;z-index:400;}
.sm-uptop img{width:40px;height:40px;display:block;}

@media (max-width:900px){
  .sm-glass-content{padding:12px 18px;grid-template-columns:1fr auto;}
  .sm-navlinks,.sm-navactions{display:none;}
  .sm-hamburger-btn{display:block;}
  .sm-footer-grid{grid-template-columns:1fr;gap:28px;}
}

/* leave room below the fixed floating nav for pages that don't already
   account for it via their own hero padding */
body{padding-top:0;}