/* ============================================================
   RISTRUTTURA MILANO — Stylesheet compartido
   ============================================================ */

/* VARIABLES */
:root {
  --white:      #FFFFFF;
  --paper:      #F4F4F4;
  --black:      #0E0E0D;
  --navy:       #1A2744;
  --navy-pale:  #9BAAC4;
  --mid:        #5C5C5C;
  --line:       rgba(14,14,13,0.14);
  --futura:     'Josefin Sans','Futura',sans-serif;
  --serif:      'Cormorant',Georgia,serif;
}

/* RESET */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background:#fff;
  color:var(--black);
  font-family:var(--futura);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem 3rem;
  background:var(--navy);
}
.nav-logo {
  font-family:var(--futura); font-size:.75rem; font-weight:400;
  letter-spacing:.25em; text-transform:uppercase;
  color:#fff; text-decoration:none;
}
.nav-logo span { color:rgba(255,255,255,.75) }
.nav-links { display:flex; gap:2.5rem; list-style:none }
.nav-links a {
  font-size:.62rem; font-weight:300; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.72);
  text-decoration:none; transition:color .2s;
}
.nav-links a:hover,
.nav-links a.active { color:#fff }
.nav-cta {
  font-family:var(--futura); font-size:.62rem; font-weight:300;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.5rem 1.4rem;
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.25);
  cursor:pointer; transition:background .2s, color .2s;
}
.nav-cta:hover { background:#fff; color:var(--navy) }
.nav-cta--active {
  background:#fff; color:var(--navy); border-color:#fff;
  transition:opacity .2s;
}
.nav-cta--active:hover { opacity:.8; background:#fff; color:var(--navy) }

.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:.3rem;
}
.nav-hamburger span {
  display:block; width:22px; height:1px; background:#fff;
  transition:transform .25s, opacity .25s;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg) }
.nav-hamburger.open span:nth-child(2) { opacity:0 }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg) }
.nav-mobile-menu {
  visibility:hidden; opacity:0;
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:var(--navy); z-index:200;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2.5rem;
  transition:opacity .25s, visibility .25s;
}
.nav-mobile-menu.open { visibility:visible; opacity:1 }
.nav-mobile-menu a {
  font-size:1.1rem; font-weight:300; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
  text-decoration:none;
}
.nav-mobile-close {
  position:absolute; top:1.5rem; right:1.5rem;
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.5); font-size:1.5rem; line-height:1;
}

/* ── ELEMENTOS COMPARTIDOS ── */
.section-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mid); border:1px solid var(--line);
  padding:.3rem .8rem; border-radius:100px;
  margin-bottom:1.8rem; width:fit-content;
}
.seo-list { list-style:none; display:flex; flex-direction:column; gap:.65rem; margin-top:1.5rem; margin-bottom:2rem }
.seo-list li { font-size:.84rem; color:var(--mid); display:flex; align-items:flex-start; gap:.7rem; line-height:1.5 }
.seo-list li::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--navy); flex-shrink:0; margin-top:.48em }

.btn-navy {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 2rem;
  background:var(--navy); color:#fff;
  font-family:var(--futura); font-size:.65rem;
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; border:none; cursor:pointer;
  width:fit-content; transition:opacity .2s;
}
.btn-navy:hover { opacity:.75 }

.btn-light {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 2.2rem;
  background:#fff; color:var(--black);
  font-family:var(--futura); font-size:.65rem; font-weight:300;
  letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; border:none; cursor:pointer;
  transition:opacity .2s;
}
.btn-light:hover { opacity:.78 }

/* ── PAGE HERO ── */
.page-hero {
  min-height:100vh; display:flex; flex-direction:column;
  justify-content:flex-end; padding:calc(56px + 5rem) 4rem 5rem;
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-hero-bg { position:absolute; inset:0 }
.page-hero-bg img { width:100%; height:100%; object-fit:cover; display:block }
.page-hero-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(14,14,13,.78) 0%, rgba(14,14,13,.3) 55%, rgba(14,14,13,.18) 100%);
}
.page-hero-inner { position:relative; z-index:1; max-width:720px }
.page-hero-pill {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.2);
  background:rgba(14,14,13,.45); backdrop-filter:blur(8px);
  padding:.3rem .9rem; border-radius:100px;
  margin-bottom:1.5rem; width:fit-content;
  will-change:transform;
}
.page-hero-pill-dot { width:4px; height:4px; border-radius:50%; background:var(--navy-pale); display:block }
.page-hero h1 {
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3rem,8vw,7rem); line-height:.92;
  color:#fff; letter-spacing:-.01em; margin-bottom:1.5rem;
}
.page-hero h1 em { font-style:italic; color:var(--navy-pale); display:block }
.page-hero-desc { font-size:.9rem; color:rgba(255,255,255,.6); line-height:1.85; max-width:500px }

/* ── INTRO ── */
.section-intro { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line) }
.intro-img { min-height:480px; position:relative; overflow:hidden; background:var(--paper) }
.intro-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.intro-content {
  padding:5rem 4rem; display:flex; flex-direction:column;
  justify-content:center; border-left:1px solid var(--line);
}
.intro-content h2 { font-family:var(--serif); font-weight:300; font-size:clamp(2rem,4vw,3.2rem); line-height:.95; margin-bottom:1.5rem }
.intro-content h2 em { font-style:italic; color:var(--navy); display:block }
.intro-content p { font-size:.88rem; color:var(--mid); line-height:1.85; max-width:400px; margin-bottom:1rem }

/* ── PRICING ── */
.section-game { padding:6rem 4rem; border-bottom:1px solid var(--line); background:#fff }
.game-header { margin-bottom:4rem }
.game-header h2 { font-family:var(--serif); font-weight:300; font-size:clamp(2.5rem,5vw,4.5rem); line-height:.92; margin-top:.75rem }
.game-header h2 em { font-style:italic; color:var(--navy); display:block }
.game-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line) }
.game-card {
  padding:2.8rem 2.2rem 3rem; border-right:1px solid var(--line);
  display:flex; flex-direction:column; transition:background .25s;
}
.game-card:last-child { border-right:none }
.game-card:hover { background:var(--paper) }
.game-card.featured { background:var(--navy); color:#fff }
.game-card.featured:hover { background:#1e2f52 }
.game-badge {
  display:inline-flex; font-size:.55rem; letter-spacing:.18em;
  text-transform:uppercase; border:1px solid var(--line);
  padding:.25rem .7rem; border-radius:100px;
  color:var(--mid); margin-bottom:1.5rem; width:fit-content;
}
.game-card.featured .game-badge { border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.75) }
.game-name { font-family:var(--futura); font-size:.7rem; font-weight:400; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.5rem }
.game-from { font-size:.62rem; color:var(--mid); letter-spacing:.1em; text-transform:uppercase; margin-bottom:.2rem }
.game-card.featured .game-from { color:rgba(255,255,255,.75) }
.game-price { font-family:var(--serif); font-size:3.2rem; font-weight:300; line-height:1; color:var(--black); margin-bottom:.3rem }
.game-card.featured .game-price { color:#fff }
.game-unit { font-size:.62rem; color:var(--mid); margin-bottom:2rem }
.game-card.featured .game-unit { color:rgba(255,255,255,.75) }
.game-list { list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-bottom:2.5rem; flex:1 }
.game-list li { font-size:.82rem; color:var(--mid); display:flex; align-items:flex-start; gap:.7rem; line-height:1.5 }
.game-list li::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--navy); flex-shrink:0; margin-top:.45em }
.game-card.featured .game-list li { color:rgba(255,255,255,.7) }
.game-card.featured .game-list li::before { background:var(--navy-pale) }
.game-cta {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem;
  font-family:var(--futura); font-size:.62rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--black);
  color:var(--black); background:transparent;
  cursor:pointer; transition:background .2s, color .2s, border-color .2s;
}
.game-cta:hover { background:var(--black); color:#fff }
.game-card.featured .game-cta { border-color:#fff; color:#fff }
.game-card.featured .game-cta:hover { background:#fff; color:var(--navy) }
.game-note { font-size:.72rem; color:var(--mid); margin-top:1.5rem; letter-spacing:.04em }

/* ── CTA BAND ── */
.section-cta {
  background:var(--navy); color:#fff;
  padding:6rem 4rem;
  display:flex; align-items:center; justify-content:space-between; gap:3rem;
}
.section-cta .section-tag { color:rgba(255,255,255,.62) !important; border-color:rgba(255,255,255,.35) !important; }
.cta-left h2 { font-family:var(--serif); font-weight:300; font-size:clamp(2.5rem,5vw,5rem); line-height:.92 }
.cta-left h2 em { font-style:italic; color:var(--navy-pale); display:block }
.cta-right { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; flex-shrink:0 }
.cta-note { font-size:.65rem; color:rgba(255,255,255,.62); letter-spacing:.08em }

/* ── FAQ ── */
.section-service-faq { padding:6rem 4rem; border-top:1px solid var(--line) }
.service-faq-inner { display:grid; grid-template-columns:1fr 2fr; gap:5rem; align-items:start }
.service-faq-left h2 { font-family:var(--serif); font-weight:300; font-size:clamp(2rem,3.5vw,3rem); line-height:.92; position:sticky; top:7rem }
.service-faq-left h2 em { font-style:italic; color:var(--navy); display:block }
.faq-item { border-top:1px solid var(--line); overflow:hidden }
.faq-item:last-child { border-bottom:1px solid var(--line) }
.faq-q {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem 0; background:none; border:none; cursor:pointer;
  text-align:left; font-family:var(--futura); font-size:.82rem; font-weight:300;
  letter-spacing:.04em; color:var(--black); gap:2rem; transition:opacity .2s;
}
.faq-q:hover { opacity:.55 }
.faq-icon { font-size:.9rem; color:var(--navy); flex-shrink:0; transition:transform .3s }
.faq-item.open .faq-icon { transform:rotate(45deg) }
/* Grid-row accordion: compositor-friendly, sin max-height fijo */
.faq-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s ease }
.faq-item.open .faq-a { grid-template-rows:1fr }
.faq-a-inner { min-height:0; overflow:hidden; padding:0 0 1.5rem; font-size:.82rem; color:var(--mid); line-height:1.85; max-width:520px }

/* ── FOOTER ── */
.footer {
  background:#1a1a18;
  padding:4rem 4rem 2rem;
  border-top:1px solid var(--line);
}
.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:4rem;
  margin-bottom:3rem;
}
.footer-logo {
  font-family:var(--futura); font-size:.75rem; font-weight:400;
  letter-spacing:.25em; text-transform:uppercase;
  color:#f1efe8; text-decoration:none;
  display:block; margin-bottom:.9rem;
}
.footer-logo span { font-weight:200; color:rgba(241,239,232,.75) }
.footer-desc {
  font-size:.78rem; line-height:1.85;
  color:#b4b2a9; margin-bottom:0;
}
.footer-anchor,
.footer-desc a {
  color:#5dcaa5; text-decoration:none;
  border-bottom:1px solid rgba(93,202,165,.35);
  padding-bottom:1px; transition:color .2s;
}
.footer-anchor:hover,
.footer-desc a:hover { color:#9fe1cb }
.footer-trust {
  display:inline-flex; align-items:center; gap:10px;
  margin-top:1.5rem; background:#2c2c2a;
  border-radius:6px; padding:10px 16px;
}
.footer-stars { color:#ef9f27; font-size:11px; letter-spacing:2px; display:block }
.footer-trust-num { font-size:20px; font-weight:500; color:#f1efe8; line-height:1 }
.footer-trust-label { font-size:11px; color:#b4b2a9; line-height:1.5 }
.footer-trust-label strong { display:block; color:#d3d1c7; font-weight:500; font-size:11px }
.footer-col-title {
  display:block; font-size:.6rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color:#8a8884; margin-bottom:1.2rem;
}
.footer-col a {
  display:block; font-size:.78rem;
  color:#d3d1c7; text-decoration:none;
  margin-bottom:.7rem; transition:color .15s;
  letter-spacing:.04em;
}
.footer-col a:hover,
.footer-col a.active { color:#f1efe8 }
.footer-cta {
  margin-top:.5rem;
  color:#5dcaa5 !important;
}
.footer-cta:hover { color:#9fe1cb !important }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid #2c2c2a; padding-top:1.5rem;
  flex-wrap:wrap; gap:.75rem;
}
.footer-copy {
  font-size:.6rem; letter-spacing:.08em; color:#8a8884;
}
.footer-legal { display:flex; gap:1.5rem }
.footer-legal a {
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:#8a8884; text-decoration:none; transition:color .15s;
}
.footer-legal a:hover { color:#c5c4c0 }

/* ── BOTÓN FLOTANTE (WhatsApp) ── */
.float-btns { position:fixed; bottom:2rem; right:2rem; display:flex; flex-direction:column; gap:.75rem; z-index:200 }
.float-btn {
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; border:none; cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  transition:transform .2s, opacity .2s;
  position:relative;
  will-change:transform;
}
.float-btn:hover { transform:translateY(-3px); opacity:.85 }
.float-btn svg { width:20px; height:20px; flex-shrink:0 }
.float-btn-wa { background:#22C55E }
.float-btn-tooltip {
  position:absolute; right:calc(100% + 10px);
  background:var(--black); color:#fff;
  font-family:var(--futura); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:3px; white-space:nowrap;
  pointer-events:none; opacity:0; transform:translateX(4px);
  transition:opacity .2s, transform .2s;
}
.float-btn:hover .float-btn-tooltip { opacity:1; transform:translateX(0) }

/* ── PORTAFOGLIO – Listado ── */
.porto-hero { padding:10rem 4rem 5rem; text-align:center; border-bottom:1px solid var(--line) }
.porto-hero h1 { font-family:var(--serif); font-weight:300; font-size:clamp(3rem,7vw,6rem); line-height:.92; margin-top:.75rem }
.porto-hero h1 em { font-style:italic; color:var(--navy); display:block }
.porto-hero p { font-size:.9rem; color:var(--mid); line-height:1.85; max-width:480px; margin:1.5rem auto 0 }

.porto-filters { display:flex; gap:1rem; justify-content:center; padding:2.5rem 4rem; border-bottom:1px solid var(--line) }
.porto-filter { font-family:var(--futura); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; padding:.5rem 1.4rem; background:transparent; color:var(--mid); border:1px solid var(--line); cursor:pointer; transition:background .2s, color .2s, border-color .2s }
.porto-filter:hover, .porto-filter.active { background:var(--navy); color:#fff; border-color:var(--navy) }

.porto-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-left:1px solid var(--line); border-top:1px solid var(--line) }
.porto-card { position:relative; overflow:hidden; border-right:1px solid var(--line); border-bottom:1px solid var(--line); aspect-ratio:4/3; cursor:pointer }
.porto-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; will-change:transform }
.porto-card:hover img { transform:scale(1.05) }
.porto-card-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(14,14,13,.82) 0%, rgba(14,14,13,.1) 60%); opacity:0; transition:opacity .3s; display:flex; flex-direction:column; justify-content:flex-end; padding:2rem }
.porto-card:hover .porto-card-overlay { opacity:1 }
.porto-card-tipo { font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin-bottom:.4rem }
.porto-card-title { font-family:var(--serif); font-size:1.4rem; font-weight:300; color:#fff; line-height:1.1 }
.porto-card-zona { font-size:.62rem; color:rgba(255,255,255,.5); margin-top:.3rem; letter-spacing:.08em }

/* ── PORTAFOGLIO – Ficha de proyecto ── */
.progetto-hero { padding:9rem 4rem 4rem; text-align:center; border-bottom:1px solid var(--line); background:var(--paper) }
.progetto-meta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem }
.progetto-pill { font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; padding:.35rem .9rem; border:1px solid var(--line); border-radius:100px; color:var(--mid) }
.progetto-pill.tipo { background:var(--navy); color:#fff; border-color:var(--navy) }
.progetto-hero h1 { font-family:var(--serif); font-weight:300; font-size:clamp(2.5rem,6vw,5.5rem); line-height:.92; margin-top:.75rem }
.progetto-hero h1 em { font-style:italic; color:var(--navy); display:block }
.progetto-hero p { font-size:.9rem; color:var(--mid); max-width:560px; margin:1.5rem auto 0; line-height:1.85 }

.progetto-section { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line) }
.progetto-section.reverse { direction:rtl }
.progetto-section.reverse > * { direction:ltr }
.progetto-img { position:relative; min-height:520px; overflow:hidden; background:var(--paper) }
.progetto-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.progetto-text { padding:5rem 4rem; display:flex; flex-direction:column; justify-content:center }
.progetto-text .section-tag { margin-bottom:1.2rem }
.progetto-text h2 { font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,3vw,2.8rem); line-height:.95; margin-bottom:1.4rem }
.progetto-text h2 em { font-style:italic; color:var(--navy); display:block }
.progetto-text p { font-size:.88rem; color:var(--mid); line-height:1.85; margin-bottom:1rem }

.progetto-nav { display:flex; justify-content:space-between; align-items:center; padding:2rem 4rem; border-top:1px solid var(--line) }
.progetto-nav a { font-family:var(--futura); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mid); text-decoration:none; transition:color .2s }
.progetto-nav a:hover { color:var(--black) }

/* ── BLOG – Listado ── */
.blog-hero { padding:10rem 4rem 5rem; text-align:center; border-bottom:1px solid var(--line) }
.blog-hero h1 { font-family:var(--serif); font-weight:300; font-size:clamp(3rem,7vw,6rem); line-height:.92; margin-top:.75rem }
.blog-hero h1 em { font-style:italic; color:var(--navy); display:block }

.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); border-left:1px solid var(--line); border-top:1px solid var(--line) }
.blog-card { border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column }
.blog-card-img { display:block; position:relative; height:240px; overflow:hidden; background:var(--paper) }
.blog-card-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; will-change:transform }
.blog-card:hover .blog-card-img img { transform:scale(1.04) }
.blog-card-body { padding:2rem 2rem 2.5rem; display:flex; flex-direction:column; flex:1 }
.blog-card-cat { font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--navy); margin-bottom:.8rem }
.blog-card-title { font-family:var(--serif); font-weight:300; font-size:1.5rem; line-height:1.1; margin-bottom:.8rem; color:var(--black); text-decoration:none; display:block }
.blog-card-title:hover { color:var(--navy) }
.blog-card-excerpt { font-size:.82rem; color:var(--mid); line-height:1.75; flex:1; margin-bottom:1.5rem }
.blog-card-footer { display:flex; justify-content:space-between; align-items:center }
.blog-card-date { font-size:.6rem; color:var(--mid); letter-spacing:.08em }
.blog-card-link { font-family:var(--futura); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--navy); text-decoration:none; transition:opacity .2s }
.blog-card-link:hover { opacity:.6 }

/* ── BLOG – Entrada ── */
.article-hero { min-height:55vh; display:flex; flex-direction:column; justify-content:flex-end; padding:0 4rem 4rem; position:relative; overflow:hidden; border-bottom:1px solid var(--line) }
.article-hero-bg { position:absolute; inset:0 }
.article-hero-bg img { width:100%; height:100%; object-fit:cover; display:block }
.article-hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(14,14,13,.8) 0%, rgba(14,14,13,.2) 60%) }
.article-hero-inner { position:relative; z-index:1; max-width:760px }
.article-cat { font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--navy-pale); margin-bottom:1rem; display:block }
.article-hero h1 { font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,5vw,4.5rem); line-height:.95; color:#fff; margin-bottom:1rem }
.article-meta { font-size:.62rem; color:rgba(255,255,255,.75); letter-spacing:.1em }

.article-body { max-width:720px; margin:0 auto; padding:5rem 4rem }
.article-body h2 { font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,3vw,2.4rem); line-height:.95; margin:3rem 0 1.2rem }
.article-body h2 em { font-style:italic; color:var(--navy) }
.article-body p { font-size:.92rem; color:var(--mid); line-height:1.9; margin-bottom:1.4rem }
.article-body ul { list-style:none; display:flex; flex-direction:column; gap:.7rem; margin:1.5rem 0 2rem }
.article-body ul li { font-size:.88rem; color:var(--mid); display:flex; align-items:flex-start; gap:.7rem; line-height:1.6 }
.article-body ul li::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--navy); flex-shrink:0; margin-top:.5em }
.article-cta { background:var(--paper); border-top:1px solid var(--line); padding:4rem; display:flex; align-items:center; justify-content:space-between; gap:3rem }
.article-cta h3 { font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,3vw,2.5rem); line-height:.95 }
.article-cta h3 em { font-style:italic; color:var(--navy); display:block }

/* ── BREADCRUMB ── */
.breadcrumb { padding:1rem 4rem; font-size:.6rem; letter-spacing:.1em; color:var(--mid); border-bottom:1px solid var(--line); display:flex; gap:.5rem; align-items:center }
.breadcrumb a { color:var(--mid); text-decoration:none; transition:color .2s }
.breadcrumb a:hover { color:var(--black) }
.breadcrumb span { color:var(--line) }

/* ── BLOG – Layout con sidebar ── */
.article-layout { display:grid; grid-template-columns:1fr 300px; border-bottom:1px solid var(--line) }
.article-main { padding:5rem 4rem; border-right:1px solid var(--line) }
.article-main h2 { font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,3vw,2.4rem); line-height:.95; margin:3rem 0 1.2rem }
.article-main h2 em { font-style:italic; color:var(--navy) }
.article-main p { font-family:var(--serif); font-size:1.1rem; font-weight:400; color:var(--mid); line-height:1.85; margin-bottom:1.4rem }
.article-main strong { font-weight:600 }
.article-main ul { list-style:none; display:flex; flex-direction:column; gap:.7rem; margin:1.5rem 0 2rem; padding-left:1.2rem }
.article-main ul li { font-family:var(--serif); font-size:1rem; font-weight:400; color:var(--mid); display:flex; align-items:flex-start; gap:.7rem; line-height:1.65 }
.article-main ul li::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--navy); flex-shrink:0; margin-top:.55em }

.article-sidebar { padding:3.5rem 2.5rem; position:sticky; top:56px; align-self:start }
.sidebar-brand { padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid var(--line) }
.sidebar-logo-img { width:100%; max-width:160px; height:auto; display:block; margin-bottom:1.4rem; opacity:.85 }
.sidebar-logo-text { font-family:var(--futura); font-size:.72rem; font-weight:400; letter-spacing:.25em; text-transform:uppercase; color:var(--black); text-decoration:none; display:block; margin-bottom:1.4rem }
.sidebar-logo-text span { color:var(--mid) }
.sidebar-about { font-size:.82rem; color:var(--mid); line-height:1.8 }
.sidebar-cta { display:flex; width:100%; justify-content:center; margin-top:2rem }
.sidebar-section { margin-top:2.5rem; padding-top:2.5rem; border-top:1px solid var(--line) }
.sidebar-section-title { font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mid); margin-bottom:1rem; display:block }
.sidebar-servizi { list-style:none; display:flex; flex-direction:column }
.sidebar-servizi li a { display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; font-size:.8rem; color:var(--black); text-decoration:none; border-bottom:1px solid var(--line); transition:color .2s, transform .18s }
.sidebar-servizi li:first-child a { border-top:1px solid var(--line) }
.sidebar-servizi li a:hover { color:var(--navy); transform:translateX(.35rem) }
.sidebar-servizi li a span { font-size:.7rem; color:var(--mid) }
.sidebar-trust { margin-top:2.5rem; padding-top:2.5rem; border-top:1px solid var(--line) }
.sidebar-trust-stars { font-size:.9rem; color:var(--navy); letter-spacing:.15em; margin-bottom:.45rem }
.sidebar-trust-score { font-size:.7rem; color:var(--mid); letter-spacing:.06em; line-height:1.55 }

/* ── PORTAFOGLIO – Galería 2×2 ── */
.progetto-gallery { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line) }
.progetto-gallery-img { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper) }
.progetto-gallery-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; will-change:transform }
.progetto-gallery-img:hover img { transform:scale(1.04) }
.progetto-gallery-img .gallery-caption { position:absolute; bottom:0; left:0; right:0; padding:.8rem 1.2rem; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); background:linear-gradient(to top, rgba(14,14,13,.65) 0%, transparent 100%); opacity:0; transition:opacity .3s }
.progetto-gallery-img:hover .gallery-caption { opacity:1 }
.progetto-desc { max-width:680px; margin:0 auto; padding:5rem 2rem; text-align:center }
.progetto-desc .section-tag { margin:0 auto 2rem }
.progetto-desc p { font-size:.92rem; color:var(--mid); line-height:1.9; margin-bottom:1.4rem }
.progetto-desc h2 { font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,3vw,2.4rem); line-height:.95; margin-bottom:1.4rem }
.progetto-desc h2 em { font-style:italic; color:var(--navy) }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  nav { padding:1rem 1.2rem }
  .nav-links, .nav-cta { display:none }
  .nav-hamburger { display:flex }
  .page-hero { padding:calc(56px + 3rem) 1.2rem 3rem; min-height:100vh }
  .page-hero h1 { font-size:3rem }
  .section-intro { grid-template-columns:1fr }
  .intro-img { min-height:240px }
  .intro-content { padding:2.5rem 1.2rem; border-left:none; border-top:1px solid var(--line) }
  .section-game { padding:3rem 1.2rem }
  .game-grid { grid-template-columns:1fr }
  .game-card { border-right:none; border-bottom:1px solid var(--line) }
  .game-card:last-child { border-bottom:none }
  .section-cta { padding:3.5rem 1.2rem; flex-direction:column; gap:2rem }
  .btn-light { width:100%; justify-content:center }
  .section-service-faq { padding:3rem 1.2rem }
  .service-faq-inner { grid-template-columns:1fr; gap:1.5rem }
  .service-faq-left h2 { position:static; font-size:1.8rem }
  .footer { padding:2.5rem 1.2rem 1.5rem }
  .footer-grid { grid-template-columns:1fr; gap:2.5rem }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:1rem }
  .float-btns { bottom:1rem; right:1rem }
}

@media (min-width:769px) and (max-width:1100px) {
  nav { padding:1.2rem 2rem }
  .page-hero { padding:calc(56px + 4rem) 2rem 4rem }
  .section-intro { grid-template-columns:1fr }
  .intro-img { min-height:320px }
  .intro-content { border-left:none; border-top:1px solid var(--line); padding:3.5rem 2rem }
  .section-game { padding:4rem 2rem }
  .game-grid { grid-template-columns:1fr 1fr }
  .game-card:nth-child(2) { border-right:none }
  .game-card:nth-child(3) { border-top:1px solid var(--line); border-right:none; grid-column:span 2 }
  .section-cta { padding:4rem 2rem }
  .section-service-faq { padding:4rem 2rem }
  .footer { padding:3rem 2rem 1.5rem }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem }
  .porto-grid { grid-template-columns:1fr 1fr }
  .blog-grid { grid-template-columns:1fr 1fr }
  .progetto-section { grid-template-columns:1fr }
  .progetto-section.reverse { direction:ltr }
  .porto-hero, .blog-hero { padding:8rem 2rem 3rem }
  .progetto-hero { padding:7rem 2rem 3rem }
  .progetto-text { padding:3.5rem 2rem }
  .article-body { padding:3rem 2rem }
  .article-layout { grid-template-columns:1fr }
  .article-main { padding:3rem 2rem; border-right:none }
  .article-sidebar { position:static; padding:3rem 2rem; border-top:1px solid var(--line) }
  .article-cta { padding:3rem 2rem }
  .breadcrumb { padding:1rem 2rem }
  .progetto-desc { padding:4rem 2rem }
  .porto-filters { padding:2rem }
  .progetto-nav { padding:1.5rem 2rem }
}

@media (max-width:768px) {
  .porto-grid { grid-template-columns:1fr }
  .blog-grid { grid-template-columns:1fr }
  .porto-hero { padding:7rem 1.2rem 3rem }
  .porto-filters { padding:1.5rem 1.2rem; flex-wrap:wrap }
  .blog-hero { padding:7rem 1.2rem 3rem }
  .progetto-hero { padding:6rem 1.2rem 2.5rem }
  .progetto-section { grid-template-columns:1fr }
  .progetto-section.reverse { direction:ltr }
  .progetto-img { min-height:260px }
  .progetto-text { padding:2.5rem 1.2rem }
  .article-hero { padding:0 1.2rem 2.5rem; min-height:45vh }
  .article-body { padding:2.5rem 1.2rem }
  .article-layout { grid-template-columns:1fr }
  .article-main { padding:2.5rem 1.2rem; border-right:none }
  .article-sidebar { position:static; padding:2.5rem 1.2rem; border-top:1px solid var(--line) }
  .article-cta { padding:2.5rem 1.2rem; flex-direction:column; gap:1.5rem }
  .breadcrumb { padding:1rem 1.2rem }
  .progetto-gallery { grid-template-columns:1fr }
  .progetto-gallery-img { aspect-ratio:16/9 }
  .progetto-desc { padding:3rem 1.2rem }
  .progetto-nav { padding:1.5rem 1.2rem; flex-direction:column; gap:1rem; text-align:center }
}

/* ── PROTECCIÓN PILL: cuando .section-tag se usa como heading (h1/h2/h3)
   mantiene el estilo visual de pildora sin importar el contexto padre ── */
h1.section-tag,
h2.section-tag,
h3.section-tag {
  font-family: var(--futura);
  font-size: .58rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mid);
  position: static;
}