/* ============================================================
   KAHÜS · Sistema de diseño
   Colores, tipografía, espaciado y los cinco patrones de sección.
   Este archivo lo mantiene Claude. El contenido vive en src/contenido/.
   ============================================================ */

:root {
  /* Superficies */
  --fondo:            #faf9fc;
  --fondo-alt:        #f7f3fc;
  --oscuro:           #3a2e5c;
  --blanco:           #ffffff;

  /* Texto */
  --tinta:            #2c2740;
  --tinta-suave:      #6f6986;
  --tinta-clara:      #8b84a3;

  /* Marca */
  --morado:           #745ba3;
  --morado-hover:     #5f4a89;
  --rosa:             #ee7bad;
  --turquesa:         #1bb8c7;

  /* Pasteles */
  --lila:             #dfd3f4;
  --lila-fuerte:      #c6b0ef;
  --aqua:             #bdeff4;
  --rosa-suave:       #ffdeec;
  --durazno:          #facfbe;
  --linea:            #ece6f5;

  /* Tipografía */
  --titulos: "Space Grotesk", system-ui, sans-serif;
  --cuerpo:  "Inter", system-ui, sans-serif;
  --logo:    "Nunito", system-ui, sans-serif;

  /* Escala · desktop */
  --display: 76px;
  --h2:      46px;
  --h3:      24px;
  --texto-g: 21px;
  --texto:   17px;
  --menor:   14px;

  /* Ritmo vertical */
  --aire-apretado: 72px;
  --aire-normal:   128px;
  --aire-amplio:   200px;

  --ancho:   1120px;
  --lateral: 64px;
  --radio:   10px;
  --radio-tarjeta: 20px;
}

@media (max-width: 860px) {
  :root {
    --display: 38px;
    --h2:      30px;
    --h3:      21px;
    --texto-g: 18px;
    --texto:   16px;

    --aire-apretado: 48px;
    --aire-normal:   80px;
    --aire-amplio:   112px;

    --lateral: 20px;
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--morado); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-family: var(--titulos); font-weight: 700; }

h1 {
  font-size: var(--display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--oscuro);
}

h2 {
  font-size: var(--h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--oscuro);
}

h3 {
  font-size: var(--h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

p { margin: 0; max-width: 65ch; }

strong { font-weight: 600; color: var(--tinta); }

/* Destacado de marca. El color depende del fondo por contraste:
   morado 5.31:1 sobre claro, rosa 4.68:1 sobre oscuro.
   El rosa sobre claro da 2.48:1 y por eso nunca se usa ahí. */
.destaca { color: var(--morado); }
.seccion--oscura .destaca { color: var(--rosa); }

/* ---------- Estructura ---------- */

.seccion {
  position: relative;
  overflow: hidden;
  padding: var(--aire-normal) var(--lateral);
}
.seccion--apretada { padding-top: var(--aire-apretado); padding-bottom: var(--aire-apretado); }
.seccion--amplia   { padding-top: var(--aire-amplio);   padding-bottom: var(--aire-amplio); }

.seccion--alt    { background: var(--fondo-alt); }
.seccion--blanca { background: var(--blanco); }
.seccion--oscura { background: var(--oscuro); }

.seccion--oscura h2,
.seccion--oscura h1,
.seccion--oscura h3 { color: var(--blanco); }
.seccion--oscura p  { color: rgba(255,255,255,0.74); }

/* Barra turquesa: solo en superficies oscuras */
.seccion--oscura::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--turquesa);
}

.contenedor { max-width: var(--ancho); margin: 0 auto; position: relative; z-index: 1; }

/* ---------- Círculos ---------- */

.circulos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.circulos span { position: absolute; border-radius: 50%; display: block; }

.circulos span:nth-child(1) { width: 300px; height: 300px; background: var(--lila);        top: -120px;    left: -90px; }
.circulos span:nth-child(2) { width: 220px; height: 220px; background: var(--aqua);        top: 22%;       right: -110px; }
.circulos span:nth-child(3) { width: 260px; height: 260px; background: var(--rosa-suave);  bottom: -130px; left: 12%; }
.circulos span:nth-child(4) { width: 180px; height: 180px; background: var(--durazno);     bottom: -60px;  right: 8%; }

@media (max-width: 860px) {
  .circulos span:nth-child(2),
  .circulos span:nth-child(3) { display: none; }
  .circulos span:nth-child(1) { width: 170px; height: 170px; top: -70px; left: -60px; }
  .circulos span:nth-child(4) { width: 130px; height: 130px; bottom: -50px; right: -40px; }
}

/* ============================================================
   PATRÓN A · Centrado
   Solo hero y CTA final. Máximo dos por página.
   ============================================================ */

.p-centrado { text-align: center; }
.p-centrado .interior { max-width: 720px; margin: 0 auto; }

/* Todos los párrafos centrados se ven igual y respiran igual.
   El ancho corto evita renglones huérfanos de una sola palabra. */
.p-centrado .interior p {
  max-width: 52ch;
  margin: 24px auto 0;
  font-size: var(--texto-g);
  color: var(--tinta-suave);
  text-wrap: pretty;
}
.p-centrado .interior p + p { margin-top: 18px; }
.seccion--oscura.p-centrado .interior p { color: rgba(255,255,255,0.74); }

.antetitulo {
  font-family: var(--titulos); font-weight: 500;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--morado); margin: 0 auto 20px !important;
}
.seccion--oscura .antetitulo { color: var(--durazno) !important; }
.seccion--oscura.p-centrado .interior .remate { color: #fff; }

/* ============================================================
   PATRÓN B · Asimétrico
   Título angosto a la izquierda, contenido ancho a la derecha.
   ============================================================ */

.p-asimetrico .interior {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 80px;
  align-items: start;
}
.p-asimetrico .titulo { position: sticky; top: 100px; }
.p-asimetrico .titulo p { margin-top: 20px; color: var(--tinta-suave); }

@media (max-width: 860px) {
  .p-asimetrico .interior { grid-template-columns: 1fr; gap: 36px; }
  .p-asimetrico .titulo { position: static; }
}

/* ============================================================
   PATRÓN B2 · Encabezado a la izquierda, rejilla completa abajo
   Para grupos de tres. Evita el reparto 2 + 1 que deja un hueco.
   ============================================================ */

.p-encabezado .encabezado { max-width: 620px; margin-bottom: 64px; }
.p-encabezado .encabezado h2 { max-width: 18ch; text-wrap: balance; }

/* La lista no necesita medida corta en el título: va a todo lo ancho. */
.p-lista .encabezado { max-width: none; margin-bottom: 40px; }
.p-lista .encabezado h2 { max-width: none; }
.p-lista .lista-enum { max-width: 760px; margin-top: 0; }
.p-lista .cuerpo, .p-lista .remate { max-width: 760px; }
.p-encabezado .encabezado p { margin-top: 20px; color: var(--tinta-suave); font-size: var(--texto-g); }
.seccion--oscura .encabezado p { color: rgba(255,255,255,0.7); }

/* Columnas exactas por número de elementos: nunca se parte 2 + 1 */
.rejilla { display: grid; gap: 28px; }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) { .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .rejilla { grid-template-columns: 1fr !important; gap: 20px; } }

/* ============================================================
   PATRÓN C · Enumeración
   Alineado a la izquierda, ancho, mucho espacio entre ítems.
   ============================================================ */

.p-enumeracion .interior { max-width: 1000px; }
.p-enumeracion h2 { max-width: 18ch; }

/* Rejilla de dos columnas: cuatro ítems ocupan la mitad de alto
   que apilados, y se lee como composición en vez de como lista larga. */
.lista-enum {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  border-top: 1px solid var(--linea);
}
.lista-enum li {
  font-size: var(--texto-g);
  line-height: 1.4;
  color: var(--tinta);
  padding: 18px 0;
  border-bottom: 1px solid var(--linea);
  max-width: none;
}
.lista-enum--una { grid-template-columns: 1fr; }

@media (max-width: 700px) {
  .lista-enum { grid-template-columns: 1fr; gap: 0; }
  .lista-enum li { padding: 15px 0; }
}

/* Sin anclar a un patrón: el remate se ve igual en cualquier sección. */
.cuerpo { margin-top: 36px; font-size: var(--texto); color: var(--tinta-suave); max-width: 62ch; }

.remate {
  margin-top: 44px;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--oscuro);
  max-width: 26ch;
  text-wrap: balance;
}
.seccion--oscura .remate { color: var(--blanco); }
.remate--centrado { margin-left: auto; margin-right: auto; }
.remate--lineas { max-width: 48ch; }
.remate--lineas .linea { display: block; }
.remate--lineas .linea + .linea { margin-top: 0.34em; }

@media (max-width: 860px) { .remate { font-size: 23px; max-width: none; } }

/* ============================================================
   PATRÓN D · Split
   Texto de un lado, visual del otro. Alterna con .invertido.
   ============================================================ */

.p-split .interior {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
  align-items: center;
}
.p-split .visual img { border-radius: var(--radio-tarjeta); width: 100%; }
.p-split.invertido .texto  { order: 2; }
.p-split.invertido .visual { order: 1; }
.p-split .texto p { margin-top: 24px; font-size: var(--texto-g); }

@media (max-width: 860px) {
  .p-split .interior { grid-template-columns: 1fr; gap: 32px; }
  .p-split.invertido .texto, .p-split.invertido .visual { order: initial; }
}

/* ============================================================
   PATRÓN E · Declaración a sangre
   Una frase sola, enorme. Sin párrafo, sin botón.
   ============================================================ */

.p-declaracion { text-align: left; }
.p-declaracion .interior { max-width: none; }
.p-declaracion .frase {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: var(--display);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--oscuro);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}

/* Con varias frases el tamaño baja y el espacio entre ellas sube.
   A tamaño de display, tres frases seguidas se leen como un muro;
   lo que las vuelve escaneables es el aire entre una y otra. */
.p-declaracion .frase--lineas {
  max-width: none;
  font-size: 58px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
/* Sin límite de ancho: los cortes ya los decide el contenido,
   así que cada frase usa todo el ancho antes de pasar de renglón. */
.p-declaracion .frase--lineas .linea { display: block; max-width: none; text-wrap: balance; }
.p-declaracion .frase--lineas .linea + .linea { margin-top: 0.34em; }

@media (max-width: 860px) {
  .p-declaracion .frase--lineas { font-size: 30px; }
}
/* Sin espacio: las clases viven en el MISMO elemento <section>.
   Con espacio esto no aplicaba y la frase quedaba morada sobre morado. */
.seccion--oscura .frase { color: var(--blanco); }

/* ---------- Tarjetas ---------- */

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 56px; }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
}
.tarjeta .relleno { padding: 24px 26px 28px; }
.tarjeta h3 { margin-bottom: 10px; }
.tarjeta p { color: var(--tinta-suave); font-size: var(--texto); }
.tarjeta img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--fondo-alt);
  border-radius: 99px;
  padding: 5px 13px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--oscuro);
}
.etiqueta i { width: 7px; height: 7px; border-radius: 50%; display: block; }

/* ---------- Pasos ---------- */

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px; }
.paso .num {
  font-family: var(--titulos); font-weight: 700; font-size: 34px;
  color: var(--rosa); line-height: 1; margin-bottom: 14px;
}
.paso h3 { margin-bottom: 8px; }
.paso p { color: var(--tinta-suave); font-size: var(--texto); }
.seccion--oscura .paso p { color: rgba(255,255,255,0.7); }

/* ---------- Fichas (preguntas) ---------- */

.fichas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
.fichas span {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 14px 22px;
  font-family: var(--titulos);
  font-weight: 500;
  font-size: var(--texto);
  color: var(--oscuro);
}

/* ---------- Botones ---------- */

.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.p-centrado .botones { justify-content: center; }

.boton {
  display: inline-block;
  font-family: var(--titulos);
  font-weight: 500;
  font-size: var(--texto);
  padding: 14px 28px;
  border-radius: var(--radio);
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.boton:hover { text-decoration: none; }

.boton--primario { background: var(--morado); color: var(--blanco); }
.boton--primario:hover { background: var(--morado-hover); }

.boton--secundario { background: transparent; color: var(--morado); border-color: var(--lila); }
.boton--secundario:hover { border-color: var(--morado); }

.boton--claro { background: var(--blanco); color: var(--oscuro); }
.boton--claro:hover { background: var(--lila); }

.boton--linea { background: transparent; color: var(--blanco); border-color: rgba(255,255,255,0.45); }
.boton--linea:hover { border-color: var(--blanco); }

@media (max-width: 520px) {
  .botones { flex-direction: column; }
  .boton { text-align: center; }
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,249,252,0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
  padding: 14px var(--lateral);
}
.cabecera .interior { max-width: var(--ancho); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.marca { display: flex; align-items: center; gap: 10px; font-family: var(--logo); font-weight: 800; font-size: 19px; color: var(--oscuro); letter-spacing: 0.01em; }
.marca:hover { text-decoration: none; }
/* El isotipo hereda el color del enlace, así que basta cambiar "color". */
.marca .iso { display: block; height: 24px; width: auto; flex-shrink: 0; color: var(--morado); }
.marca--claro { color: var(--blanco); }
.marca--claro .iso { color: var(--blanco); }
.pie--rosa .marca .iso { color: #241b38; }

.nav { display: flex; align-items: center; gap: 8px; }
.nav a {
  font-family: var(--titulos); font-weight: 500; font-size: 15px;
  color: var(--tinta-suave); padding: 8px 14px; border-radius: 8px;
}
.nav a:hover { color: var(--morado); background: var(--fondo-alt); text-decoration: none; }
.nav a.activo { color: var(--morado); background: var(--fondo-alt); }

.idioma {
  font-family: var(--titulos); font-weight: 500; font-size: 14px;
  color: var(--tinta-suave); border: 1px solid var(--linea);
  padding: 7px 12px; border-radius: 8px;
}
.idioma:hover { color: var(--morado); border-color: var(--lila); text-decoration: none; }

@media (max-width: 700px) {
  .nav a { padding: 8px 10px; font-size: 14px; }
  .cabecera .interior { gap: 10px; }
}

/* ---------- Hero ---------- */

.hero .eslogan {
  margin-top: 44px;
  font-family: var(--logo); font-weight: 800;
  font-size: 24px; line-height: 1.25; color: var(--rosa);
  max-width: none;
}
.hero .foto { margin-top: 64px; border-radius: var(--radio-tarjeta); overflow: hidden; }
.hero .foto img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.hero h1 .suave { color: var(--morado); display: block; }
.hero h1.h1--lineas { font-size: 58px; line-height: 1.08; }
.hero h1.h1--lineas .linea { display: block; }
.hero h1.h1--lineas .linea + .linea { margin-top: 0.22em; }
@media (max-width: 860px) { .hero h1.h1--lineas { font-size: 31px; } }

/* ---------- Perfil ---------- */

.perfil-texto p { font-size: var(--texto-g); line-height: 1.6; color: var(--tinta-suave); max-width: 58ch; }
.perfil-texto p + p { margin-top: 22px; }
.perfil-texto .remate { color: var(--oscuro); max-width: 30ch; }
.perfil-cierre {
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--linea);
  font-size: var(--texto) !important;
}
.p-asimetrico .titulo p { font-size: var(--texto); }

@media (max-width: 860px) { .hero .eslogan { font-size: 21px; } .hero .foto { margin-top: 40px; } }

/* ---------- Pie ---------- */

/* El color del pie se elige en el archivo de contenido: rosa o morado. */
.pie { background: var(--oscuro); color: rgba(255,255,255,0.72); padding: 72px var(--lateral) 36px; }

.pie--rosa { background: var(--rosa); color: rgba(36,27,56,0.82); }
.pie--rosa h4 { color: #241b38; }
.pie--rosa p { color: rgba(36,27,56,0.72); }
.pie--rosa a { color: rgba(36,27,56,0.82); }
.pie--rosa a:hover { color: #ffffff; }
.pie--rosa .abajo { border-top-color: rgba(36,27,56,0.24); }
.pie--rosa .marca { color: #241b38; }
.pie--rosa .marca svg .u { fill: #241b38; }
.pie--rosa .marca svg .u-trazo { stroke: #241b38; }
.pie .interior { max-width: var(--ancho); margin: 0 auto; }
.pie .arriba { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.pie .marca { color: var(--blanco); margin-bottom: 12px; }
.pie p { font-size: var(--menor); color: rgba(255,255,255,0.62); }
.pie h4 { font-family: var(--titulos); font-weight: 500; font-size: 14px; color: var(--blanco); margin: 0 0 12px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pie a { color: rgba(255,255,255,0.72); font-size: var(--menor); }
.pie a:hover { color: var(--rosa); text-decoration: none; }
.pie .abajo {
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
}
.pie .columnas { display: flex; gap: 64px; flex-wrap: wrap; }

/* ============================================================
   TELÉFONO
   Proporción real de iPhone. Se usa en las conversaciones con
   KÜI y en el centro de control.
   ============================================================ */

.telefono { width: 300px; flex-shrink: 0; margin: 0 auto; }
.telefono .marco {
  width: 300px; height: 620px;
  border-radius: 46px; padding: 10px;
  background: #241b38;
  position: relative;
}
.telefono .pantalla {
  width: 100%; height: 100%;
  border-radius: 37px; overflow: hidden;
  background: #fff;
  display: flex; flex-direction: column;
  position: relative;
}
.telefono .isla {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 25px; background: #000; border-radius: 99px; z-index: 5;
}
.telefono .barra-inicio {
  position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 106px; height: 5px; background: rgba(0,0,0,0.3); border-radius: 99px; z-index: 5;
}

@media (max-width: 380px) {
  .telefono, .telefono .marco { width: 270px; }
  .telefono .marco { height: 560px; }
}

/* ---------- Chat con KÜI ---------- */

.chat-cabecera {
  background: var(--morado);
  padding: 46px 16px 13px;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.chat-cabecera .avatar {
  width: 32px; height: 32px; border-radius: 9px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titulos); font-weight: 700; font-size: 13px; color: var(--morado);
}
.chat-cabecera .quien { line-height: 1.25; }
.chat-cabecera .nombre { font-family: var(--titulos); font-weight: 500; font-size: 14px; color: #fff; }
.chat-cabecera .estado { font-family: var(--cuerpo); font-size: 11px; color: rgba(255,255,255,0.85); }

.chat-cuerpo {
  flex: 1; overflow-y: auto;
  padding: 14px 12px 18px;
  background: var(--fondo-alt);
  display: flex; flex-direction: column; gap: 9px;
}
.burbuja {
  max-width: 80%;
  padding: 9px 13px;
  font-size: 13px; line-height: 1.45;
  color: var(--tinta);
}
.burbuja--kui  { align-self: flex-start; background: #fff;              border-radius: 4px 15px 15px 15px; }
.burbuja--kahu { align-self: flex-end;   background: var(--rosa-suave); border-radius: 15px 4px 15px 15px; }

/* ---------- Conversaciones: pestañas sin JavaScript ---------- */

.conv input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.conv-tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }
.conv-tabs label {
  font-family: var(--titulos); font-weight: 500; font-size: var(--texto);
  padding: 11px 24px; border-radius: var(--radio);
  border: 1.5px solid var(--lila); color: var(--morado); background: transparent;
  cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.conv-tabs label:hover { border-color: var(--morado); }

.conv-panel { display: none; }
.conv-panel .interior {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 64px; align-items: center; justify-content: center;
}

/* La pestaña activa manda sobre su panel y sobre su propia etiqueta */
.conv > input:nth-of-type(1):checked ~ .conv-paneles > .conv-panel:nth-child(1),
.conv > input:nth-of-type(2):checked ~ .conv-paneles > .conv-panel:nth-child(2),
.conv > input:nth-of-type(3):checked ~ .conv-paneles > .conv-panel:nth-child(3) { display: block; }

.conv > input:nth-of-type(1):checked ~ .conv-tabs > label:nth-child(1),
.conv > input:nth-of-type(2):checked ~ .conv-tabs > label:nth-child(2),
.conv > input:nth-of-type(3):checked ~ .conv-tabs > label:nth-child(3) {
  background: var(--morado); color: #fff; border-color: var(--morado);
}

.conv > input:focus-visible ~ .conv-tabs > label { outline: none; }
.conv-tabs label:focus-within { outline: 2px solid var(--morado); outline-offset: 3px; }

.conv-detalle h3 { margin-bottom: 28px; max-width: 20ch; }
.conv-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.conv-pasos li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--texto); line-height: 1.5; color: var(--tinta); max-width: 42ch; }
.conv-pasos .n {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--lila); color: var(--morado);
  font-family: var(--titulos); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 860px) {
  .conv-panel .interior { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
  .conv-detalle { max-width: 420px; }
  .conv-tabs { margin-bottom: 32px; }
  .conv-tabs label { padding: 10px 18px; font-size: 15px; }
}

/* ---------- Centro de control ---------- */

.centro-cabecera { background: var(--morado); padding: 46px 16px 18px; flex-shrink: 0; }
.centro-cabecera .perfil { display: flex; align-items: center; gap: 12px; }
.centro-cabecera .foto {
  width: 44px; height: 44px; border-radius: 13px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titulos); font-weight: 700; font-size: 17px; color: var(--morado);
}
.centro-cabecera .nombre { font-family: var(--titulos); font-weight: 700; font-size: 16px; color: #fff; }
.centro-cabecera .raza { font-size: 12px; color: rgba(255,255,255,0.85); }
.centro-cabecera .medidor { margin-top: 16px; }
.centro-cabecera .medidor .fila { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 11px; color: rgba(255,255,255,0.9); }
.centro-cabecera .medidor .pista { background: rgba(255,255,255,0.26); height: 6px; border-radius: 99px; }
.centro-cabecera .medidor .valor { height: 6px; border-radius: 99px; background: #fff; }

.centro-cuerpo { flex: 1; overflow-y: auto; padding: 16px 14px 26px; background: #fff; }
.centro-cuerpo .titulillo {
  font-family: var(--titulos); font-weight: 500; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave);
  margin: 0 0 10px;
}
.centro-cuerpo .titulillo + .titulillo, .centro-lista + .titulillo { margin-top: 18px; }
.centro-lista { display: flex; flex-direction: column; gap: 8px; }
.centro-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--fondo-alt); border-radius: 11px; padding: 10px 12px;
}
.centro-item .que { font-family: var(--titulos); font-weight: 500; font-size: 13px; color: var(--tinta); }
.centro-item .quien { font-size: 11px; color: var(--tinta-suave); }
.centro-item .marca-estado { font-family: var(--titulos); font-weight: 500; font-size: 10px; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.centro-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.centro-chips span { font-family: var(--titulos); font-weight: 500; font-size: 11px; padding: 6px 12px; border-radius: 99px; border: 1.5px solid; }

/* ---------- Accesibilidad ---------- */

a:focus-visible, .boton:focus-visible {
  outline: 2px solid var(--morado);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}