/* Central telefónica: solo lo que no existe en el CSS general del sitio.
   Los tamaños, pesos y paddings de títulos, bajadas, secciones y tarjetas salen de las mismas clases que usa
   Dynamic Fleet (.h2, .lead, .dw-head, .sd-sec3, .fl-rubro, .sd-cierre…): aquí no se define ninguna escala propia.
   Variables del sistema de diseño: --azul, --ink, --body, --line-soft, --card, --alt, --deep, --deep-2, --pie-fondo, --r-lg, --ease. */

/* ---------- Títulos ---------- */
/* peso intermedio dentro de un título .h2-pesos (400 base · 600 intermedio · 700 concepto principal) */
.cc-w6
{
  font-weight: 600;
}
/* los títulos largos usan todo el ancho del encabezado, como los de Fleet (.fl-una) pero sin forzar una sola línea */
.cc-h2-ancho,
.dw-head-ancho .cc-h2-ancho
{
  max-width: none;
}
.cc-l
{
  display: inline;
}
@media (min-width: 64rem)
{
  .cc-l
  {
    display: block;
  }
}
/* énfasis comercial en las bajadas: peso, nunca color */
.lead strong
{
  font-weight: 600;
  color: var(--ink);
}
.deep .lead strong
{
  color: #FFFFFF;
}
.cc-foto-img
{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Implementación y respaldo: bloque editorial, con el párrafo clave destacado ---------- */
.cc-resp-tx
{
  display: grid;
  gap: 1.25rem;
}
.cc-resp-dest
{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid #B9D3F5;
  background: var(--card);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--body);
}
.cc-resp-dest strong
{
  font-weight: 600;
  color: var(--ink);
}
.cc-resp-ico
{
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--azul);
}
.cc-resp-ico .mi
{
  font-size: 1.5rem;
}

/* ---------- Diagramas ---------- */
.dg-central
{
  max-width: 36rem;
  margin-inline: auto;
}
/* sin sombras ni halos: el núcleo se separa con color y borde */
.dg-central .dg-core
{
  box-shadow: none;
  border: calc(var(--dg-u) * 6) solid rgba(56, 182, 242, .35);
}
.cc-int-vis .dg-central
{
  max-width: none;
}

/* ---------- Hero: el esquema va directo sobre la foto ---------- */
.cc-escena
{
  position: relative;
  max-width: 38rem;
  margin-inline: auto;
}
.cc-escena-foto
{
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--alt);
}
.cc-escena-foto .ph
{
  width: 100%;
  height: 100%;
}
/* velo azul suave abajo a la derecha: asegura el contraste del esquema sobre cualquier foto */
.cc-escena-foto::after
{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top left, rgba(2, 33, 76, .62), rgba(2, 33, 76, 0) 62%);
}
.cc-escena-panel
{
  position: absolute;
  z-index: 2;
  right: .75rem;
  bottom: .75rem;
  width: 47%;
}
.cc-escena-panel .dg-central
{
  max-width: none;
}
.dg-foto
{
  --dg-blob: rgba(2, 33, 76, .34);
  --dg-orb: rgba(255, 255, 255, .34);
  --dg-link: rgba(255, 255, 255, .55);
  --dg-pulso: #FFFFFF;
}
.dg-foto .dg-tx
{
  text-shadow: 0 1px 3px rgba(2, 33, 76, .7);
}

/* ---------- Bloque oscuro: tus llamadas en un solo lugar ---------- */
.sec.deep.cc-como
{
  background: radial-gradient(90% 120% at 0% 0%, var(--deep-2), var(--deep) 70%);
}
.cc-como .lead
{
  color: rgba(255, 255, 255, .85);
}
.cc-como .dw-head
{
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.cc-como-grid
{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.cc-foto
{
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: 1.25rem;
  overflow: hidden;
}
.cc-foto .ph
{
  width: 100%;
  height: 100%;
}
.cc-relato
{
  display: grid;
  gap: 1rem;
}
.cc-como-t
{
  margin: clamp(2rem, 4vw, 3rem) 0 1.25rem;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
}

/* tres pasos: icono a la izquierda; título y párrafo en la misma columna (como .sd-paso de Fleet) */
.cc-pasos
{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.cc-paso
{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.cc-paso:hover
{
  border-color: rgba(156, 201, 255, .5);
  background: rgba(255, 255, 255, .1);
}
.cc-paso-ico
{
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #38B6F2;
  color: #04244F;
}
.cc-paso-ico .mi
{
  font-size: 1.5rem;
}
.cc-paso div
{
  min-width: 0;
}
.cc-paso h4
{
  min-height: 3rem;
  display: flex;
  align-items: center;
  margin-bottom: .25rem;
  padding-right: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--on-deep);
}
.cc-paso p
{
  font-size: .9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
}
.cc-paso-n
{
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(156, 201, 255, .7);
}

/* ---------- Funcionalidades: tres grupos con encabezado de color sólido ---------- */
.cc-grupos
{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.cc-grupo
{
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--card);
  border: 1px solid var(--line-soft);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.cc-grupo:hover
{
  border-color: var(--g);
  transform: translateY(-2px);
}
.cc-grupo > .cc-acc
{
  padding-inline: 1.125rem;
}
.cc-grupo-cab
{
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.125rem;
  background: var(--g);
  color: #FFFFFF;
}
.cc-grupo-cab h3
{
  flex: 1;
  font-size: 1.1875rem;
  font-weight: 700;
  color: #FFFFFF;
}
.cc-grupo-ico
{
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--g);
}
.cc-grupo-ico .mi
{
  font-size: 1.375rem;
}
.cc-grupo-n
{
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
}

/* ---------- Acordeón (mismas medidas que las tarjetas de módulos de Fleet) ---------- */
.cc-acc
{
  list-style: none;
  margin: 0;
  padding: 0;
}
.cc-acc-item
{
  border-bottom: 1px solid var(--line-soft);
}
.cc-acc-item:last-child
{
  border-bottom: 0;
}
.cc-acc-h
{
  margin: 0;
}
.cc-acc-btn
{
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 3.25rem;
  padding: .5rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cc-acc-btn:hover .cc-acc-t
{
  color: var(--azul);
}
.cc-acc-btn:focus-visible
{
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: .5rem;
}
.cc-acc-ico
{
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--g, var(--azul)) 12%, var(--card));
  color: var(--g, var(--azul));
}
.cc-acc-ico .mi
{
  font-size: 1.125rem;
}
.cc-acc-t
{
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: color .2s var(--ease);
}
.cc-chev
{
  flex: none;
  color: var(--muted);
  transition: transform .3s var(--ease);
}
.cc-acc-btn[aria-expanded="true"] .cc-chev
{
  transform: rotate(180deg);
}
.cc-panel
{
  padding: 0 0 1rem 3rem;
}
.cc-panel p
{
  font-size: .875rem;
  line-height: 1.5;
  color: var(--body);
}
.cc-panel[hidden]
{
  display: none;
}

/* ---------- Integraciones sobre azul profundo ---------- */
.sec.deep.cc-int
{
  background: radial-gradient(90% 120% at 0% 0%, var(--deep-2), var(--deep) 70%);
}
.cc-int .lead
{
  color: rgba(255, 255, 255, .85);
}
.cc-int-grid
{
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.cc-int-tx
{
  display: grid;
  gap: 1rem;
  align-content: start;
}
.dg-central.dg-osc
{
  --dg-blob: #0A2A5C;
  --dg-orb: rgba(255, 255, 255, .18);
  --dg-link: rgba(156, 201, 255, .45);
  --dg-pulso: #38B6F2;
  --dg-tx: #FFFFFF;
}
.dg-osc .dg-tx
{
  text-shadow: none;
}
.dg-osc .dg-disco
{
  border-color: rgba(255, 255, 255, .16);
}
.dg-osc .dg-core
{
  background: #0F55B0;
  border-color: rgba(255, 255, 255, .22);
}
.dg-foto.dg-osc .dg-tx
{
  text-shadow: 0 1px 3px rgba(2, 33, 76, .7);
}

/* ---------- Tableta y celular ---------- */
@media (max-width: 64rem)
{
  .cc-grupos,
  .cc-pasos,
  .cc-como-grid,
  .cc-int-grid
  {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 40rem) and (max-width: 64rem)
{
  .cc-grupos
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 40rem)
{
  /* en el celular el esquema no se superpone a la foto (taparía el rostro): va debajo, sobre azul profundo */
  .cc-escena-panel
  {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: .75rem;
    padding: .5rem;
    border-radius: 1.25rem;
    background: radial-gradient(90% 120% at 0% 0%, var(--deep-2), var(--deep) 70%);
  }
  .dg-foto
  {
    --dg-blob: #0A2A5C;
  }
  .cc-panel
  {
    padding-left: 0;
  }
  .cc-paso-n
  {
    top: .75rem;
  }
}
/* en celulares angostos no caben cuatro ítems: «Preguntas» sale del submenú */:root[data-motion="off"] .dg-central .dg-mov
{
  display: none;
}
@media (prefers-reduced-motion: reduce)
{
  .dg-central .dg-mov
  {
    display: none;
  }
}

/* Gráfica de integración: composición de escritorio y composición móvil (más alta, etiquetas bajo cada nodo) */
.dg-int-movil
{
  display: none;
}
@media (max-width: 30rem)
{
  .dg-int-escritorio
  {
    display: none;
  }
  .dg-int-movil
  {
    display: block;
  }
}

/* contraste del antetítulo del cierre en modo oscuro: usa el azul de texto del sistema (el azul de botón no llega a 4,5:1 sobre fondo oscuro) */
.sd-cierre .kicker
{
  color: var(--accent-text);
}

/* ======================================================================================================
   Iteración 4 · Central Telefónica con IA como plataforma principal de la V1 (2026-11-01).
   Bloques nuevos: desafío, solución, cómo funciona (5 pasos), autoservicio, usos, integraciones, caso, beneficios, respaldo.
   Usa las variables y radios del sistema del sitio; no introduce una línea visual nueva.
   ====================================================================================================== */
.cc-trio, .cc-caps, .cc-qa, .cc-usos-lista, .cc-benef-lista, .cc-flujo, .cc-resp-caps, .cc-lista, .cc-chips { list-style: none; margin: 0; padding: 0; }

.cc-tarjeta, .cc-qa-item, .cc-uso, .cc-benef-item { background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; padding: 1.25rem 1.375rem; }
.cc-t-ico, .cc-cap-ico { display: grid; place-items: center; flex: none; width: var(--ui-icon-m, 2.75rem); height: var(--ui-icon-m, 2.75rem); border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.cc-t-ico .mi { font-size: 1.375rem; }
.cc-cap-ico { width: 2.25rem; height: 2.25rem; }
.cc-cap-ico .mi { font-size: 1.25rem; }
.cc-tarjeta h3, .cc-uso h3, .cc-benef-item h3, .cc-qa-cab h3, .cc-fl-paso h3, .cc-caps h3, .cc-resp-caps h3 { font-size: 1.0625rem; line-height: 1.3; font-weight: 600; color: var(--ink); }
.cc-tarjeta p, .cc-uso p, .cc-benef-item p, .cc-fl-paso p, .cc-caps p, .cc-resp-caps p { font-size: .9375rem; line-height: 1.55; color: var(--muted); }
.cc-cierre-bloque { margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; max-width: 52rem; font-size: 1.125rem; line-height: 1.5; font-weight: 600; color: var(--ink); }
.cc-nota { display: flex; align-items: flex-start; gap: .5rem; margin: 1.25rem 0 0; max-width: 52rem; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.cc-nota .mi { flex: none; margin-top: .0625rem; font-size: 1.125rem; }

/* El desafío: tres tarjetas (blanco sobre gris pálido) */
.cc-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.cc-tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }

/* La solución: texto + foto, cuatro capacidades en línea y frase de apoyo */
.cc-sol-tx .head { margin-bottom: 1rem; }
.cc-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.cc-caps li { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; padding-top: 1rem; border-top: 2px solid var(--accent); }
.cc-apoyo { margin: 1.75rem 0 0; padding: 1.125rem 1.5rem; border-radius: 16px; background: var(--alt); font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }

/* Cómo funciona: cinco pasos (reutiliza .cc-paso) */
@media (min-width: 1100px) { .cc-pasos.cc-pasos-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .875rem; } }
@media (min-width: 641px) and (max-width: 1099px) { .cc-pasos.cc-pasos-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cc-pasos.cc-pasos-5 { grid-template-columns: minmax(0, 1fr); } }
.cc-pasos-5 .cc-paso h4 { min-height: 0; padding-right: 0; font-size: 1.0625rem; }

/* Funcionalidades: descripción de cada grupo y nota al pie */
.cc-grupo-desc { margin: 0; padding: .75rem 1.125rem 0; font-size: .9375rem; line-height: 1.5; color: var(--muted); }

/* Autoservicio: pregunta del cliente → respuesta (sin tablas anchas) */
.cc-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.cc-qa-item { display: flex; flex-direction: column; gap: .75rem; }
.cc-qa-cab { display: flex; align-items: center; gap: .75rem; }
.cc-q { padding: .75rem 1rem; border-radius: 12px 12px 12px 4px; background: var(--alt); font-size: 1.0625rem; line-height: 1.4; font-weight: 500; color: var(--ink); }
.cc-a { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; line-height: 1.4; font-weight: 600; color: var(--accent-text, var(--accent)); }
.cc-a .mi { flex: none; font-size: 1.125rem; }

/* Una solución a tu medida: cuatro usos con ícono */
.cc-usos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.cc-uso { display: flex; align-items: flex-start; gap: 1rem; }

/* Integraciones (fondo oscuro): categorías de sistemas, qué consulta y qué registra */
.cc-int-sub { margin: 1.25rem 0 .5rem; font-size: .875rem; line-height: 1.3; font-weight: 600; letter-spacing: .02em; color: var(--on-deep-link); }
.cc-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cc-chips li { padding: .375rem .75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); font-size: .875rem; line-height: 1.3; color: var(--on-deep); }
.cc-int-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.cc-lista { display: flex; flex-direction: column; gap: .375rem; }
.cc-lista li { display: flex; align-items: flex-start; gap: .5rem; font-size: .9375rem; line-height: 1.4; }
.cc-lista .mi { flex: none; font-size: 1.125rem; color: var(--on-deep-link); }
.cc-nota-clara { color: rgba(255, 255, 255, .78); }

/* Caso de uso ilustrativo: cuatro pasos */
.cc-flujo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.cc-fl-paso { display: flex; flex-direction: column; gap: .375rem; padding: 1.125rem 1.25rem; border-radius: 16px; background: var(--alt); }
.cc-fl-n { font-size: 1.5rem; line-height: 1; font-weight: 700; color: var(--accent); }

/* Beneficios */
.cc-benef-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.cc-benef-item { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }

/* Respaldo: tres capacidades en columna junto al titular */
.cc-resp-caps { display: flex; flex-direction: column; gap: 1rem; margin: 1.25rem 0; }
.cc-resp-caps li { display: flex; align-items: flex-start; gap: .875rem; }

@media (max-width: 1000px) {
  .cc-caps, .cc-benef-lista, .cc-flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-trio { grid-template-columns: minmax(0, 1fr); }
  .cc-int-dos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cc-qa, .cc-usos-lista { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cc-caps, .cc-benef-lista, .cc-flujo { grid-template-columns: minmax(0, 1fr); }
  .cc-tarjeta, .cc-qa-item, .cc-uso, .cc-benef-item { padding: 1rem 1.125rem; }
}

/* Cómo funciona (5 pasos) en escritorio: el ícono va sobre el texto para aprovechar el ancho de cada columna */
@media (min-width: 1100px) {
  .cc-pasos-5 .cc-paso { display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; }
  .cc-pasos-5 .cc-paso h4 { min-height: 0; }
}