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

.services-hero{

    background:#F8F4EE;

    padding:90px 0;

}

.services-hero-content{

    display:flex;

    align-items:center;

    gap:80px;

}

.services-text{

    flex:1;

}

.services-text h1{

    font-size:3.6rem;

    color:#24304D;

    margin-bottom:20px;

}

.services-text h1 span{

    color:#B62B63;

    font-style:italic;

}

.services-text .lead{

    font-size:1.2rem;

    color:#555;

    line-height:1.8;

    margin-bottom:25px;

}

.services-text p{

    color:#666;

    line-height:1.9;

}

.services-buttons{

    margin-top:35px;

    display:flex;

    gap:20px;

}

.services-image{

    flex:1;

}

.services-image img{

    width:100%;

    border-radius:25px;

    display:block;

}

/*====================================
        INTRODUCCIÓN
====================================*/

.services-intro{

    padding:80px 0;

    background:#fff;

    position: relative;  /* ← esto faltaba */
    overflow: visible;   /* ← permite que las flores sobresalgan */

}

/* Flores decorativas — se colocan con imágenes reales */
.contacto__deco-left {
    position: absolute;
    left: -20px;
    bottom: -10px;
    width: 220px;
    pointer-events: none;
    z-index: 1;
    opacity: .9;
}

.contacto__deco-right {
    position: absolute;
    right: -20px;
    bottom: -10px;
    width: 220px;
    pointer-events: none;
    z-index: 1;
    opacity: .9;
    transform: scaleX(-1);
}

.intro-card{

    position:relative;

    max-width:900px;

    margin:auto;

    background:#F8F4EE;

    border-radius:25px;

    padding:60px;

    text-align:center;

    overflow:hidden;

}

.intro-flower{

    position:absolute;

    width:140px;

    right:-20px;

    top:-20px;

    opacity:.10;

}

.intro-card h2{

    color:#24304D;

    font-size:2.5rem;

    margin-bottom:25px;

}

.intro-card p{

    color:#666;

    line-height:2;

    max-width:700px;

    margin:auto;

}

/* ══════════════════════════════════════════════════════════
      SECCIONES DE SERVICIO
    ══════════════════════════════════════════════════════════ */
    .servicio {
      padding: 90px 24px;
      background: var(--white);
      position: relative; 
      overflow: visible;  
    }

    /* Fondo alterno crema para la segunda sección */
    .servicio-alt {
      background: var(--cream);
      position: relative;
      overflow: visible;
    }

    .servicio-contenedor {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 64px;
    }

    /* Layout invertido */
    .servicio-contenedor.reverse {
      flex-direction: row-reverse;
    }

    /* ── Texto ── */
    .servicio-texto {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
    }

    /* Etiqueta superior (tag) */
    .servicio-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 14px;
    }

    .servicio-tag::before,
    .servicio-tag::after {
      content: '';
      display: block;
      width: 20px;
      height: 1.5px;
      background: var(--teal);
      border-radius: 2px;
    }

    /* Título */
    .servicio-titulo {
      font-family: var(--font-display);
      font-size: clamp(26px, 3.2vw, 42px);
      font-weight: 700;
      color: var(--navy);
      line-height: 1.15;
      margin-bottom: 14px;
      letter-spacing: 0.01em;
    }

    /* Acento de color en parte del título */
    .servicio-titulo em {
      font-style: italic;
      color: var(--rose);
    }

    /* Subtítulo / descripción */
    .servicio-subtitulo {
      font-size: 15px;
      line-height: 1.75;
      color: #5a5a5a;
      margin-bottom: 28px;
      max-width: 480px;
    }

    /* ── Lista con checkmarks ── */
    .servicio-lista {
      list-style: none;
      padding: 0;
      margin: 0 0 32px 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .servicio-lista li,
    .servicio-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 15px;
      color: var(--text);
      line-height: 1.5;
    }

    /* Checkmark dorado */
    .servicio-lista li::before,
    .servicio-item::before {
      content: "✓";
      color: var(--gold);
      font-weight: 700;
      font-size: 15px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* Quitar el ✔ inline del HTML cuando se usa ::before */
    .servicio-item {
      padding-left: 0;
    }

    /* ── Botón ── */
    .servicio-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      color: var(--white);
      background: var(--rose);
      text-decoration: none;
      padding: 13px 28px;
      border-radius: 30px;
      border: 2px solid transparent;
      box-shadow: 0 4px 18px rgba(200, 56, 90, 0.28);
      transition: background 0.22s, color 0.22s, transform 0.18s, box-shadow 0.22s;
      margin-top: 4px;
    }

    .servicio-btn:hover {
      background: var(--navy);
      box-shadow: 0 6px 24px rgba(27, 44, 78, 0.22);
      transform: translateY(-2px);
    }

    .servicio-btn:active { transform: scale(0.97); }

    /* ── Imagen ── */
    .servicio-imagen {
      flex: 1;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 16px 48px rgba(27, 44, 78, 0.14);
      position: relative;
    }

    /* Borde dorado sutil */
    .servicio-imagen::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      border: 3px solid rgba(212, 169, 64, 0.25);
      pointer-events: none;
    }

    .servicio-imagen img {
      width: 100%;
      height: 100%;
      min-height: 320px;
      object-fit: cover;
      display: block;
    }

    /* Placeholder cuando no hay imagen */
    .servicio-imagen-placeholder {
      min-height: 320px;
      background: linear-gradient(135deg, #dde8f5 0%, #c8dcea 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: var(--navy);
      opacity: 0.5;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
    }

    .servicio-imagen-placeholder svg {
      width: 56px;
      height: 56px;
    }

    /* ══════════════════════════════════════════════════════════
      RESPONSIVE
    ══════════════════════════════════════════════════════════ */
    @media (max-width: 860px) {
      .servicio { padding: 64px 24px; }

      .servicio-contenedor,
      .servicio-contenedor.reverse {
        flex-direction: column;
        gap: 40px;
        text-align: center;
      }

      .servicio-texto { align-items: center; }
      .servicio-subtitulo { max-width: 100%; }

      .servicio-lista {
        align-items: flex-start;
        text-align: left;
        width: 100%;
        max-width: 420px;
      }

      .servicio-imagen { width: 100%; }
      .servicio-imagen img { min-height: 240px; }
      .servicio-imagen-placeholder { min-height: 240px; }
    }

    @media (max-width: 480px) {
      .servicio { padding: 48px 16px; }
      .servicio-titulo { font-size: clamp(22px, 6vw, 30px); }
    }

/*====================================
        PROCESO
====================================*/

.process-section{

    padding:110px 0;

    background:#fff;

}

.process-intro{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

    color:#666;

    line-height:2;

}

.process-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.process-card{

    background:#F8F4EE;

    padding:35px;

    border-radius:20px;

    text-align:center;

    transition:.3s;

}

.process-card:hover{

    transform:translateY(-8px);

}

.number{

    width:70px;

    height:70px;

    margin:auto auto 20px;

    border-radius:50%;

    background:#B62B63;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.5rem;

    font-weight:bold;

}

.process-card h3{

    color:#24304D;

    margin-bottom:15px;

}

.process-card p{

    color:#666;

    line-height:1.8;

}

@media(max-width:991px){

.process-grid{

    grid-template-columns:1fr 1fr;

}

}

@media(max-width:600px){

.process-grid{

    grid-template-columns:1fr;

}

}

.services-cta{

    background:#24304D;

    padding:100px 0;

    text-align:center;

    color:#fff;

}

.services-cta h2{

    font-size:2.8rem;

    margin-bottom:20px;

}

.services-cta p{

    max-width:650px;

    margin:auto auto 35px;

    line-height:2;

    opacity:.9;

}

/* Responsive flores */
@media (max-width: 860px) {
    .contacto__deco-left,
    .contacto__deco-right {
        width: 100px;
        opacity: 0.5;
    }
}

@media (max-width: 640px) {
    .contacto__deco-left,
    .contacto__deco-right {
        width: 70px;
        opacity: 0.35;
    }
}

@media (max-width: 400px) {
    .contacto__deco-left,
    .contacto__deco-right {
        display: none;
    }
}