/* Séveron IA · páginas de cada sector (/sectores/...). Va después de paginas.css, que pone la cabecera, el pie y la letra. */

.sc-cabecera { background: var(--panel); border-bottom: 1px solid var(--linea); padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.sc-cabecera .envoltura { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) { .sc-cabecera .envoltura { grid-template-columns: 1.05fr 1fr; } }
.sc-cabecera h1 { margin-top: 0.8rem; font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem); max-width: 16ch; }
.sc-entrada { margin-top: 1.1rem; max-width: 36rem; color: var(--gris); font-size: 1.15rem; }
.sc-entrada b { color: var(--tinta); font-weight: 600; }
.sc-para { margin-top: 1rem; font-size: 0.95rem; color: var(--gris); }
.sc-para::before { content: ''; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.5rem; border-radius: 50%; background: var(--cian); vertical-align: 0.05rem; }
.sc-acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }

/* Foto del sector con la conversación de ejemplo encima */
.sc-escena { position: relative; padding-bottom: 3rem; }
.sc-escena > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
.sc-chat { position: absolute; left: clamp(-1rem, -2vw, 0rem); bottom: 0; width: min(23rem, 92%); padding: 0.9rem; border-radius: 20px; color: #E9EEF2;
  background: var(--tinta); box-shadow: 0 30px 60px rgba(3, 17, 33, 0.28); font-size: 0.92rem; line-height: 1.45; }
.sc-chat-cab { display: flex; justify-content: space-between; gap: 1rem; padding: 0 0.2rem 0.7rem; font-size: 0.8rem; color: var(--gris-claro); }
.sc-chat-cab b { color: var(--blanco); font-weight: 600; }
.sc-chat ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.sc-chat li { max-width: 86%; padding: 0.55rem 0.75rem; border-radius: 14px; background: #12263A; }
.sc-chat li.yo { justify-self: end; background: #0B5E5B; color: #F2FFFE; }
.sc-chat dl { margin: 0; display: grid; gap: 0.55rem; }
.sc-chat dl div { display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 12px; background: #12263A; }
.sc-chat dt { color: var(--gris-claro); font-size: 0.82rem; }
.sc-chat dd { margin: 0; }
.sc-chat dd.ok { color: var(--cian); }
@media (min-width: 60rem) { .sc-escena > img { aspect-ratio: 4 / 5; } }
@media (max-width: 36rem) { .sc-escena { padding-bottom: 0; } .sc-chat { position: relative; left: auto; width: auto; margin: -3rem 0.6rem 0; } }

/* Bloques de la página */
.sc-bloque { padding: clamp(3rem, 7vw, 5rem) 0; }
.sc-bloque + .sc-bloque { padding-top: 0; }
.sc-bloque h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); max-width: 24ch; }
.sc-bloque > .envoltura > p.sc-sub { margin-top: 0.8rem; max-width: 40rem; color: var(--gris); }

.sc-problemas { display: grid; gap: 1rem; margin-top: 1.8rem; counter-reset: problema; }
@media (min-width: 48rem) { .sc-problemas { grid-template-columns: repeat(3, 1fr); } }
.sc-problemas div { padding: 1.3rem 1.3rem 1.4rem; border-radius: 18px; background: var(--panel); border: 1px solid var(--linea); }
.sc-problemas div::before { counter-increment: problema; content: '0' counter(problema); display: block; margin-bottom: 0.9rem; font: 600 0.85rem var(--titulo); color: var(--naranja); }
.sc-problemas b { display: block; font: 600 1.12rem/1.25 var(--titulo); letter-spacing: -0.01em; }
.sc-problemas span { display: block; margin-top: 0.5rem; color: var(--gris); font-size: 0.98rem; }

.sc-agentes { display: grid; gap: 1rem; margin-top: 1.8rem; }
@media (min-width: 48rem) { .sc-agentes { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.sc-agente { padding: 1.4rem 1.4rem 1.5rem; border-radius: 20px; border: 1px solid var(--linea); background: var(--blanco); }
.sc-agente header { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.sc-agente h3 { font-size: 1.5rem; }
.sc-canal { padding: 0.25rem 0.6rem; border-radius: 999px; background: #E6FBFA; color: var(--verde); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.sc-agente ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.sc-agente li { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.5rem; color: #2B3846; }
.sc-agente li::before { content: ''; width: 0.75rem; height: 0.45rem; margin-top: 0.5rem; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg); }

.sc-cuidado { padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 24px; color: #E9EEF2;
  background: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--tinta); }
.sc-cuidado h2 { color: var(--blanco); }
.sc-cuidado-lista { display: grid; gap: 1rem 2rem; margin-top: 1.6rem; }
@media (min-width: 44rem) { .sc-cuidado-lista { grid-template-columns: 1fr 1fr; } }
.sc-cuidado-lista div { padding-left: 1rem; border-left: 2px solid var(--cian); }
.sc-cuidado-lista b { display: block; color: var(--blanco); font: 600 1.05rem var(--titulo); }
.sc-cuidado-lista span { display: block; margin-top: 0.25rem; color: #B9C3CD; font-size: 0.97rem; }

.sc-pasos { margin: 1.8rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; counter-reset: paso; }
@media (min-width: 48rem) { .sc-pasos { grid-template-columns: repeat(4, 1fr); } }
.sc-pasos li { counter-increment: paso; padding-top: 1rem; border-top: 2px solid var(--tinta); }
.sc-pasos li::before { content: '0' counter(paso); display: block; font: 600 0.85rem var(--titulo); color: var(--gris); }
.sc-pasos b { display: block; margin-top: 0.4rem; font: 600 1.1rem var(--titulo); }
.sc-pasos span { display: block; margin-top: 0.35rem; color: var(--gris); font-size: 0.97rem; }

.sc-preguntas { max-width: 46rem; margin-top: 1.2rem; }
.sc-preguntas details { border-bottom: 1px solid var(--linea); }
.sc-preguntas summary { padding: 1rem 0; cursor: pointer; font: 600 1.05rem var(--titulo); color: var(--tinta); }
.sc-preguntas details p { margin: 0 0 1rem; color: #2B3846; }

.sc-otros { display: grid; gap: 0.8rem; margin-top: 1.4rem; }
@media (min-width: 40rem) { .sc-otros { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.sc-otros a { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.2rem 0.9rem; align-items: center; padding: 0.6rem; border-radius: 16px; border: 1px solid var(--linea); text-decoration: none; }
.sc-otros a:hover { border-color: var(--tinta); }
.sc-otros img { grid-row: span 2; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 10px; }
.sc-otros b { font: 600 1.02rem var(--titulo); align-self: end; }
.sc-otros span { color: var(--gris); font-size: 0.88rem; align-self: start; }

/* Sin foto (páginas de servicio): la conversación de ejemplo sobre un fondo tinta con puntos */
.sc-escena.sin-foto { display: grid; place-items: center; min-height: 22rem; padding: 2.5rem 1.2rem; border-radius: 22px;
  background: radial-gradient(60% 70% at 70% 30%, rgba(0, 229, 223, 0.25), transparent 70%), radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--tinta); }
.sc-escena.sin-foto .sc-chat { position: relative; left: auto; bottom: auto; width: min(23rem, 100%); margin: 0; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); }
.sc-agente li a { color: var(--verde); font-weight: 600; }

/* Enlaces a otras páginas, sin foto */
.sc-enlaces { display: grid; gap: 0.8rem; margin-top: 1.4rem; }
@media (min-width: 40rem) { .sc-enlaces { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.sc-enlaces a { display: grid; gap: 0.2rem; padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--linea); text-decoration: none; }
.sc-enlaces a:hover { border-color: var(--tinta); }
.sc-enlaces b { font: 600 1.02rem var(--titulo); }
.sc-enlaces b::after { content: ' →'; color: var(--verde); }
.sc-enlaces span { color: var(--gris); font-size: 0.9rem; }

/* Tarjetas de agente con mini escena (clínicas, inmobiliarias y restaurantes), como las de la portada */
.sc-agente.con-vis { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.sc-agente-cuerpo { padding: 1.2rem 1.4rem 1.5rem; }
.sc-agente.con-vis .pn-vis { min-height: 12rem; }
.pn-vis { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; min-height: 13.5rem; padding: 1.3rem 1.2rem;
  color: #E9EEF2; font-size: 0.86rem; line-height: 1.4;
  background: radial-gradient(70% 80% at 85% 10%, var(--brillo), transparent 70%), radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px) 0 0 / 20px 20px, var(--tinta); }
.s-vera { --brillo: rgba(37, 211, 102, 0.28); } .s-lucia { --brillo: rgba(249, 115, 22, 0.3); } .s-marco { --brillo: rgba(221, 42, 123, 0.3); }
.pn-vis p { margin: 0; }
.pv-bur { max-width: 86%; padding: 0.5rem 0.75rem; border-radius: 14px; background: #12263A; }
.pv-bur.ag { align-self: flex-end; background: #0B5E5B; color: #F2FFFE; }
.pv-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.2rem; padding: 0.3rem 0.65rem; border-radius: 999px;
  background: rgba(22, 163, 74, 0.18); color: #86EFAC; font-size: 0.78rem; font-weight: 600; }
.pv-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pv-chip.naranja { background: rgba(249, 115, 22, 0.18); color: #FDBA74; }
.pv-llamada { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; border-radius: 16px; background: #12263A; }
.pv-llamada b { display: block; font-size: 0.9rem; }
.pv-llamada small { margin-left: auto; color: var(--gris-claro); }
.pv-tel { position: relative; display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--naranja); }
.pv-tel::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--naranja); opacity: 0; animation: pv-pulso 2.2s ease-out infinite; }
.pv-tel svg { width: 20px; height: 20px; fill: none; stroke: var(--blanco); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pv-pulso { 0% { opacity: 0.8; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.35); } }
.pv-onda { display: flex; align-items: center; gap: 3px; height: 18px; margin-top: 0.3rem; }
.pv-onda i { width: 3px; height: 100%; border-radius: 3px; background: var(--naranja); transform: scaleY(0.3); animation: pv-onda 1.1s ease-in-out infinite; }
.pv-onda i:nth-child(3n) { animation-delay: -0.3s; } .pv-onda i:nth-child(3n+1) { animation-delay: -0.6s; } .pv-onda i:nth-child(4n) { animation-delay: -0.9s; }
@keyframes pv-onda { 50% { transform: scaleY(1); } }
.pv-com { padding: 0.55rem 0.75rem; border-radius: 14px; background: #12263A; }
.pv-com b { color: var(--blanco); margin-right: 0.25rem; }
.pv-com.resp { margin-left: 1.4rem; background: rgba(221, 42, 123, 0.18); }
@media (prefers-reduced-motion: reduce) { .pv-tel::after, .pv-onda i { animation: none; } }

/* Móvil compacto (sectores y servicios): títulos y espacios más pequeños */
@media (max-width: 47.99rem) {
  .sc-cabecera { padding: 2rem 0 2.4rem; }
  .sc-cabecera h1 { font-size: 1.95rem; }
  .sc-entrada { font-size: 1rem; }
  .sc-para { font-size: 0.85rem; }
  .sc-bloque { padding: 2.6rem 0; }
  .sc-bloque h2 { font-size: 1.5rem; }
  .sc-problemas div, .sc-agente-cuerpo { padding: 1rem 1.1rem; }
  .sc-agente:not(.con-vis) { padding: 1.1rem 1.15rem 1.2rem; }
  .sc-problemas b { font-size: 1rem; }
  .sc-problemas span, .sc-agente li, .sc-pasos span, .sc-cuidado-lista span { font-size: 0.9rem; }
  .sc-agente h3 { font-size: 1.25rem; }
  .sc-cuidado { padding: 1.4rem 1.2rem; }
  .sc-escena.sin-foto { min-height: 0; padding: 1.6rem 1rem; }
}