/* Ángela Belotto Comunicación · estilos base */
:root {
  --mus: #C88A20; --mus-l: #E0A43C; --cac: #230A0A; --cru: #F5F0E7;
  --tom: #C23A24; --tom-d: #A93220; --rosa: #E7849F; --azul: #1E2A5E; --azul-d: #16204A; --verde: #1F4A3D; --verde-d: #183B31;
  --bg: #F5F0E7; --fg: #230A0A; --fg2: #3E2A26; --fg3: #5A4640;
  --surface: #EDE4D5; --line: #D9CEBE; --ink: #230A0A; --on-ink: #F5F0E7; --on-ink2: #E3D8CB;
  --ocre: #8A5A10; --focus: #1F4A3D;
  --serif: 'Gloock', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pad: clamp(24px, 6.5vw, 96px);
  --section: clamp(96px, 12vw, 168px);
  --max: 1440px;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}


*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 88px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
a:not(.btn):hover { color: var(--ocre); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--bg); padding: 12px 16px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.serif { font-family: var(--serif); font-weight: 400; }
.display { font-family: var(--serif); font-size: clamp(52px, 8.6vw, 124px); line-height: 0.95; letter-spacing: -0.012em; }
.h2 { font-family: var(--serif); font-size: clamp(38px, 4.6vw, 66px); line-height: 1.03; }
.h2-xl { font-family: var(--serif); font-size: clamp(44px, 6.6vw, 96px); line-height: 1; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.62; color: var(--fg2); }
.muted { color: var(--fg3); }
.tag { font-size: 15px; font-weight: 700; color: var(--ocre); }
.stack { display: flex; flex-direction: column; gap: 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 16px 30px; border-radius: 999px; font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none; background: var(--mus); color: #230A0A; border: 0; cursor: pointer; }
.btn:hover { color: #230A0A; background: var(--mus-l); }
.btn--ink { background: #230A0A; color: #F5F0E7; }
.btn--ink:hover { background: #3A1C18; color: #F5F0E7; }
.btn--line { background: transparent; color: var(--fg); border: 1.5px solid var(--fg); font-weight: 600; }
.btn--line:hover { background: var(--fg); color: var(--bg); }
.link { font-weight: 600; font-size: 17px; }
.actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--mus); flex-shrink: 0; }

/* Cabecera */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); }
.site-header .wrap { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { height: 34px; width: auto; }
.logo-dark { display: none; }

 
.nav { display: flex; align-items: center; gap: 30px; font-size: 16px; }
.nav a { text-decoration: none; }
.nav a[aria-current="page"] { text-decoration: underline; }
.nav .nav-integra { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.nav .nav-integra .dot { width: 10px; height: 10px; }
.menu-btn { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.menu-btn span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .25s ease; }
.menu-btn[aria-expanded="true"] { background: var(--fg); color: var(--bg); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
@media (max-width: 1080px) {
  .site-header .wrap { height: 72px; }
  .brand img { height: 26px; }
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: 28px var(--pad) 36px; background: #230A0A; color: #F5F0E7; }
  .nav.is-open { display: flex; }
  .nav a { font-family: var(--serif); font-size: 30px; padding: 6px 0; color: #F5F0E7; }
  .nav .nav-integra { color: var(--mus-l); font-size: 34px; }
  .nav .nav-integra .dot { display: none; }
  .nav .btn--line { margin-top: 18px; font-family: var(--sans); font-size: 17px; border-color: var(--mus); background: var(--mus); color: #230A0A; }
}

/* Escenas */
.scene { padding-block: var(--section); position: relative; overflow: hidden; }
.scene--tom { background: var(--tom); color: #F5F0E7; }
.scene--ink { background: var(--ink); color: var(--on-ink); }
.scene--mus { background: var(--mus); color: #230A0A; }
.scene--azul { background: var(--azul); color: #F5F0E7; }
.scene--rosa { background: var(--rosa); color: #230A0A; }
.scene--surface { background: var(--surface); }
.scene--tom a:not(.btn):hover, .scene--azul a:not(.btn):hover, .scene--ink a:not(.btn):hover { color: var(--mus-l); }
.scene--tom :focus-visible, .scene--azul :focus-visible, .scene--ink :focus-visible, .site-footer :focus-visible { outline-color: var(--mus-l); }
.scene--tom .chips li { background: rgba(245,240,231,.16); color: #F5F0E7; }
.scene--mus a:not(.btn):hover, .scene--rosa a:not(.btn):hover { color: #230A0A; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: center; }
.c-5 { grid-column: span 5; } .c-6 { grid-column: span 6; } .c-7 { grid-column: span 7; } .c-10 { grid-column: span 10; }
.c-6r { grid-column: 7 / span 6; } .c-5r { grid-column: 8 / span 5; } .c-4r { grid-column: 9 / span 4; }
@media (max-width: 900px) { .grid > * { grid-column: 1 / -1 !important; } }

/* Hero */
.hero { padding-block: clamp(24px, 4vw, 48px) clamp(88px, 9vw, 120px); }
.hero h1 { display: flex; flex-direction: column; gap: 28px; }
.hero .who { font-family: var(--sans); font-size: 20px; font-weight: 600; line-height: 1.4; }
.hero .who span { display: block; font-weight: 400; color: var(--fg3); }
.hero .lead { max-width: 560px; margin-block: 36px 40px; }
.hero-art { position: relative; aspect-ratio: 424 / 600; max-width: 424px; margin-left: auto; width: 100%; }
.hero-art img { position: relative; width: 100%; height: 93%; object-fit: cover; border-radius: 999px 999px 20px 20px; }
.hero-art .c1 { position: absolute; left: -22%; top: 11%; width: 85%; aspect-ratio: 1; border-radius: 50%; background: var(--mus); }
.hero-art .c2 { position: absolute; right: -6%; bottom: 6%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: var(--tom); }
@media (max-width: 900px) {
  .hero .grid { row-gap: 32px; }
  .hero-media { order: -1; }
  .hero-art { max-width: 300px; margin-inline: auto 0; }
  .hero-art .c1 { left: -30%; }
  .hero .lead { margin-block: 28px 32px; }
}

/* Media luna decorativa */
.moon { position: absolute; border-radius: 50%; pointer-events: none; }

/* Anillos (8 dimensiones) */
.rings { --size: 560px; --inner: 112px; --step: calc((var(--size) - var(--inner)) / 7); position: relative; width: var(--size); height: var(--size); max-width: 100%; margin-inline: auto; }
.ring { position: absolute; left: 50%; top: 50%; width: calc(var(--inner) + var(--step) * var(--i)); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--fg); transform: translate(-50%, -50%) scale(.15); opacity: 0; transition: transform 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 140ms), opacity 1s ease calc(var(--i) * 140ms); }
.ring:first-child { background: var(--mus); border-color: var(--mus); }
.ring-n { position: absolute; left: 50%; width: 36px; margin-left: -18px; text-align: center; font-size: 12px; font-weight: 700; line-height: 16px; top: calc((var(--size) - (var(--inner) + var(--step) * var(--i))) / 2 + var(--step) / 4 - 8px); opacity: 0; transition: opacity 1s ease calc(var(--i) * 140ms); }
.ring-n.center { top: calc(var(--size) / 2 - 8px); color: #230A0A; }
.is-in .ring { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.is-in .ring-n { opacity: 1; }
@media (max-width: 640px) { .rings { --size: 320px; --inner: 64px; } .ring-n { font-size: 10px; line-height: 12px; width: 28px; margin-left: -14px; top: calc((var(--size) - (var(--inner) + var(--step) * var(--i))) / 2 + var(--step) / 4 - 6px); } .ring-n.center { top: calc(var(--size) / 2 - 6px); } }
.dims { list-style: none; margin: 0; padding: 0; }
.dims li { display: grid; grid-template-columns: 44px 190px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.dims .n { font-size: 14px; font-weight: 700; color: var(--ocre); }
.dims .t { font-weight: 700; }
.dims .d { font-size: 16px; line-height: 1.45; color: var(--fg3); }
@media (max-width: 640px) { .dims li { grid-template-columns: 36px minmax(0, 1fr); row-gap: 4px; } .dims .d { grid-column: 2; } }

/* Trayectoria */
.career { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.career::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1.5px; background: var(--fg); }
.career li { position: relative; display: flex; flex-direction: column; gap: 10px; }
.career .pin { height: 48px; display: flex; align-items: center; }
.career .pin span { display: block; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--fg); }
.career li:last-child .pin span { background: var(--mus); border-color: var(--mus); }
.career .when { font-size: 15px; font-weight: 700; color: var(--ocre); }
.career .role { font-weight: 700; line-height: 1.3; }
.career .where { font-size: 16px; line-height: 1.5; color: var(--fg3); }
@media (max-width: 900px) {
  .career { grid-template-columns: 1fr; padding-left: 64px; gap: 28px; }
  .career::before { left: 23px; right: auto; top: 8px; bottom: 8px; width: 1.5px; height: auto; }
  .career .pin { position: absolute; left: -64px; top: 0; width: 48px; height: auto; justify-content: center; }
}

/* Paneles */
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.panel { padding: clamp(44px, 5vw, 72px) clamp(24px, 4.5vw, 64px); border-radius: 28px; display: flex; flex-direction: column; gap: 22px; }
.panel--surface { background: var(--surface); }
.panel--azul { background: var(--azul); color: #F5F0E7; }
.panel--azul .muted { color: #E4E8F7; }
.panel--azul a:not(.btn):hover { color: var(--mus-l); }
.panel .h3 { font-family: var(--serif); font-size: clamp(38px, 4vw, 56px); line-height: 1; }
.panel .strong { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.4; font-weight: 600; }
.panel .link { margin-top: auto; }
@media (max-width: 900px) { .panels { grid-template-columns: 1fr; } }

/* Composición partida */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split > div { padding: clamp(64px, 8vw, 120px) var(--pad); }
.split .left { position: relative; overflow: hidden; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Testimonios */
.quote-mark { width: clamp(72px, 7vw, 104px); height: clamp(72px, 7vw, 104px); flex-shrink: 0; align-self: flex-start; border-radius: 50%; background: var(--mus); color: #230A0A; font-family: var(--serif); font-size: clamp(60px, 6vw, 88px); line-height: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6%; }
blockquote { margin: 0; }
.quote { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 48px); line-height: 1.18; }
.quote-sm { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; }
figure { margin: 0; }
figcaption { font-size: 17px; line-height: 1.45; }

/* Ideas */
.ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.idea { display: flex; flex-direction: column; gap: 16px; }
.idea h3 { font-size: clamp(20px, 1.7vw, 23px); font-weight: 600; line-height: 1.3; }
.idea h3 a { text-decoration: none; }
.idea h3 a:hover { text-decoration: underline; }
.thumb { height: clamp(180px, 18vw, 260px); border-radius: 20px; background: var(--surface); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.thumb i { display: block; border-radius: 50%; background: var(--fg); flex-shrink: 0; }
.thumb i.m { background: var(--mus); }
.thumb.scatter i { position: absolute; }
.thumb.row { gap: 10px; }
.thumb .g9 { display: grid; grid-template-columns: repeat(3, 44px); gap: 8px; }
.thumb .g9 i { width: 44px; height: 44px; }
@media (max-width: 900px) { .ideas { grid-template-columns: 1fr; gap: 48px; } }

/* Cierre */
.closing { margin: 0 clamp(12px, 2.2vw, 32px) clamp(12px, 2.2vw, 32px); border-radius: clamp(24px, 2vw, 28px); background: var(--mus); color: #230A0A; padding: clamp(72px, 9vw, 128px) clamp(24px, 6vw, 96px); display: grid; grid-template-columns: minmax(0, 2fr) auto; gap: 32px; align-items: end; }
.closing a:not(.btn):hover { color: #230A0A; }
@media (max-width: 900px) { .closing { grid-template-columns: 1fr; } .closing .btn { width: 100%; } }

/* Pie */
.site-footer { background: #230A0A; color: #F5F0E7; padding-block: 72px 44px; }
.site-footer a { color: #F5F0E7; }
.site-footer a:not(.btn):hover { color: var(--mus-l); }
.site-footer .top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.site-footer .top img { height: 40px; width: auto; }
.site-footer nav { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); column-gap: 64px; row-gap: 14px; font-size: 16px; }
.site-footer .legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid #4A302B; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 14px; color: #BFAFA3; }
.site-footer .legal a { color: #BFAFA3; }
.site-footer .legal div { display: flex; gap: 24px; }
@media (max-width: 640px) { .site-footer nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .site-footer .top img { height: auto; width: 240px; } }

/* Método Integra */
.eyebrow-brand { font-size: 18px; font-weight: 700; color: var(--ocre); display: inline-flex; align-items: center; gap: 10px; }
.big-num { font-family: var(--serif); line-height: .85; }
.variants { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.variants li { display: flex; flex-direction: column; gap: 18px; font-size: 17px; line-height: 1.5; }
.variants .vbox { width: 56px; height: 56px; display: flex; align-items: center; flex-shrink: 0; }
.variants .v { display: block; border-radius: 50%; background: var(--tom); }
@media (max-width: 900px) { .variants { grid-template-columns: 1fr; gap: 20px; } .variants li { flex-direction: row; align-items: center; gap: 18px; } .variants .vbox { justify-content: center; } }
.diag { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.diag li { padding: 14px 0; border-top: 1px solid rgba(245,240,231,.3); font-size: 18px; line-height: 1.5; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 1.5px; background: var(--fg); }
.steps li { position: relative; display: flex; flex-direction: column; gap: 14px; }
.steps .num { width: 72px; height: 72px; border-radius: 50%; background: var(--mus); color: #230A0A; font-family: var(--serif); font-size: 34px; display: flex; align-items: center; justify-content: center; }
.steps .name { font-size: 20px; font-weight: 700; }
.steps .txt { font-size: 16px; line-height: 1.55; color: var(--fg3); }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 28px; padding-left: 96px; }
  .steps::before { left: 36px; right: auto; top: 8px; bottom: 8px; width: 1.5px; height: auto; }
  .steps .num { position: absolute; left: -96px; top: 0; }
}
.formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.format { border-radius: 24px; padding: clamp(36px, 3.5vw, 48px); display: flex; flex-direction: column; gap: 16px; min-height: 380px; }
.format .dots { display: flex; flex-wrap: wrap; gap: 8px; max-width: 200px; min-height: 44px; }
.format .dots i { width: 18px; height: 18px; border-radius: 50%; background: currentColor; }
.format .big-num { font-size: clamp(96px, 9vw, 128px); }
.format--a { background: var(--surface); }
.format--a .dots i { background: var(--mus); }
.format--b { background: var(--mus); color: #230A0A; }
.format--c { background: #230A0A; color: #F5F0E7; }
.format--c .dots i { background: var(--mus); }
@media (max-width: 900px) { .formats { grid-template-columns: 1fr; } .format { min-height: 0; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips li { padding: 12px 20px; border-radius: 999px; background: rgba(35,10,10,.08); font-size: 17px; }
.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.results li { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); font-size: 19px; line-height: 1.45; }
.results li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--mus); flex-shrink: 0; transform: translateY(-1px); }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.case { padding-top: 28px; border-top: 1.5px solid var(--fg); display: flex; flex-direction: column; gap: 12px; }
.case .h3 { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; gap: 40px; } }
.faq { max-width: 880px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 56px 26px 0; position: relative; font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 1.5px solid var(--fg); background: transparent; transition: background .2s ease; }
.faq details[open] summary::after { background: var(--mus); border-color: var(--mus); }
.faq details p { padding: 0 56px 28px 0; color: var(--fg2); max-width: 760px; }
.photo-round { width: 100%; max-width: 520px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.photo-arch { width: 100%; max-width: 460px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px 20px 999px 999px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ring, .ring-n { transition: none; }
}

/* Franja de autoridad */
.authority { background: var(--surface); padding-block: clamp(56px, 6vw, 80px); }
.authority-in { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(32px, 5vw, 72px); row-gap: 28px; align-items: center; }
.auth-num { display: flex; align-items: baseline; gap: 14px; }
.auth-num .serif { font-size: clamp(88px, 9vw, 140px); line-height: .85; }
.auth-num span:last-child { font-weight: 700; font-size: 17px; max-width: 110px; line-height: 1.3; }
.auth-txt { font-family: var(--serif); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.25; max-width: 720px; }
.auth-list { grid-column: 1 / -1; list-style: none; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 16px; font-weight: 600; color: var(--fg2); }
.auth-list li { display: inline-flex; align-items: center; gap: 28px; }
.auth-list li + li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mus); margin-left: -18px; }
@media (max-width: 760px) { .authority-in { grid-template-columns: 1fr; } .auth-list { flex-direction: column; gap: 12px; } .auth-list li + li::before { display: none; } .auth-list li { gap: 0; } }

/* Sistema Identidad · Método Integra · Estrategia */
.system { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.system::before { content: ""; position: absolute; left: 16%; right: 16%; top: 170px; height: 10px; margin-top: -5px; background-image: radial-gradient(circle, var(--fg) 2.5px, transparent 3px); background-size: 16px 10px; background-repeat: repeat-x; background-position: center; }
.sys { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.sys p { max-width: 340px; font-size: 17px; line-height: 1.6; }
.sys-c { height: 340px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.sys-o { width: 240px; height: 240px; border-radius: 50%; border: 1.5px solid var(--fg); background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; }
.sys--main .sys-o { width: 340px; height: 340px; background: var(--mus); border-color: var(--mus); color: #230A0A; }
.sys-t { font-size: 16px; font-weight: 700; }
.sys-q { font-size: clamp(26px, 2.3vw, 30px); line-height: 1.15; }
.sys--main .sys-q { font-size: clamp(32px, 3vw, 42px); }
.sys--main p { font-size: 19px; font-weight: 600; }
@media (max-width: 900px) {
  .system { grid-template-columns: 1fr; gap: 56px; }
  .system::before { display: none; }
  .sys-c { height: auto; }
  .sys-o { width: 200px; height: 200px; }
  .sys--main .sys-o { width: 280px; height: 280px; }
}

/* Escena de identificación: tipografía como imagen */
.ident { padding-block: clamp(96px, 11vw, 160px) clamp(96px, 10vw, 150px); }
.ident .giant { display: block; font-family: var(--serif); font-size: clamp(64px, 13.4vw, 196px); line-height: .86; letter-spacing: -0.02em; margin-left: -0.04em; }
.ident .second { display: block; font-family: var(--serif); font-size: clamp(30px, 4.2vw, 60px); line-height: 1.05; margin-top: clamp(20px, 2.4vw, 32px); max-width: 16em; }
.ident p { margin-top: clamp(40px, 4vw, 56px); max-width: 560px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.62; }
@media (max-width: 640px) { .ident .giant { font-size: 16.4vw; } }

/* Anillos explorables */
.ring { z-index: calc(10 - var(--i)); }
.ring-n { z-index: 20; pointer-events: none; }
.rings[data-active] .ring { transition: transform 1.3s cubic-bezier(.2,.7,.2,1), opacity 1s ease, background-color .35s ease, border-color .35s ease; }
.rings .ring.is-active { background-color: rgba(200,138,32,.22); border-color: var(--fg); border-width: 2.5px; }
.rings .ring:first-child.is-active { background-color: var(--mus); }
.rings .ring.is-within { border-color: var(--ocre); }
.ring-n.is-active { font-size: 13px; }
.dims button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 44px 190px minmax(0, 1fr); gap: 12px; align-items: baseline; width: 100%; padding: 12px 10px 12px 0; cursor: pointer; border-radius: 6px; transition: background-color .25s ease, padding .25s ease; }
.dims li { display: block; padding: 0; }
.dims button:hover, .dims button.is-active { background: rgba(200,138,32,.16); padding-left: 10px; }
.dims button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rings-hint { margin-top: 20px; text-align: center; font-size: 15px; color: var(--fg3); }
@media (max-width: 640px) { .dims button { grid-template-columns: 36px minmax(0, 1fr); row-gap: 4px; } .dims button .d { grid-column: 2; } }

/* Momento de firma: los puntos encuentran su estructura */
.intro { position: fixed; inset: 0; z-index: 200; background: var(--bg); overflow: hidden; transition: opacity .45s ease; cursor: pointer; }
.intro.is-out { opacity: 0; pointer-events: none; }
.intro i { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--mus); will-change: transform, opacity; transition: transform .95s cubic-bezier(.2,.75,.15,1), opacity .4s ease; }
.intro .skip-intro { position: absolute; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); font: 600 15px var(--sans); color: var(--fg3); background: none; border: 0; cursor: pointer; padding: 12px; }

/* Recortes de retrato sobre círculo (la figura sale por arriba del círculo) */
.cut-wrap { position: relative; width: 100%; max-width: 460px; margin-left: auto; }
.cut { position: relative; width: 100%; aspect-ratio: 1 / 1.1; -webkit-clip-path: url(#cut-shape); clip-path: url(#cut-shape); }
.cut .disc { position: absolute; left: 6%; top: 20%; width: 88%; aspect-ratio: 1; border-radius: 50%; background: var(--mus); }
.cut picture { position: absolute; inset: 0; }
.cut img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.cut-wrap .c2 { position: absolute; right: -2%; bottom: 8%; width: 17%; aspect-ratio: 1; border-radius: 50%; background: var(--tom); }
.cut-wrap .ring-line { position: absolute; left: 0; top: 14.5%; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--fg); }
.cut-wrap .dot-m { position: absolute; left: 4%; top: 12%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: var(--mus); }
.disc--surface { background: var(--surface) !important; }
.disc--cru { background: #F5F0E7 !important; }
@media (max-width: 900px) { .hero .cut-wrap { max-width: 330px; } #autoria .cut-wrap { max-width: 360px; margin-inline: auto; } }
.closing--photo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; }
.closing--photo .cut-wrap { max-width: 380px; margin-inline: auto 0; }
.closing--photo .stack .btn { align-self: flex-start; margin-top: 12px; }
@media (max-width: 900px) { .closing--photo .cut-wrap { max-width: 300px; margin-inline: auto; } .closing--photo .stack .btn { align-self: stretch; } }
.auth-label { grid-column: 1 / -1; font-size: 14px; font-weight: 700; color: var(--ocre); margin-bottom: -16px; }
.hint-touch { display: none; }
@media (hover: none) { .hint-desk { display: none; } .hint-touch { display: inline; } }
.integra-sub { display: block; font-family: var(--serif); font-size: clamp(30px, 3.6vw, 52px); line-height: 1.05; margin-top: 18px; color: var(--fg2); }
.cut--round { -webkit-clip-path: url(#cut-round); clip-path: url(#cut-round); }
.cut--round img { width: 88%; left: 6%; }
.hero .cut-wrap { max-width: 470px; width: 118%; margin-right: -4%; }
@media (max-width: 900px) { .hero .cut-wrap { width: 100%; margin-right: 0; } }
.cut-wrap--round { margin-top: -18%; }
@media (min-width: 901px) { .hero .cut-wrap--round { margin-top: 0; } }

/* Paleta final: mostaza, verde botella, cacao, crudo */
.scene--verde { background: var(--verde); color: #F5F0E7; }
.scene--verde a:not(.btn):hover { color: var(--mus-l); }
.scene--verde :focus-visible { outline-color: var(--mus-l); }
.scene--mus :focus-visible { outline-color: #230A0A; }
.scene--ink .chips li { background: rgba(245,240,231,.12); color: #F5F0E7; }
.cut-wrap .c2 { background: var(--verde); }
.variants .v { background: var(--mus); }

/* Contacto */
.contact { padding-block: clamp(32px, 5vw, 64px) var(--section); }
.contact h1 { font-family: var(--serif); font-size: clamp(48px, 6.2vw, 92px); line-height: .96; }
.next-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.next-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 17px; line-height: 1.5; }
.next-steps > li > span { width: 40px; height: 40px; border-radius: 50%; background: var(--mus); color: #230A0A; font-family: var(--serif); font-size: 20px; display: flex; align-items: center; justify-content: center; }
.form-card { background: var(--surface); border-radius: 28px; padding: clamp(28px, 4vw, 56px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field legend { font-weight: 700; font-size: 16px; line-height: 1.35; padding: 0; }
.field .help { display: block; font-weight: 400; font-size: 14px; color: var(--fg3); margin-top: 2px; }
.field input[type="text"], .field input[type="email"], .field select, .field textarea { font: inherit; font-size: 17px; line-height: 1.45; padding: 14px 16px; border-radius: 12px; border: 1.5px solid #CDBFAC; background: var(--bg); color: var(--fg); width: 100%; }
.field textarea { min-height: 128px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: radial-gradient(circle, var(--mus) 5px, transparent 5.5px); background-repeat: no-repeat; background-position: right 18px center; background-size: 12px 12px; padding-right: 44px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--fg); }
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: #A3341F; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 20px; border-radius: 999px; border: 1.5px solid #CDBFAC; background: var(--bg); font-size: 16px; font-weight: 600; cursor: pointer; }
.pill input:checked + span { background: var(--mus); border-color: var(--mus); color: #230A0A; }
.pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--mus); }
.legal-note { font-size: 14px; line-height: 1.55; color: var(--fg3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: 15px; font-weight: 600; min-height: 1em; }
.form-msg.is-error { color: #A3341F; }
.btn[disabled] { opacity: .6; cursor: progress; }
.thanks { min-height: 70vh; display: flex; align-items: center; padding-block: var(--section); }
@media (max-width: 900px) { .contact-photo { display: none; } }
.hero .cut--round img { width: 100%; left: 2%; }
.ringed { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin-left: auto; }
.ringed .ring-line { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--fg); }
.ringed .dot-m { position: absolute; left: 3%; top: 3%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: var(--mus); z-index: 1; }
.ringed img { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; object-fit: cover; border-radius: 50%; }
@media (max-width: 900px) { .ringed { max-width: 340px; margin-inline: auto; } }
.legal-page { max-width: 880px; margin-left: 0; }
.legal-page .h3-legal { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; margin-top: 32px; }
.legal-page p { max-width: 760px; color: var(--fg2); }
.next-steps li div { min-width: 0; }

/* Contenido pendiente de Ángela: visible y señalado para la revisión */
.pending { border: 1.5px dashed var(--mus); border-radius: 12px; padding: 12px 16px; background: rgba(200,138,32,.08); color: var(--fg2); font-size: 16px; line-height: 1.55; }
.pending::before { content: "Pendiente de Ángela"; display: block; font: 700 12px/1.4 var(--sans); letter-spacing: .03em; color: var(--ocre); margin-bottom: 4px; }

/* Cierres: fondo arena, el mostaza queda solo en el círculo de la foto y el botón */
.closing { background: var(--surface); color: var(--fg); }
.closing a:not(.btn):hover { color: var(--fg); }

/* Comillas sin círculo */
.quote-mark { background: transparent !important; color: var(--mus); width: auto !important; height: auto !important; aspect-ratio: auto; padding: 0; font-size: clamp(88px, 9vw, 140px); line-height: .7; display: block; }

/* Pasos del contacto: números sin círculo */
.next-steps > li > span { background: transparent; width: auto; height: auto; font-size: 30px; color: var(--ocre); justify-content: flex-start; line-height: 1; }

/* Franja de autoridad: cargos */
.auth-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; }
.auth-list li { display: flex; gap: 12px; align-items: baseline; }
.auth-list li::before, .auth-list li + li::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--mus); margin: 0; flex-shrink: 0; transform: translateY(-1px); }
@media (max-width: 760px) { .auth-list { grid-template-columns: 1fr; } .auth-list li + li::before { display: block; } }

/* Testimonio breve en Contacto */
.mini-quote { border-left: 3px solid var(--mus); padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.mini-quote blockquote { font-family: var(--serif); font-size: 22px; line-height: 1.3; }
.mini-quote figcaption { font-size: 15px; color: var(--fg3); }

/* Botones: estados fijos y legibles al pasar, pulsar o enfocar, en cualquier escena */
.btn { -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
a.btn, a.btn:visited { color: #230A0A; }
a.btn:hover, a.btn:active, a.btn:focus-visible, button.btn:hover, button.btn:active { background: #E0A43C; color: #230A0A; }
a.btn.btn--ink, a.btn.btn--ink:visited { background: #230A0A; color: #F5F0E7; }
a.btn.btn--ink:hover, a.btn.btn--ink:active, a.btn.btn--ink:focus-visible { background: #4A2A24; color: #F5F0E7; }
a.btn.btn--line, a.btn.btn--line:visited { background: transparent; color: var(--fg); }
a.btn.btn--line:hover, a.btn.btn--line:active, a.btn.btn--line:focus-visible { background: var(--fg); color: var(--bg); }
@media (max-width: 1080px) {
  .nav a.btn.btn--line, .nav a.btn.btn--line:visited { background: var(--mus); border-color: var(--mus); color: #230A0A; }
  .nav a.btn.btn--line:hover, .nav a.btn.btn--line:active, .nav a.btn.btn--line:focus-visible { background: #E0A43C; border-color: #E0A43C; color: #230A0A; }
}
@media (min-width: 640px) { .btn { white-space: nowrap; } }

/* Página de casos */
.case-head { position: sticky; top: 112px; }
.case-pull { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.22; color: var(--fg); border-left: 3px solid var(--mus); padding-left: 20px; margin-top: 8px; }
.case-body h3 { font-size: 15px; font-weight: 700; color: var(--ocre); }
.case-body p { font-size: 18px; line-height: 1.7; color: var(--fg2); }
.case-change p { color: var(--fg); }
.case-index { display: flex; flex-direction: column; gap: 12px; font-weight: 600; font-size: 16px; }
.case-index a { text-decoration: none; padding: 10px 0; border-top: 1px solid var(--line); }
.case-index a:hover { text-decoration: underline; }
@media (max-width: 900px) { .case-head { position: static; } }

/* Anillos de pregunta (Identidad: círculo interior; Estrategia: anillo exterior) */
.q-rings { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin-left: auto; }
.q-rings span.q1, .q-rings span.q2, .q-rings span.q3 { position: absolute; border-radius: 50%; border: 1.5px solid var(--fg); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.q-rings .q1 { width: 100%; height: 100%; }
.q-rings .q2 { width: 68%; height: 68%; }
.q-rings .q3 { width: 36%; height: 36%; }
.q-in .q3 { background: var(--mus); border-color: var(--mus); width: 44%; height: 44%; }
.q-rings.q-out span.q1 { border: 22px solid var(--mus); }
.q-label { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.1; padding: 0 28%; color: var(--fg); }
.q-in .q-label { color: #230A0A; padding: 0 30%; }
@media (max-width: 900px) { .q-rings { max-width: 260px; margin: 8px auto 0; } }

/* Recorrido entre servicios */
.cont-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cont { display: flex; flex-direction: column; gap: 6px; padding: 24px 28px; border-radius: 20px; border: 1.5px solid var(--line); text-decoration: none; }
.cont:hover { border-color: var(--fg); }
.cont.is-cur { background: var(--surface); border-color: var(--surface); }
.cont-t { font-size: 15px; font-weight: 700; }
.cont-q { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
@media (max-width: 760px) { .cont-nav { grid-template-columns: 1fr; } }

/* Documento entregable */
.doc-card { background: var(--bg); border-radius: 18px; padding: clamp(28px, 3vw, 44px); box-shadow: 0 1px 0 var(--line), 0 24px 48px -28px rgba(35,10,10,.35); position: relative; }
.doc-card::before { content: ""; position: absolute; right: 28px; top: 28px; width: 18px; height: 18px; border-radius: 50%; background: var(--mus); }
.doc-title { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.15; padding-right: 40px; padding-bottom: 20px; border-bottom: 1.5px solid var(--fg); margin-bottom: 8px; }
.doc-card ol { list-style: none; margin: 0; padding: 0; }
.doc-card li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.4; }
.doc-card li span { font-size: 14px; font-weight: 700; color: var(--ocre); }

/* Doce meses */
.months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; position: relative; }
.months::before { content: ""; position: absolute; left: 4%; right: 4%; top: 22px; height: 1.5px; background: var(--fg); }
.months li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.m-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--fg); }
.m-n { font-size: 14px; font-weight: 700; color: var(--ocre); }
@media (max-width: 640px) { .months { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 20px; } .months::before { display: none; } .m-dot { width: 34px; height: 34px; } }

/* Sobre Ángela */
.career--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .career--6 { grid-template-columns: 1fr; } }
.chips--line li { background: transparent; border: 1.5px solid var(--line); color: var(--fg); }
.form-list { list-style: none; margin: 0; padding: 0; }
.form-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.form-list li span { font-size: 15px; color: var(--fg3); }

/* Método Integra: resultados sobre cacao */
.results-ink .results li { border-top-color: rgba(245,240,231,.2); color: #F5F0E7; font-size: 17px; }

/* Ajustes menores */
.scene--ink .chips li { background: #3D2521; color: #F5F0E7; }
.pending { background: #F4E7CF; }


@media (max-width: 640px) {
  .sys-o { width: 180px; height: 180px; }
  .sys--main .sys-o { width: 240px; height: 240px; }
  .system { gap: 40px; }
  .thumb { height: 150px; }
}

/* Home según el brief */
.display--long { font-size: clamp(46px, 6vw, 92px); line-height: .98; }
.hero-kicker { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; font-weight: 600; margin-top: 32px; max-width: 580px; }
.hero-kicker span { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; margin-top: 6px; color: var(--ocre); }
.hero .hero-kicker + .lead { margin-top: 20px; }
.te-aporta { font-size: 16px; line-height: 1.6; color: #F5F0E7; border-top: 1px solid rgba(245,240,231,.25); padding-top: 16px; max-width: 540px; }
.te-aporta strong { color: var(--mus-l); }
.te-aporta--light { color: var(--fg2); border-top-color: var(--line); }
.te-aporta--light strong { color: var(--ocre); }
.quotes4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 96px); row-gap: clamp(40px, 5vw, 64px); }
.quotes4 blockquote { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.22; color: #F5F0E7; }
.quotes4 figure { display: flex; flex-direction: column; gap: 16px; }
.quotes4 figcaption { font-size: 15px; color: var(--on-ink2); }
@media (max-width: 760px) { .quotes4 { grid-template-columns: 1fr; } }
/* Página de testimonios */
.t-grid { columns: 2; column-gap: clamp(32px, 5vw, 72px); }
.t-item { break-inside: avoid; margin: 0 0 clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1.5px solid var(--fg); display: flex; flex-direction: column; gap: 16px; }
.t-item blockquote { font-family: var(--serif); font-size: clamp(21px, 1.9vw, 26px); line-height: 1.3; }
.t-item--long blockquote { font-family: var(--sans); font-size: 18px; line-height: 1.7; color: var(--fg2); }
.t-item figcaption { font-size: 15px; color: var(--fg3); }
@media (max-width: 760px) { .t-grid { columns: 1; } }
.intro { display: none; }

/* Aviso de cookies (solo aparece si la analítica está activada) */
.cookie-bar { position: fixed; z-index: 120; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 760px; margin: 0 auto; background: #230A0A; color: #F5F0E7; border-radius: 20px; padding: 20px 24px; display: flex; gap: 20px; align-items: center; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.cookie-bar p { font-size: 15px; line-height: 1.5; }
.cookie-bar a { color: #F5F0E7; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-bar .btn { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.cookie-bar a.btn--line, .cookie-bar button.btn--line { color: #F5F0E7; border-color: #F5F0E7; background: transparent; }
@media (max-width: 640px) { .cookie-bar { flex-direction: column; align-items: stretch; } .cookie-actions .btn { flex: 1; } }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; color: inherit; }

/* Pin-pon: alternancia de lados entre secciones */
.grid.flip > * { grid-row: 1; }
.grid.flip > .c-5 { grid-column: 8 / span 5; }
.grid.flip > .c-6 { grid-column: 7 / span 6; }
.grid.flip > .c-7 { grid-column: 6 / span 7; }
.grid.flip > .c-5r { grid-column: 1 / span 5; }
.grid.flip > .c-6r { grid-column: 1 / span 6; }
.grid.flip > .c-4r { grid-column: 1 / span 4; }
.grid.flip .cut-wrap, .grid.flip .ringed, .grid.flip .q-rings, .grid.flip .rings { margin-left: 0; margin-right: auto; }
.grid.flip .photo-arch, .grid.flip .photo-round { margin-right: auto; }
.grid.flip .case-head { order: 2; }
.split.flip > .left { order: 2; }
.split.flip > .left .stack { margin-left: 0; margin-right: auto; }
.split.flip > .left .moon { left: auto !important; right: -120px; }
.closing--photo.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.closing--photo.flip > .cut-wrap { order: -1; margin-inline: 0 auto; }
.ident--right .wrap { text-align: right; }
.ident--right .giant { margin-left: 0; margin-right: -0.04em; }
.ident--right .second, .ident--right p { margin-left: auto; }
@media (max-width: 900px) {
  .grid.flip > * { grid-row: auto !important; }
  .split.flip > .left { order: 0; }
  .closing--photo.flip { grid-template-columns: 1fr; }
  .closing--photo.flip > .cut-wrap { order: 0; margin-inline: auto; }
  .grid.flip .rings { margin-inline: auto; }
  .ident--right .wrap { text-align: left; }
  .ident--right .second, .ident--right p { margin-left: 0; }
}
/* Cuando el cierre sigue a una sección arena, se separa con un marco crudo */
.scene--surface + .closing, .scene--surface + article + .closing { margin-top: clamp(12px, 2.2vw, 32px); }
.case-full.scene--surface + .closing { margin-top: clamp(12px, 2.2vw, 32px); }

/* Revisión de Ángela */
.field input[type="tel"] { font: inherit; font-size: 17px; line-height: 1.45; padding: 14px 16px; border-radius: 12px; border: 1.5px solid #CDBFAC; background: var(--bg); color: var(--fg); width: 100%; }
.field input[type="tel"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--fg); }
.t-item blockquote { font-family: var(--serif); font-size: clamp(20px, 1.7vw, 23px); line-height: 1.35; color: var(--fg); }
.ringed--disc .ring-disc { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; border-radius: 50%; background: var(--mus); }
.ringed--disc img { object-position: center top; }
.authority-in { align-items: center; }
.brand img { height: 42px; }
@media (max-width: 1080px) { .brand img { height: 32px; } }
.cut-wrap--bn { max-width: 440px; }

/* Primera pantalla: menú en una línea y rostro visible (portátiles con zoom 125–150 %) */
.nav a { white-space: nowrap; }
@media (min-width: 1081px) and (max-width: 1400px) {
  .site-header .wrap { gap: 20px; }
  .brand img { height: 34px; }
  .nav { gap: clamp(16px, 1.6vw, 24px); font-size: 15px; }
  .nav .btn--line { min-height: 48px; padding: 12px 20px; font-size: 15px; }
}
@media (min-width: 901px) {
  .hero .grid { align-items: start; }
  .hero .display--long { font-size: clamp(44px, min(5.4vw, 10.5vh), 88px); }
  .hero .hero-media { align-self: start; padding-top: clamp(8px, 2vh, 24px); }
  .hero .cut-wrap--bn { max-width: min(440px, max(250px, calc((100vh - 370px) * 0.86))); margin-left: auto; }
}
.hero .hero-who { margin-top: 18px; text-align: center; }
@media (min-width: 901px) { .hero .hero-who { max-width: min(440px, max(250px, calc((100vh - 370px) * 0.86))); margin-left: auto; } }
.hero-actions--photo { display: none; }
@media (min-width: 901px) {
  .hero .hero-actions--text { display: none; }
  .hero .hero-actions--photo { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 22px; max-width: max(250px, calc((100vh - 370px) * 0.86)); margin-left: auto; }
  .hero .hero-media { display: flex; flex-direction: column; align-items: flex-end; }
  .hero .hero-media > * { width: 100%; }
}
/* Hero escritorio: columna derecha centrada y foto más grande */
@media (min-width: 901px) {
  .hero { padding-top: clamp(18px, 3vh, 36px); }
  .hero .hero-media { grid-column: 8 / -1 !important; align-items: center; padding-top: 0; }
  .hero .hero-media > * { width: 100%; }
  .hero .cut-wrap.cut-wrap--bn { width: 100%; max-width: min(440px, max(280px, calc((100vh - 270px) * 0.9))); margin-inline: auto; }
  .hero .hero-who, .hero .hero-actions--photo { max-width: none; margin-inline: auto; }
  .hero .hero-actions--photo { justify-content: center; }
}
/* Estrategia: el texto del círculo cabe dentro del anillo interior */
.q-rings.q-out { container-type: inline-size; }
.q-rings.q-out .q-label { font-size: max(15px, 5.6cqw); line-height: 1.1; padding: 0 30%; }
.q-rings.q-out .q3 { width: 46%; height: 46%; }
.q-rings.q-out .q2 { width: 72%; height: 72%; }
/* Identidad · Qué trabajamos: órbita de 8 puntos (uno por cada aspecto) */
.orbit-col { position: sticky; top: 120px; }
.orbit { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; margin-top: clamp(40px, 5vw, 64px); }
.orbit-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--fg); }
.orbit-ring--mid { inset: 22%; border-style: dashed; opacity: .45; }
.orbit-core { position: absolute; inset: 36%; border-radius: 50%; background: var(--mus); }
.orbit-dot { position: absolute; width: 7%; aspect-ratio: 1; border-radius: 50%; background: var(--mus); left: calc(50% + 50% * sin(var(--a))); top: calc(50% - 50% * cos(var(--a))); transform: translate(-50%, -50%); }
@media (max-width: 900px) { .orbit-col { position: static; } .orbit { display: none; } }
@media (min-width: 901px) { .hero .hero-actions--photo.hero-actions--ring { max-width: 380px; margin: 32px 0 0 auto; } }
.q-rings.q-in { container-type: inline-size; }
.q-rings.q-in .q-label { font-size: max(15px, 5.4cqw); padding: 0 32%; }
/* Estrategia · Punto de partida: del punto de origen al objetivo */
.route { display: block; width: 100%; max-width: 380px; height: auto; margin-top: clamp(36px, 4.5vw, 60px); overflow: visible; }
.route-path { fill: none; stroke: #F5F0E7; stroke-width: 1.5; stroke-dasharray: 5 7; opacity: .7; }
.route-start { fill: var(--mus); }
.route-start-halo { fill: none; stroke: var(--mus); stroke-width: 1.5; opacity: .5; }
.route-goal { fill: none; stroke: #F5F0E7; stroke-width: 1.5; }
@media (max-width: 900px) { .route { display: none; } }
.route-goal-dot { fill: #F5F0E7; }
/* Estrategia · Plan a 12 meses en horizontal */
.grid > .c-12 { grid-column: 1 / -1; }
.doc-card--wide ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.doc-card--wide li { grid-template-columns: 1fr; align-content: start; row-gap: 6px; padding: 18px 0; }
.doc-card--wide li:nth-child(n+6) { border-bottom: 0; }
@media (max-width: 1080px) { .doc-card--wide ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doc-card--wide li:nth-child(n+6) { border-bottom: 1px solid var(--line); } .doc-card--wide li:nth-child(n+9) { border-bottom: 0; } }
@media (max-width: 640px) { .doc-card--wide ol { grid-template-columns: 1fr; } .doc-card--wide li { grid-template-columns: 40px minmax(0, 1fr); padding: 11px 0; } .doc-card--wide li:nth-child(9) { border-bottom: 1px solid var(--line); } }
/* Tres preguntas: tarjetas con icono, flecha y estado actual */
.cont-nav { gap: clamp(14px, 1.6vw, 24px); }
.cont { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 22px; row-gap: 22px; align-items: center; padding: clamp(24px, 2.4vw, 34px); border-radius: 24px; border: 1.5px solid var(--line); background: var(--bg); color: var(--fg); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.cont-ico { width: 56px; height: 56px; grid-row: 1 / 3; align-self: start; overflow: visible; }
.cont-ico .ln { fill: none; stroke: currentColor; stroke-width: 1.3; }
.cont-ico .fl, .cont-ico .dot { fill: var(--mus); }
.cont-ico .thick { fill: none; stroke: var(--mus); stroke-width: 5; }
.cont-txt { display: flex; flex-direction: column; gap: 8px; }
.cont-t { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ocre); }
.cont-q { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; }
.cont-go { justify-self: start; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--fg); font-size: 18px; line-height: 1; transition: background .25s ease, border-color .25s ease; }
.cont:hover { transform: translateY(-4px); border-color: var(--fg); box-shadow: 0 22px 40px -26px rgba(35,10,10,.45); }
.cont:hover .cont-go { background: var(--mus); border-color: var(--mus); }
.cont.is-cur { background: #230A0A; border-color: #230A0A; color: #F5F0E7; }
.cont.is-cur .cont-t { color: var(--mus-l, #E0A43C); }
.cont.is-cur:hover { transform: none; box-shadow: none; }
.cont-here { width: auto; height: auto; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--mus); color: #230A0A; font-size: 13px; font-weight: 700; }
@media (max-width: 760px) { .cont { grid-template-rows: auto; row-gap: 14px; } .cont-go { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .cont, .cont:hover { transition: none; transform: none; } }
a.cont:not(.btn):hover, a.cont:focus-visible { color: var(--fg); }
.cont:hover .cont-go { color: #230A0A; }
a.cont.is-cur:not(.btn):hover { color: #F5F0E7; }
/* Tarjetas: estado de reposo visible y página actual en verde */
.cont.is-cur .cont-ico .ln { stroke: #F5F0E7; }
/* Tercera tarjeta (Estrategia) siempre en verde */
a.cont.cont--estrategia, a.cont.cont--estrategia:not(.btn):hover { background: #1F4A3D; border-color: #1F4A3D; color: #F5F0E7; box-shadow: 0 18px 36px -24px rgba(31,74,61,.7); }
a.cont.cont--estrategia .cont-t { color: var(--mus-l, #E0A43C); }
a.cont.cont--estrategia .cont-ico .ln { stroke: #F5F0E7; }
a.cont.cont--estrategia .cont-go { border-color: #F5F0E7; }
/* Tarjeta central (Método Integra): caja visible */
a.cont.cont--metodo-integra:not(.is-cur) { background: #EDE4D5; border-color: rgba(35,10,10,.28); box-shadow: 0 16px 32px -22px rgba(35,10,10,.4); }
/* Testimonios como hoja de prensa: papel blanco sobre crudo */
.t-item { background: #FFFFFF; border-top: 0; border-radius: 4px; padding: clamp(28px, 3vw, 44px); box-shadow: 0 1px 2px rgba(35,10,10,.06), 0 18px 40px -28px rgba(35,10,10,.35); position: relative; }
.t-item::before { content: ""; display: block; width: 48px; height: 3px; background: var(--mus); margin-bottom: 6px; }
.t-item figcaption { padding-top: 16px; border-top: 1px solid var(--line); }
.t-grid .t-item { margin-bottom: clamp(24px, 2.6vw, 36px); }
/* Testimonio largo (David López) a todo el ancho, en dos columnas tipo periódico */
@media (min-width: 761px) {
  .t-grid .t-item--wide { column-span: all; }
  .t-item--wide blockquote { columns: 2; column-gap: clamp(32px, 4vw, 56px); column-rule: 1px solid var(--line); }
}
.t-cta { column-span: all; display: flex; justify-content: center; margin: 0 0 clamp(24px, 2.6vw, 36px); }
/* Sobre Ángela: relato en dos columnas bajo la frase destacada */
.about-story { padding-top: clamp(24px, 3vw, 48px); }
.about-quote { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.1; max-width: 900px; }
.about-quote::after { content: ""; display: block; width: 64px; height: 4px; background: var(--mus); margin-top: clamp(20px, 2vw, 28px); }
.about-cols { columns: 2; column-gap: clamp(40px, 5vw, 80px); }
.about-cols .lead { margin: 0 0 1.1em; break-inside: avoid; }
@media (max-width: 900px) { .about-cols { columns: 1; } }
/* Botón de contacto del menú en verde (escritorio); mostaza al pasar el ratón */
@media (min-width: 1081px) {
  .nav a.btn.btn--line, .nav a.btn.btn--line:visited { background: #1F4A3D; border-color: #1F4A3D; color: #F5F0E7; }
  .nav a.btn.btn--line:hover, .nav a.btn.btn--line:active, .nav a.btn.btn--line:focus-visible { background: var(--mus); border-color: var(--mus); color: #230A0A; }
}
/* Botones flotantes: Método Integra (centro) y LinkedIn (derecha) */
.floaters { position: fixed; inset: auto 0 0 0; z-index: 40; pointer-events: none; }
.float-cta { position: absolute; left: 50%; bottom: clamp(16px, 2.4vw, 28px); transform: translate(-50%, 140%); display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 999px; background: var(--mus); color: #230A0A; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(35,10,10,.45); opacity: 0; transition: transform .35s ease, opacity .35s ease, background .2s ease; }
.floaters.show-cta .float-cta { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
a.float-cta:not(.btn):hover { background: #E0A43C; color: #230A0A; }
.float-in { position: absolute; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 28px); width: 56px; height: 56px; border-radius: 50%; background: #1F4A3D; color: #F5F0E7; display: flex; align-items: center; justify-content: center; text-decoration: none; font-family: var(--sans); font-weight: 800; font-size: 22px; letter-spacing: -.02em; box-shadow: 0 12px 26px -12px rgba(31,74,61,.7); pointer-events: auto; transition: transform .2s ease, background .2s ease; }
a.float-in:not(.btn):hover { background: var(--mus); color: #230A0A; transform: translateY(-3px); }
.float-in span { transform: translateY(-1px); }
@media (max-width: 640px) { .float-cta { padding: 13px 20px; font-size: 15px; left: 16px; transform: translateY(140%); } .floaters.show-cta .float-cta { transform: none; } .float-in { width: 50px; height: 50px; font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .float-cta, .float-in { transition: none; } }
@media print { .floaters { display: none; } }
.float-cta { border: 2px solid #F5F0E7; box-shadow: 0 0 0 1px rgba(35,10,10,.12), 0 14px 30px -12px rgba(35,10,10,.55); }
.float-in { border: 2px solid #F5F0E7; }
/* LinkedIn a media altura de la pantalla, pegado a la derecha */
.float-in { bottom: 50vh; transform: translateY(50%); }
a.float-in:not(.btn):hover { transform: translateY(50%) translateX(-3px); }
@media (max-width: 640px) { .float-in { right: 12px; width: 46px; height: 46px; font-size: 19px; } }
/* LinkedIn con sus colores de marca */
.float-in { background: #0A66C2; color: #FFFFFF; border-color: #FFFFFF; box-shadow: 0 12px 26px -12px rgba(10,102,194,.7); }
a.float-in:not(.btn):hover { background: #004182; color: #FFFFFF; }
/* Sobre fondos mostaza, la pastilla pasa a cacao para no fundirse */
.floaters.on-mus .float-cta { background: #230A0A; color: #F5F0E7; border-color: #F5F0E7; }
.floaters.on-mus a.float-cta:not(.btn):hover { background: #1F4A3D; color: #F5F0E7; }
.float-in { right: clamp(10px, 1vw, 16px); }
/* Pie de página visual */
.site-footer { position: relative; overflow: hidden; padding-block: clamp(64px, 7vw, 104px) 40px; }
.site-footer .wrap { position: relative; z-index: 1; }
.foot-claim { font-size: clamp(40px, 5.6vw, 84px); line-height: 1; letter-spacing: -.01em; max-width: 12ch; color: #F5F0E7; margin: 0 0 clamp(48px, 6vw, 80px); }
.foot-rings { position: absolute; right: clamp(-220px, -10vw, -80px); top: clamp(-160px, -8vw, -60px); width: clamp(360px, 44vw, 640px); aspect-ratio: 1; pointer-events: none; }
.foot-rings span { position: absolute; border-radius: 50%; border: 1.5px solid rgba(224,164,60,.35); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.foot-rings span:nth-child(1) { width: 100%; height: 100%; }
.foot-rings span:nth-child(2) { width: 70%; height: 70%; }
.foot-rings span:nth-child(3) { width: 40%; height: 40%; }
.foot-rings .core { width: 16%; height: 16%; border: 0; background: var(--mus); }
.site-footer .top { align-items: flex-start; padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid #4A302B; }
.foot-brand img { height: 40px; width: auto; display: block; }
.foot-brand p { margin-top: 12px; color: #BFAFA3; font-size: 15px; }
.site-footer nav.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); column-gap: clamp(40px, 5vw, 88px); row-gap: 32px; }
.foot-cols > div { display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.foot-h { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mus-l, #E0A43C); margin-bottom: 4px; }
.site-footer .foot-cols a { text-decoration: none; }
.site-footer .foot-cols a:not(.btn):hover { color: var(--mus-l, #E0A43C); }
.foot-in { display: inline-flex; align-items: center; gap: 10px; }
.foot-in span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #0A66C2; color: #FFFFFF; font-weight: 800; font-size: 14px; }
@media (max-width: 900px) { .site-footer nav.foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-rings { opacity: .6; } }
@media (max-width: 640px) { .site-footer nav.foot-cols { grid-template-columns: 1fr 1fr; column-gap: 24px; } .foot-cols > div:last-child { grid-column: 1 / -1; } .foot-brand img { width: 240px; height: auto; } }
@media (max-width: 640px) { .foot-rings { width: 320px; right: -170px; top: -150px; opacity: .5; } .foot-rings .core { display: none; } }
/* Pie en verde botella */
.site-footer { background: #1F4A3D; }
.site-footer .top, .site-footer .legal { border-top-color: rgba(245,240,231,.18); }
.foot-brand p, .site-footer .legal, .site-footer .legal a { color: #C9D6CF; }
.foot-rings span { border-color: rgba(224,164,60,.45); }
/* Pie en dos bandas: frase en verde, base en cacao */
.site-footer { padding: 0; background: #230A0A; }
.foot-hero { position: relative; overflow: hidden; background: #1F4A3D; padding-block: clamp(64px, 7vw, 104px); }
.foot-hero .wrap { position: relative; z-index: 1; }
.foot-hero .foot-claim { margin: 0; }
.foot-base { background: #230A0A; padding-block: clamp(48px, 5vw, 72px) 40px; }
.site-footer .foot-base .top { border-top: 0; padding-top: 0; }
.site-footer .legal { border-top-color: #4A302B; }
.foot-brand p, .site-footer .legal, .site-footer .legal a { color: #BFAFA3; }
/* Base del pie: una sola franja compacta */
.foot-base { padding-block: 18px; }
.foot-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; font-size: 14px; color: #BFAFA3; }
.foot-bar a { color: #F5F0E7; }
.foot-contact { display: flex; align-items: center; gap: 16px; }
.foot-contact a { text-decoration: none; }
.foot-legal { display: flex; gap: 24px; }
.foot-legal a { color: #BFAFA3; }
.foot-bar .foot-in span { width: 26px; height: 26px; font-size: 13px; }
@media (max-width: 760px) { .foot-bar { flex-direction: column; align-items: flex-start; gap: 12px; } .foot-base { padding-block: 22px; } }
.site-footer nav.foot-legal { display: flex; gap: 24px; font-size: 14px; }
/* Sobre Ángela: relato en mostaza para separar del inicio */
.about-story { padding-top: clamp(64px, 7vw, 104px); }
.scene--mus .about-quote::after { background: #230A0A; }
.scene--mus .about-cols .lead { color: #230A0A; }
.scene--mus .about-quote { color: #FFFFFF; }
.scene--mus .about-quote::after { background: #FFFFFF; }
/* El botón flotante sube por encima de la franja final del pie */
.float-cta { bottom: calc(clamp(16px, 2.4vw, 28px) + var(--lift, 0px)); transition: transform .35s ease, opacity .35s ease, background .2s ease, bottom .15s linear; }
/* Botón Método Integra del menú: en su propia página se marca en mostaza */
@media (min-width: 1081px) { .nav a.btn.nav-cta[aria-current="page"] { text-decoration: none; background: var(--mus); border-color: var(--mus); color: #230A0A; } }
/* Colores definitivos: menú en mostaza (Método Integra) y flotante en verde (contacto) */
@media (min-width: 1081px) {
  .nav a.btn.btn--line, .nav a.btn.btn--line:visited { background: var(--mus); border-color: var(--mus); color: #230A0A; }
  .nav a.btn.btn--line:hover, .nav a.btn.btn--line:active, .nav a.btn.btn--line:focus-visible { background: #E0A43C; border-color: #E0A43C; color: #230A0A; }
  .nav a.btn.nav-cta[aria-current="page"] { background: #230A0A; border-color: #230A0A; color: #F5F0E7; }
}
.float-cta { background: #1F4A3D; color: #F5F0E7; }
a.float-cta:not(.btn):hover { background: var(--mus); color: #230A0A; }
.floaters.on-mus .float-cta { background: #1F4A3D; color: #F5F0E7; }
.floaters.on-green .float-cta { background: #230A0A; color: #F5F0E7; }
.floaters.on-green a.float-cta:not(.btn):hover { background: var(--mus); color: #230A0A; }
/* Casos: forma bajo la frase destacada, con el número del caso */
.case-vis { position: relative; width: clamp(170px, 16vw, 230px); aspect-ratio: 1; margin-top: clamp(16px, 2vw, 28px); }
.case-vis span { position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.case-vis .cv-r1 { width: 100%; height: 100%; border: 1.5px solid rgba(35,10,10,.35); }
.case-vis .cv-r2 { width: 72%; height: 72%; border: 1.5px dashed rgba(35,10,10,.35); }
.case-vis .cv-core { width: 46%; height: 46%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: clamp(30px, 2.8vw, 42px); line-height: 1; }
.grid.flip .case-vis { margin-left: 0; }
@media (max-width: 900px) { .case-vis { display: none; } }
.floaters.on-green .float-cta { background: var(--mus); color: #230A0A; }
.floaters.on-green a.float-cta:not(.btn):hover { background: #E0A43C; color: #230A0A; }
/* Sobre Ángela · Trayectoria: círculos que crecen hasta el +20 */
.traj { display: block; width: 100%; max-width: 380px; height: auto; margin-top: clamp(28px, 3.5vw, 48px); overflow: visible; }
.traj-l { stroke: #230A0A; stroke-width: 1.3; }
.traj-o { fill: var(--surface); stroke: #230A0A; stroke-width: 1.3; }
.traj-f { fill: var(--mus); }
.traj-t { font-family: var(--serif); font-size: 26px; fill: #230A0A; }
@media (max-width: 900px) { .traj { display: none; } }
/* ===== Menú móvil rediseñado ===== */
@media (max-width: 1080px) {
  .nav { counter-reset: nav; height: calc(100dvh - 72px); overflow-y: auto; gap: 0; padding: 12px var(--pad) 32px; background: #F5F0E7; color: #230A0A; border-top: 1px solid var(--line); }
  .nav > a:not(.btn) { counter-increment: nav; display: flex; align-items: baseline; gap: 16px; font-family: var(--serif); font-size: 26px; line-height: 1.15; padding: 18px 0; color: #230A0A; border-bottom: 1px solid var(--line); text-decoration: none; }
  .nav > a:not(.btn)::before { content: "0" counter(nav); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ocre); min-width: 22px; }
  .nav > a:not(.btn)::after { content: "→"; margin-left: auto; font-family: var(--sans); font-size: 18px; color: var(--ocre); }
  .nav > a:not(.btn)[aria-current="page"] { text-decoration: none; color: var(--ocre); }
  .nav a.btn.btn--line, .nav a.btn.btn--line:visited { margin-top: 28px; align-self: stretch; min-height: 54px; font-size: 16px; font-family: var(--sans); background: var(--mus); border-color: var(--mus); color: #230A0A; }
  .nav a.btn.btn--line[aria-current="page"] { background: #230A0A; border-color: #230A0A; color: #F5F0E7; }
  .menu-open, .menu-open body { overflow: hidden; }
  .menu-open .floaters { display: none; }
}
/* Botón flotante centrado en móvil */
@media (max-width: 640px) {
  .float-cta { left: 50%; right: auto; transform: translate(-50%, 140%); padding: 13px 22px; }
  .floaters.show-cta .float-cta { transform: translate(-50%, 0); }
  .float-in { right: 10px; }
}
.nav-extra { display: none; }
@media (max-width: 1080px) {
  .nav-extra { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 32px; font-size: 15px; }
  .nav .nav-extra a { font-family: var(--sans); font-size: 15px; padding: 0; color: var(--fg2, #5A4640); text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 1080px) { .nav { background: #EDE6D9; } }
@media (max-width: 1080px) { .nav > a:not(.btn)::before { content: none; } }
@media (max-width: 1080px) {
  .nav { padding-top: 8px; }
  .nav > a:not(.btn) { font-size: 21px; line-height: 1.2; letter-spacing: .005em; padding: 16px 0; }
  .nav > a:not(.btn)::after { font-size: 15px; opacity: .7; }
  .nav a.btn.btn--line, .nav a.btn.btn--line:visited { margin-top: 24px; min-height: 48px; font-size: 15px; }
}
@media (max-width: 1080px) {
  .nav > a:not(.btn) { justify-content: flex-end; text-align: right; }
  .nav > a:not(.btn)::after { content: none; }
}
/* ===== Menú móvil editorial (pantalla completa) ===== */
.nav-deco, .nav-claim { display: none; }
@media (max-width: 1080px) {
  .nav { position: fixed; left: 0; right: 0; top: 72px; bottom: 0; height: auto; display: flex; visibility: hidden; opacity: 0; pointer-events: none; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 0; padding: clamp(28px, 6vh, 56px) var(--pad) 28px; background: #230A0A; color: #F5F0E7; border-top: 0; overflow: hidden auto; transition: opacity .3s ease, visibility 0s linear .3s; }
  .nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .3s ease; }
  .nav > a:not(.btn) { position: relative; z-index: 1; display: block; border: 0; padding: 8px 0; font-family: var(--serif); font-size: clamp(34px, 10vw, 44px); line-height: 1.05; letter-spacing: -.01em; color: #F5F0E7; text-align: right; opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease, color .2s ease; }
  .nav > a:not(.btn)::before, .nav > a:not(.btn)::after { content: none; }
  .nav > a:not(.btn)[aria-current="page"] { color: var(--mus-l, #E0A43C); }
  .nav a.btn.btn--line, .nav a.btn.btn--line:visited { position: relative; z-index: 1; align-self: flex-end; margin-top: clamp(28px, 5vh, 44px); min-height: 0; padding: 0 0 6px; border: 0; border-radius: 0; background: transparent; color: #F5F0E7; font-family: var(--sans); font-size: 17px; font-weight: 700; box-shadow: inset 0 -2px 0 var(--mus); opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
  .nav a.btn.btn--line[aria-current="page"] { background: transparent; color: var(--mus-l, #E0A43C); }
  .nav.is-open > * { opacity: 1; transform: none; }
  .nav.is-open > a:nth-child(1) { transition-delay: .05s; } .nav.is-open > a:nth-child(2) { transition-delay: .1s; }
  .nav.is-open > a:nth-child(3) { transition-delay: .15s; } .nav.is-open > a:nth-child(4) { transition-delay: .2s; }
  .nav.is-open > a:nth-child(5) { transition-delay: .25s; } .nav.is-open > a:nth-child(6) { transition-delay: .32s; }
  .nav-deco { display: block; position: absolute; left: -140px; bottom: -140px; width: 380px; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, var(--mus) 0 13%, transparent 13.3% 34%, rgba(224,164,60,.35) 34.3% 34.8%, transparent 35.1% 56%, rgba(224,164,60,.25) 56.3% 56.8%, transparent 57.1% 78%, rgba(224,164,60,.18) 78.3% 78.8%, transparent 79.1%); }
  .nav-claim { display: block; position: relative; z-index: 1; margin-top: auto; padding-top: 32px; align-self: flex-end; max-width: 16ch; text-align: right; font-family: var(--serif); font-size: 18px; line-height: 1.2; color: rgba(245,240,231,.7); opacity: 0; transition: opacity .6s ease .4s; }
  .menu-open .site-header { background: #230A0A; }
  .menu-open .site-header .brand img { filter: brightness(0) invert(.94) sepia(.1); }
  .menu-open .menu-btn { border-color: #F5F0E7; background: #F5F0E7; color: #230A0A; }
}
@media (max-width: 1080px) and (prefers-reduced-motion: reduce) { .nav, .nav > *, .nav-claim { transition: none !important; transform: none !important; } }
@media (max-width: 1080px) {
  .nav.is-open > a:not(.btn), .nav.is-open > a.btn.btn--line, .nav.is-open > .nav-claim { opacity: 1; transform: none; }
  .menu-open .site-header .brand img { filter: none; }
  .menu-open .site-header .brand .logo-light { display: none; }
  .menu-open .site-header .brand .logo-dark { display: block; }
}
/* Menú móvil: efecto al tocar o pasar por encima */
@media (max-width: 1080px) {
  .nav > a:not(.btn) { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
  .nav > a:not(.btn)::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mus); transform: scale(0); transition: transform .25s ease; }
  .nav > a:not(.btn)[aria-current="page"]::before { transform: scale(1); }
  .nav.is-open > a:not(.btn):hover, .nav.is-open > a:not(.btn):active, .nav.is-open > a:not(.btn):focus-visible { color: var(--mus-l, #E0A43C); transform: translateX(-10px); transition-delay: 0s; }
  .nav > a:not(.btn):hover::before, .nav > a:not(.btn):active::before, .nav > a:not(.btn):focus-visible::before { transform: scale(1); }
  .nav.is-open > a.btn.btn--line:hover, .nav.is-open > a.btn.btn--line:active { background: transparent; color: var(--mus-l, #E0A43C); box-shadow: inset 0 -6px 0 var(--mus); transform: translateX(-10px); transition-delay: 0s; }
}
@media (max-width: 1080px) { .nav > a:not(.btn)::before { flex: 0 0 10px; height: 10px; min-width: 10px; } }
.closing--photo .closing-photo { width: 100%; max-width: 360px; margin-inline: auto 0; }
@media (max-width: 900px) { .closing--photo .closing-photo { max-width: 280px; margin-inline: auto; } }
/* Estrategia: aro exterior más fino y elegante */
.q-rings.q-out span.q1 { border-width: 6px; }