/* Clínica Estética Love. Based on sites/template; tokens sampled from the clinic's logo. */

@font-face {
  font-family: "Jost";
  src: url("fonts/jost-latin.woff2") format("woff2");
  font-weight: 300 500;
  font-display: swap;
}

:root {
  --bg: #f6f8f8;        /* clinic white, cool */
  --surface: #ffffff;   /* the pad */
  --ink: #142624;       /* teal-black */
  --muted: #4f5f5d;
  --line: #d6e2e0;
  --brand: #2c8379;     /* "ESTÉTICA" in the wordmark */
  --accent: #1f6f67;    /* buttons, links */
  --accent-ink: #ffffff;
  --facet: #6aded3;     /* lightest heart facet; decoration only */

  --font-display: "Jost", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 14px;       /* cards */
  --radius-lg: 24px;    /* photos, large panels */
  --pill: 999px;        /* buttons, chips */
  --shadow: 0 1px 2px rgb(20 38 36 / .04), 0 12px 32px -12px rgb(20 38 36 / .12);
  --max: 72rem;
  --gap: clamp(1.25rem, 3.5vw, 2.5rem);
  --section: clamp(4.5rem, 11vw, 8.5rem);
  --header-h: 4rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }
/* keep focused links clear of the mobile action bar */
@media (max-width: 45.99rem) { html { scroll-padding-bottom: 5rem; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font-body);
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Language: every bilingual string is a pair of [lang] spans; hide the inactive one. */
html[data-lang="en"] [lang="es"]:not(html),
html[data-lang="es"] [lang="en"]:not(html) { display: none !important; }
/* EN mode shows our translation; the Spanish original sits in a "Show original" disclosure. */
html[data-lang="en"] .orig [lang="es"] { display: block !important; }
html[data-lang="es"] .only-en { display: none; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--bg); padding: .5rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; }

.wrap { width: min(100% - 2 * var(--gap), var(--max)); margin-inline: auto; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.brand {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; text-decoration: none;
  font: 400 1.125rem/1 var(--font-display); color: var(--accent); letter-spacing: .02em;
}
.brand img { width: 2.25rem; height: auto; }
.brand span { white-space: nowrap; }
.brand:hover span { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.header-actions { display: flex; align-items: center; gap: .75rem; }

.lang-toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); padding: 3px; }
.lang-toggle button {
  font: 500 .8125rem/1 var(--font-display); letter-spacing: .04em;
  border: 0; background: transparent; color: var(--muted);
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 .7rem; border-radius: 999px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.lang-toggle button:hover { color: var(--ink); }
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .75rem 1.6rem;
  border-radius: var(--pill); border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink);
  font: 500 1rem/1 var(--font-display); letter-spacing: .01em; text-decoration: none;
  box-shadow: 0 1px 2px rgb(20 38 36 / .12), inset 0 1px 0 rgb(255 255 255 / .12);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { background: #185a54; border-color: #185a54; box-shadow: 0 6px 16px -6px rgb(31 111 103 / .55); }
.btn:active { transform: scale(.97); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px rgb(20 38 36 / .05); }
.btn--ghost:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); box-shadow: 0 1px 2px rgb(20 38 36 / .05); }
.btn--small { min-height: 2.75rem; padding: .5rem 1.15rem; font-size: .9375rem; }

.link { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }

/* Hero: text left, the practitioner at work right */
.hero { padding-block: clamp(1.5rem, 6vw, 6rem) clamp(3rem, 8vw, 6.5rem); }
.hero__grid { display: grid; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
@media (min-width: 52rem) { .hero__grid { grid-template-columns: 1fr 28rem; } }
.hero h1 {
  font: 300 clamp(2.375rem, 6vw, 4.25rem)/1.05 var(--font-display);
  letter-spacing: -.015em; margin: 0 0 1.25rem; max-width: 15ch; text-wrap: balance;
}
.lede { font-size: clamp(1.0625rem, 1.8vw, 1.25rem); max-width: 38ch; margin: 0 0 2rem; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.trust {
  list-style: none; margin: 2.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.trust li { display: grid; gap: .2rem; align-content: start; font-size: .875rem; line-height: 1.35; color: var(--muted); }
.trust strong { font: 400 1.5rem/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.flags { display: flex; align-items: center; gap: .4rem; height: 1.65rem; }
.flag { width: 1.65rem; height: 1.1rem; border-radius: 3px; box-shadow: 0 0 0 1px rgb(20 38 36 / .1); }
.hero__photo { margin: 0; }
.hero__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.hero__photo figcaption { margin-top: .6rem; font-size: .875rem; color: var(--muted); }
@media (max-width: 51.99rem) {
  .hero__photo { order: -1; }
  .hero__photo img { aspect-ratio: 5 / 4; object-position: 50% 0; }
}

/* Lead quote */
.lead-quote { padding-block: clamp(3.5rem, 9vw, 6.5rem); border-block: 1px solid var(--line); background: var(--surface); }
.lead-quote { text-align: center; }
.lead-quote figure { margin: 0 auto; max-width: 48rem; }
.lead-quote .translation { margin-inline: auto; }
.lead-quote blockquote {
  margin: 0; font: 300 clamp(1.5rem, 3.4vw, 2.25rem)/1.25 var(--font-display); text-wrap: pretty;
}
.orig { margin-top: .75rem; font-size: .875rem; color: var(--muted); }
.orig summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; cursor: pointer; list-style: none; }
.orig summary::-webkit-details-marker { display: none; }
.orig summary span { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.orig summary:hover span { text-decoration-thickness: 2px; }
.orig[open] summary span { display: none; }
.orig blockquote { margin: 0; font: italic 400 1rem/1.5 var(--font-body); color: var(--muted); }
.lead-quote .orig blockquote { font-size: 1.0625rem; }
.lead-quote figcaption, .review figcaption { margin-top: 1rem; font-size: .875rem; color: var(--muted); }

/* Sections */
section { padding-block: var(--section); }
.section-head { margin: 0 auto clamp(2.5rem, 6vw, 4rem); max-width: 42rem; text-align: center; }
.section-head p { margin: 0 auto; max-width: 56ch; }
h2 { font: 300 clamp(2rem, 4.5vw, 3rem)/1.1 var(--font-display); margin: 0 0 1rem; letter-spacing: -.01em; text-wrap: balance; }
h3 { font: 500 1.25rem/1.3 var(--font-display); margin: 0 0 .75rem; color: var(--accent); }
.muted { color: var(--muted); }

/* Team */
.team__grid { display: grid; gap: clamp(1.75rem, 5vw, 4rem); align-items: start; }
@media (min-width: 52rem) { .team__grid { grid-template-columns: 1fr 24rem; } }
.team__grid { align-items: center; }
.team__list { list-style: none; margin: 1.75rem 0 1.25rem; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 36rem) { .team__list { grid-template-columns: 1fr 1fr; } }
.team__list li {
  display: grid; gap: .25rem; align-content: start; padding: 1.1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.team__list strong { font: 500 1.125rem/1.3 var(--font-display); }
.team__list li > span { color: var(--muted); }
.team__photo { margin: 0; }
.team__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.team__photo figcaption { margin-top: .6rem; font-size: .875rem; color: var(--muted); }

/* Treatments and prices: one collapsible list per category */
.menu__photos { list-style: none; margin: 0 0 clamp(2.5rem, 6vw, 4rem); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.5rem, 2vw, 1.25rem); }
.menu__photos a { display: block; text-decoration: none; }
.menu__photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); transition: opacity .15s ease; }
.menu__photos a:hover img { opacity: .88; }
.menu__photos span { display: block; margin-top: .6rem; font: 400 1rem/1.3 var(--font-display); color: var(--accent); }
.menu__photos a:hover span { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (max-width: 30rem) { .menu__photos span { font-size: .875rem; } }
.menu { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 52rem) { .menu { grid-template-columns: 1fr 1fr; } }
.menu__group {
  padding: 0 1.5rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .15s ease;
}
.menu__group:hover, .menu__group[open] { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.menu__group summary {
  display: flex; align-items: center; gap: .75rem; min-height: 4rem; padding-block: .75rem;
  cursor: pointer; list-style: none;
}
.menu__group summary::-webkit-details-marker { display: none; }
.menu__group summary h3 { margin: 0; flex: 1; }
.menu__group summary::after {
  content: ""; width: .6rem; height: .6rem; margin-right: .25rem;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: translateY(-25%) rotate(45deg); transition: transform .2s ease;
}
.menu__group[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.menu__group summary:hover h3 { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.menu__count { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); padding: .2rem .6rem; }
.menu__note { margin: 0 0 .5rem; font-size: .9375rem; color: var(--muted); }
.menu__group ul { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.menu__group li:last-child { border-bottom: 0; }
.menu__group li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.price { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .menu__group summary::after { transition: none; } }
.groups__ask { margin: 2rem 0 0; text-align: center; }

/* Reviews */
#treatments { background: var(--surface); border-block: 1px solid var(--line); }
.visit { border-top: 1px solid var(--line); }
.reviews { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review {
  margin: 0; padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.review figcaption { margin-top: auto; padding-top: 1.25rem; }
.review blockquote { margin: 0; font: 400 1.1875rem/1.4 var(--font-display); }

/* Visit: the prescription pad */
.visit__grid { display: grid; gap: var(--gap); align-items: stretch; }
@media (min-width: 52rem) { .visit__grid { grid-template-columns: minmax(0, 1.1fr) 1fr; gap: clamp(2rem, 5vw, 4rem); } }
.pad { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow); }
.pad__head {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem;
  background: var(--brand); color: #fff; padding: 1.25rem clamp(1.25rem, 4vw, 2rem); min-height: 6.5rem;
}
.pad__facets { position: absolute; inset: 0; width: 100%; height: 100%; }
.pad__facets path { fill: none; stroke: rgb(255 255 255 / .28); stroke-width: 3; vector-effect: non-scaling-stroke; }
.pad__logo { position: relative; width: 3.5rem; height: 3.5rem; object-fit: contain; background: #fff; border-radius: 50%; padding: .35rem; }
.pad__head h2 { position: relative; margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.pad__body { padding: clamp(1.5rem, 4vw, 2.25rem); flex: 1; }
.pad__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }
.pad dl { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.5rem; margin: 0; }
.pad dt { color: var(--muted); }
.pad dd { margin: 0; font-variant-numeric: tabular-nums; }
.pad dd a { display: inline-block; padding-block: .6rem; margin-block: -.6rem; text-underline-offset: .2em; }
.pad__rule { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.pad__rule .link { display: inline-block; padding-block: .6rem; margin-block: -.6rem; }
.pad__foot {
  margin: 0; padding: .9rem clamp(1.25rem, 4vw, 2rem); border-top: 1px solid var(--line);
  font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
@media (max-width: 30rem) { .pad dl { grid-template-columns: 1fr; gap: .15rem; } .pad dd { margin-bottom: .75rem; } }
.map { width: 100%; min-height: 20rem; height: 100%; border: 0; border-radius: var(--radius-lg); background: var(--line); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 2.5rem 7rem; font-size: .875rem; color: var(--muted); }
.sign { margin: 0 0 1.25rem; font: 300 1.375rem/1.2 var(--font-display); color: var(--accent); }
.site-footer__meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
@media (min-width: 46rem) { .site-footer { padding-bottom: 2.5rem; } }

/* Sticky mobile action bar */
.action-bar {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem;
  padding: .6rem var(--gap) calc(.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.action-bar .btn { padding-inline: .5rem; }
/* hidden while the hero's own buttons are on screen (JS adds .bar-off); no JS = always visible */
.action-bar { transition: transform .25s cubic-bezier(.2, .8, .2, 1), visibility .25s; }
.bar-off .action-bar { transform: translateY(100%); visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .action-bar { transition: none; } }
@media (min-width: 46rem) { .action-bar { display: none; } }

/* Demo banner: remove when the site goes live */
.demo-banner {
  background: var(--ink); color: var(--bg);
  font-size: .8125rem; text-align: center; padding: .5rem var(--gap);
}