/* =========================================================
   CASA CORAH — hoja de estilos
   Paleta: marfil cálido / salvia / terracota / navy / tostado,
   inspirada en la ilustración de irene.ai. El navy se usa como
   tinta principal y en el header; salvia y tostado se alternan
   como fondos de sección para que ningún color domine.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root{
  /* superficies claras */
  --bg: #efe9dc;            /* marfil — fondo principal */
  --bg-alt: #f4e6cd;        /* arena — secciones alternas */
  --bg-sage: #c0c5af;       /* salvia — usar con moderación, secciones puntuales */
  --bg-cta: #e9b474;        /* tostado — cierres y CTA, alterna con salvia */
  --bg-card: #ffffff;       /* blanco — tarjetas, fichas */

  /* tinta sobre superficies claras */
  --ink: #313c7a;
  --ink-dim: rgba(43,33,22,.75);
  --ink-faint: rgba(43,33,22,.58);
  --line: rgba(43,33,22,.16);

  /* acentos — tonos oscurecidos frente a los originales para que el texto
     (eyebrows, cifras, énfasis) sea MUY legible sobre fondos claros (crema,
     salvia, tostado). Los tonos claros (gold-light, teal-light) se reservan
     para texto sobre fondos oscuros. */
  --gold: #9c3a1a;
  --gold-soft: rgba(99,64,15,.35);
  --gold-light: #e9b474;    /* dorado para usar sobre fondos oscuros */
  --teal: #38507f;
  --teal-soft: rgba(37,111,99,.32);
  --teal-light: #b7c8ea;    /* petróleo para usar sobre fondos oscuros */
  --teal-deep: #313c7a;
  --teal-mist: #e4eaf6;     /* petróleo muy claro — secciones propias del laboratorio */

  --accent: var(--gold);
  --accent-soft: var(--gold-soft);

  /* superficies oscuras (hero, footer, banda laboratorio) */
  --surface-dark: #313c7a;
  --on-dark: #efe9dc;
  --on-dark-dim: rgba(247,240,225,.75);
  --on-dark-faint: rgba(247,240,225,.5);

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw: 1360px;
}

body.theme-aira{
  --accent: var(--teal);
  --accent-soft: var(--teal-soft);
}
body.theme-aira .bg-soft{ background:var(--teal-mist); }
body.theme-aira .info-card,
body.theme-aira form.contact-form input,
body.theme-aira form.contact-form select,
body.theme-aira form.contact-form textarea{ border-color:var(--teal-soft); }

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.08;
  color:var(--ink);
  margin-bottom:18px;
}

h1{ font-size:clamp(2.6rem,5vw,5.4rem); font-weight:400; margin-bottom:22px; }
h2{ font-size:clamp(2rem,3.4vw,3.4rem); margin-bottom:20px; }
h3{ font-size:clamp(1.3rem,2vw,1.85rem); font-weight:500; margin-bottom:14px; }

h1:last-child,h2:last-child,h3:last-child,h4:last-child{ margin-bottom:0; }

p{ font-weight:300; color:var(--ink-dim); }
p + p{ margin-top:14px; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  margin-bottom:22px;
}
.eyebrow::before{
  content:'';
  width:26px; height:1px;
  background:var(--accent);
  display:inline-block;
}

.lede{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--ink-dim);
  font-weight:400;
  max-width:640px;
  line-height:1.5;
}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; left:0; right:0;
  z-index:100;
  padding:48px 0;
  color:#0c1f22;
  background:rgba(239,233,220,.96);
  backdrop-filter:blur(10px);
  transition:padding .4s ease, box-shadow .4s ease;
}
header.site.solid{
  padding:28px 0;
  box-shadow:0 14px 30px -20px rgba(43,33,22,.2);
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
}
.brandmark{
  font-family:var(--serif);
  font-size:1.15rem;
  letter-spacing:.14em;
  font-weight:500;
  color:currentColor;
  text-transform:uppercase;
}
.brandmark span{ color:var(--gold); }

.brandmark-logo{ position:relative; display:block; width:260px; height:112px; margin-left:-34px; }
.brandmark-logo img{
  position:absolute; top:0; left:0;
  width:260px; height:112px;
  object-fit:contain; object-position:left center;
  transition:opacity .4s ease;
}
/* el archivo "logo-casa-corah-gold.png" es en realidad casi negro (no dorado) —
   sobre el header beige actual es justamente el que se lee bien ("negro sobre
   beige"). El logo blanco real queda reservado para el footer, sobre fondo navy. */
.brandmark-logo .logo-light{ opacity:0; }
.brandmark-logo .logo-dark{ opacity:1; }

nav.primary{ display:flex; align-items:center; gap:34px; }
nav.primary a{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:currentColor;
  opacity:.78;
  position:relative;
  padding-bottom:4px;
  transition:opacity .25s ease;
}
nav.primary a:hover, nav.primary a.active{ opacity:1; }
nav.primary a.active::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--accent);
}
nav.primary a.cta{
  border:1px solid currentColor;
  padding:9px 18px;
  border-radius:2px;
  opacity:1;
}
nav.primary a.cta:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

nav.primary .lang-switch{
  display:flex; align-items:center; gap:6px;
  margin-left:4px; padding-left:16px;
  border-left:1px solid currentColor; opacity:.6;
}
nav.primary .lang-switch a{
  font-size:.7rem; letter-spacing:.04em; text-transform:uppercase;
  opacity:.65; padding-bottom:0;
}
nav.primary .lang-switch a.is-current{ opacity:1; text-decoration:underline; text-underline-offset:3px; }
nav.primary .lang-switch a.is-current::after{ display:none; }

.nav-toggle{
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer;
  padding:8px;
}
.nav-toggle span{ width:22px; height:1px; background:currentColor; display:block; }

/* ---------- hero (foto arriba, texto limpio debajo) ---------- */
.hero-media{
  position:relative;
  width:100%;
  height:94vh;
  overflow:hidden;
  padding:0;
}
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 14%;
  display:block;
}
.hero-media.small{ height:58vh; padding:0; }

.hero-intro{ padding:26px 0 42px; }
.hero-intro h1{ max-width:820px; margin-bottom:22px; }
.hero-intro .lede{ margin-bottom:36px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- botones (superficies claras) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:2px;
  transition:all .3s ease;
  border:1px solid var(--accent);
  cursor:pointer;
}
.btn-fill{ background:var(--accent); color:#fff; }
.btn-fill:hover{ background:transparent; color:var(--accent); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- secciones ---------- */
section{ padding:86px 0; position:relative; }
section.tight{ padding:56px 0; }
.section-head{ max-width:680px; margin-bottom:46px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.divider{ width:100%; height:1px; background:var(--line); }

.bg-soft{ background:var(--bg-alt); }
.tone-sage{ background:var(--bg-sage); }
.tone-sand{ background:var(--bg-alt); }

/* fila de valores */
.values{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:28px;
  padding:56px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.values div{
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  color:var(--ink);
  text-align:center;
}

/* tarjetas de líneas */
.lines-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.line-card{
  background:var(--bg-card);
  padding:52px 40px;
  display:flex; flex-direction:column; gap:18px;
  transition:background .35s ease, transform .35s ease;
}
.line-card:hover{ background:var(--bg-sage); transform:translateY(-2px); }
.line-card .num{
  font-family:var(--serif);
  color:var(--gold);
  font-size:.85rem;
  letter-spacing:.2em;
}
.line-card h3{ margin-top:6px; }
.line-card a.more{
  margin-top:auto;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:8px;
}

/* banda vocal lab (foto real + copy, sobre superficie clara — sin oscurecer la imagen) */
.lab-banner{ padding:96px 0; }
.lab-banner .split{ align-items:center; }
.lab-banner .eyebrow{ color:var(--teal); }
.lab-banner .eyebrow::before{ background:var(--teal); }

/* galería */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:220px;
  grid-auto-flow:dense;
  gap:6px;
}
.gallery img{ width:100%; height:100%; object-fit:cover; border-radius:2px; }
.gallery .tall{ grid-row:span 2; }
.gallery .wide{ grid-column:span 2; }

/* texto + imagen */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}
.split.reverse .split-media{ order:2; }
.split-media img{ width:100%; border-radius:3px; box-shadow:0 24px 50px -20px rgba(43,33,22,.35); }
.video-frame{ position:relative; width:100%; padding-top:56.25%; height:0; overflow:hidden; border-radius:3px; box-shadow:0 24px 50px -20px rgba(43,33,22,.35); background:var(--ink); }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.origin-trio{ display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:36px; align-items:stretch; }
.origin-trio .origin-photo{ height:520px; overflow:hidden; border-radius:3px; box-shadow:0 24px 50px -20px rgba(43,33,22,.35); }
.origin-trio .origin-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.origin-video{ max-width:640px; margin:56px auto 0; }

.video-card{ position:relative; display:block; aspect-ratio:16/9; border-radius:3px; overflow:hidden; box-shadow:0 24px 50px -20px rgba(43,33,22,.35); }
.video-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,11,0) 45%, rgba(20,16,11,.8) 100%);
}
.video-card .play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:70px; height:70px; border-radius:50%;
  background:rgba(251,246,236,.94);
  display:flex; align-items:center; justify-content:center;
  z-index:2; transition:transform .3s ease;
}
.video-card .play-btn::before{
  content:''; width:0; height:0;
  border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--ink);
  margin-left:4px;
}
.video-card:hover .play-btn{ transform:translate(-50%,-50%) scale(1.08); }
.video-card .video-caption{
  position:absolute; left:26px; right:26px; bottom:22px; z-index:2;
  color:var(--on-dark);
  font-family:var(--sans); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
}
.split-copy p + p{ margin-top:18px; }

/* prosa */
.prose p{ margin-bottom:20px; max-width:70ch; }
.prose h3{ margin:44px 0 16px; color:var(--ink); }
.prose em{ font-style:italic; color:var(--accent); }

/* lista de formatos (rondas) */
.formats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:20px;
}
.formats div{
  background:var(--bg-card);
  padding:28px 30px;
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--ink);
}
.formats div span{
  display:block;
  font-family:var(--sans);
  font-size:.82rem;
  color:var(--ink-dim);
  margin-top:6px;
  font-weight:300;
}

/* pasos */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px;
  margin-top:20px;
}
.step .n{
  font-family:var(--serif); font-style:italic;
  color:var(--accent);
  font-size:1.4rem;
  margin-bottom:14px;
  display:block;
}

/* cita */
.quote{ text-align:center; padding:76px 0; }
.quote blockquote{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  max-width:820px;
  margin:0 auto;
  color:var(--ink);
  line-height:1.35;
}
.quote cite{
  display:block;
  margin-top:26px;
  font-family:var(--sans);
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-style:normal;
}

/* calendario de encuentros */
.months{ display:flex; flex-direction:column; gap:56px; }
.month-block .month-label{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:22px;
}
.month-block .month-label h3{ text-transform:uppercase; letter-spacing:.08em; font-size:1.1rem; }
.month-block .month-label span{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim);
}
.event-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.event-card{
  background:var(--bg-card);
  padding:34px 34px 30px;
  display:flex; flex-direction:column; gap:14px;
}
.event-card .event-date{
  font-family:var(--serif); font-style:italic; color:var(--accent);
  font-size:1.4rem;
}
.event-card h4{
  font-family:var(--serif); font-weight:500; font-size:1.3rem; color:var(--ink);
}
.event-card .event-origin{
  display:flex; align-items:center; gap:9px;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  margin-top:-8px;
}
.event-card .event-origin::before{
  content:'';
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
.event-card p{ font-size:.92rem; }
.event-card .event-schedule{
  display:flex; gap:18px; flex-wrap:wrap;
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--ink-dim);
}
.event-card .event-schedule b{ color:var(--ink); font-weight:500; }
.event-card.tbd{
  align-items:flex-start; justify-content:center;
}
.event-row .span-2{ grid-column:1 / -1; }
.event-card.tbd .event-date{ color:var(--ink-faint); }
.event-card.tbd .btn{ margin-top:10px; }

/* ficha informativa */
.info-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:4px;
  padding:44px;
  box-shadow:0 20px 45px -25px rgba(43,33,22,.3);
}
.info-card ul{ list-style:none; margin-top:22px; }
.info-card li{
  display:flex; justify-content:space-between; gap:20px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:.92rem;
  color:var(--ink-dim);
}
.info-card li:last-child{ border-bottom:none; }
.info-card li b{ color:var(--ink); font-weight:500; }

/* banda CTA */
.cta-band{
  text-align:center;
  padding:90px 0;
  background:var(--bg-cta);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cta-band h2{ max-width:640px; margin:0 auto 30px; }
/* el fondo tostado del cta-band es claro — el eyebrow siempre en tinta oscura
   (nunca el accent claro del tema) para que se lea MUY bien */
.cta-band .eyebrow{ color:var(--ink); }
.cta-band .eyebrow::before{ background:var(--ink); }

/* contacto */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:70px;
}
.contact-info dl{ margin-top:30px; }
.contact-info dt{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-top:26px;
}
.contact-info dd{ font-family:var(--serif); font-size:1.15rem; margin-top:6px; color:var(--ink); }

form.contact-form{ display:flex; flex-direction:column; gap:22px; }
form.contact-form label{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:8px; display:block;
}
form.contact-form input,
form.contact-form select,
form.contact-form textarea{
  width:100%;
  background:var(--bg-card);
  border:none;
  border-bottom:1px solid var(--line);
  padding:12px 10px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:300;
  border-radius:2px 2px 0 0;
}
form.contact-form select option{ background:var(--bg-card); color:var(--ink); }
form.contact-form input:focus,
form.contact-form select:focus,
form.contact-form textarea:focus{ outline:none; border-color:var(--accent); }
form.contact-form textarea{ resize:vertical; min-height:100px; }
form.contact-form button{ align-self:flex-start; margin-top:8px; }
.form-note{ font-size:.8rem; color:var(--ink-faint); margin-top:6px; }

/* footer (superficie oscura) */
footer.site{
  padding:80px 0 30px;
  background:var(--surface-dark);
  color:var(--on-dark);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:50px;
  padding-bottom:60px;
}
.footer-brand .brandmark{ margin-bottom:18px; display:block; color:var(--on-dark); }
.footer-brand .brandmark-footer{ display:block; height:92px; width:auto; margin:0 0 18px -14px; object-fit:contain; object-position:left center; }
.footer-brand p{ max-width:320px; font-size:.9rem; color:var(--on-dark-dim); }
footer h4{
  font-family:var(--sans);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-faint); font-weight:500; margin-bottom:18px;
}
footer.site ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
footer.site ul a{ font-size:.9rem; color:var(--on-dark-dim); }
footer.site ul a:hover{ color:var(--gold-light); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:26px; border-top:1px solid rgba(247,240,225,.14);
  font-size:.75rem; color:var(--on-dark-faint);
  flex-wrap:wrap; gap:10px;
}

/* aparición al hacer scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* responsive */
@media (max-width: 980px){
  .hero-media{ height:64vh; }
  .hero-media.small{ height:46vh; }
  .values{ grid-template-columns:repeat(2,1fr); gap:22px 16px; }
  .lines-grid{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; gap:34px; }
  .origin-trio{ grid-template-columns:1fr; gap:24px; }
  .origin-trio .origin-photo{ height:320px; max-width:340px; margin:0 auto; width:100%; }
  .split.reverse .split-media{ order:0; }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .formats{ grid-template-columns:1fr; }
  .event-row{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  nav.primary{ display:none; }
  .nav-toggle{ display:flex; }
  nav.primary .lang-switch{ border-left:none; padding-left:0; margin:6px 0 0; }
}
@media (max-width: 560px){
  .wrap{ padding:0 22px; }
  section{ padding:74px 0; }
  .gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:150px; }
  .hero-media{ height:62vh; }
  .hero-media.small{ height:42vh; }
  .brandmark{ font-size:1rem; letter-spacing:.1em; }
  .brandmark-logo{ width:104px; height:45px; margin-left:-14px; }
  .brandmark-logo img{ width:104px; height:45px; }
}

/* ===== Geometría ampliada — fragmentos de círculos y triángulos enormes, nunca formas
   completas. Cada sección de contenido lleva su propio fragmento (círculo o triángulo),
   así la geometría acompaña TODA la página, no solo el inicio.
   Regla de composición: nunca un elemento a la derecha Y a la izquierda a la vez en la misma
   pantalla — el eje se alterna sección a sección a medida que se baja (criterio de arquitecto). */
.wrap{ position:relative; z-index:1; }
/* z-index:0 aquí (junto con position:relative) fija un contexto de apilamiento
   propio para CADA sección: así los fragmentos con z-index:-1 quedan SIEMPRE
   detrás de su propio texto/foto (z-index:1 en .wrap) y nunca se filtran por
   delante de otra sección — antes, sin este z-index local, el orden de
   apilamiento dependía del navegador y podía verse "random" o por delante. */
.arc-wrap{ position:relative; z-index:0; overflow:hidden; isolation:isolate; }

.deco-arc{
  position:absolute;
  border-radius:50%;
  border:1px solid currentColor;
  pointer-events:none;
  z-index:-1;
  opacity:.3;
  color:var(--ink);
}
.deco-arc.accent{ color:var(--gold); }
.deco-arc.accent2{ color:var(--teal); }

.deco-tri{
  position:absolute;
  pointer-events:none;
  z-index:-1;
  opacity:.3;
  color:var(--ink);
}
.deco-tri svg{ width:100%; height:100%; display:block; overflow:visible; }
.deco-tri.accent{ color:var(--gold); }
.deco-tri.accent2{ color:var(--teal); }

/* variantes de tamaño + lado — se alternan sección a sección. La figura
   completa es intencionalmente inmensa: el círculo/triángulo real es mucho
   más grande que la sección que lo contiene, así que casi todo el volumen
   queda fuera de la página — solo asoma una esquina, como si la geometría
   siguiera más allá del borde. Cada fragmento se ancla a una ESQUINA real
   de la sección (top+right, top+left, bottom+right o bottom+left — nunca
   un único borde), para que la curva entre y salga por dos lados distintos
   (p. ej. por arriba y por la derecha) en vez de quedar flotando o cortada
   a medio camino dentro del recuadro: siempre se ve fluir hacia y desde
   fuera de la sección. */
.arc-r1{ width:1800px; height:1800px; right:-1380px; top:-1380px; }
.arc-r2{ width:1500px; height:1500px; right:-1150px; bottom:-1150px; }
.arc-l1{ width:1800px; height:1800px; left:-1380px; top:-1380px; }
.arc-l2{ width:1500px; height:1500px; left:-1150px; bottom:-1150px; }

.tri-r1{ width:2000px; height:2000px; right:-1533px; top:-1533px; }
.tri-l1{ width:2000px; height:2000px; left:-1533px; top:-1533px; }

/* trazos finos — segunda capa de geometría, líneas sugerentes de un borde de
   triángulo que cruzan cada sección junto al fragmento de círculo, MISMO lado
   (nunca contradicen la alternancia), para que el trazo se sienta continuo y
   más presente en toda la página. */
.deco-edge{
  position:absolute;
  width:1px;
  background:currentColor;
  opacity:.3;
  pointer-events:none;
  z-index:-1;
  color:var(--ink);
  transform-origin:top center;
}
.deco-edge.accent{ color:var(--gold); }
.deco-edge.accent2{ color:var(--teal); }

.edge-r-a{ right:230px; top:6%; height:780px; transform:rotate(15deg); }
.edge-r-b{ right:90px; top:48%; height:580px; transform:rotate(-13deg); }
.edge-l-a{ left:230px; top:10%; height:780px; transform:rotate(-15deg); }
.edge-l-b{ left:90px; top:50%; height:580px; transform:rotate(13deg); }

/* pequeño círculo compañero — un segundo fragmento, más chico, cerca del
   trazo fino, para dar textura sin competir con el fragmento principal */
.arc-r-sm{ width:480px; height:480px; right:-368px; bottom:-368px; }
.arc-l-sm{ width:480px; height:480px; left:-368px; bottom:-368px; }

@media (max-width:980px){ .deco-arc,.deco-tri,.deco-edge{ display:none; } }