@import url("../assets/base.css");

/*
  V5-v2 — Vitrina, restructured
  Copy of v5-vitrina-v2, edited from here on. The preserved baseline lives
  in "v5-vitrina original color" (kept by the user) and in v5-vitrina/
  (last known-good state before this round) - neither is touched by this
  file. See F:\Cosicas\ISAACCASAS\DESIGN.md and PRODUCT.md for the shared
  system; this file documents only where V5-v2 diverges from it.

  PALETTE (2026-08-15, inherited from v5-vitrina): one primary blue
  (Primary 700 #103772) for nearly everything structural, a darker blue
  (Primary 900 #0B234A) for the deepest fields, coral (#E47255) spent only
  on the primary CTA, gold (#E5C254) for small details, gray text, cool
  near-white backgrounds. V1-V4 and the shared assets/base.css keep the
  original warm palette untouched.

  2026-08-16 CHANGE: every --ivory background is now --sand. Rather than
  hunting each declaration, --ivory itself is redefined below to sand's
  own value, so every existing var(--ivory) usage (page background, the
  hero badge, the contact card, etc.) picks it up automatically.

  2026-08-16 STRUCTURE: "Àrees de treball" is no longer three short cards.
  It is three full text+image blocks (mini-title above each title), styled
  like the old psicoteràpia section. "Àrees de tractament" now lives right
  inside that same section as a direct continuation. A new "Sobre mi"
  section (full bio, new text) sits below it. Contact is unchanged. The
  old top trust-band (small Consulta/Contacte cards under the hero) is
  removed since Sobre mi now carries that role further down the page.
*/
:root {
 
  --real-ivory: #F5F6F7;
  --ivory: #F3F7FC;
  --sand: #F3F7FC;
  --oat: #DCE7F6;
  --oat-soft: #E7EEF9;
  --oat-deep: #ACB4C0;
  --ink: #555C67;
  --ink-soft: #5E646F;

  --navy: #103772;
  --navy-soft: #103772;
  --navy-deep: #0B234A;
  --blue-dust: #8BA8D4;
  --blue-dust-deep: #7890B6;
  --blue-deep: #103772;
  --blue-deeper: #0B234A;

  --coral: #E47255;
  --coral-deep: #AD5741;
  --coral-mid: #C8644B;
  --coral-eyebrow: #BA5E46;
  --gold: #E5C254;

  --header-h: 86px;
}

/* Anchor-link scroll offset: without this, jumping to a section (nav
   links, #hash URLs) lands with its top hidden under the sticky header.
   --header-h tracks the header's real rendered height per breakpoint
   (redefined inside the mobile query below, where the header is shorter). */
#inici, #arees-de-treball, #families, #tractament, #sobre-mi, #contacte {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* assets/base.css has a few hardcoded rgba(23,50,79,…) values (the old
   navy's literal RGB) and a coral focus ring/button — those don't follow
   the --navy variable, so they need the same local override here. */
:focus-visible { outline-color: var(--navy); }
.btn-primary { background: var(--coral); box-shadow: 0 10px 24px -14px rgba(228, 114, 85, 0.55); }
.btn-primary:hover { background: var(--coral-deep); box-shadow: 0 16px 32px -14px rgba(228, 114, 85, 0.5); }
.btn-ghost { border-color: rgba(16, 55, 114, 0.3); }
.btn-ghost:hover { background: rgba(16, 55, 114, 0.06); }
.lang-switch { background: rgba(16, 55, 114, 0.07); position: relative; gap: 0; }
.lang-indicator { display: none; }
/* Sliding active-language pill: pure CSS via :has(), no JS beyond the
   existing is-active class toggle already in site.js. */
@supports selector(:has(a)) {
  .lang-indicator {
    display: block;
    position: absolute;
    top: 0.2rem; bottom: 0.2rem; left: 0.2rem;
    width: calc((100% - 0.4rem) / 3);
    border-radius: var(--r-pill);
    background: var(--navy);
    transition: transform 220ms var(--ease-in-out);
  }
  .lang-switch button { position: relative; z-index: 1; background: transparent !important; }
  .lang-switch:has(button:nth-of-type(2).is-active) .lang-indicator { transform: translateX(100%); }
  .lang-switch:has(button:nth-of-type(3).is-active) .lang-indicator { transform: translateX(200%); }
  @media (prefers-reduced-motion: reduce) {
    .lang-indicator { transition: none; }
  }
}
.chip { border-color: rgba(16, 55, 114, 0.16); }
.site-footer { background: var(--oat-soft); border-top-color: rgba(16, 55, 114, 0.12); }
.media-note { background: rgba(243, 247, 252, 0.9); }
.media-block.tone-navy { background: var(--navy-deep); }

/* Translucent, blurred sticky header: reads as a pane of frosted glass
   over whatever scrolls beneath it, rather than a flat opaque bar. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(231, 238, 249, 0.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(16, 55, 114, 0.1);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--oat-soft); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--oat-soft); }
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.35rem; position: relative; }
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand-mark { height: 42px; width: auto; transition: transform 200ms var(--ease-out); }
.brand:hover .brand-mark, .brand:focus-visible .brand-mark { transform: scale(1.08) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) { .brand-mark { transition: none; } }
.brand-text { display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.05; color: var(--navy); white-space: nowrap; }
.brand-role { font-size: 0.78rem; line-height: 1.15; color: var(--ink-soft); }
.nav-links { display: flex; gap: 1.9rem; }
.nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--navy-soft); text-decoration: none; position: relative; padding-bottom: 3px; white-space: nowrap; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--navy); transition: right 220ms var(--ease-out); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }
.nav-right { display: flex; align-items: center; gap: 1rem; }
.btn-sm { padding: 0.55rem 1.15rem; font-size: 0.82rem; }
.nav-call-icon { display: none; }
.hamburger { display: none; }
.mobile-nav { display: none; }

/* ---------- Frame (signature component) ---------- */
/* The mat is gone: the photo itself fills the full frame footprint. Plate
   captions are gone too (real photography has landed), so the frame is
   now just the image - nothing sits below it. */
.frame { margin: 0; position: relative; }
.frame .media-block { width: 100%; border-radius: var(--r-lg); }
/* Real photos: drop the placeholder's flat tone and diagonal hairline
   texture (that's a stand-in device for the still-empty slots, not
   meant to show through an actual photograph), and crop to the frame's
   aspect ratio instead of stretching. */
.media-block.has-photo { display: block; background: none; object-fit: cover; object-position: center; }
.media-block.has-photo::after { content: none; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.75rem, 5vw, 4.5rem); background-color: var(--sand); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.eyebrow, .block-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral-eyebrow); }
.eyebrow { margin-bottom: 1.1rem; }
.block-eyebrow { margin-bottom: 0.6rem; }
.hero-title { font-size: clamp(2.5rem, 3.2vw + 1rem, 4.3rem); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 1.4rem; }
.hero-title em { font-style: normal; color: var(--blue-deep); }
.hero-lead { color: var(--ink-soft); font-size: 1.1rem; margin-bottom: 1.9rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-frame .media-block { aspect-ratio: 3 / 4; }
.hero-badge {
  position: absolute; z-index: 2; left: -0.8rem; top: 1.4rem;
  background: var(--ivory); border-radius: var(--r-md);
  padding: 0.85rem 1rem; box-shadow: 0 20px 40px -18px rgba(16, 55, 114, 0.38);
  display: flex; flex-direction: column; gap: 0.1rem; max-width: 104px;
}
.hero-badge strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--navy); line-height: 1; }
.hero-badge span { font-size: 0.7rem; line-height: 1.25; color: var(--ink-soft); }

/* ---------- Section heads ---------- */
.section-pad { padding-block: var(--section-pad); }
.section-head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head h2 { font-size: clamp(1.9rem, 1.6vw + 1.2rem, 2.7rem); font-weight: 500; margin-bottom: 0.85rem; }
.section-dek { color: var(--ink-soft); font-size: 1.05rem; }
.areas.section-pad { background-color: var(--sand); padding-top: 0; }
.areas.section-pad > .shell { border-top: 1px solid rgba(16, 55, 114, 0.14); padding-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Detail blocks (Àrees de treball) ---------- */
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; margin-bottom: clamp(4rem, 7vw, 6rem); }
.detail:last-child { margin-bottom: 0; }
.detail--reverse .detail-copy { order: 2; }
.detail--reverse .frame { order: 1; }
.detail-copy h2, .detail-copy h3 { font-size: clamp(1.7rem, 1.5vw + 1rem, 2.3rem); margin-bottom: 1.2rem; }
.detail-body p { color: var(--ink-soft); }
.detail-list { margin-top: 1.3rem; display: grid; gap: 0.65rem; }
.detail-list li { position: relative; padding-left: 1.4rem; color: var(--ink-soft); font-size: 0.97rem; }
.detail-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }

.detail .frame .media-block { aspect-ratio: 6 / 5; }

/* ---------- Àrees de tractament (continuation, same section as above) ---------- */
/* No card background here, by request: the lists sit straight on the page.
   The two columns stay deliberately different widths, since the two lists
   are different lengths (4 items vs 10). The longer list runs in two
   internal columns so it doesn't read as one long scroll. */
.treatment-continuation { padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid rgba(16, 55, 114, 0.14); }
.treatment-continuation .section-head { max-width: none; }
.treatment-continuation .section-dek { text-align: justify; max-width: none; }
.treatment-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.treatment-group h3 { font-size: 1.05rem; margin-bottom: 1.1rem; color: var(--navy); }
.treatment-list { margin: 0; }
.treatment-list li { position: relative; padding-left: 1.4rem; color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 0.65rem; break-inside: avoid; }
.treatment-list li:last-child { margin-bottom: 0; }
.treatment-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.treatment-list--split { columns: 2; column-gap: 1.75rem; }

/* ---------- Sobre mi (no paired photo: a bio card plus a compact
   credentials card instead, so the section still reads as boxes) ---------- */
.about-solo { padding-top: 0; }
.about-solo > .shell { border-top: 1px solid rgba(16, 55, 114, 0.14); padding-top: clamp(2.5rem, 5vw, 4rem); }
.about-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.about-card { background: var(--real-ivory); border: 1px solid rgba(16, 55, 114, 0.14); border-radius: var(--r-lg); padding: clamp(2rem, 3vw, 2.75rem); }
.about-card .detail-body p { color: var(--ink-soft); }
.about-highlights { background: var(--real-ivory); color: var(--ink-soft); border: 1px solid rgba(16, 55, 114, 0.14); border-radius: var(--r-lg); padding: clamp(1.8rem, 2.8vw, 2.4rem); }
.about-highlights h3 { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 1.2rem; }
.highlights-list { display: grid; gap: 0.9rem; }
.highlights-list li { position: relative; padding-left: 1.4rem; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.4; }
.highlights-list li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }

/* ---------- Motion: list items step in once their group scrolls into
   view, reusing the existing [data-reveal]/.is-visible toggle (no new JS:
   .treatment-group and .about-highlights already carry data-reveal). Each
   item follows the one before it by 45ms, storytelling the list rather
   than dropping it in as one flat block. ---------- */
.treatment-list li, .highlights-list li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.treatment-group.is-visible .treatment-list li,
.about-highlights.is-visible .highlights-list li {
  opacity: 1;
  transform: translateY(0);
}
.treatment-list li:nth-child(1), .highlights-list li:nth-child(1) { transition-delay: 40ms; }
.treatment-list li:nth-child(2), .highlights-list li:nth-child(2) { transition-delay: 85ms; }
.treatment-list li:nth-child(3), .highlights-list li:nth-child(3) { transition-delay: 130ms; }
.treatment-list li:nth-child(4), .highlights-list li:nth-child(4) { transition-delay: 175ms; }
.treatment-list li:nth-child(5) { transition-delay: 220ms; }
.treatment-list li:nth-child(6) { transition-delay: 265ms; }
.treatment-list li:nth-child(7) { transition-delay: 310ms; }
.treatment-list li:nth-child(8) { transition-delay: 355ms; }
.treatment-list li:nth-child(9) { transition-delay: 400ms; }
.treatment-list li:nth-child(10) { transition-delay: 445ms; }
@media (prefers-reduced-motion: reduce) {
  .treatment-list li, .highlights-list li { opacity: 1; transform: none; transition: none; }
}

/* ---------- Contact ---------- */
.contact { background: var(--oat); padding-top: 0; }
.contact > .shell { border-top: 1px solid rgba(16, 55, 114, 0.14); padding-top: clamp(2.5rem, 5vw, 4rem); }
.contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 4vw, 4rem); align-items: start; }
.contact-title { font-size: clamp(1.9rem, 1.6vw + 1.2rem, 2.6rem); margin-bottom: 0.9rem; }
.contact-lead { color: var(--ink-soft); margin-bottom: 1.6rem; }
.contact-card { background: var(--real-ivory); border: 1px solid rgba(16, 55, 114, 0.14); border-radius: var(--r-lg); padding: clamp(1.5rem, 2.4vw, 2.1rem); }
.contact-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 1.1rem 1.5rem; }
.contact-list li { display: flex; gap: 0.9rem; align-items: flex-start; min-width: 0; }
.contact-list li > span:last-child { min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.contact-list svg { color: var(--blue-deep); flex-shrink: 0; margin-top: 0.15rem; transition: color 200ms ease, transform 200ms var(--ease-out); }
.contact-list li:hover svg { color: var(--navy-deep); transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .contact-list svg { transition: none; } .contact-list li:hover svg { transform: none; } }
.contact-label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); margin-bottom: 0.2rem; }
.contact-list a { color: var(--navy); text-decoration: none; font-weight: 600; }
.contact-list a:hover { color: var(--navy-deep); }
.contact-list address { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.35; }
.map-link { display: inline-block; margin-top: 0.2rem; font-size: 0.85rem; font-weight: 600; color: var(--navy) !important; text-decoration: none; }
.map-link:hover { text-decoration: underline; }

/* ---------- Footer legal links ---------- */
.footer-legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
/* Tablet/phone breakpoint moved from 1080px to 767px: at 1080px, iPad
   portrait (768px) was getting the same single-column, nav-hidden,
   badge-static treatment as a phone, while iPad landscape (>=1024px in
   most models) cleared 1080px and got the desktop layout - an
   inconsistent split within the same device. 767px means "phone only"
   gets the collapsed layout; any iPad, either orientation, renders like
   desktop. The hero-badge no longer gets a static/stacked fallback at
   any width, so it stays absolute and overlapping the photo everywhere
   (its base rule, above, already sets position: absolute). */
/* iPad-portrait widths (768-1023px) keep the full desktop nav visible
   (per the breakpoint move above) but have less room for it than actual
   desktop - at the desktop spacing, .nav-links didn't fit and its own
   links wrapped internally, ballooning the header. Tightened here rather
   than at 1024px+, so real desktop stays untouched. */
@media (max-width: 1023px) {
  .nav { gap: 1rem; }
  .nav-links { gap: 1.1rem; }
  .nav-links a { font-size: 0.85rem; }
}
/* Both breakpoints below also fire on "short and wide" viewports (max-height
   500px in landscape) so a phone in landscape gets the exact same header as
   in portrait. Width alone isn't enough: phones in landscape commonly land
   between 650-930px wide, which used to hide .nav-links (≤767px rule) while
   still being narrower than where the hamburger appeared (≤640px only) -
   a dead zone with no way to reach the nav at all. iPads in landscape are
   safely excluded: their shortest edge (768px+) is well above the 500px
   height threshold, so they still get the desktop-style header. */
@media (max-width: 767px), (max-height: 500px) and (orientation: landscape) {
  .hero-grid, .detail, .contact-grid { grid-template-columns: 1fr; }
  .detail .frame { order: -1; }
  .detail--reverse .detail-copy { order: initial; }
  .detail--reverse .frame { order: -1; }
  .treatment-grid, .about-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .nav-links { display: none; }

  /* The hamburger/mobile-nav swap-in lives at this same breakpoint as
     .nav-links hiding above (not the narrower 640px tier below) - they
     used to be on different breakpoints, which left a real dead zone
     (641-767px width) where .nav-links was already hidden but the
     hamburger hadn't appeared yet: no way to reach the nav at all. */
  :root { --header-h: 86px; }
  .nav-call { display: none; }

  .hamburger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 40px; height: 40px; padding: 0; border: none; background: transparent; cursor: pointer; flex-shrink: 0;
  }
  .hamburger-bar { width: 20px; height: 2px; background: var(--coral); border-radius: 2px; transition: transform 200ms var(--ease-in-out), opacity 150ms ease; }
  .hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) { .hamburger-bar { transition: none; } }

  .mobile-nav {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--oat-soft);
    border-bottom: 1px solid rgba(16, 55, 114, 0.14);
    box-shadow: 0 16px 32px -18px rgba(16, 55, 114, 0.3);
    padding: 0.25rem var(--edge) 0.75rem;
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity 180ms ease-out, transform 180ms var(--ease-out);
  }
  .mobile-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .mobile-nav a {
    padding: 0.9rem 0; font-size: 1.02rem; font-weight: 500;
    color: var(--navy-soft); text-decoration: none;
    border-bottom: 1px solid rgba(16, 55, 114, 0.08);
  }
  .mobile-nav a:last-child { border-bottom: none; }
  @media (prefers-reduced-motion: reduce) {
    .mobile-nav { transition: opacity 150ms ease; transform: none; }
  }
}
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .treatment-list--split { columns: 1; }
  .contact-list { grid-template-columns: 1fr; }

  /* Header at phone widths: only the logo mark stays (brand text dropped
     entirely - name + role together didn't leave room for the lang pills
     and hamburger without crowding). */
  :root { --header-h: 64px; }
  .nav { gap: 0.4rem; padding-block: 0.7rem; }
  .brand { gap: 0; }
  .brand-mark { height: 36px; }
  .brand-text { display: none; }
  .nav-right { gap: 0.4rem; }
  .lang-switch button { padding: 0.6rem 0.55rem; }
}