/* ============================================================
   SECCIÓN: SERVICIOS (flip-cards)
   ============================================================ */

/* ----- CONTENEDOR GENERAL ----- */
.servicios__inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
    position: relative;
    overflow: hidden;
    --bg-offset: -60px;
}

/* ----- CABECERA DE SECCIÓN ----- */
.services-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.services-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* ahora es un h2: neutraliza la negrita por defecto del navegador */
    font-weight: var(--font-weight-regular);
}

.title-prefix {
    font-family: var(--font-family-pangolin);
    font-size: 40px;
    align-self: center;
    color: var(--color-accent);
    line-height: 60px;
}

.title-main {
    font-family: var(--font-family-simonetta);
    font-size: 56px;
    align-self: center;
    color: var(--color-primary);
    line-height: 84px;
    margin-top: -20px;
    white-space: nowrap;
}

/* ----- DESCRIPCIÓN ----- */
.services-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 70px;
    text-align: center;
}

.desc-line {
    font-family: var(--font-family-poppins);
    font-size: 20px;
    color: #101112;
    line-height: 40px;
}

.highlight {
    font-family: var(--font-family-poppins);
    font-weight: var(--font-weight-bold);
}

/* ----- CONTENIDO ----- */
.services-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* ----- GRID DE SERVICIOS ----- */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;   /* 👈 una sola columna */
    grid-template-rows: auto;
    width: 100%;
    height: auto;
    justify-items: center;        /* 👈 centra las cards */
    row-gap: 16px; /* 👈 separación vertical */
  }


/* ----- CONTENEDOR FLIP -----
   Sin fondo ni radio propios: el color y la forma los ponen las dos caras.
   Si el contenedor los tuviera, durante el giro (con las caras de canto)
   asomaría por detrás un recuadro fijo del mismo color. */
.service-card {
    perspective: 1000px;
    /*width: 100%;*/
    width: 282px;
    max-width: 360px;             /* ancho cómodo en móvil */
    height: 100px;                /* mantiene el flip */
}

/* ----- ELEMENTO QUE GIRA ----- */
.service-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}

/* Giro al hover o al recibir foco de teclado */
.service-card:hover .service-card-inner,
.service-card:focus-visible .service-card-inner,
.service-card:focus-within .service-card-inner {
    transform: rotateY(180deg);
}

/* ----- CARAS ----- */
.service-card-front,
.service-card-back {
    position: absolute;
    inset: 0;
    background-color: #bddbf266;
    border-radius: 24px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 0 0 auto;
    -webkit-backface-visibility: hidden; /* Safari antiguo */
    backface-visibility: hidden;
    /* La rotación de 0° no es decorativa: Firefox ignora backface-visibility
       en una cara que no lleva transformación propia, y al girar la tarjeta
       seguía pintando el reverso del frente encima del texto de detrás.
       Con una transformación explícita entra en el contexto 3D del padre. */
    transform: rotateY(0deg);
}

/* Cara trasera. Va después a propósito: su rotación pisa la de 0° de arriba */
.service-card-back {
    transform: rotateY(180deg);
    text-align: center;
}

/* ----- CONTENIDO ----- */
.service-icon {
    width: 48px;
    height: 48px;
}

.service-title {
    font-family: var(--font-family-outfit);
    font-size: 18px;
    text-align: center;
    color: #000304;
    line-height: 36px;
}

.service-card-back p {
    font-family: var(--font-family-outfit);
    font-size: 18px;
    line-height: 26px;
    color: #000304;
}

/* ----- CTA FINAL ----- */
.services-cta {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    align-items: center;
    text-align: center;
    padding: 0 32px 48px 32px;
}

.cta-text {
    font-family: var(--font-family-poppins);
    font-size: 28px;
    color: #101112;
    line-height: 40px;
}


/* Contenedor del fondo (imagen tipo background-cover detrás del contenido) */
.section-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.section-bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: var(--bg-offset, 0px);
    left: 50%;
    transform: translateX(-50%);
    object-fit: cover;
}

@media (min-width: 768px) {

  .br-tablet-servicios {
    display: none;
  }

  /* =====================
    SERVICIOS
  ===================== */

  .desc-line {
    font-size: 24px;
  }

  .services-grid {
    padding: 32px 128px;
  }

  .service-card {
    width: 100%;
    max-width: 800px;
  }
}

@media (min-width: 1030px) {

  .br-tablet-servicios {
    display: block;
  }

  /* =====================
    SERVICIOS
  ===================== */
  /* ----- CABECERA DE SECCIÓN ----- */
  .services-header {
    flex-direction: row;
    padding: 0 120px;
  }

  .title-prefix {
    align-self:flex-start;
  }

  .title-main {
    align-self: flex-start;
  }

  .services-description {
    padding: 0 24px 0 80px;
    text-align: right;
  }

  .desc-line {
    font-size: 20px;
    line-height: 1.6;
  }

  .cta-text {
    font-size: 20px;
    line-height: 1.6;
  }
  
  /* ----- GRID DE SERVICIOS ----- */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 879px;
    height: 392px;
    gap: 24px;
    padding: 0;
  }

  /* ----- CONTENEDOR FLIP ----- */
  .service-card {
      perspective: 1000px;
      width: 100%;  /* Ajusta el ancho para escritorios */
      max-width: 1200px;  /* o el valor máximo que quieras para escritorio */
      height: 180px;  /* Puedes cambiar la altura también */    
  }

  /* ----- CARAS ----- */
  .service-card-front,
  .service-card-back {
      flex-direction: column;
  }

  .service-title {
    font-size: 32px;
    text-align: center;
  }
}