/* =========================================================
   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. El diseño original de Casi Humanos no lleva foto: es
   un card blanco con cuadrado de ícono, badge, texto y
   acciones siempre visibles. Este bloque reconstruye ESE look
   encima de las mismas clases (.interactive-card,
   .interactive-card__*), sin tocar ni repetir el bloque 1.
   No se usa .interactive-card__image (no hay <img> en el
   markup). El resto (buscador, filtros, badge, modales, chat)
   no tiene ninguna regla en Prueba-v20.css, así que estas
   clases ch- son las únicas que le dan forma.
   ========================================================= */

.interactive-card{
  height:auto;
  display:flex;
  flex-direction:column;
  background:#fff;
  color:#242424;
  border:1px solid #e5e5e5;
  border-top:4px solid var(--ch-red, #D71920);
  border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:box-shadow .3s ease;
}
.interactive-card:hover{
  box-shadow:0 20px 45px -14px rgba(0,0,0,.28);
}
.interactive-card::before{
  display:none; /* el scrim oscuro de hover del bloque 1 era para texto sobre foto: ya no aplica */
}

.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-black, #202124); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease;
}
.interactive-card:hover .ch-icon-sq{ background:var(--ch-red, #D71920); }

.interactive-card__title{
  position:static; /* anula el "bottom" absoluto del bloque 1, en hover y fuera de hover */
  margin:22px 0 10px;
  font-size:19px;
  font-weight:800;
  text-transform:none;
  letter-spacing:-.01em;
  color:var(--ch-black, #202124);
  transition:color .3s ease;
}
.interactive-card:hover .interactive-card__title{ color:var(--ch-red, #D71920); }

.interactive-card__text{
  position:static;
  opacity:1;
  max-width:none;
  flex:1;
  margin:0;
  font-size:13.5px;
  line-height:1.6;
  color:#525252;
  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, #D71920); }
.ch-play-btn{
  flex-shrink:0;
  background:#f5f5f5; border:none; color:#404040; padding:9px; border-radius:6px;
  cursor:pointer; display:flex; transition:.15s;
}
.ch-play-btn:hover{ background:#fee2e2; color:var(--ch-red, #D71920); }

.material-symbols-outlined{
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

:root{
  --ch-red:#D71920; --ch-red-dark:#B51219; --ch-black:#202124;
  --ch-muted:#6b7280; --ch-border:#e5e5e5; --ch-bg-soft:#fafafa;
}
body{ margin:0; font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#fff; color:#242424; }
.ch-wrap{ max-width:1240px; margin:0 auto; padding:32px 20px 8px; }
.ch-eyebrow{ color:var(--ch-red); font-weight:800; text-transform:uppercase; letter-spacing:.2em; font-size:11px; }
.ch-title{ font-size:clamp(24px,3.4vw,36px); font-weight:800; letter-spacing:-.01em; color:var(--ch-black); margin:8px 0 20px; }

.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:#f2f2f2; color:#404040; cursor:pointer; transition:.15s; font-family:inherit; }
.ch-filter-btn:hover{ background:#e5e5e5; }
.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, #D71920); }

.ch-empty{ text-align:center; padding:70px 20px; background:var(--ch-bg-soft); border:1px dashed #d4d4d4; margin:0 20px 40px; }
.ch-empty h3{ font-weight:800; color:#404040; 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; }

.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(0,0,0,.4); }
.ch-modal-spec{ max-width:760px; max-height:90vh; overflow-y:auto; }
.ch-modal-header{ background:var(--ch-black); 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:#ffb3b6; 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-black); 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:#404040; }
.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:#404040; }
.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-black); margin-top:14px; } .ch-info-box.ch-delivers .ch-label{ color:var(--ch-black); }
.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-btn{ font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:13px 22px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-family:inherit; }
.ch-btn-primary{ background:var(--ch-red); color:#fff; } .ch-btn-primary:hover{ background:var(--ch-red-dark); }
.ch-btn-outline{ background:#fff; border:1px solid #d4d4d4; color:#262626; } .ch-btn-outline:hover{ background:#fafafa; }

.ch-modal-play{ max-width:880px; height:85vh; display:flex; flex-direction:column; overflow:hidden; }
.ch-play-header{ background:var(--ch-black); 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:#ffb3b6; }
.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:#fafafa; 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:#525252; 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-black); 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:#737373; 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; }

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