/* =========================================================
   1) Prueba-v20.css — pegado TAL CUAL me lo pasaron (incluye
   secciones de otras partes del sitio que no aplican acá:
   container-event, box-1, letra, etc. Se dejan sin tocar).
   Si el sitio ya carga este archivo de forma global, este
   bloque queda duplicado pero no rompe nada (son las mismas
   reglas); si no, con este archivo alcanza.
   ========================================================= */

/* =========================
   CONTENEDOR DE CARDS
========================= */
.card-wrapper {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem;
}

/* =========================
   CARD
========================= */
.interactive-card {
  position: relative;
  width: 20rem;
  height: 30rem;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  color: rgb(240, 240, 240);
  box-shadow: 0 10px 30px 5px rgba(0,0,0,0.2);
}

/* Imagen */
.interactive-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Contenido */
.interactive-card__content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
}

/* Título */
.interactive-card__title {
  position: absolute;
  bottom: 30px;
  left: 30px;
  margin: 0;
  font-weight: 600;
  font-size: 25px;
  text-transform: uppercase;
  transition: bottom 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: bottom;
}

/* Texto y botón */
.interactive-card__text,
.interactive-card__button {
  position: absolute;
  opacity: 0;
  max-width: 80%;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-card__text {
  bottom: 80px;
  left: 30px;
}

.interactive-card__button {
  bottom: 40px;
  left: 30px;
  text-decoration: none;
  color: inherit;
}

.interactive-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0); /* transparente por defecto */
  z-index: 1;
  transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-card__content {
  position: relative;
  z-index: 2;
}


/* =========================
   HOVER / FOCUS
========================= */
.interactive-card:hover .interactive-card__title,
.interactive-card:focus-within .interactive-card__title {
  bottom: 200px;
}

.interactive-card:hover .interactive-card__text,
.interactive-card:hover .interactive-card__button,
.interactive-card:focus-within .interactive-card__text,
.interactive-card:focus-within .interactive-card__button {
  opacity: 1;
}

.interactive-card:hover .interactive-card__image {
  opacity: 1;
  filter: blur(5px);
}

.interactive-card:hover::before,
.interactive-card:focus-within::before {
  background: rgba(0, 0, 0, 0.5); /* ajustá la intensidad */
}

.interactive-card:hover .interactive-card__title,
.interactive-card:focus-within .interactive-card__title {
  bottom: 210px;
}


/* =========================
   ICONOS
========================= */
.material-symbols-outlined {
  vertical-align: middle;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
  .interactive-card {
    width: 100%;
    max-width: 22rem;
  }
}

@media (max-width: 768px) {
  .container-event {
    flex-direction: column;
    padding: 40px 24px !important;
  }

  .box-events {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .box-events > div {
    margin-left: 0 !important;
  }

  .text-events {
    text-align: center;
  }
}


@media (max-width: 500px) {
  	.box-1{
    		flex-direction: column !important;
		align-items: center !important;
		padding-top: 80px !important;

	}
	.letra{
		font-size: 70px !important;
		width: auto !important;
		text-align: center !important;

    	}
	.box-2{
		align-items: center !important;
		padding-top: 40px !important;
	}

	.letra-2{
		font-size: 24px !important;
		text-align: center !important;
	}

	.container-event{
		flex-wrap: nowrap important!;
		flex-direction: column !important;
		align-items: center !important;
	}
	.img-form{
		margin-left: 0 !important;
		margin-bottom: 20px !important;
	}

	.text-events{
		width: 260px !important;
	}

}

/* =========================================================
   2) CSS propio de "Casi Humanos" — todo prefijado ch- para
   no pisar ninguna clase existente del sitio. Prueba-v20.css
   (bloque 1, arriba, sin tocar) fue pensado para un card con
   foto de fondo que revela título/texto/botón recién al hacer
   hover: acá se lo reconstruye como card blanco siempre
   visible (ver comentario en la sección Catálogo).

   COMPOSICIÓN: después de comparar contra micrositios reales
   de BDO (finance-hub, alianza-latina) — ver
   guia-estilos-bdo-master-css.md — se rehizo la página para
   ser editorial/restringida como el sitio real: sin bloques
   oscuros full-bleed (excepto un único banner rojo de cierre),
   sin chips/badges decorativos, tabs de despliegue aplanadas a
   una lista simple. La paleta y tipografía reales (sección
   anterior de este mismo bloque) no cambiaron, solo la
   composición. El catálogo (16 fichas + modal + simulador) es
   la excepción deliberada: es el producto interactivo que esta
   página existe para mostrar, así que mantiene el cuadrado de
   ícono — ahí sí cumple una función real (diferenciar 16 roles
   de un vistazo), no es decoración.
   ========================================================= */

:root{
  --ch-red:#E81A3B; --ch-red-dark:#C0152E;
  --ch-slate:#5B6E7F; --ch-cta:#0062B8;
  --ch-ink:#333333; --ch-lighter-black:#404040;
  --ch-muted:#666666; --ch-border:#E7E7E7; --ch-bg-soft:#F2F2F2;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif; background:#fff; color:var(--ch-ink); }
img{ max-width:100%; }
.ch-container{ max-width:1240px; margin:0 auto; padding:0 20px; }
.ch-eyebrow{ color:var(--ch-red); font-weight:800; text-transform:uppercase; letter-spacing:.2em; font-size:11px; }
/* Escala real: h2 del sitio es peso 400 (no 800) — un h1 marcado
   y h2 más liviano es el contraste tipográfico real de BDO. */
.ch-h2{ font-size:30px; font-weight:400; letter-spacing:-.01em; color:var(--ch-ink); margin:8px 0 0; line-height:2rem; }
@media(min-width:976px){ .ch-h2{ font-size:2.25rem; line-height:46px; } }
.ch-lead{ color:var(--ch-muted); margin-top:14px; font-size:15.5px; line-height:1.6; max-width:640px; }
.ch-section{ padding:72px 0; }
/* La hoja de Google Fonts solo trae el @font-face; el resto de este
   bloque es el snippet estándar de Material Symbols (sin él, el
   navegador muestra el nombre del ícono como texto plano en vez del
   glyph). Se repite en .ch-icon-sq porque varias tarjetas estáticas
   ponen el nombre del ícono directo adentro del div, sin un <span>. */
.material-symbols-outlined, .ch-icon-sq{
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined{ display:inline-block; font-size:24px; }

/* Botones: degradé diagonal slate→rojo que "barre" al hacer hover,
   tal cual el .btn/.primary real de BDO. El secundario también
   copia su hover real (se llena con el mismo degradé). */
.ch-btn{ font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:13px 22px; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; border-radius:2px; transition:all .3s linear; }
.ch-btn-primary{
  color:#fff;
  background:linear-gradient(140deg,var(--ch-slate) 50%,var(--ch-red) 0);
  background-position:100% 100%;
  background-size:260% 110%;
}
.ch-btn-primary:hover{ background-position:0 0; }
.ch-btn-outline{ background:transparent; border:2px solid var(--ch-lighter-black); color:var(--ch-ink); padding:11px 20px; }
.ch-btn-outline:hover{
  background:linear-gradient(99.91deg,var(--ch-slate) 113.41%,var(--ch-red) 113.45%);
  border-color:var(--ch-slate); color:#fff;
}
a.ch-btn{ text-decoration:none; }

/* ---------- Hero ---------- */
/* Fondo "estilo BDO": una banda diagonal a 140deg slate→rojo, el
   mismo ángulo y los mismos dos colores del degradé real de sus
   botones (.ch-btn-primary, arriba) — acá en versión muy tenue,
   como fondo de sección en vez de relleno de botón. Es el mismo
   recurso de marca, no un patrón inventado. Corte duro (sin blur)
   a propósito: el degradé real del botón también corta duro. */
.ch-hero{
  background:
    linear-gradient(140deg,
      transparent 54%,
      rgba(91,110,127,.10) 54%, rgba(91,110,127,.10) 74%,
      rgba(232,26,59,.13) 74%, rgba(232,26,59,.13) 100%),
    linear-gradient(180deg, #fcfcfd 0%, #ffffff 55%);
  color:var(--ch-ink); padding:64px 0 0; border-bottom:4px solid var(--ch-red);
}
.ch-hero-inner{ display:grid; gap:40px; grid-template-columns:1fr; padding-bottom:44px; }
@media(min-width:960px){ .ch-hero-inner{ grid-template-columns:1.3fr .7fr; align-items:center; } }
/* h1 real: 36px/800/40px en mobile, 50px/56px desde 976px */
.ch-hero h1{ font-size:36px; font-weight:800; line-height:40px; letter-spacing:-.01em; color:var(--ch-ink); margin:10px 0 0; max-width:640px; }
@media(min-width:976px){ .ch-hero h1{ font-size:50px; line-height:56px; } }
.ch-hero h1 .accent{ color:var(--ch-red); }
.ch-hero p{ color:var(--ch-muted); font-size:16.5px; line-height:1.6; max-width:520px; margin:22px 0 0; }
.ch-stats-row{ display:flex; flex-wrap:wrap; gap:20px 36px; }
.ch-stat{ display:flex; flex-direction:column; gap:4px; padding:10px 16px; border-left:2px solid var(--ch-border); border-radius:0 6px 6px 0; background:linear-gradient(135deg, rgba(91,110,127,.05), rgba(91,110,127,0) 75%); }
.ch-stat-num{ font-size:28px; font-weight:800; color:var(--ch-red); line-height:1; }
.ch-stat-label{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ch-muted); line-height:1.3; }

.ch-hero-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 30px; padding:20px 0; border-top:1px solid var(--ch-border); }
.ch-hero-nav-link{ background:none; border:none; cursor:pointer; font-family:inherit; color:var(--ch-muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:4px 0; transition:color .15s; }
.ch-hero-nav-link:hover{ color:var(--ch-red); }

/* ---------- Plataforma ---------- */
.ch-platform-grid{ display:grid; gap:44px; margin-top:44px; grid-template-columns:1fr; }
@media(min-width:1024px){ .ch-platform-grid{ grid-template-columns:1fr 1fr; align-items:start; } }
/* Lista de capacidades sin card ni ícono: solo un filo rojo como
   marcador — así es como el sitio real trata listas de features,
   texto y tipografía haciendo el trabajo, no cajas ni glyphs. */
.ch-def-list{ display:grid; grid-template-columns:1fr; gap:22px; }
@media(min-width:640px){ .ch-def-list{ grid-template-columns:1fr 1fr; } }
.ch-def-item{ border-left:2px solid var(--ch-red); padding:6px 16px; border-radius:0 6px 6px 0; background:linear-gradient(120deg, rgba(232,26,59,.035), rgba(232,26,59,0) 65%); }
.ch-def-item h3{ font-size:15px; font-weight:800; color:var(--ch-ink); margin:0 0 6px; }
.ch-def-item p{ font-size:13px; color:var(--ch-muted); margin:0; line-height:1.5; }

.ch-callout{ background:linear-gradient(160deg, #ffffff 0%, #f9fafc 55%, #f4f6f8 100%); border:1px solid var(--ch-border); border-left:4px solid var(--ch-red); border-radius:0 8px 8px 0; padding:30px; box-shadow:0 16px 40px rgba(91,110,127,.088); }
.ch-callout-label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:var(--ch-red); margin-bottom:8px; }
.ch-callout h3{ font-size:20px; font-weight:800; color:var(--ch-ink); margin:0 0 12px; }
.ch-callout > p{ font-size:13.5px; color:var(--ch-muted); line-height:1.6; margin:0 0 20px; }

/* ---------- Despliegue ---------- */
.ch-deploy{
  background:
    radial-gradient(820px 460px at 105% -10%, rgba(91,110,127,.07), transparent 60%),
    linear-gradient(180deg, #f7f8f9 0%, #f1f2f3 100%);
  padding:76px 0;
}
.ch-deploy .ch-lead{ max-width:680px; }

/* Fases: antes eran tabs interactivas; ahora una lista secuencial
   simple (todo el contenido visible siempre, sin clickear nada)
   como los "features" en prosa del sitio real. */
.ch-phases-list{ margin-top:40px; max-width:800px; }
.ch-phase-row{ display:flex; gap:22px; padding:26px 0; border-top:1px solid var(--ch-border); }
.ch-phase-row:first-child{ border-top:none; padding-top:0; }
.ch-phase-row .ch-step-num{ font-size:24px; font-weight:900; color:var(--ch-red); flex-shrink:0; line-height:1.3; }
.ch-phase-row-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.ch-phase-row-time{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ch-red); }
.ch-phase-row-head h4{ font-size:17px; font-weight:800; color:var(--ch-ink); margin:0; }
.ch-phase-row-lead{ font-size:13.5px; color:var(--ch-muted); line-height:1.6; margin:0; }
.ch-phase-deliverable{ font-size:12.5px; color:var(--ch-ink); background:linear-gradient(120deg, #ffffff 0%, #f8fafc 100%); border:1px solid var(--ch-border); display:inline-block; padding:7px 12px; border-radius:4px; margin-top:12px; }
.ch-phase-deliverable strong{ color:var(--ch-red); }

/* Viñeta real de BDO: no es un punto, es un triangulito rojo
   (truco con border) — versión clara, para texto sobre fondo blanco. */
.ch-plain-list{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.ch-plain-list li{ position:relative; padding-left:16px; font-size:13px; color:var(--ch-muted); line-height:1.5; }
.ch-plain-list li::before{
  content:""; position:absolute; left:0; top:.4em;
  width:0; height:0;
  border-top:.3rem solid transparent; border-bottom:.3rem solid transparent;
  border-left:.5rem solid var(--ch-red);
}

.ch-models-grid{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:56px; }
@media(min-width:768px){ .ch-models-grid{ grid-template-columns:repeat(3,1fr); } }
.ch-model-card{ background:linear-gradient(165deg, #ffffff 0%, #f9fafc 60%, #f4f6f8 100%); border:1px solid var(--ch-border); border-top:2px solid var(--ch-red); border-radius:8px; padding:26px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 10px 26px rgba(91,110,127,.078); }
.ch-model-top{ display:flex; align-items:center; margin-bottom:18px; }
.ch-model-tag{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; background:#fff; border:1px solid var(--ch-border); color:var(--ch-slate); padding:4px 8px; border-radius:4px; }
.ch-model-card h4{ font-size:18px; font-weight:800; margin:0 0 8px; color:var(--ch-ink); }
.ch-model-card p{ font-size:13px; color:var(--ch-muted); line-height:1.55; margin:0 0 18px; }
.ch-model-bullets{ border-top:1px solid var(--ch-border); padding-top:14px; }
.ch-model-bullets div{ position:relative; padding-left:16px; font-size:11.5px; color:var(--ch-muted); line-height:1.6; }
.ch-model-bullets div::before{
  content:""; position:absolute; left:0; top:.45em;
  width:0; height:0;
  border-top:.28rem solid transparent; border-bottom:.28rem solid transparent;
  border-left:.45rem solid var(--ch-red);
}

.ch-guarantee{ margin-top:44px; background:linear-gradient(120deg, #ffffff 0%, #f9fafc 60%, #f4f6f8 100%); border:1px solid var(--ch-border); border-radius:8px; padding:26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; box-shadow:0 10px 26px rgba(91,110,127,.068); }
.ch-guarantee-left{ display:flex; align-items:center; gap:16px; }
.ch-guarantee-left h5{ font-size:15px; font-weight:800; margin:0; color:var(--ch-ink); }
.ch-guarantee-left p{ font-size:12px; color:var(--ch-muted); margin:4px 0 0; }

/* ---------- Familias ---------- */
.ch-families-grid{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:44px; }
@media(min-width:768px){ .ch-families-grid{ grid-template-columns:repeat(3,1fr); } }
.ch-family-card{ background:linear-gradient(165deg, #ffffff 0%, #f9fafc 60%, #f4f6f8 100%); border:1px solid var(--ch-border); border-top:4px solid var(--ch-red); border-radius:8px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 10px 26px rgba(91,110,127,.078); transition:box-shadow .25s ease; }
.ch-family-card:hover{ box-shadow:0 16px 40px rgba(91,110,127,.145); }
.ch-family-card-top{ padding:28px; }
/* Chip neutro real (su .tag): borde gris, texto slate, sin relleno de color */
.ch-family-tag{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:4px 8px; border-radius:4px; background:#fff; border:1px solid var(--ch-border); color:var(--ch-slate); }
.ch-family-card h3{ font-size:21px; font-weight:800; margin:16px 0 0; color:var(--ch-ink); }
.ch-family-card p{ font-size:13.5px; color:var(--ch-muted); margin:10px 0 0; line-height:1.55; }
.ch-family-explore{ margin:0 28px 24px; padding-top:16px; border-top:1px solid #f0f0f0; background:none; border-left:none; border-right:none; border-bottom:none; display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-family:inherit; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ch-ink); }
.ch-family-explore:hover{ color:var(--ch-red); }

/* ---------- Catálogo (el producto interactivo — no se aplana) ---------- */
.ch-catalog-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:8px; }
.ch-controls{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin-bottom:6px; }
.ch-filters{ display:flex; flex-wrap:wrap; gap:8px; }
.ch-filter-btn{ padding:9px 18px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; border:none; background:var(--ch-bg-soft); color:var(--ch-lighter-black); cursor:pointer; transition:.15s; font-family:inherit; }
.ch-filter-btn:hover{ background:var(--ch-border); }
.ch-filter-btn.active{ background:var(--ch-red); color:#fff; }
.ch-result-count{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ch-muted); }

.ch-search{ position:relative; width:100%; max-width:360px; margin:14px 0 4px; }
.ch-search input{ width:100%; height:44px; border:1px solid #d4d4d4; background:var(--ch-bg-soft); padding:0 40px 0 42px; font-size:14px; outline:none; transition:.2s; font-family:inherit; }
.ch-search input:focus{ border-color:var(--ch-red); background:#fff; }
.ch-search .ch-icon-search{ position:absolute; left:9px; top:50%; transform:translateY(-50%); color:#a3a3a3; }
.ch-search .ch-clear{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#a3a3a3; display:none; }
.ch-search.has-query .ch-clear{ display:block; }

.ch-badge{ flex-shrink:0; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:5px 9px; border-radius:3px; }
.ch-badge.disponible{ background:#dcfce7; color:#166534; }
.ch-badge.configurable{ background:#fef3c7; color:#92400e; }
.ch-meta{ font-size:10px; text-transform:uppercase; letter-spacing:.14em; font-weight:800; color:var(--ch-red); }

.ch-empty{ text-align:center; padding:70px 20px; background:var(--ch-bg-soft); border:1px dashed #d4d4d4; margin:20px 20px 0; }
.ch-empty h3{ font-weight:800; color:var(--ch-lighter-black); margin:12px 0 4px; }
.ch-empty p{ color:var(--ch-muted); font-size:13px; margin:0 0 16px; }
.ch-reset{ border:1px solid #d4d4d4; background:#fff; padding:9px 18px; font-size:11px; font-weight:800; text-transform:uppercase; cursor:pointer; font-family:inherit; }

/* La card de Prueba-v20.css revela título/texto/botón recién al
   hacer hover, sobre una foto de fondo. Acá el contenido tiene que
   verse siempre (sin foto: no hay <img> en el markup), así que
   este bloque suma overrides sobre esas mismas clases. El cuadrado
   de ícono se mantiene: acá sí diferencia 16 roles de un vistazo,
   es la única sección donde ese lenguaje visual está justificado. */
.interactive-card{
  height:auto; display:flex; flex-direction:column;
  background:linear-gradient(165deg, #ffffff 0%, #f9fafc 55%, #f4f6f8 100%); color:var(--ch-ink);
  border:1px solid var(--ch-border); border-top:4px solid var(--ch-red); border-radius:8px;
  box-shadow:0 8px 24px rgba(91,110,127,.078);
  transition:box-shadow .3s ease;
}
.interactive-card:hover{ box-shadow:0 16px 80px rgba(91,110,127,.25); }
.interactive-card::before{ display:none; }
.interactive-card__content{ position:relative; height:auto; flex:1; display:flex; flex-direction:column; padding:28px; }
.ch-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ch-icon-sq{ width:48px; height:48px; border-radius:6px; flex-shrink:0; background:var(--ch-ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; transition:background .3s ease; }
.interactive-card:hover .ch-icon-sq{ background:var(--ch-red); }
.interactive-card__title{ position:static; margin:22px 0 10px; font-size:19px; font-weight:800; text-transform:none; letter-spacing:-.01em; color:var(--ch-ink); transition:color .3s ease; }
.interactive-card:hover .interactive-card__title{ color:var(--ch-red); }
.interactive-card__text{ position:static; opacity:1; max-width:none; flex:1; margin:0; font-size:13.5px; line-height:1.6; color:var(--ch-muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ch-card-actions{ display:flex; align-items:center; gap:8px; margin-top:24px; padding-top:20px; border-top:1px solid #f2f2f2; }
.interactive-card__button{ position:static; opacity:1; max-width:none; flex:1; background:none; border:none; font:inherit; cursor:pointer; color:#262626; padding:8px 0; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; display:flex; align-items:center; justify-content:space-between; gap:8px; transition:color .15s; }
.interactive-card__button:hover{ color:var(--ch-red); }
.ch-play-btn{ flex-shrink:0; background:var(--ch-bg-soft); border:none; color:var(--ch-lighter-black); padding:9px; border-radius:6px; cursor:pointer; display:flex; transition:.15s; }
.ch-play-btn:hover{ background:#fee2e2; color:var(--ch-red); }

/* ---------- Modales (ficha técnica + simulador) ----------
   Quedan con header oscuro (charcoal) a propósito: son vistas de
   detalle superpuestas, no parte de la composición de la página
   en reposo — no entran en la crítica de "nada de bloques oscuros
   full-bleed", que aplica a lo que se ve sin interactuar. */
.ch-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000; overflow-y:auto; }
.ch-overlay[hidden]{ display:none; }
.ch-modal{ background:#fff; width:100%; border-radius:12px; box-shadow:0 30px 70px rgba(91,110,127,.35); }
.ch-modal-spec{ max-width:760px; max-height:90vh; overflow-y:auto; }
.ch-modal-header{ background:var(--ch-ink); color:#fff; padding:34px 30px; position:relative; border-top:4px solid var(--ch-red); border-radius:12px 12px 0 0; }
.ch-modal-close{ position:absolute; right:14px; top:14px; background:none; border:none; color:rgba(255,255,255,.7); cursor:pointer; padding:8px; border-radius:999px; }
.ch-modal-close:hover{ color:#fff; background:rgba(255,255,255,.1); }
.ch-modal-header .ch-icon-badge{ width:52px; height:52px; background:var(--ch-red); border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:#fff; font-size:22px; font-weight:800; }
.ch-modal-header .ch-meta-line{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; display:flex; align-items:center; gap:10px; color:var(--ch-red); margin-bottom:6px; }
.ch-modal-header .ch-area{ color:rgba(255,255,255,.7); letter-spacing:.05em; }
.ch-modal-header h2{ font-size:clamp(22px,3vw,30px); font-weight:800; margin:2px 0 0; letter-spacing:-.01em; }
.ch-modal-header p{ color:rgba(255,255,255,.82); margin-top:14px; line-height:1.6; font-size:15px; max-width:640px; }
.ch-modal-body{ padding:30px; }
.ch-section-title{ font-weight:800; font-size:16px; color:var(--ch-ink); display:flex; align-items:center; gap:8px; margin:0 0 14px; }
.ch-cap-list{ display:flex; flex-direction:column; gap:10px; }
.ch-cap-item{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ch-lighter-black); }
.ch-cap-item .material-symbols-outlined{ color:var(--ch-red); flex-shrink:0; }
.ch-two-col{ display:grid; grid-template-columns:1fr; gap:26px; }
@media(min-width:640px){ .ch-two-col{ grid-template-columns:1fr 1fr; } }
.ch-info-box{ background:var(--ch-bg-soft); border:1px solid var(--ch-border); border-left:4px solid; padding:16px; font-size:13px; line-height:1.55; color:var(--ch-lighter-black); }
.ch-info-box .ch-label{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:5px; }
.ch-info-box.ch-receives{ border-left-color:var(--ch-red); } .ch-info-box.ch-receives .ch-label{ color:var(--ch-red); }
.ch-info-box.ch-delivers{ border-left-color:var(--ch-ink); margin-top:14px; } .ch-info-box.ch-delivers .ch-label{ color:var(--ch-ink); }
.ch-guardrail{ border-left:4px solid var(--ch-red); background:#fef2f2; padding:16px 18px; font-size:13.5px; color:#262626; line-height:1.55; margin-top:26px; }
.ch-guardrail strong{ color:var(--ch-red); display:block; margin-bottom:4px; }
.ch-modal-actions{ display:flex; flex-wrap:wrap; gap:10px; padding-top:22px; margin-top:22px; border-top:1px solid #f2f2f2; }

.ch-modal-play{ max-width:880px; height:85vh; display:flex; flex-direction:column; overflow:hidden; }
.ch-play-header{ background:var(--ch-ink); color:#fff; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; border-top:4px solid var(--ch-red); border-radius:12px 12px 0 0; flex-shrink:0; }
.ch-play-header-left{ display:flex; align-items:center; gap:14px; }
.ch-play-header .ch-icon-badge{ width:40px; height:40px; background:var(--ch-red); border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
.ch-tag-row{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.ch-tag{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.18em; color:var(--ch-red); }
.ch-live{ font-size:9px; font-weight:800; text-transform:uppercase; background:rgba(34,197,94,.2); color:#4ade80; padding:2px 8px; }
.ch-play-header h3{ font-size:16px; font-weight:800; margin:0; }
.ch-play-body{ flex:1; overflow-y:auto; padding:22px; background:var(--ch-bg-soft); display:flex; flex-direction:column; gap:18px; }
.ch-disclaimer{ background:#fff; border:1px solid var(--ch-border); border-left:4px solid var(--ch-red); padding:14px 16px; font-size:12px; color:var(--ch-muted); display:flex; gap:10px; align-items:center; }
.ch-disclaimer .material-symbols-outlined{ color:var(--ch-red); flex-shrink:0; }
.ch-msg-row{ display:flex; gap:10px; }
.ch-msg-row.user{ justify-content:flex-end; }
.ch-bot-avatar{ width:32px; height:32px; border-radius:6px; background:var(--ch-red); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; color:#fff; }
.ch-bubble{ max-width:80%; padding:14px 16px; font-size:13.5px; line-height:1.6; border-radius:10px; }
.ch-bubble.user{ background:var(--ch-ink); color:#fff; border-top-right-radius:0; }
.ch-bubble.assistant{ background:#fff; border:1px solid var(--ch-border); color:#262626; border-top-left-radius:0; }
.ch-loading-row{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ch-muted); background:#fff; border:1px solid var(--ch-border); padding:12px 16px; border-radius:8px; width:fit-content; }
.ch-loading-row .material-symbols-outlined{ animation:ch-spin 1s linear infinite; color:var(--ch-red); }
@keyframes ch-spin{ to{ transform:rotate(360deg); } }
.ch-play-footer{ padding:14px; background:#fff; border-top:1px solid var(--ch-border); display:flex; gap:10px; flex-shrink:0; }
.ch-play-footer input{ flex:1; background:var(--ch-bg-soft); border:1px solid #d4d4d4; padding:13px 16px; font-size:13.5px; outline:none; font-family:inherit; }
.ch-play-footer input:focus{ border-color:var(--ch-red); background:#fff; }
.ch-play-footer button{ background:var(--ch-red); color:#fff; border:none; padding:0 22px; font-weight:800; font-size:11px; text-transform:uppercase; cursor:pointer; display:flex; align-items:center; gap:8px; font-family:inherit; }
.ch-play-footer button:hover{ background:var(--ch-red-dark); }
.ch-play-footer button:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Diferencial ---------- */
.ch-diff{
  background:
    radial-gradient(760px 440px at 105% 100%, rgba(91,110,127,.06), transparent 60%),
    linear-gradient(180deg, #f7f8f9 0%, #f1f2f3 100%);
}
.ch-diff-grid{ display:grid; grid-template-columns:1fr; gap:36px; align-items:start; margin-top:0; }
@media(min-width:960px){ .ch-diff-grid{ grid-template-columns:.7fr 1.3fr; } }
.ch-pullquote{ margin-top:24px; border-left:4px solid var(--ch-red); background:linear-gradient(120deg, #ffffff 0%, #f8fafc 100%); padding:20px; border-radius:0 6px 6px 0; box-shadow:0 8px 20px rgba(91,110,127,.088); }
.ch-pullquote p{ font-size:15px; font-weight:700; color:var(--ch-ink); margin:0; line-height:1.5; }
.ch-compare{ background:linear-gradient(160deg, #ffffff 0%, #f8fafc 100%); border:1px solid var(--ch-border); border-radius:10px; overflow:hidden; box-shadow:0 12px 30px rgba(91,110,127,.15); }
.ch-compare-head{ display:grid; grid-template-columns:1.2fr .8fr .8fr; background:#fff; border-bottom:2px solid var(--ch-ink); color:var(--ch-ink); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.ch-compare-head div{ padding:16px; }
.ch-compare-head div:nth-child(2){ border-left:1px solid var(--ch-border); color:var(--ch-muted); }
.ch-compare-head div:nth-child(3){ border-left:1px solid var(--ch-border); color:var(--ch-red); }
.ch-compare-row{ display:grid; grid-template-columns:1.2fr .8fr .8fr; font-size:13px; }
.ch-compare-row:nth-child(odd){ background:#fafbfd; }
.ch-compare-row > div{ padding:14px 16px; }
.ch-compare-row .c1{ font-weight:700; color:var(--ch-ink); }
.ch-compare-row .c2{ border-left:1px solid var(--ch-border); color:var(--ch-muted); }
.ch-compare-row .c3{ border-left:1px solid var(--ch-border); font-weight:800; color:var(--ch-red); display:flex; align-items:center; gap:6px; }
.ch-compare-row .c3 .material-symbols-outlined{ font-size:16px; }

/* ---------- Orquestación ---------- */
.ch-orch{
  background:
    radial-gradient(720px 420px at -5% 0%, rgba(232,26,59,.045), transparent 60%),
    linear-gradient(180deg, #f7f8f9 0%, #f1f2f3 100%);
}

/* ---------- Pasos (compartido: Orquestación y "A medida") ---------- */
.ch-steps-list{ margin-top:36px; max-width:760px; }
.ch-step-row{ display:flex; gap:20px; border:1px solid var(--ch-border); border-left:4px solid var(--ch-red); background:linear-gradient(120deg, #ffffff 0%, #f8fafc 100%); padding:20px; border-radius:0 8px 8px 0; box-shadow:0 8px 20px rgba(91,110,127,.058); }
.ch-step-row + .ch-step-row{ margin-top:14px; }
.ch-step-num{ font-size:26px; font-weight:900; color:var(--ch-red); flex-shrink:0; }
.ch-step-row h4{ font-size:16px; font-weight:800; margin:0; color:var(--ch-ink); }
.ch-step-row p{ font-size:13px; color:var(--ch-muted); margin:4px 0 0; line-height:1.5; }

/* ---------- A medida ---------- */
.ch-custom-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:center; margin-top:44px; }
@media(min-width:960px){ .ch-custom-grid{ grid-template-columns:1fr 1fr; } }
.ch-custom-grid .ch-steps-list{ margin-top:0; }

/* ---------- Banner de principio: único acento a pleno color de
   toda la página — a propósito, es el único momento "gráfico" ---------- */
.ch-principle{ background:linear-gradient(135deg, var(--ch-red) 0%, var(--ch-red-dark) 100%); color:#fff; padding:52px 0; }
.ch-principle-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.ch-principle-tag{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.8); }
.ch-principle h2{ font-size:clamp(24px,3.2vw,34px); font-weight:800; margin:6px 0 0; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .interactive-card, .interactive-card *{ transition:none !important; }
  .ch-loading-row .material-symbols-outlined{ animation:none !important; }
}
[hidden]{ display:none !important; }