/* ==========================================================
   IDEAS WEB 2026 — Sistema de diseño (formato inspirado en eclypsedesign.com)
   Se carga DESPUÉS de /styles.css. No reemplaza el CSS legado:
   1) define tokens nuevos, 2) re-mapea las variables legadas al tema oscuro,
   3) estiliza header/footer nuevos, 4) pule componentes comunes.
   Los colores fijos del CSS legado se corrigen en iw-bridge.css (auto-generado).
   ========================================================== */

:root {
  /* --- Tokens nuevos --- */
  --iw-bg: #0b0b0b;
  --iw-surface: #131313;
  --iw-surface-2: #1a1a1a;
  --iw-line: rgba(255, 255, 255, .09);
  --iw-line-2: rgba(255, 255, 255, .16);
  --iw-text: #f2f0ec;
  --iw-muted: #9a958f;
  --iw-muted-2: #66625d;
  --iw-accent: #f73b20;
  --iw-accent-2: #ff6b52;
  --iw-ok: #22c55e;
  --iw-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --iw-serif: 'Instrument Serif', Georgia, serif;
  --iw-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --iw-gutter: clamp(16px, 4vw, 56px);
  --iw-max: 1440px;
  --iw-ease: cubic-bezier(.2, .7, .1, 1);

  /* --- Variables legadas re-mapeadas al tema oscuro --- */
  --color-text-dark: var(--iw-text);
  --color-text-muted: var(--iw-muted);
  --color-bg-light: var(--iw-surface);
  --color-bg-white: var(--iw-bg);
  --color-bg-dark: #070707;
  --font-family: var(--iw-display);
  --shadow-sm: none;
  --shadow-md: 0 20px 50px -30px rgba(0, 0, 0, .9);
  --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, .9);
  --container-max: 1280px;
}

/* ---------- Base ---------- */
html { background: var(--iw-bg); }
body {
  background: var(--iw-bg);
  color: var(--iw-text);
  font-family: var(--iw-display);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--iw-accent); color: #fff; }
h1, h2, h3, h4 { letter-spacing: -.035em; }
h1, h2 { font-weight: 600; }
.intro-section__title, .home-soft-section-title, .faq-title, [class*="section-title"], [class*="__title"]:is(h2, h3) { font-weight: 600 !important; letter-spacing: -.035em; }
p { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--iw-accent);
  outline-offset: 3px;
}
.iw-mono { font-family: var(--iw-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.iw-serif { font-family: var(--iw-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--iw-accent); }
.iw-wrap { max-width: var(--iw-max); margin: 0 auto; padding: 0 var(--iw-gutter); }
.iw-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--iw-text); color: var(--iw-bg); padding: 10px 16px; border-radius: 8px; }
.iw-skip:focus { left: 8px; }

/* Contenido siempre visible sin JS (SEO): las animaciones de aparición son solo una mejora */
html:not(.iw-js) .reveal { opacity: 1 !important; transform: none !important; }

/* ==========================================================
   HEADER
   ========================================================== */
.iw-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s, transform .5s var(--iw-ease);
}
.iw-header.scrolled,
.iw-header.is-open {
  background: rgba(11, 11, 11, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--iw-line);
}
.iw-header.is-hidden { transform: translateY(-100%); }
.iw-header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.iw-logo { display: flex; align-items: center; gap: 10px; color: var(--iw-text); font-size: 22px; font-weight: 700; letter-spacing: -.04em; text-decoration: none; }
.iw-logo img { width: 34px; height: 34px; border-radius: 8px; }
.iw-logo b { color: var(--iw-accent); font-weight: 700; }
.iw-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.iw-nav > a, .iw-nav__dd > button {
  color: var(--iw-muted); text-decoration: none; background: none; border: 0; padding: 8px 0;
  font: inherit; cursor: pointer; transition: color .2s;
}
.iw-nav > a:hover, .iw-nav > a[aria-current="page"], .iw-nav__dd > button:hover, .iw-nav__dd.is-open > button { color: var(--iw-text); }
.iw-nav__dd > button::after { content: " +"; color: var(--iw-muted-2); }
.iw-nav__dd.is-open > button::after { content: " –"; }
.iw-header__right { display: flex; align-items: center; gap: 16px; }
.iw-lang { font-family: var(--iw-mono); font-size: 12px; color: var(--iw-muted-2); display: flex; gap: 6px; align-items: center; }
.iw-lang a, .iw-lang span { color: var(--iw-muted); text-decoration: none; }
.iw-lang [aria-current="true"] { color: var(--iw-text); }
.iw-lang a:hover { color: var(--iw-accent); }
.iw-burger {
  display: none; height: 40px; padding: 0 16px; border-radius: 99px; background: none; cursor: pointer;
  border: 1px solid var(--iw-line-2); color: var(--iw-text); font-family: var(--iw-mono); font-size: 12px;
}

/* Botones del sistema nuevo */
.iw-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 99px;
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--iw-line-2); background: transparent; color: var(--iw-text);
  transition: background .3s, color .3s, border-color .3s;
}
.iw-btn span[aria-hidden] { transition: transform .3s var(--iw-ease); }
.iw-btn:hover span[aria-hidden] { transform: translateX(4px); }
.iw-btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.iw-btn--light { background: var(--iw-text); color: var(--iw-bg); border-color: var(--iw-text); }
.iw-btn--light:hover { background: #fff; }
.iw-btn--accent { background: var(--iw-accent); border-color: var(--iw-accent); color: #fff; }
.iw-btn--accent:hover { background: var(--iw-accent-2); border-color: var(--iw-accent-2); }
.iw-btn--ghost:hover { border-color: var(--iw-text); }

/* Mega menú de servicios — apertura tipo cortina + entrada escalonada */
.iw-mega {
  position: absolute; left: 0; right: 0; top: 76px;
  background: rgba(11, 11, 11, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--iw-line);
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path .45s var(--iw-ease), visibility 0s linear .45s;
}
.iw-mega.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .65s var(--iw-ease), visibility 0s; }
/* Línea de acento que recorre el borde superior */
.iw-mega::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--iw-accent) 30%, var(--iw-accent-2) 60%, transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.iw-mega.is-open::before { transform: scaleX(1); transition: transform 1.1s var(--iw-ease) .1s; }
/* Halo suave de marca en el panel */
.iw-mega::after {
  content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -300px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(247, 59, 32, .16), transparent 65%); opacity: 0; transition: opacity .6s ease;
}
.iw-mega.is-open::after { opacity: 1; }
.iw-mega__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: 40px; padding: 38px var(--iw-gutter) 46px; }

/* Columnas y tarjeta: entran en cascada (al cerrar, salen juntas y rápido) */
.iw-mega__col, .iw-mega__promo { opacity: 0; transform: translateY(16px); transition: opacity .2s ease, transform .2s ease; }
.iw-mega.is-open .iw-mega__col, .iw-mega.is-open .iw-mega__promo { opacity: 1; transform: none; transition: opacity .55s ease, transform .7s var(--iw-ease); }
.iw-mega.is-open .iw-mega__col:nth-child(1) { transition-delay: .08s; }
.iw-mega.is-open .iw-mega__col:nth-child(2) { transition-delay: .15s; }
.iw-mega.is-open .iw-mega__col:nth-child(3) { transition-delay: .22s; }
.iw-mega.is-open .iw-mega__promo { transition-delay: .3s; }

.iw-mega__col p { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--iw-line); font-family: var(--iw-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--iw-accent); }
/* Enlaces: cada uno entra con su propio retraso (--i lo asigna el JS) */
.iw-mega__col a {
  position: relative; display: block; padding: 6px 0; color: var(--iw-muted); font-size: 15px; text-decoration: none;
  opacity: 0; transform: translateY(8px);
  transition: color .25s, padding-left .35s var(--iw-ease), opacity .2s ease, transform .2s ease;
}
.iw-mega.is-open .iw-mega__col a {
  opacity: 1; transform: none;
  transition: color .25s, padding-left .35s var(--iw-ease), opacity .5s ease calc(.14s + var(--i, 0) * .03s), transform .6s var(--iw-ease) calc(.14s + var(--i, 0) * .03s);
}
/* Hover: el enlace activo toma foco (flecha + color) y los demás de la columna se atenúan */
.iw-mega__col a::before {
  content: "→"; position: absolute; left: 0; top: 6px; color: var(--iw-accent);
  opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .35s var(--iw-ease);
}
.iw-mega__col:hover a { color: var(--iw-muted-2); }
.iw-mega__col a:hover, .iw-mega__col a:focus-visible { color: var(--iw-text); padding-left: 22px; }
.iw-mega__col a:hover::before, .iw-mega__col a:focus-visible::before { opacity: 1; transform: none; }

.iw-mega__promo { position: relative; overflow: hidden; border: 1px solid var(--iw-line); border-radius: 18px; padding: 24px; background: var(--iw-surface); }
.iw-mega__promo::before { content: ""; position: absolute; inset: auto -60px -120px auto; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 59, 32, .25), transparent 65%); pointer-events: none; transition: transform .8s var(--iw-ease); }
.iw-mega__promo:hover::before { transform: scale(1.25); }
.iw-mega__promo > * { position: relative; }
.iw-mega__promo strong { display: block; font-size: 22px; letter-spacing: -.03em; margin: 10px 0 8px; color: var(--iw-text); }
.iw-mega__promo span { display: block; color: var(--iw-muted); font-size: 14px; margin-bottom: 18px; }

/* Fondo de la página: se oscurece y desenfoca mientras el menú está abierto */
.iw-mega-backdrop {
  position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
}
.iw-mega-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }

@media (prefers-reduced-motion: reduce) {
  .iw-mega, .iw-mega.is-open, .iw-mega::before, .iw-mega__col, .iw-mega__promo, .iw-mega__col a, .iw-mega-backdrop { transition: none !important; }
  .iw-mega { clip-path: none; }
}

/* Menú mobile */
.iw-mmenu {
  position: fixed; inset: 0; z-index: 999; background: var(--iw-bg);
  padding: 96px var(--iw-gutter) 32px; overflow-y: auto;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .6s var(--iw-ease), visibility 0s .6s;
}
.iw-mmenu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--iw-ease); }
.iw-mmenu__main a, .iw-mmenu__main summary {
  display: block; padding: 8px 0; border-bottom: 1px solid var(--iw-line);
  font-size: clamp(30px, 8vw, 48px); font-weight: 600; letter-spacing: -.04em; line-height: 1.15;
  color: var(--iw-text); text-decoration: none; cursor: pointer; list-style: none;
}
.iw-mmenu__main summary::-webkit-details-marker { display: none; }
.iw-mmenu__main summary::after { content: "+"; float: right; color: var(--iw-accent); }
.iw-mmenu__main details[open] summary::after { content: "–"; }
.iw-mmenu__sub { padding: 14px 0 20px; }
.iw-mmenu__sub p { margin: 14px 0 6px; font-family: var(--iw-mono); font-size: 11px; letter-spacing: .1em; color: var(--iw-accent); text-transform: uppercase; }
.iw-mmenu__sub a { display: block; font-size: 17px; font-weight: 400; letter-spacing: 0; padding: 7px 0; border: 0; color: var(--iw-muted); }
.iw-mmenu__foot { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.iw-mmenu__foot p { margin: 0; font-family: var(--iw-mono); font-size: 12px; color: var(--iw-muted); }

@media (max-width: 1100px) {
  .iw-nav, .iw-header__right .iw-btn, .iw-mega { display: none; }
  .iw-burger { display: inline-flex; align-items: center; }
}
@media (max-width: 480px) { .iw-lang { display: none; } }

/* ==========================================================
   FOOTER
   ========================================================== */
.iw-footer { border-top: 1px solid var(--iw-line); padding: 90px 0 30px; overflow: hidden; background: var(--iw-bg); color: var(--iw-text); }
.iw-footer__cta { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; padding-bottom: 70px; margin-bottom: 70px; border-bottom: 1px solid var(--iw-line); }
.iw-footer__cta p.iw-footer__big { margin: 0; font-size: clamp(38px, 5.6vw, 88px); line-height: .95; letter-spacing: -.055em; font-weight: 600; }
.iw-footer__cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.iw-footer__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 36px 28px; }
.iw-footer__about { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1.1fr); gap: 30px; align-items: center; padding-bottom: 40px; border-bottom: 1px solid var(--iw-line); }
.iw-footer__about p { margin-top: 12px; }
.iw-footer__about .iw-footer__social, .iw-footer__about .iw-footer__partner { margin-top: 0; }
.iw-footer__about p { color: var(--iw-muted); font-size: 15px; max-width: 34ch; margin: 18px 0 0; }
.iw-footer__h { margin: 0 0 16px; font-family: var(--iw-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--iw-muted-2); }
.iw-footer ul { list-style: none; margin: 0; padding: 0; }
.iw-footer li a, .iw-footer li span { display: inline-block; padding: 5px 0; font-size: 14px; color: var(--iw-muted); text-decoration: none; transition: color .2s; }
.iw-footer li a:hover { color: var(--iw-text); }
.iw-footer__status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--iw-ok); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.iw-footer__review { color: #ffd34d !important; }
.iw-footer__social { display: flex; gap: 10px; margin-top: 22px; }
.iw-footer__social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--iw-line-2); display: flex; align-items: center; justify-content: center; color: var(--iw-muted); transition: .3s; }
.iw-footer__social a:hover { color: var(--iw-text); border-color: var(--iw-text); }
.iw-footer__partner { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.iw-footer__partner img { width: 120px; height: auto; border-radius: 8px; opacity: .9; }
.iw-footer__partner p { margin: 0; font-size: 13px; color: var(--iw-muted); max-width: 40ch; }
.iw-footer__partner strong { color: var(--iw-text); font-weight: 500; }
.iw-footer__word {
  margin: 80px 0 26px; font-size: clamp(70px, 19vw, 300px); line-height: .8; font-weight: 700; letter-spacing: -.07em;
  color: var(--iw-surface-2); white-space: nowrap; user-select: none;
}
.iw-footer__word span { color: rgba(247, 59, 32, .22); }
.iw-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 22px; border-top: 1px solid var(--iw-line); font-size: 13px; color: var(--iw-muted); }
.iw-footer__bottom a { color: var(--iw-muted); text-decoration: none; }
.iw-footer__bottom a:hover { color: var(--iw-text); }
@media (max-width: 1100px) {
  .iw-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .iw-footer__about { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .iw-footer__cta { grid-template-columns: 1fr; }
  .iw-footer__cta-actions { justify-content: flex-start; }
  .iw-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* WhatsApp flotante (mismo enlace y tracking que antes, estilo nuevo) */
.wa-float { box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .55) !important; }
.wa-float__pulse { display: none; }

/* ==========================================================
   COMPONENTES LEGADOS — puente al nuevo estilo
   (mismo HTML y mismo contenido; solo cambia la presentación)
   ========================================================== */

/* El header viejo tenía espacio propio; el nuevo es fijo: los heros ya tienen padding superior */
/* Migas de pan: sin bordes propios (la portada ya tiene su línea inferior sutil) */
.breadcrumbs-container { background: var(--iw-bg) !important; border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; }
.breadcrumbs__link { color: var(--iw-muted) !important; }
.breadcrumbs__current { color: var(--iw-text) !important; }

/* Heros: fondo liso oscuro con halo de marca en lugar de ondas */
.hero { background-color: var(--iw-bg); }
.hero__title-modern, .hero__title, .service-hero__title { letter-spacing: -.05em; font-weight: 600; }
.hero__title-outline { -webkit-text-stroke: 0 !important; color: var(--iw-text) !important; }
/* Solo la parte destacada de un título mixto va en serif rojo ("IA para <em>WhatsApp</em>");
   si el degradado cubre el título entero (notas del blog), queda en color de texto. */
.hero__title-gradient:only-child {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--iw-text) !important; font-weight: 600;
}
.hero__title-gradient:not(:only-child) {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--iw-accent) !important; font-family: var(--iw-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
}
.service-hero__eyebrow, .section-label, .section-eyebrow, [class*="__eyebrow"] {
  font-family: var(--iw-mono) !important; font-size: 12px !important; letter-spacing: .08em !important; text-transform: uppercase;
}

/* Botones legados → forma del sistema nuevo */
.btn { border-radius: 99px; font-family: var(--iw-display); font-weight: 500; letter-spacing: 0; }
.btn--glow, .btn--primary { background: var(--iw-accent) !important; color: #fff !important; box-shadow: none !important; border: 1px solid var(--iw-accent) !important; }
.btn--glow:hover, .btn--primary:hover { background: var(--iw-accent-2) !important; }
.btn--secondary, .btn--outline, .btn--ghost { background: transparent !important; color: var(--iw-text) !important; border: 1px solid var(--iw-line-2) !important; }
.btn--secondary:hover, .btn--outline:hover, .btn--ghost:hover { border-color: var(--iw-text) !important; }

/* Tarjetas: superficie oscura, borde fino, sin sombras */
.benefit-card, .smart-card, .geo-data-card, .topic-cluster-card, .project-card, .blog-card, .process-step,
.bento-card, .testimonial-card, .authority-card, .case-study-card, .featured-case-card, .pillar-card, .value-card,
.business-card, .evidence-card, .glass-card, .form-wrapper, .quick-contact-form {
  background: var(--iw-surface) !important;
  border: 1px solid var(--iw-line) !important;
  box-shadow: none !important;
  border-radius: 22px;
  transition: border-color .3s, transform .5s var(--iw-ease);
}
.benefit-card:hover, .smart-card:hover, .topic-cluster-card:hover, .project-card:hover, .blog-card:hover,
.bento-card:hover, .case-study-card:hover, .featured-case-card:hover, .pillar-card:hover {
  border-color: var(--iw-line-2) !important;
}

/* Resumen TL;DR (GEO): mismo texto, estilo de nota con acento */
.tldr-summary {
  background: rgba(247, 59, 32, .07) !important; border-left: 3px solid var(--iw-accent) !important;
  color: var(--iw-text) !important; border-radius: 0 14px 14px 0 !important;
}

/* FAQ: estilo lista con líneas (el HTML y el schema FAQPage no cambian) */
.faq-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--iw-line) !important; border-radius: 0 !important; box-shadow: none !important; }
.faq-question { color: var(--iw-text) !important; font-size: clamp(17px, 1.4vw, 20px); letter-spacing: -.02em; background: transparent !important; }
.faq-answer-content, .faq-answer-content p { color: var(--iw-muted) !important; }
.faq-icon { color: var(--iw-accent) !important; }

/* Formularios */
.form-group input, .form-group textarea, .form-group select,
.quick-contact-form input, .quick-contact-form textarea, .quick-contact-form select {
  background: transparent !important; color: var(--iw-text) !important;
  border: 0 !important; border-bottom: 1px solid var(--iw-line-2) !important; border-radius: 0 !important;
}
.form-group input:focus, .form-group textarea:focus, .quick-contact-form input:focus, .quick-contact-form textarea:focus { border-bottom-color: var(--iw-accent) !important; }
.form-group label { font-family: var(--iw-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--iw-muted) !important; }
::placeholder { color: var(--iw-muted-2) !important; }

/* Secciones de llamado a la acción */
.cta-section { background: linear-gradient(180deg, var(--iw-surface), var(--iw-bg)) !important; border-top: 1px solid var(--iw-line); }

/* ==========================================================
   BLOG — tipografía del contenido que viene del gestor (HTML libre)
   ========================================================== */
.post-content { color: #d8d4ce; font-size: 18px; line-height: 1.75; }
.post-content h2 { color: var(--iw-text); font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.035em; line-height: 1.12; margin: 2.2em 0 .6em; }
.post-content h3 { color: var(--iw-text); font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -.02em; margin: 1.8em 0 .5em; }
.post-content a { color: var(--iw-accent-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(247, 59, 32, .45); }
.post-content a:hover { text-decoration-color: var(--iw-accent-2); }
.post-content strong { color: var(--iw-text); }
.post-content blockquote { margin: 2em 0; padding: 0 0 0 24px; border-left: 2px solid var(--iw-accent); font-family: var(--iw-serif); font-style: italic; font-size: 1.35em; line-height: 1.35; color: var(--iw-text); background: none; }
.post-content ul li::marker, .post-content ol li::marker { color: var(--iw-accent); }
.post-content table { border: 1px solid var(--iw-line); border-radius: 14px; overflow: hidden; }
.post-content th { background: var(--iw-surface-2) !important; color: var(--iw-text) !important; font-family: var(--iw-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.post-content td { border-color: var(--iw-line) !important; color: #d8d4ce; background: transparent !important; }
.post-content tr:nth-child(even) td { background: rgba(255, 255, 255, .02) !important; }
.post-content img { border-radius: 16px; }
.post-content code { font-family: var(--iw-mono); font-size: .88em; background: var(--iw-surface-2); padding: 2px 6px; border-radius: 6px; }

/* Textos largos (emails, URLs) no deben ensanchar columnas en mobile */
.contact-form-col, .contact-info-col, .contact-card, .info-block, .info-item { min-width: 0; overflow-wrap: anywhere; }

/* ==========================================================
   HERRAMIENTA GRATUITA (inc/audit-cta.inc.php, compartido por 13 páginas)
   Tarjeta naranja del prototipo. El include usa estilos inline: se pisan con !important.
   ========================================================== */
#audit-cta { background: var(--iw-bg) !important; padding: clamp(40px, 6vw, 90px) var(--iw-gutter) !important; }
#audit-cta .audit-cta__bg { display: none !important; }
#audit-cta > .container {
  max-width: var(--iw-max) !important; margin: 0 auto; text-align: left !important;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
  padding: clamp(32px, 5vw, 70px) !important; border-radius: 28px; background: var(--iw-accent); color: #fff; overflow: hidden; position: relative;
}
#audit-cta > .container::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); box-shadow: 0 0 0 60px rgba(255,255,255,.05), 0 0 0 120px rgba(255,255,255,.04); pointer-events: none; }
#audit-cta > .container > * { position: relative; z-index: 1; }
#audit-cta > .container > div:first-child span { background: none !important; color: #fff !important; padding: 0 !important; font-family: var(--iw-mono); font-weight: 400 !important; font-size: 12px !important; letter-spacing: .08em !important; }
#audit-cta h2 { font-size: clamp(34px, 4.4vw, 64px) !important; letter-spacing: -.05em !important; line-height: .95 !important; font-weight: 600 !important; margin: 14px 0 16px !important; color: #fff !important; }
#audit-cta > .container > div:first-child p { color: rgba(255,255,255,.88) !important; font-size: 17px !important; line-height: 1.55 !important; margin: 0 !important; }
#audit-cta form { grid-column: 2; grid-row: 1; margin: 0 !important; max-width: none !important; background: rgba(0,0,0,.18) !important; border: 0 !important; border-radius: 99px !important; transform: none !important; box-shadow: none !important; }
#audit-cta form input { color: #fff !important; text-transform: none !important; font-weight: 400 !important; }
#audit-cta form input::placeholder { color: rgba(255,255,255,.75) !important; }
#audit-cta form .btn { background: var(--iw-text) !important; color: var(--iw-bg) !important; border-color: var(--iw-text) !important; }
#audit-cta > .container > p:last-child { grid-column: 2; color: rgba(255,255,255,.75) !important; font-family: var(--iw-mono); font-size: 11px !important; margin: -24px 0 0 !important; padding-left: 20px; }
@media (max-width: 860px) {
  #audit-cta > .container { grid-template-columns: 1fr; }
  #audit-cta form, #audit-cta > .container > p:last-child { grid-column: 1; grid-row: auto; }
  #audit-cta > .container > p:last-child { margin: 0 !important; padding: 0; }
  #audit-cta form { border-radius: 20px !important; }
}

/* ==================== Intro de la portada (sólo 1ª visita de la sesión) ====================
   Capa decorativa que se agrega por JS: el contenido de la página ya está cargado debajo,
   así que Google y las IAs leen todo igual y no se demora el pintado de la página. */
.iw-intro { position: fixed; inset: 0; z-index: 2147483000; background: var(--iw-bg); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 0 var(--iw-gutter) clamp(28px, 5vw, 64px); pointer-events: none; transition: transform .9s cubic-bezier(.76, 0, .24, 1); will-change: transform; }
.iw-intro.is-done { transform: translateY(-100%); }
.iw-intro__word { margin: 0; font-size: clamp(56px, 13vw, 210px); font-weight: 600; letter-spacing: -.06em; line-height: .82; color: var(--iw-text); display: flex; overflow: hidden; }
.iw-intro__word span { display: inline-block; transform: translateY(105%); animation: iw-intro-up .8s cubic-bezier(.22, 1, .36, 1) forwards; }
.iw-intro__word span:nth-child(2) { color: var(--iw-accent); animation-delay: .08s; }
.iw-intro.is-done .iw-intro__word span { transform: translateY(-30%); opacity: 0; transition: transform .7s cubic-bezier(.76, 0, .24, 1), opacity .5s; animation: none; }
.iw-intro__count { font-family: var(--iw-mono); font-size: 13px; letter-spacing: .1em; color: var(--iw-muted); font-variant-numeric: tabular-nums; }
.iw-intro__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--iw-accent); transform: scaleX(0); transform-origin: left; }
@keyframes iw-intro-up { to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .iw-intro { display: none !important; } }