/* ============================================================
   Iridian Web Engine — iridian-bs.css
   Capa de maquetación sobre Bootstrap 5.
   Extrae los estilos inline del HTML a clases semánticas
   conservando EXACTAMENTE los valores visuales originales
   (colores, tamaños, sombras) mediante los tokens --pix-*.
   Developed by PixUP · pixupweb.com
============================================================ */

/* ---------- Tablas (comparativas .ctbl / .rtbl) — refuerzo fiable ---------- */
.ctbl, .rtbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ctbl { margin-top: 1.5rem; }
.rtbl { min-width: 600px; }
.ctbl thead tr, .rtbl thead tr { background: var(--pix-forest-950); }
.ctbl thead th, .rtbl thead th { padding: .75rem 1rem; color: #fff; text-align: left; font-weight: 600; font-size: .75rem; letter-spacing: .05em; vertical-align: top; }
.ctbl thead th:last-child { color: var(--pix-mint); }
.ctbl tbody tr, .rtbl tbody tr { border-bottom: 1px solid var(--pix-ink-200); }
.ctbl tbody tr:nth-child(even), .rtbl tbody tr:nth-child(even) { background: var(--pix-paper); }
.ctbl tbody td { padding: .75rem 1rem; color: var(--pix-ink-600); vertical-align: top; line-height: 1.5; }
.ctbl tbody td:first-child { color: var(--pix-ink-500); }
.ctbl tbody td:last-child { color: var(--pix-forest-950); font-weight: 500; }
.rtbl tbody td, .rtbl tbody th[scope="row"] { padding: .75rem 1rem; vertical-align: top; line-height: 1.55; color: var(--pix-ink-600); text-align: left; font-weight: 400; }
.rtbl tbody th[scope="row"] { font-weight: 600; color: var(--pix-forest-950); white-space: nowrap; }
.rtbl tbody a { color: var(--pix-mint-700); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Formularios (.finput / .fchk) — refuerzo fiable ----------
   main.css tiene @media sin cerrar que atrapan estas reglas y las
   desactivan en escritorio; se redefinen aquí, fuera de cualquier media. */
.finput {
  width: 100%; display: block; padding: .625rem .875rem;
  font-family: var(--pix-font-sans); font-size: .9375rem; line-height: 1.4;
  color: var(--pix-forest-950); background-color: var(--pix-white);
  border: 1px solid var(--pix-ink-300); border-radius: var(--pix-r-xs);
  transition: border-color 150ms, box-shadow 150ms;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.finput::placeholder { color: var(--pix-ink-300); opacity: 1; }
.finput:focus { outline: none; border-color: var(--pix-mint); box-shadow: 0 0 0 3px rgba(85,224,177,.15); }
select.finput {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23595959' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .875rem center; padding-right: 2.5rem; cursor: pointer;
}
textarea.finput { resize: vertical; min-height: 120px; }
input[type="checkbox"].fchk { width: 16px; height: 16px; accent-color: var(--pix-mint); cursor: pointer; flex-shrink: 0; margin-top: 2px; }

/* ---------- Contenedores ---------- */
.iw-container { max-width: 1430px; margin-inline: auto; padding-inline: 1.5rem; }
.iw-container-sm { max-width: 800px; margin-inline: auto; padding-inline: 1.5rem; }

/* Rejilla 2 columnas con separación original de 4rem */
.iw-row-4 { --bs-gutter-x: 4rem; --bs-gutter-y: 2rem; }

/* ---------- Secciones ---------- */
.iw-sec   { padding: 5rem 0; }
.iw-hero  { position: relative; padding: 5.5rem 0 6.5rem; overflow: hidden; }
.iw-cta   { position: relative; padding: 5.5rem 0; overflow: hidden; }
.iw-bg-paper  { background: var(--pix-paper); }
.iw-bg-white  { background: var(--pix-white); }
.iw-bg-forest { background: var(--pix-forest-950); }
.iw-bordertop-mint { border-top: 3px solid var(--pix-mint); }

/* Imagen de fondo (cover) */
.iw-cover {
  position: absolute; inset: 0;
  background-image: url("../img/cover-tree-roots-network.png");
  background-size: cover; background-position: center;
  pointer-events: none;
}
.iw-cover--hero { opacity: .2; }
.iw-cover--cta  { opacity: .16; }
.iw-inner { position: relative; z-index: 1; }

/* ---------- Tipografía ---------- */
.iw-eyebrow {
  display: block; font-size: .75rem; font-weight: 600;
  letter-spacing: var(--pix-tracking-eyebrow); text-transform: uppercase;
  color: var(--pix-mint-700);
}
.iw-eyebrow--light { color: var(--pix-mint); }

.iw-h1 {
  font-size: clamp(2.125rem, 4.5vw, 3.25rem); font-weight: 700; color: #fff;
  line-height: 1.08; letter-spacing: var(--pix-tracking-tight); text-wrap: balance;
}
.iw-h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.125rem); font-weight: 700;
  color: var(--pix-forest-950); letter-spacing: var(--pix-tracking-tight);
  line-height: 1.15; text-wrap: balance;
}
.iw-h2--sm  { font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.2; }
.iw-h2--cta { font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.15; }
.iw-h2--light { color: #fff; }

.iw-h3-card     { font-size: .9rem;    font-weight: 700; color: var(--pix-forest-950); }
.iw-h3-card--uc { font-size: .9375rem; font-weight: 700; color: var(--pix-forest-950); }
.iw-h3-card--aud{ font-size: .875rem;  font-weight: 700; color: var(--pix-forest-950); }

.iw-lead { font-size: 1.125rem; color: rgba(255,255,255,.82); line-height: 1.65; }
.iw-note {
  font-size: .9375rem; color: rgba(255,255,255,.52);
  padding-left: 1rem; border-left: 2px solid var(--pix-mint); line-height: 1.75;
}
.iw-body { font-size: 1rem; color: var(--pix-ink-600); line-height: 1.75; }
.iw-body--intro { max-width: 680px; }
.iw-body--light { color: rgba(255,255,255,.7); }

.iw-quote {
  border-left: 3px solid var(--pix-mint); padding-left: 1.25rem;
  font-size: 1.0625rem; color: var(--pix-forest-950); line-height: 1.55;
  font-weight: 600; font-style: italic;
}

.iw-card-text     { font-size: .8125rem; color: var(--pix-ink-600); line-height: 1.65; }
.iw-card-text--uc { font-size: .875rem;  color: var(--pix-ink-600); line-height: 1.65; }
.iw-card-link {
  font-size: .8125rem; font-weight: 600; color: var(--pix-mint-700);
  text-decoration: underline; text-underline-offset: 2px;
}
.iw-arrow-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .9375rem; font-weight: 600; color: var(--pix-forest-950);
  text-decoration: underline; text-underline-offset: 3px;
}
.iw-num {
  display: block; font-size: 1.25rem; font-weight: 900; color: var(--pix-mint);
  line-height: 1; letter-spacing: -.03em;
}
.iw-title-link { text-decoration: none; color: inherit; }

/* ---------- Tarjetas ---------- */
.iw-card {
  background: var(--pix-paper); border: 1px solid var(--pix-ink-200);
  border-radius: var(--pix-r-md); padding: 1.5rem; box-shadow: var(--pix-shadow-1);
  height: 100%;
}
.iw-card--white   { background: var(--pix-white); }
.iw-card--top     { border-top: 3px solid transparent; }
.iw-card--topmint { border-top: 3px solid var(--pix-mint); }
.iw-card--left    { border-left: 3px solid var(--pix-mint); }

/* Iconos de tarjeta */
.iw-icon    { width: 40px; height: 40px; color: var(--pix-forest-800); margin-bottom: 1rem; }
.iw-icon--sm{ width: 36px; height: 36px; color: var(--pix-forest-800); margin-bottom: .875rem; }
/* Iconos de tarjeta con Bootstrap Icons (limpios) */
.iw-bi { display: inline-flex; align-items: center; justify-content: center; font-size: 1.9rem; line-height: 1; color: var(--pix-mint-700); margin-bottom: 1rem; }
.iw-bi--light { color: var(--pix-mint); }

/* ---------- Botones ---------- */
.iw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--pix-font-sans); font-weight: 600; line-height: 1;
  border: 2px solid transparent; border-radius: var(--pix-r-xs);
  text-decoration: none; cursor: pointer;
}
.iw-btn-mint    { background: var(--pix-mint); color: var(--pix-forest-950); border-color: var(--pix-mint); }
.iw-btn-outline { background: transparent; color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.28); }
.iw-btn-light   { background: var(--pix-white); color: var(--pix-forest-950); border-color: var(--pix-ink-300); }
.iw-btn-paper   { background: var(--pix-paper); color: var(--pix-forest-950); border-color: var(--pix-ink-300); }
.iw-btn--xs   { padding: .5rem 1.25rem;  font-size: .8rem; }
.iw-btn--md   { padding: .875rem 1.75rem; font-size: .9375rem; }
.iw-btn--wide { padding: .875rem 2rem;    font-size: .9375rem; }
.iw-btn--lg   { padding: .875rem 2rem;    font-size: 1rem; }
.iw-shadow-mint    { box-shadow: 0 8px 24px rgba(85,224,177,.28); }
.iw-shadow-mint-sm { box-shadow: 0 4px 16px rgba(85,224,177,.2); }

/* ---------- Chips del hero ---------- */
.iw-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.iw-chip {
  font-size: .75rem; font-weight: 500; letter-spacing: .04em; padding: .25rem .75rem;
  border: 1px solid rgba(85,224,177,.35); border-radius: 999px; color: rgba(255,255,255,.62);
}

/* ---------- Figuras / diagramas ---------- */
.iw-fig-hero {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--pix-r-md); padding: 1.5rem; width: 100%; margin: 0;
}
.iw-fig-paper {
  background: var(--pix-paper); border: 1px solid var(--pix-ink-200);
  border-radius: var(--pix-r-lg); overflow: hidden; margin: 0;
}
.iw-fig-white {
  background: var(--pix-white); border: 1px solid var(--pix-ink-200);
  border-radius: var(--pix-r-lg); overflow: hidden; margin: 0;
}
.iw-fig-white--shadow { box-shadow: var(--pix-shadow-2); }
.iw-figcap {
  font-size: .75rem; color: rgba(255,255,255,.35); text-align: center;
  margin-top: .75rem; font-style: italic;
}
.iw-figcap--dark { color: var(--pix-ink-500); }
/* Todos los diagramas SVG dentro de <figure> llenan el ancho de su columna */
figure svg { width: 100%; height: auto; display: block; }

/* ---------- CTA final (caja derecha) ---------- */
.iw-cta-box {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--pix-r-lg); padding: 2rem;
}
.iw-cta-box-title { font-size: 1.125rem; font-weight: 700; color: #fff; }
.iw-cta-box-text  { font-size: .875rem; color: rgba(255,255,255,.6); line-height: 1.65; }
.iw-cta-steps {
  padding: 1.25rem 1.75rem; background: rgba(255,255,255,.04);
  border-radius: var(--pix-r-md); border: 1px solid rgba(255,255,255,.06);
}
.iw-cta-steps svg { width: 100%; height: auto; display: block; }

/* ---------- FAQ ---------- */
.iw-faq-list { display: flex; flex-direction: column; gap: .75rem; }
.iw-faq-item {
  background: var(--pix-white); border: var(--pix-bd);
  border-radius: var(--pix-r-md); overflow: hidden;
}
.iw-faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem; font-size: 1rem; font-weight: 600;
  color: var(--pix-forest-950); cursor: pointer; gap: 1rem; list-style: none;
}
.iw-faq-a { padding: 0 1.5rem 1.25rem; font-size: .875rem; color: var(--pix-ink-600); line-height: 1.75; }

/* ---------- Cabecera / navbar ---------- */
.iw-header {
  position: sticky; top: 0; z-index: 100; background: var(--pix-forest-950);
  border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.iw-header .navbar { padding-top: 0; padding-bottom: 0; min-height: 64px; }
.iw-navwrap { max-width: 1430px; width: 100%; margin-inline: auto; padding-inline: 1.5rem; min-height: 64px; }
.iw-header .navbar-brand { display: flex; align-items: center; margin-right: 2rem; }
.iw-header .navbar-collapse { align-items: center; }
.iw-logo { height: 34px; width: auto; flex: 0 0 auto; display: block; filter: brightness(0) invert(1); }
.nl {
  display: block; padding: .5rem .75rem; font-size: .8rem; font-weight: 500;
  color: rgba(255,255,255,.62); white-space: nowrap;
  border-bottom: 2px solid transparent; text-decoration: none;
}
.iw-toggler {
  background: none; border: none; cursor: pointer;
  display: inline-flex; flex-direction: column; gap: 4px; padding: 4px;
}
.iw-toggler span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,.8); }
.iw-toggler:focus { outline: 2px solid var(--pix-mint); outline-offset: 3px; }

/* En la barra colapsada de móvil, separa los enlaces y la CTA del logo */
@media (max-width: 767.98px) {
  .iw-header .navbar-collapse { padding-bottom: 1rem; }
  .iw-header .navbar-nav { padding-top: .5rem; }
}

/* ---------- Pie de página ---------- */
.iw-footer { background: var(--pix-ink-900); color: rgba(255,255,255,.6); padding-top: 4rem; }
.iw-footer-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; margin-bottom: 1rem;
}
.iw-footer-list { display: flex; flex-direction: column; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.iw-footer-link { font-size: .875rem; color: rgba(255,255,255,.5); text-decoration: none; }
.iw-footer-dev  { margin-top: .25rem; font-size: .875rem; color: rgba(255,255,255,.32); }
.iw-footer-dev a { color: rgba(255,255,255,.42); text-decoration: none; }
.iw-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07); padding: 1.25rem 0;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
}
.iw-footer-legal { display: flex; gap: 1.25rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.iw-footer-legal a { font-size: .75rem; color: rgba(255,255,255,.32); text-decoration: none; }
.iw-copy { font-size: .75rem; color: rgba(255,255,255,.25); margin: 0; }
.iw-ai-note { border-top: 1px solid rgba(255,255,255,.06); padding-top: .75rem; padding-bottom: .75rem; }
.iw-ai-note p { font-size: .75rem; color: rgba(255,255,255,.28); line-height: 1.6; max-width: 780px; margin: 0; }
.iw-ai-note a { color: rgba(255,255,255,.4); text-decoration: underline; }

/* ---------- Utilidades de margen (valores exactos del original) ---------- */
.u-mb-05   { margin-bottom: .5rem; }
.u-mb-0625 { margin-bottom: .625rem; }
.u-mb-075  { margin-bottom: .75rem; }
.u-mb-0875 { margin-bottom: .875rem; }
.u-mb-1    { margin-bottom: 1rem; }
.u-mb-125  { margin-bottom: 1.25rem; }
.u-mb-15   { margin-bottom: 1.5rem; }
.u-mb-175  { margin-bottom: 1.75rem; }
.u-mb-2    { margin-bottom: 2rem; }
.u-mb-25   { margin-bottom: 2.5rem; }
.u-mb-3    { margin-bottom: 3rem; }
.u-mt-025  { margin-top: .25rem; }

/* Separaciones flex (valores exactos del original) */
.iw-gap-075 { gap: .75rem; }
.iw-stack-075 { display: flex; flex-direction: column; gap: .75rem; }

/* ============================================================
   Bloques de mejora de conversión — Home
============================================================ */

/* Checklist positivo ("Iridian encaja si...") sobre fondo oscuro (hero) */
.iw-fitbox {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--pix-r-md); padding: 1.25rem 1.5rem;
}
.iw-fitbox-title { font-size: .9375rem; font-weight: 700; color: #fff; margin-bottom: .75rem; }
.iw-fitbox ul { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.iw-fitbox li { display: flex; align-items: flex-start; gap: .625rem; font-size: .9375rem; line-height: 1.5; color: rgba(255,255,255,.85); }
.iw-fitbox li i { color: var(--pix-mint); flex-shrink: 0; margin-top: .2rem; }

/* Checklist de advertencia ("señales de freno") sobre fondo claro */
.iw-warnlist { display: flex; flex-direction: column; gap: .625rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.iw-warnlist li { display: flex; align-items: flex-start; gap: .625rem; font-size: .9375rem; line-height: 1.55; color: var(--pix-ink-700); }
.iw-warnlist li i { color: var(--pix-warning); flex-shrink: 0; margin-top: .2rem; }

/* Bloque de encaje en dos columnas ("Iridian no es necesario para cualquier web") */
.iw-yn { border-radius: var(--pix-r-md); padding: 1.5rem; height: 100%; }
.iw-yn--no  { background: var(--pix-paper); border: 1px solid var(--pix-ink-200); }
.iw-yn--yes { background: var(--pix-white); border: 1px solid var(--pix-mint); box-shadow: 0 8px 24px rgba(85,224,177,.12); }
.iw-yn h3 { font-size: 1rem; font-weight: 700; color: var(--pix-forest-950); margin-bottom: 1rem; }
.iw-yn ul { display: flex; flex-direction: column; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.iw-yn li { display: flex; align-items: flex-start; gap: .625rem; font-size: .9375rem; line-height: 1.5; color: var(--pix-ink-700); }
.iw-yn--no li i  { color: var(--pix-ink-400); flex-shrink: 0; margin-top: .2rem; }
.iw-yn--yes li i { color: var(--pix-mint-700); flex-shrink: 0; margin-top: .2rem; }

/* Checklist de reaseguro sobre fondo claro (p.ej. "qué no hace falta preparar") */
.iw-reassure { display: flex; flex-direction: column; gap: .625rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.iw-reassure li { display: flex; align-items: flex-start; gap: .625rem; font-size: .9375rem; line-height: 1.55; color: var(--pix-ink-700); }
.iw-reassure li i { color: var(--pix-mint-700); flex-shrink: 0; margin-top: .2rem; }

/* Checklist compacto de señales de encaje dentro de una card */
.iw-card-signals { display: flex; flex-direction: column; gap: .375rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.iw-card-signals li { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; line-height: 1.5; color: var(--pix-ink-600); }
.iw-card-signals li i { color: var(--pix-mint-700); flex-shrink: 0; margin-top: .15rem; font-size: .75rem; }

/* Item de confianza PixUP (lista de capacidades) */
.iw-trust-item {
  display: flex; align-items: center; gap: .625rem;
  background: var(--pix-white); border: 1px solid var(--pix-ink-200);
  border-radius: var(--pix-r-xs); padding: .75rem 1rem;
  font-size: .9375rem; font-weight: 500; color: var(--pix-forest-950);
}
.iw-trust-item i { color: var(--pix-mint-700); flex-shrink: 0; }