/*
 * Componentes del design system: botón, tarjeta, acordeón, eyebrow, paso numerado.
 *
 * En el bundle de diseño estos componentes venían compilados como React dentro
 * de _ds_bundle.js (la carpeta components/ que menciona el readme no existe),
 * así que se reimplementan aquí en CSS a partir de sus estilos computados.
 */

/* ==========================================================================
   Botón
   ========================================================================== */

.exr-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

/* Tamaños */
.exr-btn--hero {
  height: 56px;
  padding: 0 28px;
}

.exr-btn--large {
  height: 52px;
  /* 26px, medido en el design system (los otros tamaños son 28 y 20) */
  padding: 0 26px;
}

.exr-btn--medium {
  height: 45px;
  padding: 0 20px;
}

/* Variantes */
.exr-btn--primary {
  background: var(--coral);
  color: #fff;
}

.exr-btn--primary:hover {
  background: var(--coral-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
}

.exr-btn--primary:active {
  background: var(--coral-pressed);
  transform: none;
  box-shadow: none;
}

.exr-btn--secondary {
  background: transparent;
  color: var(--coral);
  border: 1px solid var(--coral);
}

.exr-btn--secondary:hover {
  background: var(--coral-bg-light);
  color: var(--coral-hover);
  border-color: var(--coral-hover);
}

.exr-btn--secondary:active {
  color: var(--coral-pressed);
  border-color: var(--coral-pressed);
}

/* Deshabilitado (botón «Enviar» de Contacto mientras falten datos): el design
   system no cambia el color, solo lo atenúa. */
.exr-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.exr-btn:disabled:hover {
  background: var(--coral);
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.exr-card {
  background: var(--surface-white);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* Feature: borde neutro, radio 24, sombra más amplia */
.exr-card--feature {
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-feature);
  box-shadow: var(--shadow-feature);
  padding: 32px 36px;
}

/* Standard: borde coral suave, radio 20, sombra más discreta */
.exr-card--standard {
  border: 1px solid var(--coral-border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
}

/* El diseño levanta la tarjeta 2px al pasar el ratón, solo si es interactiva */
.exr-card--hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.exr-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-card);
  color: var(--navy);
}

/* ==========================================================================
   Eyebrow (etiqueta pequeña sobre el titular)
   ========================================================================== */

.exr-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--coral);
}

/* Frase clave resaltada dentro de un titular (30-40% del titular, nunca más) */
.exr-accent {
  color: var(--coral);
}

/* ==========================================================================
   Badge de sección (píldora con icono sobre el titular)
   ========================================================================== */

.exr-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: var(--coral);
  margin-bottom: 20px;
}

.exr-badge--outline {
  background: var(--bg-page);
  border: 1px solid var(--coral-border-soft);
}

.exr-badge--blush {
  background: var(--bg-blush);
}

.exr-badge--upper {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 16px;
}

/* Filete coral corto bajo un titular */
.exr-rule {
  width: 56px;
  height: 3px;
  background: var(--coral);
  border-radius: 2px;
  margin-bottom: 20px;
}

/* ==========================================================================
   Botón-píldora que abre un modal explicativo
   ========================================================================== */

.exr-pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-blush);
  border: 1px solid var(--coral-border-soft);
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-button);
  color: var(--navy);
  transition: box-shadow 200ms ease, background 200ms ease;
}

.exr-pill-cta:hover {
  background: var(--surface-white);
  box-shadow: var(--shadow-card);
}

/* Sobre secciones con fondo blush, la píldora va en el color de página */
.exr-pill-cta--on-blush {
  background: var(--bg-page);
}

.exr-pill-cta__arrow {
  color: var(--coral);
  font-weight: 700;
  display: inline-flex;
  font-size: var(--fs-body-lg);
  transition: transform 200ms ease;
}

.exr-pill-cta:hover .exr-pill-cta__arrow {
  transform: translateX(6px);
}

/* ==========================================================================
   Carrusel por crossfade: todas las diapositivas en la misma celda
   ========================================================================== */

.exr-carousel {
  display: grid;
}

.exr-carousel__slide {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 420ms ease, transform 420ms ease;
  pointer-events: none;
}

.exr-carousel__slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Sin JS, la primera diapositiva debe verse igualmente */
.exr-carousel:not([data-carousel-ready]) .exr-carousel__slide:first-child {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .exr-carousel__slide {
    transition: none;
  }
}

/* ==========================================================================
   Titulares
   ========================================================================== */

.exr-h1 {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: var(--lh-hero);
  margin-bottom: 24px;
}

/*
 * El prototipo aplica line-height a los titulares de forma irregular: algunos
 * H2 llevan --lh-section y otros se quedan en `normal`. Se reproduce tal cual
 * con un modificador, en vez de uniformarlo, para no alterar las alturas.
 */
.exr-h2 {
  font-size: var(--fs-section-lg);
  font-weight: 700;
  margin-bottom: 16px;
}

.exr-h2--tight {
  line-height: var(--lh-section);
}

.exr-h2--xl {
  font-size: var(--fs-section-xl);
  line-height: var(--lh-section);
  margin-bottom: 20px;
}

.exr-lead {
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
}

/* Mismo caso que los titulares: solo algunos párrafos llevan --lh-body */
.exr-lead--relaxed {
  line-height: var(--lh-body);
}

/* ==========================================================================
   Acordeón (FAQ)
   ========================================================================== */

.exr-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* El componente Accordion del prototipo se limita a 600px, no ocupa
     todo el ancho del contenedor */
  max-width: 600px;
}

.exr-accordion__item {
  background: var(--surface-white);
  border: 1px solid var(--border-neutral);
  /* 16px: radio propio del componente Accordion, no es un token del sistema */
  border-radius: 16px;
  overflow: hidden;
}

.exr-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  /* Sin gap, como el prototipo: separa con space-between y aprovecha todo el
     ancho para el texto (con gap, alguna pregunta salta de línea en móvil). */
  justify-content: space-between;
  padding: 16px 20px;
  background: transparent;
  border: none;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* Sin line-height propio: son sus 20px con interlineado normal los que fijan
   la altura del disparador en 56px, igual que en el prototipo. */
.exr-accordion__icon {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 400;
  color: var(--coral);
}

.exr-accordion__panel {
  padding: 0 20px 18px;
  color: var(--text-secondary);
  font-size: 0.9375rem; /* 15px, propio del componente */
  line-height: var(--lh-body);
}

.exr-accordion__panel[hidden] {
  display: none;
}

/* ==========================================================================
   Paso numerado (círculo coral con número)
   ========================================================================== */

.exr-step-badge {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Formulario (Input del design system)
   ========================================================================== */

/* Lo usan el modal «Solicitar una demo» de Organizaciones y la página de
   Contacto, así que vive aquí y no en el CSS de una página concreta. */

.exr-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Al enviar, el formulario se sustituye por la confirmación. `hidden` por sí
   solo no lo esconde: display:flex lo pisa, y el formulario seguía pintado
   DEBAJO de su propio «¡Mensaje enviado!». Estaba resuelto solo para el de
   Contacto, en su hoja; al reutilizar el componente en el modal de demo salió
   el fallo, que es exactamente por lo que estas reglas van aquí. */
.exr-form[hidden] {
  display: none;
}

.exr-form__row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Los dos campos de la fila comparten línea encogiendo, no envolviendo: con
   una base de 320px (el ancho natural del Input del design system) no caben
   en el modal de demo de Organizaciones y quedaban apilados, mientras que el
   diseño los pone en dos columnas. */
.exr-form__row .exr-field {
  flex: 1 1 min(220px, 100%);
  min-width: 0;
}

/*
 * El Input del design system lleva max-width:320px EN SU ENVOLTORIO
 * (_ds_bundle.js, components/forms/Input.jsx), así que en el prototipo un campo
 * que va solo en su fila no llega al borde de la tarjeta: el correo de Contacto
 * mide 320 dentro de una tarjeta de 566, y el del modal de demo, 320 dentro de
 * una fila de 472. Se veía como si el formulario estuviera a medio maquetar y
 * es lo que el diseño hace.
 *
 * El <textarea> NO es ese componente —el prototipo lo escribe a mano, sin
 * tope— y por eso ocupa todo el ancho. Esa es la excepción, y va marcada.
 */
.exr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
}

.exr-field--full {
  max-width: none;
}

.exr-field label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

.exr-field input,
.exr-field textarea {
  border-radius: var(--radius-input);
  border: 1.5px solid var(--border-neutral);
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--surface-white);
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  width: 100%;
}

/* El Input del design system es content-box con 48px de alto de CONTENIDO y
   relleno solo lateral. Se reproduce su caja tal cual (content-box), y para
   que además ocupe todo el ancho se pone en display:block con width:auto: así
   el navegador le resta el relleno y los filetes del contenedor, en vez de
   desbordarlo como haría un width:100% en content-box. */
.exr-field input {
  box-sizing: content-box;
  display: block;
  width: auto;
  height: 48px;
  padding: 0 16px;
}

.exr-field textarea {
  padding: 14px 16px;
  resize: vertical;
}

.exr-field input::placeholder,
.exr-field textarea::placeholder {
  color: var(--text-muted);
}

.exr-field input:focus,
.exr-field textarea:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px var(--coral-focus-ring);
}

.exr-form__actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-start;
}

/* ==========================================================================
   Pie de un contenedor multimedia
   ==========================================================================
   «Contenido generado con IA», bajo el vídeo o el GIF que le toca. Vive aquí
   y no en el CSS de una página porque lo usan la portada (dos veces) y
   Organizaciones. Discreto —gris apagado, 14px— pero con contraste
   suficiente, y sin fondo ni filete para no competir con el medio. */

.exr-media-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-muted);
}

/* El icono no encoge cuando el texto se parte en dos líneas. */
.exr-media-note svg {
  flex: none;
}

/* ==========================================================================
   Formulario · consentimiento, errores y confirmación
   ========================================================================== */

/* Estaban en contacto.css y los necesitan los DOS formularios (Contacto y el
   modal «Solicitar una demo» de Organizaciones), así que viven aquí. Es la
   misma historia de .exr-pill-cta y .exr-form: un componente compartido en el
   CSS de una página se rompe en silencio en la otra. */

/* --- Consentimiento --- */

.exr-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
}

/* Solo se toca el margen superior, como el prototipo: los otros tres los pone
   el navegador (3px, y 4px a la izquierda) y son los que dan a la fila sus
   23px de alto. Anularlos la dejaba en 20. */
.exr-consent input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--coral);
  cursor: pointer;
  flex: none;
}

.exr-consent__text {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.4;
}

.exr-consent__text a {
  color: var(--coral);
  font-weight: 600;
  text-decoration: underline;
}

/* --- Confirmación --- */

.exr-form-ok {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 0;
}

.exr-form-ok[hidden] {
  display: none;
}

.exr-form-ok__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-blush);
  display: flex;
  align-items: center;
  justify-content: center;
}

.exr-form-ok__title {
  font-weight: 700;
  font-size: var(--fs-card-lg);
  color: var(--navy);
  margin: 0;
}

.exr-form-ok__lead {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  margin: 0;
  max-width: 400px;
}

/* --- Errores ---
   El design system no tiene estado de error (en el prototipo no se envía
   nada), así que se resuelve con la paleta que ya hay: coral «pressed», que es
   el tono oscuro del acento y el único de la familia con contraste suficiente
   para texto pequeño sobre blanco. Nada de rojo nuevo. */

.exr-form__alert {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--radius-input);
  background: var(--coral-bg-light);
  border: 1px solid var(--coral-border-soft);
  color: var(--coral-pressed);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.exr-form__alert a {
  color: inherit;
  font-weight: 600;
}

.exr-field__error {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--coral-pressed);
}

/* Los dos avisos son hijos de un contenedor flex: sin esto, `hidden` no basta
   (display:flex lo pisa) y además dejarían su hueco de `gap`. */
.exr-form__alert[hidden],
.exr-field__error[hidden] {
  display: none;
}

.exr-field input[aria-invalid='true'],
.exr-field textarea[aria-invalid='true'] {
  border-color: var(--coral);
}

/* --- Campo señuelo (honeypot) ---
   Fuera de la pantalla y NO en display:none: hay bots que se saltan lo que
   está oculto de esa forma, que es justo lo contrario de lo que queremos.
   Va envuelto para no ser hijo directo del flex del formulario (CLAUDE.md,
   trampa nº 20). */

.exr-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}