/* ==========================================================================
   interna.css — patrones reutilizables para las páginas internas
   (¿Qué hacemos?, ¿Quiénes somos?, ¿Cómo trabajamos?, Puesta en marcha,
    páginas de cliente y legales). Extiende el sistema del Home.
   ========================================================================== */

/* ---------------------------------------------------------------- Hero de página */
.phero { position: relative; overflow: clip; padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.phero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .phero--split .phero__grid { grid-template-columns: 1.08fr 0.92fr; }
}
.phero__eyebrow { margin-bottom: var(--sp-4); }
.phero h1 {
  font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-5);
}
.phero__sub { max-width: 48ch; margin-bottom: var(--sp-6); }
.phero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.phero__figure { position: relative; justify-self: center; width: min(420px, 86vw); }

/* Figura byn redonda sobre disco de color (Claudio escritorio, etc.) */
.figure-circle { position: relative; aspect-ratio: 1; }
.figure-circle__disc {
  position: absolute; inset: 5% 0 0 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sky), var(--cyan));
  z-index: 0;
}
.figure-circle__img {
  position: relative; z-index: 1;
  width: 92%; margin-left: 8%;
  border-radius: 50%; overflow: hidden;
  aspect-ratio: 1; box-shadow: var(--shadow-lg);
}
.figure-circle__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(100%) contrast(1.04); }
.figure-circle__accent { position: absolute; z-index: 2; width: 36%; top: -5%; right: -5%; }
.figure-circle__motif { position: absolute; z-index: 2; width: 30%; bottom: -4%; left: -6%; }

/* ---------------------------------------------------------------- Bloque contenido */
.bloque__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 860px) {
  .bloque__grid--split { grid-template-columns: 1fr 1fr; }
  .bloque__grid--media-right .bloque__media { order: 2; }
}
.bloque h2 { margin-bottom: var(--sp-4); }
.bloque__media { position: relative; display: grid; place-items: center; }
.bloque__motif { width: clamp(150px, 30vw, 260px); }

/* ---------------------------------------------------------------- Lista con tick a mano */
.lista-tick { display: flex; flex-direction: column; gap: var(--sp-4); }
.lista-tick li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--fs-lead); color: var(--ink);
}
.lista-tick li .tick { width: 30px; flex: none; margin-top: 0.1em; }

/* ---------------------------------------------------------------- Canales (¿Qué hacemos?) */
.canal-detalle { position: relative; }
.canal-detalle + .canal-detalle { margin-top: var(--sp-6); }
.canal-detalle__head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.canal-detalle__icon { height: 40px; width: auto; }
.canal-detalle h3 { font-size: var(--fs-h2); }
.canal-detalle p { max-width: 64ch; color: var(--ink-soft); font-size: var(--fs-lead); }
.canal-num { font-weight: var(--fw-black); color: var(--cyan); font-size: var(--fs-h2); line-height: 1; }

/* ---------------------------------------------------------------- Equipo (página) */
/* grilla pareja; cada integrante apoyado sobre una franja sólida que tapa el
   recorte recto de la base de la foto, con la placa de datos encima */
.equipo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 600px)  { .equipo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .equipo-grid { grid-template-columns: repeat(5, 1fr); } }

.miembro { display: flex; flex-direction: column; height: 100%; }
.miembro__foto {
  position: relative;
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
  background: var(--bg-soft);
}
/* las fotos ya vienen en gris con su detalle amarillo: no las desaturamos */
.miembro__foto img {
  display: block;
  width: 80%;
  margin: 10%;
}

/* la franja-placa sube sobre la foto y tapa la base recortada;
   flex:1 + centrado => todas las placas quedan de la misma altura */
.miembro__placa {
  position: relative;
  z-index: 2;
  margin-top: -2.4rem;
  flex: 1;
  display: flex; flex-direction: column;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--r-md);
  padding: 15px 0px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.miembro__nombre { font-weight: var(--fw-black); font-size: var(--fs-lead); line-height: 1.1; color: var(--white); }
.miembro__rol { color: var(--sky); font-weight: 400; font-size: var(--fs-small); margin-top: 4px; }
.miembro__titulo { color: var(--ink-on-dark-soft); font-weight: var(--fw-regular); font-size: 0.78rem; margin-top: 2px; }

/* Grupo sin foto (diseño, redacción y audiovisuales) */
.grupo-card { display: flex; gap: var(--sp-4); align-items: center; } /* centrado en altura */
.grupo-card__motif { width: 84px; flex: none; }
.grupo-card__plus { font-size: 2.1em; font-weight: var(--fw-black); color: var(--cyan); line-height: 1; flex: none; }
.grupo-card__name { font-size: var(--fs-h3); font-weight: var(--fw-black); color: var(--ink); }

/* ---------------------------------------------------------------- Proceso en detalle */
.pasos-det { display: flex; flex-direction: column; gap: var(--sp-5); position: relative; }
.paso-det {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4) var(--sp-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  box-shadow: var(--shadow-sm);
}
.paso-det__num { font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem); font-weight: var(--fw-black); line-height: 0.9; color: var(--cyan); }
.paso-det:nth-child(even) .paso-det__num { color: var(--teal); }
.paso-det__body h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.paso-det__body p { color: var(--ink-soft); max-width: 60ch; }
.paso-det--01 { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), var(--shadow-sm); }
.paso-det__link { margin-top: var(--sp-3); }

/* ---------------------------------------------------------------- Prose (legales) */
.prose { max-width: var(--maxw-narrow); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--sp-7); margin-bottom: var(--sp-1); }
.prose h3 { font-size: var(--fs-lead); margin-top: var(--sp-5); }
.prose p { color: var(--ink); line-height: var(--lh-body); }
.prose .vigencia { color: var(--ink-soft); font-style: italic; }
.prose ul { display: flex; flex-direction: column; gap: var(--sp-2); padding-left: var(--sp-5); }
.prose ul li { list-style: disc; color: var(--ink); }

/* ---------------------------------------------------------------- Logos de prueba (mono) */
.logo-row--mono { gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.logo-row--mono img { height: 44px; filter: grayscale(100%) opacity(0.6); transition: filter var(--dur) var(--ease-out); }
.logo-row--mono img:hover { filter: grayscale(0) opacity(1); }
@media (min-width: 720px) { .logo-row--mono img { height: 56px; } }

/* ---------------------------------------------------------------- Helpers de sección */
.problema__inner { position: relative; }
.problema .lead { font-size: var(--fs-lead); color: var(--ink); max-width: 60ch; }
.cta-final { text-align: center; }
.cta-final .btn { margin-top: var(--sp-4); }

/* padding de sección reducido (para juntar bloques contiguos) */
.section--pb-sm { padding-bottom: clamp(1.25rem, 0.5rem + 2vw, 2.5rem); }
.section--pt-sm { padding-top: clamp(1.25rem, 0.5rem + 2vw, 2.5rem); }

/* Sticker secundario: nota tipo papel, legible pero contenida (no protagonista) */
.sticker--nota { max-width: 460px; }
.sticker--nota h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); color: var(--ink); }
.sticker--nota p { color: var(--ink-soft); font-size: var(--fs-body); margin: 0; }