/* =========================================================
   Construgo — ALTERNATIVA 2
   Dirección gráfica: "set de planos de arquitectura"
   Cajetín, cotas, sellos de aprobación, itemizado real,
   perfil de nivelación, corcho de herramientas.
   Misma paleta: verde pistacho + naranja + grises.
   Tipografías: Big Shoulders Display + IBM Plex Mono/Sans
   ========================================================= */

:root {
  --carbon: #1E293B;
  --bg: #F1F5F9;
  --border: #D8DEE8;
  --bg-card: #F8F9FA;
  --paper: #FFFFFF;

  --ink: var(--carbon);
  --ink-soft: #5B6B82;
  --ink-faint: #93A2B7;

  --green-1: #A4C639;
  --green-2: #7F9A2A;   /* variante más oscura para contraste sobre papel */
  --green-3: #CAD69B;
  --green-4: #DAE2C1;

  --orange-1: #FF851B;
  --orange-2: #C65E00;  /* variante más oscura para contraste sobre papel */
  --orange-3: #FFC081;
  --orange-4: #FFDBA6;

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
  --font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;

  color-scheme: light;
}

[data-theme="dark"] {
  --carbon: #0B1220;
  --bg: #141C2B;
  --border: #2E3B52;
  --bg-card: #1A2436;
  --paper: #182233;

  --ink: #E8ECF3;
  --ink-soft: #A7B4C7;
  --ink-faint: #6D7C93;

  --green-2: var(--green-1);
  --orange-2: var(--orange-1);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto !important; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
/* CUALQUIER overflow distinto de "visible" (hidden, clip, auto -- en
   cualquiera de los dos ejes) en <body> rompe position:sticky de
   TODOS sus descendientes, incluso si solo se restringe el eje X:
   segun spec, en cuanto un eje deja de ser "visible" el otro pasa a
   comportarse como "auto" a efectos de contenedor de scroll, y el
   header sticky deja de fijarse (se desplaza con el contenido).
   Verificado con getBoundingClientRect() tras un scroll real: con
   overflow-x:hidden Y con overflow-x:clip en body, rect.top del
   header terminaba en valores muy negativos en ambos casos. Se
   traslada la restriccion de overflow-x a <html> en su lugar --
   ahi no rompe el sticky de los descendientes de body. */
/* Divi trae su propio "body{background-color:#fff;color:#666}" con la misma
   especificidad (selector de elemento simple) -- gana por orden de carga a
   menos que forcemos !important. Mismo patron de bug que el text-transform
   inesperado en h2 en wpdivi.cotigo.cl (memoria: divi5-stacking-context-bugs):
   Divi define reglas amplias sobre tags genericos que compiten con CSS
   propio de la misma especificidad.

   NO se usa "transition: background-color/color" en body: verificado en
   este hosting que con esa transicion activa, el cambio de tema deja el
   background-color congelado en el valor anterior a pesar de que la
   custom property --bg SI cambia correctamente (bug de motor de render,
   mismo tipo de problema ya visto con scroll-behavior:smooth). Sin
   transition, el cambio de tema es instantaneo pero siempre correcto. */
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { color: var(--ink-soft); line-height: 1.65; margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink) !important;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--orange-1); color: #fff; padding: 10px 16px; z-index: 999;
}
.skip-link:focus { left: 0; }

/* textura de papel muy sutil */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
[data-theme="dark"] .grain { opacity: 0.05; mix-blend-mode: soft-light; }

/* texto de lomo, decorativo */
.spine-text {
  position: fixed;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: var(--ink-faint);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
  max-height: 80vh;
  overflow: hidden;
}
@media (max-width: 1100px) { .spine-text { display: none; } }

/* ---------- botones tipo sello ---------- */
.stamp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 13px 22px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  transform: rotate(-1.4deg);
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
  cursor: pointer;
}
.stamp-btn:hover { transform: rotate(0deg) translateY(-2px); }
.stamp-btn--primary {
  border-color: var(--orange-2);
  color: var(--orange-2);
}
.stamp-btn--primary:hover { background: var(--orange-1); color: #fff; border-color: var(--orange-1); }
.dashed-link {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 2px dashed var(--green-2);
  padding-bottom: 2px;
}
.dashed-link:hover { color: var(--green-2); }

/* ---------- header / cajetín ----------
   .site-header/.header-inner/.seal(contenedor)/.main-nav/.header-actions/
   .theme-toggle(boton)/.nav-toggle ya no se usan -- ese HTML se reemplazo
   por modulos nativos de Divi (ver mas abajo "Header nativo"), que se
   apoyan en las clases et_pb_row_N/et_pb_button_N/et_pb_menu_0 en vez de
   estas. .seal-word y .ruler SI siguen en uso (el wordmark del sello y la
   linea decorativa bajo el header son literales en el HTML actual). */
.seal-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.seal-word b { color: var(--orange-1); font-weight: 800; }

.ruler {
  height: 8px;
  background-image: repeating-linear-gradient(90deg, var(--ink-faint) 0 1px, transparent 1px 12px);
  opacity: 0.5;
  border-bottom: 1px solid var(--border);
}

/* ---------- láminas genéricas ---------- */
.sheet { max-width: 1240px; margin: 0 auto; padding: 90px 28px; }
.sheet-alt { background: var(--bg-card); max-width: none; }
.sheet-alt > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.sheet-dark { background: var(--carbon); max-width: none; padding: 90px 28px; }
.sheet-dark > * { max-width: 1240px; margin-left: auto; margin-right: auto; }

.sheet-tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--green-2);
  border-left: 3px solid var(--orange-1);
  padding-left: 10px;
  margin: 0 0 18px;
}
.sheet-tag.on-dark { color: var(--green-1); }
.sheet h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.02;
  margin-bottom: 16px;
}
.sheet h2.on-dark { color: #fff; }
.sheet-sub { max-width: 56ch; font-size: 1.05rem; margin-bottom: 50px; }

/* ---------- hero ---------- */
.hero { padding-top: 22px; }
.titleblock {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1.5px solid var(--ink);
  margin-bottom: 54px;
  font-family: var(--font-mono);
}
.titleblock > div {
  padding: 10px 14px;
  border-right: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.titleblock > div:last-child { border-right: none; }
.titleblock span { font-size: 0.62rem; letter-spacing: 0.1em; color: var(--ink-faint); }
.titleblock b { font-size: 0.85rem; font-weight: 700; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: start;
}
.hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  line-height: 0.98;
  margin-bottom: 26px;
}
.ink-mark {
  position: relative;
  color: var(--orange-2);
  white-space: nowrap;
}
.ink-mark::after {
  content: "";
  position: absolute;
  left: -4px; right: -6px; bottom: 2px; height: 0.4em;
  background: var(--green-3);
  z-index: -1;
  transform: rotate(-1deg);
}
[data-theme="dark"] .ink-mark::after { background: color-mix(in srgb, var(--green-1) 35%, transparent); }
.hero-lead { font-size: 1.08rem; max-width: 52ch; margin-bottom: 30px; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-bottom: 34px; }

/* ---------- plano hero ---------- */
.hero-plan { position: relative; }
.cota-txt { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-soft); }
.pin circle { fill: var(--paper); stroke: var(--orange-2); stroke-width: 2; }
.pin[data-tag="ok"] circle { stroke: var(--green-2); }
.pin text { font-family: var(--font-mono); font-size: 12px; font-weight: 700; fill: var(--ink); text-anchor: middle; }

.plan-legend { list-style: none; margin: 18px 0 0; padding: 0; font-family: var(--font-mono); font-size: 0.82rem; }
.plan-legend li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--border);
}
.plan-legend i {
  font-style: normal; width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.75rem;
}
.plan-legend .ok { margin-left: auto; color: var(--green-2); font-weight: 600; }
.plan-legend .warn { margin-left: auto; color: var(--orange-2); font-weight: 600; }

/* ---------- cinta ticker ---------- */
.tape-strip {
  overflow: hidden;
  background: repeating-linear-gradient(-45deg, var(--carbon), var(--carbon) 14px, var(--orange-1) 14px, var(--orange-1) 28px);
  padding: 12px 0;
}
.tape-track {
  display: flex; gap: 14px; white-space: nowrap;
  width: max-content;
  animation: tape-scroll 32s linear infinite;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.05em; color: #fff;
}
.tape-track span { padding: 4px 0; }
@keyframes tape-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tape-track { animation: none; } }

/* ---------- itemizado (funciones) ---------- */
.itemizado { border-top: 2px solid var(--ink); font-family: var(--font-mono); }
.it-row {
  display: grid;
  grid-template-columns: 56px 220px 1fr 200px;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  transition: background-color .15s ease;
}
.it-row:not(.it-head):not(.it-total):hover {
  background: var(--bg-card);
  border-left: 3px solid var(--green-2);
  padding-left: 8px;
  margin-left: -11px;
}
.it-head {
  font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ink-faint);
  border-bottom: 1.5px solid var(--ink);
  text-transform: uppercase;
}
.it-n { font-weight: 700; color: var(--orange-2); font-size: 0.95rem; }
.it-title { font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem; text-transform: none; }
.it-desc { font-family: var(--font-sans); font-size: 0.88rem; color: var(--ink-soft); text-transform: none; }
.it-tags { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.it-tags i {
  font-style: normal; font-size: 0.68rem; font-weight: 600;
  border: 1px solid var(--border); padding: 4px 8px; color: var(--ink-soft);
}
.it-total { border-bottom: 2px solid var(--ink); }
.it-total .it-title { color: var(--orange-2); font-family: var(--font-mono); text-transform: uppercase; }

/* ---------- perfil de proceso ---------- */
.profile {
  position: relative;
  padding: 40px 0 10px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.profile-line {
  position: absolute; left: 0; right: 0; top: 50%;
  border-top: 2px dashed var(--ink-faint);
}
.bench {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
}
.bench--up { align-self: flex-start; margin-bottom: 90px; }
.bench--down { align-self: flex-start; margin-top: 90px; }
.bm {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem;
  color: var(--green-2);
  background: var(--bg);
  padding: 2px 8px;
  border: 1.5px solid var(--green-2);
  margin-bottom: 14px;
}
.sheet-alt .bm { background: var(--bg-card); }
.bm b { font-family: var(--font-display); font-size: 1rem; }
.bench h3 { font-size: 1.05rem; margin-bottom: 8px; text-transform: none; }
.bench p { font-size: 0.9rem; }

/* ---------- corcho de herramientas ---------- */
.corkboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 24px;
  background:
    radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 14px 14px;
  padding: 30px;
  border: 1px solid var(--border);
}
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: 0 10px 18px rgba(0,0,0,0.08);
  padding: 26px 18px 20px;
}
.card:nth-child(4n+1) { transform: rotate(-1.6deg); }
.card:nth-child(4n+2) { transform: rotate(1.1deg); }
.card:nth-child(4n+3) { transform: rotate(-0.8deg); }
.card:nth-child(4n+4) { transform: rotate(1.8deg); }
.card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 16px 26px rgba(0,0,0,0.14); z-index: 2; }
.pinhead {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--orange-1);
  box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}
.card:nth-child(even) .pinhead { background: var(--green-1); }
.card h4 { font-size: 0.95rem; margin-bottom: 8px; text-transform: none; }
.card p { font-size: 0.82rem; }

/* ---------- sellos de beneficios ---------- */
.stamps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.stamp-item { transform: rotate(-2deg); }
.stamp-item--alt { transform: rotate(2deg); }
.stamp-item svg { margin: 0 auto 18px; }
.stamp-item h3 { color: #fff; font-size: 1.05rem; margin-bottom: 10px; text-transform: none; }
.stamp-item p { font-size: 0.86rem; color: #B9C4D6; }

/* ---------- CTA final ---------- */
.cta-final {
  background: repeating-linear-gradient(-45deg, var(--orange-4), var(--orange-4) 22px, var(--green-4) 22px, var(--green-4) 44px);
  padding: 80px 28px;
}
[data-theme="dark"] .cta-final {
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--orange-1) 22%, var(--carbon)), color-mix(in srgb, var(--orange-1) 22%, var(--carbon)) 22px, color-mix(in srgb, var(--green-1) 18%, var(--carbon)) 22px, color-mix(in srgb, var(--green-1) 18%, var(--carbon)) 44px);
}
.cta-final-inner {
  max-width: 640px; margin: 0 auto; text-align: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 46px 40px;
}
.cta-final h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 14px; }
.cta-final p { margin-bottom: 26px; }

/* ---------- hoja de firmas (contacto) ---------- */
.signblock { border: 1.5px solid var(--ink); font-family: var(--font-mono); }
.sb-row {
  display: grid; grid-template-columns: 220px 1fr;
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  align-items: center;
  gap: 12px;
}
.sb-row:last-child { border-bottom: none; }
.sb-row span { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-faint); }
.sb-row b { font-size: 0.95rem; font-weight: 600; }
.sb-row b a { color: var(--orange-2); border-bottom: 1px solid var(--orange-3); }
.sb-row--sign { background: var(--bg-card); }

/* ---------- footer / índice de láminas ---------- */
.site-footer { background: var(--carbon); padding: 40px 28px 26px; }
.sheet-index {
  max-width: 1240px; margin: 0 auto 22px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.sheet-index a {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  color: #C7D2E0; border: 1px solid #33445E; padding: 8px 14px;
  display: flex; gap: 8px; align-items: baseline;
}
.sheet-index a em { font-style: normal; color: var(--green-1); }
.sheet-index a:hover { border-color: var(--green-1); color: #fff; }
.footer-fine {
  max-width: 1240px; margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-mono); font-size: 0.72rem; color: #6D7C93;
  border-top: 1px solid #2E3B52; padding-top: 18px;
}
.footer-eco-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  color: #6D7C93; border: 1px solid #33445E; padding: 6px 12px;
}
.footer-eco-btn:hover { border-color: var(--green-1); color: #fff; }
.footer-eco-mark {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.01em; color: #C7D2E0;
}
.footer-eco-mark b { font-weight: 800; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-plan { order: -1; }
  .titleblock { grid-template-columns: repeat(3, 1fr); }
  .titleblock > div:nth-child(3) { border-right: none; }
  .itemizado .it-row { grid-template-columns: 40px 1fr; }
  .it-desc, .it-tags { grid-column: 1 / -1; }
  .it-head span:nth-child(3), .it-head span:nth-child(4) { display: none; }
  .profile { flex-wrap: wrap; }
  .bench { flex: 1 1 40%; margin-bottom: 20px !important; margin-top: 0 !important; }
  .profile-line { display: none; }
  .corkboard { grid-template-columns: repeat(2, 1fr); }
  .stamps { grid-template-columns: repeat(2, 1fr); }
  .sb-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock > div:nth-child(2n) { border-right: none; }
  .profile { flex-direction: column; }
  .bench { flex-basis: auto; width: 100%; margin-bottom: 30px !important; margin-top: 0 !important; }
  .corkboard { grid-template-columns: 1fr; padding: 20px; }
  .stamps { grid-template-columns: 1fr; }
  .sheet, .sheet-dark, .cta-final { padding-left: 18px; padding-right: 18px; }
}


/* =========================================================
   Ajustes para el shell de WordPress + Divi 5 (nativo, sin
   shortcodes de Divi 4). El contenido original vive completo
   dentro de un unico modulo Code, asi que no hay multiples
   columnas/secciones de Divi compitiendo por stacking context
   -- pero igual forzamos estos ajustes de forma preventiva,
   por los bugs reales ya verificados en el sitio hermano
   wpdivi.cotigo.cl (memoria: divi5-stacking-context-bugs):
   1) Divi 5 pone su propio header/footer por defecto: los
      ocultamos porque esta pagina trae los suyos propios
      (header/footer originales, dentro del modulo Code).
   2) La columna flex de Divi 5 hereda position:relative +
      z-index:2 por defecto, lo que puede atrapar el z-index
      de un descendiente position:sticky/fixed (nuestro
      .site-header) frente a HERMANOS fuera de esa columna.
      Con una sola seccion esto no deberia ocurrir, pero se
      deja el z-index alto igual, sin costo.
   3) scroll-behavior:smooth queda ANULADO arriba a proposito:
      verificado que en este hosting cancela por completo la
      navegacion por ancla (JS y nativa), no solo la anima. */
#main-header, #top-header, .et-l--header { display: none !important; }
#main-footer, #footer-bottom, .et-l--footer { display: none !important; }
body { padding-top: 0 !important; }
.et_pb_section_0 { position: relative; z-index: 999 !important; }

/* ── Header nativo (2026-09-02): antes un Code module con HTML/CSS propio
   (.site-header), ahora modulos reales dentro de la Row 0 original.
   Row_1 = fila nueva sello|menu|acciones (position:fixed real header bar).
   Row_2 = fila anidada con los 2 botones de acciones (tema + CTA). */
.et_pb_row_1 {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 100 !important;
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  max-width: none !important; width: 100% !important; margin: 0 !important;
  padding: 16px 28px !important; align-items: center !important; display: flex !important;
}
.et_pb_row_1 > .et_pb_column { padding: 0 !important; display: flex !important; align-items: center !important; }

/* columna sello: imagenes (claro/oscuro alternadas) + wordmark en fila */
.et_pb_row_1 > .et_pb_column:nth-child(1) { flex-shrink: 0; gap: 10px; flex: 0 0 auto !important; width: auto !important; }
.et_pb_image_0, .et_pb_image_1 { width: 46px !important; flex-shrink: 0; margin-bottom: 0 !important; }
.et_pb_image_0 img, .et_pb_image_1 img { width: 46px !important; height: 46px !important; }
.et_pb_image_1 { display: none; }
[data-theme="dark"] .et_pb_image_0 { display: none; }
[data-theme="dark"] .et_pb_image_1 { display: block; }
.et_pb_text_0 .seal-word { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; white-space: nowrap; }
.et_pb_text_0 .seal-word b { color: var(--orange-1); font-weight: 800; }

/* columna menu: solo enlaces (sin logo propio -- el sello va en la
   primera columna), estilo IBM Plex Mono como el nav original */
.et_pb_row_1 > .et_pb_column:nth-child(2) { flex: 1 1 auto !important; width: auto !important; justify-content: center; }
.et_pb_menu_0 { background: transparent !important; }
.et_pb_menu_0 .et_pb_menu_inner_container { padding: 0 !important; background: transparent !important; }
.et_pb_menu_0 .et-menu-nav > ul { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); list-style: none; margin: 0; padding: 0; }
.et_pb_menu_0 .et-menu-nav > ul > li > a {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  color: var(--ink-soft) !important; white-space: nowrap; text-decoration: none;
}
.et_pb_menu_0 .et-menu-nav > ul > li > a:hover { color: var(--ink) !important; }
.et_pb_menu_0 .et_mobile_nav_menu .mobile_menu_bar:before { color: var(--ink) !important; }

/* columna acciones: boton de tema + CTA */
.et_pb_row_1 > .et_pb_column:nth-child(3) { flex-shrink: 0; flex: 0 0 auto !important; width: auto !important; justify-content: flex-end; }
.et_pb_row_2 { align-items: center !important; gap: 12px !important; display: flex !important; height: auto !important; margin: 0 !important; }
.et_pb_row_2 > .et_pb_column { padding: 0 !important; }
.et_pb_button_0 {
  font-family: var(--font-mono) !important; font-size: 0.68rem !important; font-weight: 700 !important;
  letter-spacing: 0.06em; border: 1px solid var(--ink) !important; background: transparent !important;
  color: var(--ink) !important; padding: 9px 10px !important; border-radius: 0 !important;
}
.et_pb_button_1 {
  display: inline-flex !important; align-items: center; gap: 8px;
  font-family: var(--font-mono) !important; font-weight: 700 !important; font-size: 0.75rem !important;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 9px 16px !important; border: 2px solid var(--orange-2) !important;
  background: transparent !important; color: var(--orange-2) !important;
  border-radius: 0 !important; transform: rotate(-1.4deg);
}
.et_pb_button_1:hover { background: var(--orange-1) !important; color: #fff !important; border-color: var(--orange-1) !important; transform: rotate(0deg) translateY(-2px); }

.ruler {
  height: 8px;
  background-image: repeating-linear-gradient(90deg, var(--ink-faint) 0 1px, transparent 1px 12px);
  opacity: 0.5; border-bottom: 1px solid var(--border);
}

#top, #lamina-01, #funciones, #proceso, #herramientas, #beneficios, #contacto {
  scroll-margin-top: 96px;
}

/* =========================================================
   Reconstruccion nativa (Blurb/Text/Button/Image/Menu reales,
   verificados pidiendo el HTML real servido tras cada cambio -- no
   se adivinaron. Mapa vigente desde 2026-09-02 (3a y ultima vuelta,
   tras convertir tambien el header):
   secciones (sin cambios en ninguna vuelta) 0=header 1=hero 2=cinta
     3=itemizado 4=proceso 5=herramientas 6=beneficios 7=cta 8=contacto 9=footer
   filas   0=header(wrapper original) 1=header(fila nueva sello|menu|acciones)
           2=header(fila anidada acciones) 3=titleblock 4=heroCopy+plan
           5=cinta 6=itemizado 7=procesoHead 8=procesoBlurbs
           9=herramientasHead 10=toolsFila1 11=toolsFila2
           12=beneficiosHead 13=stampsFila 14=cta 15=contacto 16=footer
   blurbs  0-3=proceso  4-11=herramientas  12-15=beneficios (sin cambios)
   images  0=sello-claro 1=sello-oscuro 2=plano-claro 3=plano-oscuro
   text    0=selloWordmark 1=anclaContenido 2=titleblock 3=heroH1
           4=planoLeyenda 5=cinta 6=anclaFunciones 7=itemizadoHead
           8=itemizadoTabla 9=anclaProceso 10=procesoHead
           11=anclaHerramientas 12=herramientasHead 13=anclaBeneficios
           14=beneficiosHead 15=ctaTexto 16=anclaContacto 17=contactoHead
           18=signblock 19=footer
   buttons 0=temaHeader 1=ctaHeader 2=heroPrimario 3=heroSecundario(dashed)
           4=cta 5=contacto */

/* ---- secciones tipo "sheet" (centradas, max-width 1240) ---- */
.et_pb_section_1 { padding-top: calc(96px + 22px); }
.et_pb_section_3, .et_pb_section_5, .et_pb_section_8 {
  max-width: 1240px; margin: 0 auto; padding: 90px 28px;
}
.et_pb_row_3, .et_pb_row_4, .et_pb_row_6 { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* proceso: fondo claro de borde a borde, contenido centrado.
   NOTA: el parametro bg= de section() (decoration.background de
   Divi) se guarda en el JSON pero NO se renderiza en este alpha
   -- mismo patron de bug ya documentado para el panel de
   Atributos (memoria: divi5-stacking-context-bugs). Verificado
   con getComputedStyle antes de asumir que funcionaba. Se fuerza
   el fondo por CSS propio en vez de confiar en ese mecanismo. */
.et_pb_section_4 { padding: 90px 28px; background: var(--bg-card) !important; }
.et_pb_row_7, .et_pb_row_8 { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* beneficios: fondo oscuro de borde a borde, contenido centrado */
.et_pb_section_6 { padding: 90px 28px; background: var(--carbon) !important; }
.et_pb_row_12, .et_pb_row_13 { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.et_pb_row_9, .et_pb_row_10, .et_pb_row_11 { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* ---- hero: dos columnas, copy + plano ---- */
.et_pb_row_4 { align-items: flex-start !important; gap: 60px; }
.et_pb_text_3 { margin-bottom: 26px; }
.et_pb_text_3 .et_pb_text_inner h1 { font-size: clamp(2.6rem, 5vw, 4.1rem); line-height: .98; margin-bottom: 26px; }
.et_pb_text_3 .hero-lead { font-size: 1.08rem; max-width: 52ch; margin-bottom: 30px; }
.et_pb_button_2_wrapper, .et_pb_button_3_wrapper { display: inline-flex; vertical-align: top; margin: 0 22px 0 0; }

/* ---- botones (Divi por defecto -> estilo "sello" original) ---- */
.et_pb_button_2, .et_pb_button_4, .et_pb_button_5 {
  display: inline-flex !important; align-items: center; gap: 8px;
  font-family: var(--font-mono) !important; font-weight: 700 !important; font-size: 0.85rem !important;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 13px 22px !important; border: 2px solid var(--orange-2) !important;
  background: transparent !important; color: var(--orange-2) !important;
  border-radius: 0 !important; transform: rotate(-1.4deg);
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.et_pb_button_2:hover, .et_pb_button_4:hover, .et_pb_button_5:hover {
  background: var(--orange-1) !important; color: #fff !important; border-color: var(--orange-1) !important;
  transform: rotate(0deg) translateY(-2px);
}
.et_pb_button_3 {
  background: transparent !important; border: none !important; padding: 0 !important;
  font-family: var(--font-mono) !important; font-weight: 600 !important; font-size: 0.85rem !important;
  color: var(--ink) !important; border-bottom: 2px dashed var(--green-2) !important;
  border-radius: 0 !important; text-transform: none;
}
.et_pb_button_3:hover { color: var(--green-2) !important; }

/* ---- blurbs: quitar mayusculas forzadas por la regla global h4 ---- */
.et_pb_blurb .et_pb_module_header { text-transform: none; }

/* ---- proceso (blurbs 0-3): linea punteada + zigzag arriba/abajo ---- */
.et_pb_row_8 { position: relative; padding: 40px 0 10px; }
.et_pb_row_8::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 2px dashed var(--ink-faint);
}
.et_pb_blurb_0, .et_pb_blurb_2 { margin-bottom: 90px; }
.et_pb_blurb_1, .et_pb_blurb_3 { margin-top: 90px; }
.et_pb_blurb_0 .et_pb_module_header,
.et_pb_blurb_1 .et_pb_module_header,
.et_pb_blurb_2 .et_pb_module_header,
.et_pb_blurb_3 .et_pb_module_header { font-size: 1.05rem; margin-bottom: 8px; }
.et_pb_blurb_0 .et_pb_blurb_description p,
.et_pb_blurb_1 .et_pb_blurb_description p,
.et_pb_blurb_2 .et_pb_blurb_description p,
.et_pb_blurb_3 .et_pb_blurb_description p { font-size: 0.9rem; }

/* ---- herramientas (blurbs 4-11): tarjetas tipo corcho ---- */
.et_pb_row_10, .et_pb_row_11 {
  background: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 14px 14px;
  padding: 30px !important; border: 1px solid var(--border);
}
.et_pb_row_11 { border-top: none; margin-top: -30px; padding-top: 34px !important; }
.et_pb_blurb_4, .et_pb_blurb_5, .et_pb_blurb_6, .et_pb_blurb_7,
.et_pb_blurb_8, .et_pb_blurb_9, .et_pb_blurb_10, .et_pb_blurb_11 {
  position: relative;
  background: var(--paper) !important;
  border: 1px solid var(--border);
  box-shadow: 0 10px 18px rgba(0,0,0,0.08);
  padding: 26px 18px 20px !important;
}
.et_pb_blurb_4:hover, .et_pb_blurb_5:hover, .et_pb_blurb_6:hover, .et_pb_blurb_7:hover,
.et_pb_blurb_8:hover, .et_pb_blurb_9:hover, .et_pb_blurb_10:hover, .et_pb_blurb_11:hover {
  transform: rotate(0deg) translateY(-4px); box-shadow: 0 16px 26px rgba(0,0,0,0.14); z-index: 2;
}
.et_pb_blurb_4::before, .et_pb_blurb_5::before, .et_pb_blurb_6::before, .et_pb_blurb_7::before,
.et_pb_blurb_8::before, .et_pb_blurb_9::before, .et_pb_blurb_10::before, .et_pb_blurb_11::before {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}
.et_pb_blurb_4::before, .et_pb_blurb_6::before, .et_pb_blurb_8::before, .et_pb_blurb_10::before { background: var(--orange-1); }
.et_pb_blurb_5::before, .et_pb_blurb_7::before, .et_pb_blurb_9::before, .et_pb_blurb_11::before { background: var(--green-1); }
.et_pb_blurb_4 { transform: rotate(-1.6deg); } .et_pb_blurb_5 { transform: rotate(1.1deg); }
.et_pb_blurb_6 { transform: rotate(-0.8deg); } .et_pb_blurb_7 { transform: rotate(1.8deg); }
.et_pb_blurb_8 { transform: rotate(-1.6deg); } .et_pb_blurb_9 { transform: rotate(1.1deg); }
.et_pb_blurb_10 { transform: rotate(-0.8deg); } .et_pb_blurb_11 { transform: rotate(1.8deg); }
.et_pb_blurb_4 .et_pb_module_header, .et_pb_blurb_5 .et_pb_module_header,
.et_pb_blurb_6 .et_pb_module_header, .et_pb_blurb_7 .et_pb_module_header,
.et_pb_blurb_8 .et_pb_module_header, .et_pb_blurb_9 .et_pb_module_header,
.et_pb_blurb_10 .et_pb_module_header, .et_pb_blurb_11 .et_pb_module_header { font-size: 0.95rem; margin-bottom: 8px; }
.et_pb_blurb_4 .et_pb_blurb_description p, .et_pb_blurb_5 .et_pb_blurb_description p,
.et_pb_blurb_6 .et_pb_blurb_description p, .et_pb_blurb_7 .et_pb_blurb_description p,
.et_pb_blurb_8 .et_pb_blurb_description p, .et_pb_blurb_9 .et_pb_blurb_description p,
.et_pb_blurb_10 .et_pb_blurb_description p, .et_pb_blurb_11 .et_pb_blurb_description p { font-size: 0.82rem; }

/* ---- beneficios (blurbs 12-15): sellos sobre fondo oscuro ---- */
.et_pb_blurb_12, .et_pb_blurb_14 { transform: rotate(-2deg); }
.et_pb_blurb_13, .et_pb_blurb_15 { transform: rotate(2deg); }
.et_pb_blurb_12, .et_pb_blurb_13, .et_pb_blurb_14, .et_pb_blurb_15 { text-align: center; }
.et_pb_blurb_12 svg, .et_pb_blurb_13 svg, .et_pb_blurb_14 svg, .et_pb_blurb_15 svg { margin: 0 auto 18px; }
.et_pb_blurb_12 .et_pb_module_header, .et_pb_blurb_13 .et_pb_module_header,
.et_pb_blurb_14 .et_pb_module_header, .et_pb_blurb_15 .et_pb_module_header {
  color: #fff !important; font-size: 1.05rem; margin-bottom: 10px;
}
.et_pb_blurb_12 .et_pb_blurb_description p, .et_pb_blurb_13 .et_pb_blurb_description p,
.et_pb_blurb_14 .et_pb_blurb_description p, .et_pb_blurb_15 .et_pb_blurb_description p {
  font-size: 0.86rem; color: #B9C4D6;
}

/* ---- CTA final (texto 15 + boton 4): caja tipo sello centrada. ---- */
.et_pb_section_7 {
  padding: 80px 28px;
  background: repeating-linear-gradient(-45deg, var(--orange-4), var(--orange-4) 22px, var(--green-4) 22px, var(--green-4) 44px) !important;
}
[data-theme="dark"] .et_pb_section_7 {
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--orange-1) 22%, var(--carbon)), color-mix(in srgb, var(--orange-1) 22%, var(--carbon)) 22px, color-mix(in srgb, var(--green-1) 18%, var(--carbon)) 22px, color-mix(in srgb, var(--green-1) 18%, var(--carbon)) 44px) !important;
}
.et_pb_row_14 {
  max-width: 640px; margin: 0 auto; text-align: center;
  background: var(--paper); border: 2px solid var(--ink); padding: 46px 40px;
}
.et_pb_text_15 h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 14px; }
.et_pb_text_15 p { margin-bottom: 26px; }
.et_pb_button_4_wrapper { display: inline-block; }

/* ---- contacto (text 17+18, boton 5) ---- */
.et_pb_row_15 { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.et_pb_text_18 { margin-bottom: 0; }
.et_pb_text_2 { max-width: 1240px; margin: 0 auto; }

/* Anclas nativas (antes divs vacios en modulos Code, ahora modulos Text
   con un <span id> literal): sin esto el wrapper .et_pb_text de Divi les
   agrega su padding/margen por defecto y se nota como un salto vacio
   entre secciones. */
.et_pb_text_6, .et_pb_text_9, .et_pb_text_11, .et_pb_text_13, .et_pb_text_16 {
  padding: 0 !important; margin: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important;
}
/* tape-strip (5): antes modulo Code sin padding propio de Divi. */
.et_pb_text_5 { padding: 0 !important; margin: 0 !important; }
/* leyenda del plano (4, antes parte del mismo Code del hero-plan): el
   modulo Text trae padding/margen por defecto, se anula para que
   .plan-legend siga controlando su propio espaciado. */
.et_pb_text_4 { padding: 0 !important; margin: 0 !important; }
/* ancla "contenido" (1) y wordmark del sello (0): sin padding tampoco. */
.et_pb_text_1 {
  padding: 0 !important; margin: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important;
}
.et_pb_text_0 { padding: 0 !important; margin: 0 !important; }

/* Plano hero: 2 imagenes (antes 1 SVG con var(--ink) que se adaptaba solo
   al tema) -- una renderizada en claro y otra en oscuro, se alterna por
   CSS. Sin esto ambas se verian apiladas a la vez. */
.et_pb_image_2, .et_pb_image_3 { width: 100%; margin-bottom: 0 !important; }
.et_pb_image_2 img, .et_pb_image_3 img { width: 100%; height: auto; }
.et_pb_image_3 { display: none; }
[data-theme="dark"] .et_pb_image_2 { display: none; }
[data-theme="dark"] .et_pb_image_3 { display: block; }
.et_pb_button_5_wrapper { margin-top: -1.5px; }
.et_pb_button_5 { width: 100%; justify-content: center; border-radius: 0 !important; }

@media (max-width: 980px) {
  .et_pb_row_4 { flex-wrap: wrap !important; }
  .et_pb_row_8 { flex-wrap: wrap !important; }
  .et_pb_blurb_0, .et_pb_blurb_1, .et_pb_blurb_2, .et_pb_blurb_3 { margin: 0 0 20px !important; }
  .et_pb_row_8::before { display: none; }
  .et_pb_row_10, .et_pb_row_11 { flex-wrap: wrap !important; }
  .et_pb_row_11 { margin-top: 0; border-top: 1px solid var(--border); }
}