/* ===== conoce-tu-cci ===== */
/* ==========================================================================
   Buscador de CCI — réplica de securex.pe/conoce-tu-cci.
   Diseño claro: copy + selector de banco a la izquierda, ilustración a la
   derecha. "Buscar ahora" abre la consulta de CCI del banco elegido.
   Prefijo: cci-
   ========================================================================== */
.cci{ --cci-line:var(--sx-input-border); --cci-muted:var(--sx-text-muted); background:var(--sx-white); }

/* ── Hero (herramienta) ── */
.cci-hero{ padding:clamp(96px,12vh,128px) 0 clamp(40px,6vw,64px); }
/* Mismo patron que el resto de herramientas (ruc-header-inner, cal-header-inner,
   conv-header-inner): contenedor de 1200px centrado en la pagina y el contenido
   alineado a la izquierda. Antes era una rejilla de 2 columnas porque la segunda
   la ocupaba una ilustracion; al quitarla, la rejilla ya no tiene razon de ser. */
.cci-hero-inner{
  max-width:1200px; margin-inline:auto; padding-inline:clamp(20px,4vw,24px);
}
.cci-hero-copy{ min-width:0; }

.cci-title{
  font-family:var(--sx-font-title); font-weight:800;
  font-size:clamp(2.1rem,4.2vw,3.4rem); line-height:1.05; letter-spacing:-.01em;
  color:var(--sx-text); margin:0 0 14px;
}
.cci-title-accent{ color:var(--sx-blue); }
.cci-sub{
  font-family:var(--sx-font-body); font-size:clamp(15px,1.6vw,18px);
  line-height:1.55; color:#4B5563; margin:0 0 8px; max-width:62ch;
}
.cci-hint{ font-family:var(--sx-font-body); font-size:14px; color:var(--cci-muted); margin:0 0 24px; }

/* Selector de banco */
.cci-form{ max-width:420px; }
.cci-field{ position:relative; }
.cci-field-icon{ position:absolute; left:16px; top:50%; transform:translateY(-50%); display:flex; pointer-events:none; }
.cci-field-caret{ position:absolute; right:16px; top:50%; transform:translateY(-50%); display:flex; pointer-events:none; }
.cci-select{
  width:100%; height:56px; padding:0 44px 0 46px;
  border:1.5px solid var(--cci-line); border-radius:14px; background:var(--sx-white);
  font-family:var(--sx-font-body); font-size:16px; color:var(--sx-text);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  transition:border-color .18s var(--sx-ease), box-shadow .18s var(--sx-ease);
}
/* Foco: sin outline:none. El halo sube a .35 de alfa para que se vea de verdad
   y el anillo de teclado va en :focus-visible, sin pisar el global de base.css. */
.cci-select:focus{ border-color:var(--sx-blue); box-shadow:0 0 0 3px rgba(var(--sx-blue-rgb),.35); }
.cci-select:focus-visible{ outline:2px solid var(--sx-blue); outline-offset:2px; }
.cci-select:invalid, .cci-select option[disabled]{ color:var(--cci-muted); }

.cci-error{ margin:10px 2px 0; font-family:var(--sx-font-body); font-size:13.5px; font-weight:600; color:#960821; }
.cci-btn{ margin-top:18px; }
.cci-note{ margin:14px 2px 0; font-family:var(--sx-font-body); font-size:13px; line-height:1.5; color:var(--cci-muted); max-width:40ch; }

/* Ilustración */

/* ── Bloque informativo (SEO) ── */
.cci-info{ padding:clamp(32px,6vw,72px) 0 clamp(56px,9vw,96px); background:var(--sx-fondo-celeste); }
.cci-info-inner{ max-width:1200px; margin-inline:auto; padding-inline:clamp(20px,4vw,24px); }
.cci-info-card{
  background:var(--sx-white); border:1px solid #E8EDF5; border-radius:20px;
  padding:clamp(22px,3vw,32px); box-shadow:0 4px 24px rgba(15,23,41,.06); margin-bottom:24px;
}
.cci-info-title{ font-family:var(--sx-font-title); font-weight:700; font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--sx-text); margin:0 0 10px; }
.cci-info-text{ font-family:var(--sx-font-body); font-size:15.5px; line-height:1.6; color:#4B5563; margin:0; }

.cci-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cci-info-item{ background:var(--sx-white); border:1px solid #E8EDF5; border-radius:18px; padding:22px; box-shadow:0 4px 24px rgba(15,23,41,.05); }
.cci-info-ic{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:var(--sx-fondo-card-azul); margin-bottom:12px; }
.cci-info-h{ font-family:var(--sx-font-body); font-weight:700; font-size:16px; color:var(--sx-text); margin:0 0 6px; }
.cci-info-p{ font-family:var(--sx-font-body); font-size:14px; line-height:1.5; color:var(--cci-muted); margin:0; }

/* ── Responsive ── */
@media (max-width:900px){
  .cci-info-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .cci-hero{ padding-top:96px; }
  .cci-form, .cci-sub, .cci-note{ max-width:none; }
}