/* ============================================================
   Susana Sadej - CSS globale del tema.

   Portato dalla demo in _knowledge-base/demo/ senza rinominare le classi:
   colors_and_type.css (intero), site.css e home-extra.css (le sole regole
   condivise da piu' di un blocco). Cio' che serve a un blocco solo sta nel
   blocco. I font non arrivano piu' da Google: sono self-hosted e dichiarati
   nei fontFace di theme.json.
   ============================================================ */

/* ============================================================
   SUSANA SADEJ BROKERS INMOBILIARIOS — Foundations
   Colors + Type tokens. Import this in every artifact.
   Fonts self-hosted: vedi i fontFace in theme.json.
   ============================================================ */


:root {
  /* ---------- BRAND COLOR ---------- */
  /* Navy is the single brand color. Sampled from the signature logo
     (#1E3058) and the Instagram navy bar (#19396B). */
  --navy-900: #11203A;   /* deepest — backgrounds, footer */
  --navy-800: #182B49;
  --navy-700: #1E3A5F;   /* PRIMARY brand navy */
  --navy-600: #2C4D74;
  --navy-500: #3D618B;   /* hover lift on navy fills */
  --navy-300: #8DA2BD;   /* muted navy text on light */
  --navy-100: #D7DEE9;   /* hairline / dividers on light */
  --navy-050: #EDF1F6;   /* tint fill, selected chips */

  /* ---------- NEUTRALS (warm paper) ---------- */
  /* Warm off-whites give the "accessible, not cold" feel. */
  --paper:     #F4F5F6;  /* default page background */
  --paper-alt: #F4F5F6;  /* lighter section / card-on-paper */
  --white:     #FFFFFF;  /* cards, inputs */
  --ink-900:   #1C2733;  /* primary body text (warm near-black) */
  --ink-600:   #5B6675;  /* secondary text */
  --ink-400:   #8B95A3;  /* tertiary / captions / placeholder */
  --line:      #E6E1D8;  /* warm hairline border on paper */
  --line-soft: #EFEBE3;  /* faint internal dividers */

  /* ---------- ACCENT (single, restrained) ---------- */
  /* CHOSEN ACCENT: Terracotta — warm, human, gives character without "luxury".
     Used ONLY for small emphasis: active indicators, tiny labels, the script
     accent ink, link underlines, the lead-member ring. Never large fills —
     navy stays the hero.
     (Token names kept as --arena-* so the value change propagates everywhere.)

     ALTERNATE PALETTES kept on file as reference (see preview/colors-navy.html):
       A · Arena (sand)   600 #A9885E  500 #C2A878  100 #EEE5D6
       C · Verde salvia   600 #5F7D63  500 #86A187  100 #E3EAE2
       D · Azul Delta     600 #2F7E8C  500 #5BA3AE  100 #DCEBEC
  */
  --arena-600: #B85C3C;  /* terracotta — accent text / icons */
  --arena-500: #CC7A5A;  /* terracotta — accent line / underline / ring */
  --arena-100: #F1DDD3;  /* terracotta — faint accent tint background */

  /* ---------- LADRILLO (brick CTA palette) ---------- */
  --ladrillo:       #8A4B34;  /* brick — CTA fills (wood-leaning, not orange) */
  --ladrillo-hover: #743E2B;  /* brick — CTA hover */
  --cta-arrow:      #B85C3C;  /* orange — CTA arrow glyphs only */

  /* ---------- SEMANTIC ---------- */
  --bg:            var(--paper);
  --bg-elevated:   var(--white);
  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-600);
  --fg-subtle:     var(--ink-400);
  --brand:         var(--navy-700);
  --brand-strong:  var(--navy-900);
  --accent:        var(--arena-600);
  --border:        var(--line);

  /* operation badges */
  --op-venta:      var(--navy-700);
  --op-alquiler:   var(--arena-600);

  /* ---------- TYPE FAMILIES ---------- */
  /* Unified: Hanken Grotesk for BOTH headings and body — contrast by weight,
     not family. (Token --font-serif kept as the "heading" alias so all
     existing references resolve to the grotesk automatically.) */
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* headings */
  --font-serif:  var(--font-display);                                /* legacy alias = display */
  --font-sans:   'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* UI + body */
  --font-script: 'Sacramento', 'Snell Roundhand', cursive;          /* accent words only */

  /* ---------- TYPE SCALE (clamped, fluid) ---------- */
  --t-display:  clamp(2.8rem, 1.6rem + 5.2vw, 5.5rem);   /* hero */
  --t-h1:       clamp(2.2rem, 1.4rem + 3.4vw, 3.75rem);
  --t-h2:       clamp(1.7rem, 1.2rem + 2.1vw, 2.6rem);
  --t-h3:       clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem);
  --t-h4:       1.25rem;
  --t-lead:     clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
  --t-body:     1.0625rem;   /* 17px */
  --t-small:    0.9375rem;   /* 15px */
  --t-caption:  0.8125rem;   /* 13px */
  --t-eyebrow:  0.75rem;     /* 12px, tracked uppercase */

  /* ---------- RADII ---------- */
  --r-sm:  8px;
  --r-md:  14px;   /* cards */
  --r-lg:  22px;   /* large panels / images */
  --r-pill: 999px; /* buttons, badges, chips */

  /* ---------- ELEVATION ---------- */
  /* FLAT SYSTEM — no drop shadows anywhere. Separation comes from hairline
     --line borders and warm-paper background steps. Hover = border/background
     change, never a lift. The ONLY depth effect allowed is the glass blur
     (backdrop-filter) below, and even that carries no drop shadow.
     Tokens kept (= none) so any legacy var(--shadow-*) reference stays flat. */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-glass: none;

  /* ---------- GLASS (the effect the client liked) ---------- */
  --glass-light-bg: rgba(255, 255, 255, 0.62);
  --glass-light-bd: rgba(255, 255, 255, 0.55);
  --glass-dark-bg:  rgba(17, 32, 58, 0.42);
  --glass-dark-bd:  rgba(255, 255, 255, 0.18);
  --glass-blur:     saturate(140%) blur(18px);

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* gentle, no bounce */
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 560ms;

  --container: 1200px;
  --container-wide: 1360px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — opt-in via .ss-prose or direct use
   ============================================================ */

.ss-display {
  font-family: var(--font-serif);
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--fg);
  text-wrap: balance;
}
h1, .ss-h1 {
  font-family: var(--font-serif);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h2, .ss-h2 {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h3, .ss-h3 {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
h4, .ss-h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.ss-lead {
  font-family: var(--font-sans);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-muted);
}
.ss-script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--accent);
  line-height: 0.9;
}
.ss-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.ss-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  color: var(--fg-subtle);
}

body, .ss-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg);
}


/* ============================================================
   site.css - kit UI condiviso (righe 1-51, 98-124, 171-209, 345-352)
   ============================================================ */

/* Susana Sadej — website UI kit styles. Loads after colors_and_type.css */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
/* Fuori dalla demo: le scritte a mano (feat-script-img, team-script-img, sv-diff-script, ct-hero-script...)
   sbordano a destra di proposito e sotto i 400px facevano scorrere la pagina in orizzontale.
   Servono entrambe le regole: il valore di html viene propagato alla viewport, che ignora clip (Chromium);
   con html non "visible" il valore di body non viene propagato e resta su body, che taglia davvero.
   clip non crea un contenitore di scroll, cosi' la barra filtri sticky del listado resta sticky.
   hidden su html e' il fallback per i browser senza clip. Mai `html, body { overflow-x: hidden }`: rompe lo sticky. */
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.ic { color: currentColor; }
.ic svg { width: 100%; height: 100%; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.section { padding: var(--sp-9) 0; }
@media (max-width: 720px){ .section { padding: var(--sp-8) 0; } .container { padding: 0 20px; } }

/* ============ GLASS ============ */
.glass-light { background: var(--glass-light-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-light-bd); }
.glass-dark { background: var(--glass-dark-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-dark-bd); }

/* ============ BUTTONS ============ */
.btn-label { white-space: nowrap; }
.btn { display: inline-flex; align-items: center; gap: 14px; border: 0; cursor: pointer; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-weight: 600; font-size: .95rem; letter-spacing: .005em; line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; position: relative; overflow: hidden; transition: background var(--dur) var(--ease); }
.btn-primary { background: var(--navy-700); color: #fff; }
.btn-primary .btn-ic { background: rgba(255,255,255,.16); }
.btn-primary:hover { background: var(--navy-800); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--navy-700); box-shadow: inset 0 0 0 1.5px var(--navy-100); }
.btn-ghost .btn-ic { background: var(--navy-050); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy-300); }
.btn-light { background: #fff; color: var(--navy-800); }
.btn-light .btn-ic { background: var(--arena-100); color: var(--arena-600); }
.btn-light:hover { box-shadow: var(--shadow-lg); }
.btn[style*="padding: 0"] .btn-ic { width: 46px; height: 46px; }

.round-ic { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; color: var(--navy-700); border: 0; }
.round-ic.is-fav { color: #fff; background: var(--navy-700); }

/* ============ EYEBROW / HEADINGS ============ */
.eyebrow-row { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow-tick { width: 22px; height: 1.5px; background: var(--arena-500); display: inline-block; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: var(--sp-7); }
.section-head.is-center { flex-direction: column; align-items: center; text-align: center; }
.section-head.is-center .section-lead { max-width: 620px; margin-top: 26px; }
.section-head.is-center .section-title { line-height: 1.42; }
.section-title { margin: 14px 0 0; font-family: var(--font-serif); font-size: var(--t-h2); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; }
.section-script { font-size: 1.05em; line-height: 1; }
.section-lead { margin: 20px 0 0; max-width: 560px; }
.section-head-action { flex: none; padding-bottom: 6px; }

/* ---- Conveyor-belt arrow hover (shared by all circle+arrow buttons) ---- */
/* enforce arrow-circle padding (4px only on the right) over any stray inline edits */
.navbar-cta, .feat-cta { padding: 0 4px 0 24px !important; }
.navbar-cta-ic, .feat-cta-ic, .btn-ic { position: relative; overflow: hidden; color: #fff; }
.navbar-cta-ic .arrow-1, .navbar-cta-ic .arrow-2,
.feat-cta-ic .arrow-1, .feat-cta-ic .arrow-2,
.btn-ic .arrow-1, .btn-ic .arrow-2 {
  position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%); transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.navbar-cta-ic .arrow-2, .feat-cta-ic .arrow-2, .btn-ic .arrow-2 { transform: translate(calc(-50% - 42px), -50%); }
.navbar-cta:hover .navbar-cta-ic .arrow-1,
.feat-cta:hover .feat-cta-ic .arrow-1,
.btn:hover .btn-ic .arrow-1 { transform: translate(calc(-50% + 42px), -50%); }
.navbar-cta:hover .navbar-cta-ic .arrow-2,
.feat-cta:hover .feat-cta-ic .arrow-2,
.btn:hover .btn-ic .arrow-2 { transform: translate(-50%, -50%); }
@media (max-width: 1180px){
  .navbar-links { display: none; }
}
@media (max-width: 760px){
  .navbar-links { display: none; }
  .navbar-inner { padding: 0 10px 0 12px; height: 76px; }
  .navbar-logo { position: static; transform: none; width: auto; height: 46px; padding: 0; }
  .navbar-cta { padding: 0 4px 0 18px; }
}

/* ============================================================
   Componenti condivisi tra blocchi
   ------------------------------------------------------------
   Regole usate da piu' di un blocco: stavano nel CSS di un solo
   blocco e gli altri le trovavano solo per coincidenza di markup
   (stessa classe, nessuna garanzia che quel CSS fosse in pagina).
   ============================================================ */

/* .navbar-cta / .navbar-cta-ic - pillola CTA con doppia freccia.
   _knowledge-base/demo/site.css righe 52-97 (solo il pulsante, non la
   navbar in se'). L'hover delle frecce (arrow-1/arrow-2) e' gia' condiviso
   qui sopra insieme a .feat-cta-ic e .btn-ic (site.css righe 98-113).
   Usate da ss/hero, ss/work-method, ss/team, ss/cta-valuacion e ss/footer
   oltre che da ss/navbar. */
.navbar-cta { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 4px 0 24px;
  border-radius: 999px; background: #fff; color: #0A0B18; font-family: var(--font-sans); font-weight: 400; font-size: 15px;
  transition: background var(--dur) var(--ease); }
.navbar-cta:hover { background: rgba(255,255,255,.9); }
.navbar-cta-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--navy-700); color: #fff; position: relative; overflow: hidden; }

/* .feat-cta / .feat-cta-ic - variante navy della stessa pillola.
   _knowledge-base/demo/home-extra.css righe 234-255, esclusa .feat-script-img
   (variante testuale della scritta a mano, non usata dal markup dei blocchi).
   Usata da ss/featured-properties e da ss/home-search (.hsearch-go.feat-cta). */
.feat-cta { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 4px 0 24px;
  border-radius: 999px; background: var(--navy-700); color: #fff; font-family: var(--font-sans); font-weight: 400; font-size: 15px; white-space: nowrap;
  transition: background var(--dur) var(--ease); }
.feat-cta:hover { background: var(--navy-800); }
.feat-cta-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--navy-700);
  position: relative; overflow: hidden; }

/* .feat-arrow - frecce tonde dei carrusel.
   _knowledge-base/demo/home-extra.css righe 219-230. Era duplicata verbatim
   in ss/featured-properties e ss/testimonials: vive una volta sola qui. */
.feat-arrow { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line); color: var(--navy-700); cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.feat-arrow:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.feat-arrow:disabled { opacity: .35; cursor: default; }
.feat-arrow:disabled:hover { background: var(--white); border-color: var(--line); color: var(--navy-700); }

/* .prop-media-actions svg[hidden] - fuori dalla demo: alterna le due icone
   (share-2/check) del pulsante compartir stampate da
   Partials\property_card_glass(). Serve una regola d'autore perche' il
   foglio di stile del browser applica [hidden] ai soli elementi HTML, e
   serve !important perche' Partials\icon() scrive display:inline-flex
   nello style inline dell'SVG. Non scoped a .featured: il pulsante
   compartir vive in ogni card con questa azione, non solo li'. */
.prop-media-actions svg[hidden] { display: none !important; }

/* .yt-modal - finestra del video YouTube sopra la pagina, stampata da
   Partials\youtube_modal() e aperta da _shared/youtube-modal.js. Usata da
   ss/team-words (Short verticali) e da ss/home-video (video orizzontale,
   .yt-modal-wide): stava in team-words, che in home non c'e'.
   Il pannello segue il formato del video e si limita all'altezza della
   finestra, cosi' su desktop non esce dallo schermo: il 16/9 ha la larghezza
   legata all'altezza disponibile (100vh meno i 24px di padding per lato).
   Sta sopra la navbar (z-index 200) come il drawer dei filtri. */
.yt-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; }
.yt-modal[hidden] { display: none; }
.yt-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 22, 40, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.yt-modal-panel { position: relative; width: min(420px, 100%); max-height: 100%; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #0A1628; box-shadow: 0 24px 64px rgba(17, 32, 58, .38); }
.yt-modal-wide .yt-modal-panel { width: min(1100px, 100%, calc((100vh - 48px) * 16 / 9)); aspect-ratio: 16 / 9; }
.yt-modal-frame { position: absolute; inset: 0; }
.yt-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-modal-close { position: absolute; z-index: 2; top: 10px; right: 10px; width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #11203A; cursor: pointer; transition: background var(--dur) var(--ease); }
.yt-modal-close:hover { background: #fff; }

/* ============ PROPERTY GRID ============ */
.featured { padding-top: 140px; }
.prop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1080px){ .prop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .prop-grid { grid-template-columns: 1fr; } }
.prop-card { background: var(--white); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease); }
.prop-card:hover { border-color: var(--navy-300); }
.prop-media { position: relative; aspect-ratio: 4 / 3; background: var(--navy-050); }
.prop-media-top { position: absolute; inset: 12px 12px auto 12px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.prop-media-actions { display: flex; gap: 8px; pointer-events: auto; }
.op-badge { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--r-pill); font-size: var(--t-caption); font-weight: 600; color: #fff; letter-spacing: .02em; }
.op-venta { background: var(--op-venta); }
.op-alquiler { background: var(--op-alquiler); }
/* Demo del 2026-09-25: la chip di alquiler temporal e' bianca con testo navy, non piu' terracotta. */
.op-temporario { background: #fff; color: var(--navy-900); }
.prop-body { padding: 18px 18px 20px; }
.prop-loc { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-caption); color: var(--fg-muted); }
.prop-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; line-height: 1.25; margin: 8px 0 14px; letter-spacing: -.02em; }
.prop-specs { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.spec { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-small); color: var(--fg-muted); }
.prop-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.prop-price { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--navy-800); letter-spacing: -.02em; }
.prop-cod { font-size: var(--t-caption); color: var(--fg-subtle); }

/* ---- Property card · GLASS variant ---- */
.prop-card-glass { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; isolation: isolate; }
.pcg-media { position: absolute; inset: 0; z-index: 0; background: var(--navy-050); }
.pcg-media img { width: 100%; height: 100%; object-fit: cover; }
.pcg-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,32,58,.28) 0%, rgba(17,32,58,0) 30%, rgba(17,32,58,0) 48%, rgba(17,32,58,.45) 100%); }
.pcg-top { position: absolute; z-index: 2; inset: 14px 14px auto 14px; display: flex; justify-content: space-between; align-items: flex-start; }
.pcg-panel { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; border-radius: var(--r-md); padding: 16px 18px; color: #fff; text-align: left; }
.pcg-loc { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; font-size: var(--t-caption); color: rgba(255,255,255,.82); }
.pcg-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.18; letter-spacing: -.02em; margin: 6px 0 12px; color: #fff; }
/* Caratteristiche, prezzo e codice stanno sotto la foto, in un box bianco
   fuori dal link (demo-unica, site.css). */
.pcg-wrap { display: flex; flex-direction: column; }
.pcg-wrap .pcg-title { margin: 6px 0 0; }
.pcg-below { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 14px 16px; background: #fff; border: 1px solid rgba(17,32,58,.10); border-radius: var(--r-md); box-shadow: 0 1px 2px rgba(17,32,58,.04); }
.pcg-specs-out { display: flex; flex-wrap: wrap; gap: 14px; }
.pcg-spec-out { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-caption); color: var(--navy-600, #5B6675); white-space: nowrap; }
.pcg-foot-out { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(17,32,58,.08); }
.pcg-price-out { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: var(--navy-900, #11203A); white-space: nowrap; }
.pcg-cod-out { font-size: var(--t-caption); color: var(--navy-600, #5B6675); }

/* ============ reveal-on-scroll ============ */
/* Base state is ALWAYS visible (never gate visibility on a transition —
   it can freeze at 0 in inactive/offscreen render contexts). The entrance
   is a transform-only nicety layered on top in active tabs. */
.reveal { opacity: 1; }
.reveal.will-anim { transform: translateY(20px); transition: transform var(--dur-slow) var(--ease); }
.reveal.will-anim.is-in { transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal.will-anim { transform: none; transition: none; } .hero-img { animation: none; } }


/* ============================================================
   home-extra.css - varianti e hover condivisi
   (righe 15-19, 32-41, 80-89, 143-162, 256-259)
   ============================================================ */

/* ---- Button: outline-on-dark variant (hero) ---- */
.btn-outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.btn-outline .btn-ic { background: rgba(255,255,255,.16); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }

/* ---- Property glass card: "Ver más" link ---- */
.pcg-more { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-caption); font-weight: 600;
  color: #fff; opacity: .92; transition: opacity var(--dur) var(--ease); white-space: nowrap; }
.pcg-more:hover { opacity: .65; }
.pcg-more .ic { transition: transform var(--dur) var(--ease); }
.pcg-more:hover .ic { transform: translateX(3px); }

/* ---- Featured footer CTA ---- */
.featured-foot { display: flex; justify-content: center; margin-top: var(--sp-7); }

/* ============ TITLES: SINGLE SANS TYPEFACE ============ */
/* Client request: titles use one font only — the grotesk ("bastoni").
   Accent words previously set in the script face now match the heading. */
.section-script, .hero-script, .emo-script {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1em;
}
.method .ss-script { font-weight: 700; }

/* ============ METHOD CTA ============ */
/* Hover for glass action buttons on property cards (share / save) */
.round-ic { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.round-ic:hover { background: #fff; color: var(--navy-900); transform: translateY(-1px); }
.round-ic:active { transform: translateY(0); }
.round-ic.is-fav:hover { background: var(--arena-600); color: #fff; }
.prop-card-glass .round-ic:hover .ic { transform: scale(1.08); }
.prop-card-glass { display: block; text-decoration: none; }
.prop-card-glass .pcg-media img, .prop-card-glass .pcg-media image-slot { transition: transform var(--dur-slow) var(--ease); }
.prop-card-glass:hover .pcg-media img, .prop-card-glass:hover .pcg-media image-slot { transform: scale(1.04); }

/* ---- Foto sfogliabile della card (listado) ----
   Le slide stanno impilate e cambiano in dissolvenza: cosi' la card non si
   muove mentre si sfoglia e la foto successiva puo' arrivare con calma. La
   transizione ripete "transform" perche' sostituisce quella della riga qui
   sopra, che ha la stessa specificita'.
   Le frecce non sono dentro .pcg-media (z-index 0, contesto di impilamento:
   ci finirebbero sotto il pannello). Stanno a meta' altezza come nella demo:
   da quando prezzo e caratteristiche sono usciti dalla foto il pannello e'
   basso e il centro resta libero. */
.pcg-media[data-gallery] { touch-action: pan-y; }
.pcg-media[data-gallery] .pcg-slide { position: absolute; inset: 0; opacity: 0;
  transition: opacity .35s var(--ease), transform var(--dur-slow) var(--ease); }
.pcg-media[data-gallery] .pcg-slide.is-current { opacity: 1; }
.pcg-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.82); color: var(--navy-800);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease); }
.pcg-arrow:hover { background: #fff; }
.pcg-arrow-prev { left: 12px; }
.pcg-arrow-next { right: 12px; }
.pcg-arrow:disabled { opacity: 0; pointer-events: none; }
/* Col mouse compaiono passando sopra la card, come le frecce della scheda; col
   dito l'hover non esiste, quindi li' restano sempre visibili. */
@media (hover: hover) {
  .pcg-arrow { opacity: 0; }
  .prop-card-glass:hover .pcg-arrow { opacity: 1; }
  .prop-card-glass:hover .pcg-arrow:disabled { opacity: 0; }
}
.method-cta { display: flex; justify-content: center; margin-top: var(--sp-8); }

/* ============ FEATURED CARD GLASS (more natural) ============ */
.featured .pcg-panel.glass-dark {
  background: linear-gradient(155deg, rgba(255,255,255,.14) 0%, rgba(17,32,58,.34) 48%, rgba(11,21,40,.50) 100%);
  -webkit-backdrop-filter: saturate(150%) blur(26px); backdrop-filter: saturate(150%) blur(26px);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}

/* brick CTA (ladrillo fill, white circle, orange arrow) */
.cta-brick { background: #fff !important; color: #0A0B18 !important; }
.cta-brick:hover { background: rgba(255,255,255,.9) !important; }
.cta-brick .navbar-cta-ic { background: var(--cta-arrow); color: #fff; }


/* ============================================================
   Compensazioni prototipo
   ------------------------------------------------------------
   Nel bundle offline della demo il componente SmartLink applica
   padding:16px inline su OGNI link, quindi lo screenshot di
   riferimento ha spaziature che il CSS sorgente non esprime.

   Da verificare con lo strumento screenshot (Task 6): se la
   spaziatura di .navbar-cta, .feat-cta, .cta-cta e
   .prop-card-glass risulta diversa rispetto allo screenshot,
   riattivare qui:

     .navbar-cta, .feat-cta, .cta-cta, .prop-card-glass { padding: 16px; }

   Al momento la sezione resta vuota: senza screenshot non e'
   verificabile e non si aggiungono regole a indovinare.
   ============================================================ */

/* ==========================================================================
   Servicios: stili condivisi fra i blocchi ss/services-* (servicios.css
   della demo, righe 9-25 e 28-31: titoli, testi, griglia split e CTA).
   ========================================================================== */
.sv-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #5B6675; }
.sv-tick { display: inline-block; width: 22px; height: 1.5px; background: #B85C3C; }
.sv-h2 { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -.02em; color: #1C2733; margin: 16px 0 0; }
.sv-h2-light { color: #fff; }
.sv-lead { font-size: 20px; line-height: 1.5; color: #5B6675; margin: 18px 0 0; max-width: 560px; }
.sv-lead-light { font-size: 20px; line-height: 1.5; color: rgba(255,255,255,.75); margin: 18px auto 0; max-width: 600px; }
.sv-p { font-size: 18px; line-height: 1.7; color: #3D4A5C; margin: 20px 0 0; max-width: 60ch; text-wrap: pretty; }
.sv-head-center { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.sv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; max-width: var(--container); margin: 0 auto; }
@media (max-width: 900px){ .sv-split { grid-template-columns: 1fr; gap: 36px; } .sv-h2 { font-size: 32px; } }
.sv-cta { height: 50px; }
.sv-cta-white { color: #0A0B18; }
.sv-cta-white .navbar-cta-ic { background: #B85C3C; color: #fff; }
.sv-cta .navbar-cta-ic { color: #fff; }
.sv-why-photos { display: flex; flex-direction: column; gap: 16px; }
.sv-why-photos img { width: 100%; height: 280px; object-fit: cover; border-radius: 20px; display: block; }
.sv-why-photos-single img { height: 460px; }
.sv-why-photos-single img.sv-why-img-left { object-position: 22% center; }
/* In colonna la foto diventa verticale e il taglio centrale lasciava fuori il
   soggetto: in "¿Por qué?" Susana sta a destra dello scatto, in "Beneficios"
   la persona centrale e' al centro (segnalazione di Dena, 2026-09-25). */
@media (max-width: 900px){
  .sv-why .sv-why-photos-single img { object-position: right center; }
  .sv-why-photos-single img.sv-why-img-left { object-position: center; }
}

/* ============================================================
   Pagine legali (.legal-page): non esistono nella demo, layout minimo
   con i token del sito. Il padding alto lascia spazio alla navbar fissa.
   ============================================================ */
.legal-page { max-width: 800px; margin: 0 auto; padding: 160px 32px 96px; }
.legal-page h1 { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1.1; letter-spacing: -.02em; color: #1C2733; margin: 0 0 32px; }
.legal-page h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.01em; color: #1C2733; margin: 40px 0 12px; }
.legal-page p { font-size: 17px; line-height: 1.7; color: #5B6675; margin: 0 0 16px; }
@media (max-width: 760px){ .legal-page { padding: 120px 24px 64px; } .legal-page h1 { font-size: 32px; } .legal-page h2 { font-size: 20px; } }