@charset "UTF-8";
/* ======================================
   VARIABLES
====================================== */
/* ======================================
   BASE
====================================== */
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:400,500,700,900");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800");
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
/* ============================
   SERVICIOS – estilos propios
   (usa variables globales)
   ============================ */
/* Alias limpios para esta página */
/* Fondos / acentos propios
   Nota: añade en variables.scss:
   $fondo-azul-claro: #b5e7f7;
*/
.servicios {
  /*--radius-xl: 28px;
  --radius-md: 18px;*/ }
  .servicios .wrap {
    width: min(1200px, 90%);
    margin: 0 auto; }
  .servicios .card {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 1.6rem 1.5rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    height: 100%; }

/* ================================
   INTRO SERVICIOS 
================================ */
.servicios-intro {
  /* Titular superior tipo Conócenos */
  /* Las 3 columnas con proporción original */
  /* Base columnas */
  /* Columna izquierda */
  /* Columna central con separador punteado */
  /* Subrayado rosa */
  /* Columna derecha */
  /* Responsive */ }
  .servicios-intro .wrap {
    width: min(1100px, 80%);
    margin: 5rem auto !important; }
  .servicios-intro__heading {
    text-align: center;
    margin-bottom: clamp(3.5rem, 6vw, 5rem); }
    .servicios-intro__heading h2 {
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 400;
      margin: 0;
      color: #111; }
      .servicios-intro__heading h2 strong {
        display: block;
        font-weight: 600;
        margin-top: .35rem;
        font-size: clamp(1.6rem, 3vw, 2.4rem); }
  .servicios-intro .a_gen.servicios-intro__cols {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: clamp(2rem, 4vw, 3.2rem);
    align-items: start; }
  .servicios-intro .article {
    text-align: left;
    color: #222; }
    .servicios-intro .article p {
      line-height: 1.7; }
  .servicios-intro .a1 p {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 1rem;
    color: #c00087;
    margin-bottom: 1.2rem;
    position: relative; }
    .servicios-intro .a1 p::after {
      content: "";
      display: block;
      width: 55px;
      height: 4px;
      background: #a80077;
      margin-top: .8rem; }
  .servicios-intro .a1 h2 {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 500;
    line-height: 1.25;
    margin-top: 2.2rem !important; }
  .servicios-intro .a2 {
    position: relative;
    padding-right: clamp(2.2rem, 4vw, 3.2rem);
    font-size: 1rem; }
    .servicios-intro .a2::after {
      content: "";
      position: absolute;
      top: .4rem;
      right: 0;
      width: 2px;
      height: calc(100% - .8rem);
      background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0 4px, transparent 4px 8px); }
  .servicios-intro strong.fondo_rosa {
    background: #FFE4F2 55%;
    padding: 0 .18rem;
    font-weight: 600;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone; }
  .servicios-intro .a3 p {
    font-size: 1rem;
    color: #888;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    padding: 0.5rem 0 0 !important;
    font-style: normal; }
    .servicios-intro .a3 p i {
      font-style: normal; }
  @media (max-width: 900px) {
    .servicios-intro .a_gen.servicios-intro__cols {
      grid-template-columns: 1fr;
      gap: 2rem; }
    .servicios-intro .a2::after {
      display: none; }
    .servicios-intro .a3 {
      border-left: 3px dashed #ccc;
      padding: 0 0 1rem 2rem;
      margin-left: 1rem; } }

/* ===============================
   CENTROS EDUCATIVOS (Servicios)
================================= */
.educativos-bloque {
  background: linear-gradient(135deg, #bcf4e7 0%, #ffedb2 100%);
  border-radius: 32px;
  /* ancho centrado SIEMPRE, incluso si hay reglas globales raras */
  max-width: 1200px;
  width: calc(100% - 2.5rem);
  margin: clamp(5rem, 8vw, 7rem) auto;
  /* padding interno */
  padding: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  box-sizing: border-box;
  /* Eyebrow centrado con línea */
  /* 👉 4 columnas estables en desktop */
  /* Breakpoints lógicos */ }
  .educativos-bloque .eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #c00087;
    font-size: .9rem;
    margin: 0 auto 1rem;
    text-align: center;
    font-weight: 600;
    display: block; }
    .educativos-bloque .eyebrow::after {
      content: "";
      display: block;
      width: 40px;
      height: 4px;
      background: #c00087;
      margin: .6rem auto 0;
      border-radius: 99px; }
  .educativos-bloque .titular-subrayado {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.25;
    text-align: center;
    color: #111; }
  .educativos-bloque .intro {
    font-size: 1.1rem;
    color: #444;
    max-width: 720px;
    line-height: 1.6;
    margin: 0 auto 2.5rem;
    text-align: center; }
  .educativos-bloque .educativos-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 1.6rem;
    align-items: stretch; }
  .educativos-bloque .edu-card {
    background: #fff;
    padding: 1.2rem 1.2rem 1.5rem;
    border-radius: 22px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); }
    .educativos-bloque .edu-card h3 {
      font-size: 1.15rem;
      margin-bottom: .6rem;
      color: #111;
      text-align: center; }
    .educativos-bloque .edu-card p {
      line-height: 1.6;
      font-size: 1rem;
      color: #444;
      text-align: center; }
  @media (max-width: 1100px) {
    .educativos-bloque .educativos-grid {
      grid-template-columns: repeat(2, minmax(240px, 1fr)); } }
  @media (max-width: 850px) {
    .educativos-bloque {
      /* más aire lateral en móvil */
      width: calc(100% - 2rem);
      border-radius: 26px; }
      .educativos-bloque .educativos-grid {
        grid-template-columns: 1fr; } }

/* Subrayado (igual que Conócenos) */
.titular-subrayado mark {
  background: linear-gradient(transparent 60%, #FFE4F2 60%);
  padding: 0 .2rem; }

/* ============================
   SERVICIOS GENERALES
============================ */
/* Header centrado */
.section-head--center {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 3rem auto; }
  .section-head--center h2, .section-head--center p {
    margin-left: auto;
    margin-right: auto; }

.servicios-lista {
  padding: clamp(2rem, 1.5vw, 2.5rem) 0;
  background: #fff4fb; }
  .servicios-lista__familias {
    display: grid;
    gap: clamp(1.5rem, 3.5vw, 2.5rem); }
  .servicios-lista .familia {
    display: grid;
    gap: 2rem; }
    .servicios-lista .familia__title {
      font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
      font-weight: 700;
      margin: 0;
      text-align: center;
      position: relative;
      padding: clamp(2.5rem, 5vw, 3.2rem) 0 !important;
      display: block; }
    .servicios-lista .familia__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.4rem; }

.servicios-lista:not(.fonfo_blanco) {
  padding-bottom: 10rem; }

.servicios-lista.fonfo_blanco {
  background-color: #fff;
  padding-bottom: 5rem !important;
  margin-bottom: 5rem; }

/* Tarjetas */
.servicio-card {
  position: relative;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
  border-radius: 22px;
  padding: 2rem 1.7rem;
  transition: .2s ease;
  background: #fff;
  text-align: center; }

.servicio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.15); }

/* Tiulos mas claros */
.servicio-card h4 {
  font-size: 1.5rem;
  margin-bottom: .9rem;
  font-weight: 700;
  color: #222; }

.servicio-card img {
  width: 100%; }

/* Texto */
.servicio-card p {
  color: #555;
  line-height: 1.6;
  margin-bottom: 1.2rem; }

/* Lista mejorada */
.servicio-card .mini-lista {
  list-style: none;
  width: 90%;
  padding: 0;
  margin: 0 auto;
  display: grid;
  gap: .4rem; }

.servicio-card .mini-lista li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .98rem;
  color: #444;
  line-height: 1.45;
  text-align: left; }

/* Icono (SVG inline) */
.servicio-card .mini-lista li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: .15rem;
  border-radius: 50%;
  background: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z"/></svg>') no-repeat center/12px, #c00087;
  flex-shrink: 0; }

/* Separadores visuales entre familias */
.familia__title {
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  font-weight: 700;
  margin: 0;
  text-align: center;
  position: relative;
  padding: clamp(2.5rem, 5vw, 3.2rem) 0 !important;
  display: block; }

.familia__title::after {
  content: "";
  width: 60px;
  height: 4px;
  background: #c00087;
  display: block;
  margin: .7rem auto 0; }

.familia__grid {
  margin-top: .5rem; }

/* ============================
   PROCESO
============================ */
.servicios-proceso {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: #eee; }
  .servicios-proceso .proceso-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.6rem; }
  .servicios-proceso .proceso-item {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 1.6rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    position: relative; }
    .servicios-proceso .proceso-item .proceso-num {
      display: inline-block;
      font-weight: 700;
      color: #c00087;
      margin-bottom: .6rem;
      font-size: 1.1rem; }
    .servicios-proceso .proceso-item h3 {
      font-size: 1.1rem;
      margin-bottom: .4rem;
      color: #111; }
    .servicios-proceso .proceso-item p {
      color: #474c53;
      line-height: 1.6;
      font-size: .98rem; }

/* ===== Desktop: tarjetas CON caja aunque el fondo sea blanco ===== */
@media (min-width: 1001px) {
  .servicio-card {
    background: #fff !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08) !important;
    border-radius: 22px !important;
    padding: 2rem 1.7rem !important;
    text-align: center !important; } }
/* RESPONSIVE TARJETAS + BLOQUE VERDE (MOVIL) */
@media (max-width: 1000px) {
  .servicios-intro .wrap {
    width: 90% !important;
    margin: 3rem auto 0 !important; }

  .servicios-lista .familia__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 1.8rem !important;
    column-gap: 0 !important;
    align-items: stretch !important; }

  .servicios-lista .servicio-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    /*row-gap: .8rem !important;*/
    background: #fff !important;
    border: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    padding: 1.4rem !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    transition: none !important;
    text-align: center !important; }

  .servicios-lista .servicio-card > img {
    grid-column: 1 !important;
    grid-row: 1 !important;
    max-width: 120px !important;
    width: 90%;
    height: auto;
    margin: 0 auto !important;
    justify-self: center !important; }

  .servicios-lista .servicio-card > h4,
  .servicios-lista .servicio-card > p,
  .servicios-lista .servicio-card > ul {
    grid-column: 1 !important;
    text-align: center !important;
    margin-left: 0 !important; }

  .servicios-lista .servicio-card .mini-lista {
    width: fit-content !important;
    margin: .2rem auto 0 !important; }

  .servicios-lista .servicio-card .mini-lista li {
    text-align: left !important; }

  .servicios-lista.fonfo_blanco .servicio-card {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: .6rem 0 !important; }

  .servicios-lista.fonfo_blanco .servicio-card + .servicio-card {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 1.2rem !important;
    padding-top: 1.2rem !important; }

  .servicios-lista:not(.fonfo_blanco) {
    padding-bottom: 3.5rem !important; }

  .educativos-bloque {
    /*width: calc(100% - 2rem) !important;*/
    width: 100% !important;
    padding: 3rem 0% !important;
    border-radius: 0 !important;
    margin: 0rem auto !important; }

  .servicios-lista.fonfo_blanco {
    padding-bottom: 0rem !important;
    margin-bottom: 3.5rem; }

  .servicios-intro {
    padding: 0 0 1.5rem 1.5rem !important; }

  .a1 p {
    margin-bottom: 0.2rem !important;
    font-size: 1rem !important; }
  .a1 h2 {
    margin: 0 !important; }

  .a2 {
    padding-right: 0; }
    .a2::after {
      display: none; }
    .a2 p {
      margin: 0rem !important;
      padding: 0 !important;
      font-size: 1rem !important; } }