/* ==========================================================================
   Capa visual moderna · se carga DESPUÉS de app.css y solo con skin modern.
   El diseño anterior permanece intacto en app.css (?skin=classic).
   ========================================================================== */

body.skin-modern {
  --modern-cream: #f8f3ea;
  --modern-paper: #fffdf9;
  --modern-line: #e8e0d2;
  --modern-ink: #1f302a;
  --modern-muted: #617068;
  --modern-soft-shadow: 0 18px 42px -30px rgba(28, 46, 39, .32);
  --modern-shadow: 0 32px 72px -46px rgba(28, 46, 39, .52);
  background: var(--modern-cream);
  color: var(--modern-ink);
}

body.skin-modern h1,
body.skin-modern h2,
body.skin-modern h3 {
  letter-spacing: -.035em;
}

/* ------------------------------- Topbar --------------------------------- */
body.skin-modern .topbar {
  background: var(--teja-deep);
  color: #edf3ee;
  font-size: 11.5px;
  letter-spacing: .045em;
}
body.skin-modern .topbar-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 38px;
}
body.skin-modern .topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  line-height: 1;
}
body.skin-modern .topbar-item svg {
  width: 14px;
  height: 14px;
  opacity: .82;
  flex: 0 0 auto;
}
body.skin-modern .topbar-phone {
  margin-left: auto;
  font-weight: 700;
  letter-spacing: .02em;
}
body.skin-modern .topbar-phone:hover {
  color: #fff;
  text-decoration: none;
}
@media (max-width: 900px) {
  body.skin-modern .topbar-hours { display: none; }
}
@media (max-width: 560px) {
  body.skin-modern .topbar-location { display: none; }
  body.skin-modern .topbar-inner { justify-content: space-between; }
}

/* ------------------------------- Header --------------------------------- */
body.skin-modern .site-header {
  background: rgba(250, 246, 238, .9);
  border-bottom: 1px solid rgba(214, 204, 186, .55);
}
body.skin-modern .header-inner {
  min-height: 84px;
  gap: 22px;
}
body.skin-modern .brand img { border-radius: 0; }
body.skin-modern .brand--lockup img { height: 54px; }
body.skin-modern .nav { gap: 3px; }
body.skin-modern .nav > a {
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--teja-ink);
}
body.skin-modern .nav > a::after { display: none; }
body.skin-modern .nav > a:hover,
body.skin-modern .nav > a[aria-current="page"] {
  background: rgba(231, 235, 225, .85);
  text-decoration: none;
}

/* Mega menú de tratamientos */
body.skin-modern .nav-drop { position: relative; }
body.skin-modern .nav-drop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}
body.skin-modern .nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--teja-ink);
}
body.skin-modern .nav-drop-trigger:hover {
  background: rgba(231, 235, 225, .85);
  text-decoration: none;
}
body.skin-modern .nav-chevron {
  font-size: 14px;
  line-height: 1;
  opacity: .55;
  transform: translateY(-1px);
}
body.skin-modern .nav-drop-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: min(520px, 90vw);
  transform: translate(-50%, 10px);
  padding: 18px;
  background: var(--modern-paper);
  border: 1px solid var(--modern-line);
  border-radius: 24px;
  box-shadow: var(--modern-shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 95;
}
body.skin-modern .nav-drop:hover .nav-drop-panel,
body.skin-modern .nav-drop:focus-within .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
body.skin-modern .nav-drop-panel::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: var(--modern-paper);
  border-left: 1px solid var(--modern-line);
  border-top: 1px solid var(--modern-line);
  transform: translateX(-50%) rotate(45deg);
}
body.skin-modern .nav-drop-eyebrow {
  display: block;
  padding: 6px 12px 10px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--modern-muted);
}
body.skin-modern .nav-drop-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
}
body.skin-modern .nav-drop-item:hover {
  background: var(--sage-soft);
  text-decoration: none;
}
body.skin-modern .nav-drop-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #eef2e8, #e3e9dd);
  color: var(--teja);
}
body.skin-modern .nav-drop-icon svg { width: 20px; height: 20px; }
body.skin-modern .nav-drop-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--teja-ink);
}
body.skin-modern .nav-drop-copy small {
  display: block;
  margin-top: 3px;
  color: var(--modern-muted);
  font-size: 12.5px;
  line-height: 1.4;
}
body.skin-modern .nav-drop-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding: 12px;
  border-top: 1px solid var(--modern-line);
  color: var(--coral-deep);
  font-weight: 700;
  font-size: 13px;
}
body.skin-modern .nav-drop-all:hover {
  color: var(--teja-ink);
  text-decoration: none;
}

/* CTA de cabecera */
body.skin-modern .header-cta { gap: 16px; }
body.skin-modern .header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--teja-ink);
}
body.skin-modern .header-phone svg { width: 16px; height: 16px; }
body.skin-modern .header-phone:hover {
  color: var(--coral-deep);
  text-decoration: none;
}
body.skin-modern .header-cta-primary {
  min-height: 46px;
  padding: 12px 20px;
  white-space: nowrap;
}
body.skin-modern .header-cta-primary::after {
  content: "→";
  font-size: 15px;
  margin-left: 1px;
}
@media (max-width: 1100px) {
  body.skin-modern .header-phone { display: none; }
}
@media (max-width: 980px) {
  body.skin-modern .nav {
    background: var(--modern-paper);
    border-bottom: 1px solid var(--modern-line);
    box-shadow: var(--modern-shadow);
    padding: 10px var(--gutter) 22px;
  }
  body.skin-modern .nav > a,
  body.skin-modern .nav-drop-trigger {
    display: flex;
    width: 100%;
    padding: 14px 12px;
    border-radius: 12px;
    border-bottom: 1px solid var(--modern-line);
  }
  body.skin-modern .nav > a:hover,
  body.skin-modern .nav-drop-trigger:hover { background: var(--sage-soft); }
  body.skin-modern .nav-drop-panel { display: none; }
  body.skin-modern .nav-chevron { display: none; }
  body.skin-modern .header-cta-primary { padding: 10px 14px; font-size: 13px; }
}

/* ------------------------------ Trustbar -------------------------------- */
body.skin-modern .trustbar {
  background: #fbf7f0;
  color: var(--modern-muted);
  border-bottom: 1px solid var(--modern-line);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.skin-modern .trustbar-inner {
  padding-block: 12px;
  gap: 10px 28px;
}
body.skin-modern .trust-item::before {
  width: 5px;
  height: 5px;
  background: var(--coral);
}

/* -------------------------------- Hero ---------------------------------- */
body.skin-modern .hero {
  padding-block: clamp(58px, 7vw, 112px);
  background:
    radial-gradient(900px 480px at 92% -8%, rgba(156, 170, 151, .24), transparent 68%),
    radial-gradient(700px 420px at -10% 12%, rgba(196, 100, 78, .10), transparent 70%),
    linear-gradient(180deg, #fbf7f0 0%, var(--modern-cream) 70%);
}
body.skin-modern .hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(46vw, 620px);
  height: min(46vw, 620px);
  right: -10%;
  top: -18%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(231, 235, 225, .9), rgba(231, 235, 225, .18) 55%, transparent 72%);
  pointer-events: none;
}
body.skin-modern .hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(42vw, 520px);
  height: min(42vw, 520px);
  left: -16%;
  bottom: -28%;
  border-radius: 50%;
  border: 1px solid rgba(156, 170, 151, .28);
  pointer-events: none;
}
body.skin-modern .hero > .wrap { position: relative; z-index: 1; }
body.skin-modern .hero h1 {
  font-size: clamp(2.9rem, 6vw, 5.05rem);
  line-height: .98;
  letter-spacing: -.045em;
  max-width: 15ch;
}
body.skin-modern .hero:not(.hero--home) h1 {
  max-width: 21ch;
  font-size: clamp(2.6rem, 5vw, 4.35rem);
}
body.skin-modern .hero .lead {
  max-width: 56ch;
  color: var(--modern-muted);
}
body.skin-modern .hero .badge {
  background: rgba(255, 253, 249, .72);
  border-color: rgba(213, 220, 205, .9);
  backdrop-filter: blur(8px);
}
body.skin-modern .hero-actions { gap: 14px; }
body.skin-modern .hero-actions .btn--primary::after {
  content: "→";
  font-size: 15px;
  margin-left: 2px;
}
body.skin-modern .hero-text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(46, 74, 67, .25);
  font-size: 13px;
  font-weight: 700;
  color: var(--teja-ink);
}
body.skin-modern .hero-text-link:hover {
  color: var(--coral-deep);
  border-color: var(--coral);
  text-decoration: none;
}
body.skin-modern .hero-points { gap: 8px; }
body.skin-modern .hero-points li {
  padding: 6px 12px;
  background: rgba(255, 253, 249, .62);
  border: 1px solid rgba(214, 204, 186, .7);
  border-radius: 999px;
  font-size: 12px;
}
body.skin-modern .hero-points li::before {
  width: 6px;
  height: 6px;
  background: var(--sage);
}

/* Hero visual de la home */
body.skin-modern .hero--home .hero-grid { gap: clamp(36px, 5vw, 80px); }
body.skin-modern .hero--home .hero-visual { min-height: 560px; }
body.skin-modern .hero--home .hero-visual .illus {
  width: min(92%, 600px);
  position: relative;
  z-index: 2;
}
body.skin-modern .hero--home .hero-visual::before {
  inset: 4% 0 -8% 10%;
  z-index: 0;
  background: linear-gradient(145deg, #e8eee5, #f6eee4);
  border: 1px solid rgba(213, 220, 205, .8);
  border-radius: 48% 52% 58% 42% / 42% 44% 56% 58%;
  transform: rotate(-2deg);
}
body.skin-modern .hero--home .hero-visual::after {
  content: "";
  position: absolute;
  inset: 10% 6% 2% 0;
  z-index: 1;
  border: 1px dashed rgba(156, 170, 151, .45);
  border-radius: 48% 52% 58% 42% / 42% 44% 56% 58%;
  transform: rotate(3deg);
  pointer-events: none;
}
body.skin-modern .hero-float {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: rgba(255, 253, 249, .88);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(214, 204, 186, .8);
  border-radius: 18px;
  box-shadow: var(--modern-soft-shadow);
  font-size: 12px;
  line-height: 1.25;
}
body.skin-modern .hero-float strong {
  display: block;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 600;
  color: var(--teja-ink);
}
body.skin-modern .hero-float small {
  display: block;
  color: var(--modern-muted);
  font-size: 11.5px;
}
body.skin-modern .hero-float--confidential { top: 9%; left: -3%; }
body.skin-modern .hero-float--location { right: -3%; bottom: 10%; }
body.skin-modern .hero-float-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 5px rgba(196, 100, 78, .12);
}
body.skin-modern .hero-float-pin {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--sage-soft);
  color: var(--teja);
}
body.skin-modern .hero-note {
  position: absolute;
  z-index: 4;
  left: 3%;
  bottom: -2%;
  width: min(290px, 70%);
  padding: 18px 20px;
  background: var(--modern-paper);
  border: 1px solid var(--modern-line);
  border-left: 3px solid var(--coral);
  border-radius: 18px;
  box-shadow: var(--modern-soft-shadow);
}
body.skin-modern .hero-note-kicker {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--coral-deep);
}
body.skin-modern .hero-note p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--teja-ink);
}
body.skin-modern .hero-seal {
  position: absolute;
  z-index: 4;
  top: 4%;
  right: 1%;
  width: 112px;
  height: 112px;
  padding: 16px;
  border-radius: 50%;
  background: var(--teja-deep);
  color: var(--cream-2);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(-7deg);
  box-shadow: var(--modern-soft-shadow);
}
@media (max-width: 900px) {
  body.skin-modern .hero--home .hero-visual {
    min-height: 460px;
    margin-top: 12px;
  }
  body.skin-modern .hero--home .hero-visual .illus { width: min(100%, 540px); }
  body.skin-modern .hero-float--confidential { top: 0; left: 0; }
  body.skin-modern .hero-float--location { right: 0; bottom: 0; }
  body.skin-modern .hero-note { display: none; }
  body.skin-modern .hero-seal { width: 92px; height: 92px; font-size: 9px; }
}
@media (max-width: 600px) {
  body.skin-modern .hero--home .hero-visual { min-height: 380px; }
  body.skin-modern .hero-float { padding: 9px 11px; }
  body.skin-modern .hero-float strong { font-size: .9rem; }
  body.skin-modern .hero-float small { font-size: 10.5px; }
  body.skin-modern .hero-seal { display: none; }
}

/* ------------------------------- Secciones ------------------------------ */
body.skin-modern .section { padding-block: clamp(70px, 8vw, 128px); }
body.skin-modern .section--soft {
  background: linear-gradient(180deg, #f3eee4, #f8f3ea);
}
body.skin-modern .section-head .eyebrow {
  display: inline-flex;
  padding: 6px 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(231, 235, 225, .75);
  border: 1px solid rgba(213, 220, 205, .9);
}
body.skin-modern .section-head .eyebrow::before { display: none; }
body.skin-modern .section-head h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -.035em;
}
body.skin-modern .lead { color: var(--modern-muted); }

/* -------------------------------- Cards --------------------------------- */
body.skin-modern .card,
body.skin-modern .sol-card,
body.skin-modern .principle,
body.skin-modern .tstep,
body.skin-modern .svc-block,
body.skin-modern .fbox {
  border-radius: 24px;
  border-color: rgba(214, 204, 186, .7);
  background: linear-gradient(180deg, #fffdf9, #fbf7f0);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 40px -32px rgba(28, 46, 39, .25);
}
body.skin-modern .card { padding: 28px; }
body.skin-modern .card:hover,
body.skin-modern .sol-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--modern-shadow);
  border-color: rgba(156, 170, 151, .8);
}
body.skin-modern .icon-round {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(145deg, #eef2e8, #e3e9dd);
  border-color: rgba(213, 220, 205, .9);
}
body.skin-modern .card h3 {
  font-size: 1.32rem;
  letter-spacing: -.02em;
}
body.skin-modern .card-cta {
  color: var(--coral-deep);
  font-size: 12.5px;
  letter-spacing: .02em;
}

/* ------------------------------- Botones -------------------------------- */
body.skin-modern .btn {
  min-height: 50px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
}
body.skin-modern .btn--primary {
  background: var(--teja-deep);
  color: var(--cream-2);
  box-shadow: 0 18px 35px -20px rgba(28, 46, 39, .55);
}
body.skin-modern .btn--primary:hover {
  background: var(--teja);
  transform: translateY(-2px);
}
body.skin-modern .btn--ghost {
  background: rgba(255, 253, 249, .7);
  border-color: rgba(214, 204, 186, .9);
  color: var(--teja-ink);
}
body.skin-modern .btn--ghost:hover {
  background: var(--paper);
  border-color: var(--teja);
  color: var(--teja);
}
body.skin-modern .btn--lg { min-height: 56px; padding: 16px 30px; }

/* --------------------------- Bloques y TOC ------------------------------ */
body.skin-modern .highlight {
  border-radius: 32px;
  border-color: rgba(213, 220, 205, .9);
  background: linear-gradient(135deg, #eef2e8, #f8eee5);
}
body.skin-modern .toc {
  padding: 22px 26px;
  border-radius: 24px;
  border-color: var(--modern-line);
  background: var(--modern-paper);
}
body.skin-modern .toc strong { font-size: 1.1rem; }
@media (min-width: 760px) {
  body.skin-modern .toc ol {
    columns: 2;
    column-gap: 36px;
  }
}
body.skin-modern .toc li { break-inside: avoid; }
body.skin-modern .faq { display: grid; gap: 10px; }
body.skin-modern .faq details {
  padding: 18px 20px;
  border: 1px solid var(--modern-line);
  border-radius: 16px;
  background: var(--modern-paper);
}
body.skin-modern .faq details:first-of-type { border-top: 1px solid var(--modern-line); }
body.skin-modern .faq summary { font-size: 15px; }
body.skin-modern .faq p { margin-top: 10px; }
body.skin-modern .chips li {
  border-color: var(--modern-line);
  background: var(--modern-paper);
}
body.skin-modern .loc-grid a {
  border-radius: 14px;
  background: var(--modern-paper);
}

/* ------------------------------- Formulario ----------------------------- */
body.skin-modern .field input,
body.skin-modern .field textarea,
body.skin-modern .field select {
  border-radius: 16px;
  border-color: rgba(214, 204, 186, .9);
  background: var(--modern-paper);
}
body.skin-modern .contact-card {
  border-radius: 24px;
  border-color: var(--modern-line);
  background: var(--modern-paper);
  box-shadow: var(--modern-soft-shadow);
}

/* -------------------------------- Footer -------------------------------- */
body.skin-modern .footer {
  margin-top: 80px;
  border-radius: 36px 36px 0 0;
  background: linear-gradient(180deg, #1c2e27, #16241f);
}
body.skin-modern .footer .cols { padding-block: clamp(54px, 6vw, 86px); }
body.skin-modern .footer h4 { letter-spacing: .18em; }
body.skin-modern .footer-trust {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: #9fb0a4;
}
body.skin-modern .footer-trust strong {
  color: #e8f0e9;
  font-weight: 700;
  letter-spacing: .02em;
}

/* --------------------------- Flotantes / móvil -------------------------- */
body.skin-modern .fab-wa {
  background: var(--teja-deep);
  color: var(--cream-2);
}
body.skin-modern .sticky-cta {
  border-radius: 22px;
  background: rgba(255, 253, 249, .96);
}

@media (max-width: 600px) {
  body.skin-modern .hero-actions .btn { width: 100%; }
  body.skin-modern .hero-text-link { justify-content: center; }
}

@media (max-width: 760px) {
  body.skin-modern .header-cta { display: none; }
  body.skin-modern .header-inner { min-height: 74px; gap: 10px; }
  body.skin-modern .brand--lockup img { height: 44px; }
  body.skin-modern .hero h1 {
    max-width: none;
    font-size: clamp(2rem, 8.2vw, 2.7rem);
    overflow-wrap: break-word;
  }
  body.skin-modern .hero:not(.hero--home) h1 {
    font-size: clamp(2rem, 8.5vw, 2.7rem);
  }
}

@media (max-width: 600px) {
  body.skin-modern .sticky-cta {
    left: 10px;
    right: 10px;
    padding: 8px;
    gap: 6px;
  }
  body.skin-modern .sticky-cta-text { display: none; }
  body.skin-modern .sticky-cta .btn {
    flex: 1;
    padding: 10px 8px;
    font-size: 12.5px;
  }
  body.skin-modern .trustbar-inner {
    justify-content: flex-start;
    gap: 6px 14px;
    font-size: 9.5px;
  }
  body.skin-modern .trust-item { max-width: 100%; }
  body.skin-modern .hero-float--confidential { max-width: 210px; }
  body.skin-modern .hero-float--location { right: 0; max-width: 190px; }
}