/* ============================================================
   i'Witown — Consultoría en Innovación Educativa
   ============================================================

   Los estilos de esa pestaña, aparte para no engordar más el
   styles.css. Los textos están en js/consultoria.js.

   La sección va en tres tonos: blanco para lo que se lee,
   morado suave para lo que se toca, y morado fuerte para las
   dos frases que rematan.
   ============================================================ */

/* ---- El título y los pasos ---- */

.con-titulo {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.12;
  color: var(--tinta);
  margin: 0 0 .5em;
}
.con-titulo__fuerte { color: var(--morado-600); display: block; }

.con-paso {
  font-size: clamp(1.25rem, 2.4vw, 1.62rem);
  color: var(--morado-700);
  margin: 3.2rem 0 .4rem;
  text-align: center;
}
.con-paso--chico { font-size: 1.15rem; margin-top: 2.4rem; }

.con-bajada {
  max-width: 640px;
  margin: 0 auto 1.6rem;
  /* ahora abre cada cuarto, así que no lleva nada encima */
  text-align: center;
  color: var(--tinta-suave);
  font-size: .98rem;
}

/* ---- Las cinco puertas ----

   Lo primero de la sección: cinco entradas del mismo tamaño, y el
   prospecto escoge por dónde entrar. Antes todo iba uno debajo del
   otro y se le venía encima de una vez.

   La abierta se pinta con el color de la unidad; las otras cuatro
   quedan en blanco, esperando. */

.con-puertas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 24px;
}

/* La misma pastilla de los ocho frentes, pero con más cuerpo:
   estas mandan sobre las de adentro. */
.con-puerta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1.5px solid var(--gris-borde);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--morado-700);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform .18s ease, border-color .18s ease,
              background .18s ease, box-shadow .18s ease;
}
.con-puerta .con-ico { width: 22px; height: 22px; }
.con-puerta:hover {
  transform: translateY(-2px);
  border-color: var(--morado-300);
  box-shadow: var(--sombra-fuerte);
}
.con-puerta:focus-visible {
  outline: 3px solid var(--morado-300);
  outline-offset: 3px;
}

.con-puerta.es-abierta {
  background: var(--morado-700);
  border-color: var(--morado-700);
  color: #fff;
  transform: none;
}
.con-puerta.es-abierta .con-ico { color: #fff; }

/* El cuarto que se abre entra con el mismo gesto que el resto */
.con-cuarto.es-entra { animation: conEntra .34s ease both; }

/* ---- 1. De qué partimos: la rueda ----

   Las ocho cosas van en una rueda que gira, como la de una
   tragamonedas: la que queda en la ventana del medio es la que se
   explica al lado. El alto del renglón (46px) también está en
   js/consultoria.js, en RUEDA_ALTO: si se cambia uno, se cambia el
   otro. */

.con-identidad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.con-rueda {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: min(100%, 360px);
}

.con-rueda__flecha {
  display: grid;
  place-items: center;
  height: 28px;
  border: 0;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--morado-600);
  cursor: pointer;
  transition: background .18s ease;
}
.con-rueda__flecha:hover { background: var(--morado-050); }
.con-rueda__flecha svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La ventana: tres renglones, y lo demás se esconde arriba y abajo */
.con-rueda__ventana {
  position: relative;
  height: 138px;            /* 3 renglones de 46 */
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  box-shadow: inset 0 10px 14px -12px rgba(0, 0, 0, .28),
              inset 0 -10px 14px -12px rgba(0, 0, 0, .28);
}

.con-rueda__cinta {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .34s cubic-bezier(.22, .68, .35, 1.02);
}

.con-rueda__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  font-size: .92rem;
  color: var(--tinta-suave);
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s ease, color .2s ease;
}
.con-rueda__item .con-ico { width: 20px; height: 20px; }
.con-rueda__item:hover { opacity: .85; }

.con-rueda__item.es-elegido {
  opacity: 1;
  color: var(--morado-700);
  font-weight: 700;
}
.con-rueda__item.es-elegido .con-ico { color: var(--morado-600); }

/* El marco que señala el renglón de la mitad */
.con-rueda__marco {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 46px;
  height: 46px;
  border-radius: var(--radio-chico);
  border: 1.5px solid var(--morado-300);
  background: var(--morado-050);
  pointer-events: none;
  z-index: 0;
}

/* Lo que dice la que quedó en la ventana */
.con-rueda__texto {
  width: 100%;
  max-width: 760px;
  text-align: center;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 22px 24px;
  box-shadow: var(--sombra);
}
.con-rueda__texto h4 {
  margin: 0 0 .5rem;
  font-size: 1.14rem;
  line-height: 1.25;
  color: var(--morado-700);
}
.con-rueda__texto p {
  margin: 0;
  color: var(--tinta-suave);
  line-height: 1.6;
}
.con-rueda__texto.es-entra { animation: conEntra .3s ease both; }

/* El dibujo, el mismo en toda la sección */
.con-ico {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  color: var(--morado-600);
  flex: 0 0 auto;
}

/* ---- Las dos frases que rematan ---- */

.con-frase,
.con-cierre {
  max-width: 820px;
  margin: 2.4rem auto 0;
  padding: 22px 26px;
  border-radius: var(--radio);
  text-align: center;
  font-size: clamp(1rem, 1.9vw, 1.18rem);
  line-height: 1.5;
  color: #fff;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(118, 4, 103, .55), transparent 62%),
    linear-gradient(150deg, var(--morado-800), var(--morado-900) 78%);
  box-shadow: 0 18px 44px rgba(40, 2, 35, .22);
}
.con-frase strong,
.con-cierre strong { color: #F4D9F0; }
.con-cierre { margin-top: 3rem; }

/* ---- 2. Las dos innovaciones ---- */

.con-solapas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.con-solapa {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  text-align: left;
  padding: 16px 18px;
  border: 1.5px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--blanco);
  cursor: pointer;
  font: inherit;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.con-solapa:hover { transform: translateY(-2px); border-color: var(--morado-300); }

.con-solapa .con-ico { grid-row: 1 / 3; width: 30px; height: 30px; }

.con-solapa__nombre {
  font-weight: 700;
  color: var(--morado-700);
  font-size: 1.04rem;
}
.con-solapa__pregunta {
  font-size: .88rem;
  color: var(--tinta-suave);
  line-height: 1.35;
}

.con-solapa.es-activa {
  background: var(--morado-700);
  border-color: var(--morado-700);
}
.con-solapa.es-activa .con-ico,
.con-solapa.es-activa .con-solapa__nombre { color: #fff; }
.con-solapa.es-activa .con-solapa__pregunta { color: rgba(255, 255, 255, .8); }

/* El bloque de cada innovación */

.con-bloque {
  background: var(--morado-050);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 20px;
}
.con-bloque__frase {
  margin: 0 0 16px;
  text-align: center;
  color: var(--tinta-suave);
  font-size: .98rem;
  line-height: 1.5;
}
.con-bloque__cuerpo {
  display: grid;
  grid-template-columns: minmax(200px, 270px) 1fr;
  gap: 16px;
  align-items: start;
}

.con-botones { display: grid; gap: 8px; }

.con-boton {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 11px 13px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--tinta);
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.con-boton span { min-width: 0; overflow-wrap: anywhere; }
.con-boton .con-ico { width: 21px; height: 21px; }
.con-boton:hover { transform: translateX(2px); border-color: var(--morado-300); }
.con-boton.es-activo {
  background: var(--morado-600);
  border-color: var(--morado-600);
  color: #fff;
}
.con-boton.es-activo .con-ico { color: #fff; }

.con-detalle {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 22px 24px;
  min-height: 100%;
}
.con-detalle h4 {
  margin: 0 0 .5rem;
  font-size: 1.14rem;
  color: var(--morado-700);
  line-height: 1.25;
}
.con-detalle p {
  margin: 0;
  color: var(--tinta-suave);
  line-height: 1.6;
}
.con-detalle.es-entra { animation: conEntra .32s ease both; }

@keyframes conEntra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 3. Para qué ---- */

.con-propositos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.con-proposito {
  border: 1px solid var(--gris-borde);
  border-left: 3px solid var(--morado-600);
  border-radius: var(--radio);
  background: var(--blanco);
  padding: 18px 18px 18px 20px;
}
.con-proposito h4 {
  margin: .5rem 0 .35rem;
  font-size: 1rem;
  color: var(--morado-700);
}
.con-proposito p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* ---- 4. Hasta dónde llega ---- */

.con-temas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.con-tema {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.con-tema .con-ico { width: 19px; height: 19px; }
.con-tema:hover { transform: translateY(-2px); border-color: var(--morado-300); }
.con-tema.es-activo {
  background: var(--morado-700);
  border-color: var(--morado-700);
  color: #fff;
}
.con-tema.es-activo .con-ico { color: #fff; }

.con-lista {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 26px 22px 44px;
  background: var(--morado-050);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  color: var(--tinta-suave);
  line-height: 1.6;
}
.con-lista li { margin: .35rem 0; }
.con-lista li::marker { color: var(--morado-600); }
.con-lista.es-entra { animation: conEntra .32s ease both; }

/* ---- 5. El proceso ---- */

.con-proceso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.con-etapa {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 20px 18px 18px;
  box-shadow: var(--sombra);
}
.con-etapa__num {
  position: absolute;
  top: -12px;
  left: 18px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--morado-600);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
}
.con-etapa h4 {
  margin: .6rem 0 .35rem;
  font-size: 1.05rem;
  color: var(--morado-700);
}
.con-etapa p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* La flecha entre etapas, solo cuando van en fila */
@media (min-width: 980px) {
  .con-proceso { position: relative; }
  .con-etapa:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -12px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--morado-300);
    border-right: 2px solid var(--morado-300);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* ---- En el teléfono ---- */

@media (max-width: 680px) {
  .con-puerta { padding: 10px 15px; font-size: .92rem; }
  .con-puerta .con-ico { width: 19px; height: 19px; }
  .con-puertas { gap: 8px; }
}

@media (max-width: 760px) {
  .con-bloque__cuerpo { grid-template-columns: 1fr; }
  .con-detalle { min-height: 0; }
  .con-frase, .con-cierre { padding: 18px 18px; }
  .con-lista { padding-left: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .con-pieza:hover, .con-solapa:hover, .con-boton:hover, .con-tema:hover {
    transform: none;
  }
  .con-detalle.es-entra, .con-lista.es-entra { animation: none; }
}

/* ---- El encabezado con la foto detrás ----

   La foto vive debajo del título, apagada. Al tocar el encabezado
   se invierte: el texto se desvanece y la foto toma su color.
   Sin el archivo (assets/img/consultoria.webp) el encabezado se
   ve como cualquier otro: lo apaga js/consultoria.js. */

.con-cabeza {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  padding: 34px 24px;
}
.con-cabeza.con-foto { cursor: pointer; }

.con-cabeza__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Por defecto manda el texto. La foto queda como un velo
     detrás —ni se distingue qué es— hasta que la tocan. */
  opacity: .05;
  filter: grayscale(1) blur(2.5px);
  transition: opacity .5s ease, filter .5s ease, transform .6s ease;
}
.con-cabeza.sin-foto .con-cabeza__foto { display: none; }
.con-cabeza.sin-foto { padding: 0; }

.con-cabeza__texto {
  position: relative;
  z-index: 1;
  transition: opacity .45s ease, filter .45s ease;
}

/* Al tocar: la foto manda y el texto se va */
.con-cabeza.es-foto .con-cabeza__foto {
  opacity: 1;
  filter: none;
  transform: scale(1.03);
}
.con-cabeza.es-foto .con-cabeza__texto {
  opacity: .12;
  filter: blur(1px);
  pointer-events: none;
}

/* El avisito de la esquina */
.con-cabeza__pista {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(82, 3, 72, .72);
  color: #fff;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  backdrop-filter: blur(3px);
}

@media (max-width: 760px) {
  .con-cabeza { padding: 24px 16px; }
  .con-cabeza__pista { font-size: .72rem; right: 8px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .con-cabeza__foto, .con-cabeza__texto { transition: none; }
  .con-cabeza.es-foto .con-cabeza__foto { transform: none; }
}

/* ---- "Agendar cita", fijo abajo ----

   La sección es larga: el botón se queda a la vista mientras se
   lee. Va dentro de la sección, así que al cambiar de pestaña
   desaparece solo.

   Va abajo a la derecha, corrido lo justo para dejarle su
   esquina al botón verde de WhatsApp. */

.con-flota {
  position: fixed;
  right: 92px;           /* 20 del borde + 58 del botón de WhatsApp + aire */
  bottom: 20px;
  z-index: 190;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--morado-600);
  color: #fff;
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(118, 4, 103, .42);
  animation: conFlotaEntra .45s ease both .35s;
  transition: background .2s ease, box-shadow .2s ease;
}
.con-flota:hover {
  background: var(--morado-700);
  box-shadow: 0 14px 36px rgba(82, 3, 72, .5);
}
.con-flota:focus-visible {
  outline: 3px solid var(--morado-300);
  outline-offset: 3px;
}
.con-flota svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes conFlotaEntra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  /* Ahí WhatsApp mide 52 y se pega a 14 del borde */
  .con-flota {
    right: 78px;
    bottom: 14px;
    padding: 12px 16px;
    font-size: .9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .con-flota { animation: none; }
}

/* ============================================================
   CONSULTORÍA SE VE COMO LO QUE ES: OTRA UNIDAD DE NEGOCIO
   ============================================================

   El resto de la landing va en morado sobre fondo hueso. Esta
   sección va en azul sobre un fondo claro azulado, el mismo azul
   del botón que la abre en el menú. Misma tipografía, mismas
   formas, mismos espacios: se nota que es la misma casa, pero
   otra puerta.

   ┌──────────────────────────────────────────────────────────┐
   │  CÓMO SE CAMBIA EL COLOR DE TODA LA SECCIÓN              │
   │                                                          │
   │  Con los siete tonos de aquí abajo, y nada más. La       │
   │  sección entera está escrita con los nombres del morado  │
   │  (--morado-600, --morado-700…); aquí se les da otro      │
   │  valor y todo lo de adentro cambia de color: títulos,    │
   │  iconos, botones, la franja de las frases y el botón     │
   │  flotante.                                               │
   │                                                          │
   │  El de la marca es el --morado-700 del styles.css; este  │
   │  azul no lo toca: solo vale dentro de esta sección.      │
   └──────────────────────────────────────────────────────────┘
   ============================================================ */

#consultoria {
  --morado-900: #0B2547;
  --morado-800: #113864;
  --morado-700: #17417C;   /* el azul principal de la unidad */
  --morado-600: #1F5AA8;   /* botones y acentos */
  --morado-300: #8FB4E3;
  --morado-100: #DCE8F7;
  --morado-050: #EEF4FC;

  /* El fondo: claro arriba, para que el título respire, y un
     azul apenas más hondo abajo. */
  background:
    radial-gradient(90% 55% at 50% 0%, #FFFFFF, transparent 72%),
    linear-gradient(180deg, #F2F7FD, #E6EFFA);
  border-top: 1px solid rgba(23, 65, 124, .12);
  border-bottom: 1px solid rgba(23, 65, 124, .12);
}

/* Estas cuatro sombras llevaban el morado escrito a mano, así que
   no las alcanzan los tonos de arriba. */
#consultoria .con-frase,
#consultoria .con-cierre { box-shadow: 0 18px 44px rgba(11, 37, 71, .22); }

#consultoria .con-cabeza__pista { background: rgba(17, 65, 124, .72); }

#consultoria .con-flota { box-shadow: 0 10px 30px rgba(31, 90, 168, .42); }
#consultoria .con-flota:hover { box-shadow: 0 14px 36px rgba(11, 37, 71, .5); }