/* ============================================
   servicios.css
   ============================================ */

body.modal-open {
  overflow: hidden;
}

.service-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px;

  background: rgba(20, 12, 18, .45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity .35s ease,
    visibility .35s ease;
}

.service-modal.active {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================
   CONTENIDO
========================================================== */

.service-modal-content {

  position: relative;

  width: 100%;
  max-width: 760px;

  max-height: 90vh;
  overflow-y: auto;

  background: var(--white);

  border-radius: 24px;

  padding: 50px;

  box-shadow: 0 25px 70px rgba(0,0,0,.18);

  transform: translateY(30px) scale(.96);

  transition: all .35s ease;
}

.service-modal.active .service-modal-content{

  transform: translateY(0) scale(1);

}

/* Scroll bonito */

.service-modal-content::-webkit-scrollbar{
  width:8px;
}

.service-modal-content::-webkit-scrollbar-thumb{

  background:var(--sand);
  border-radius:20px;

}

/* ==========================================================
   BOTÓN CERRAR
========================================================== */

.modal-close{

  position:absolute;

  top:18px;
  right:18px;

  width:44px;
  height:44px;

  border:none;

  border-radius:50%;

  background:var(--cream);

  color:var(--terra);

  font-size:26px;

  cursor:pointer;

  transition:.25s;

}

.modal-close:hover{

  background:var(--terra);

  color:white;

  transform:rotate(90deg);

}

/* ==========================================================
   TITULO
========================================================== */

#modalTitle{

  font-size:2rem;

  line-height:1.2;

  color:var(--dark);

  margin-bottom:18px;

}

/* ==========================================================
   DESCRIPCIÓN
========================================================== */

#modalDescription{

  font-size:1rem;

  line-height:1.8;

  color:var(--text);

  margin-bottom:28px;

}

/* ==========================================================
   BENEFICIOS
========================================================== */

#modalBenefits{

  display:grid;

  gap:14px;

  margin-bottom:36px;

}

#modalBenefits .benefit{

  display:flex;

  align-items:flex-start;

  gap:12px;

  font-size:.96rem;

  line-height:1.6;

  color:var(--text);

}

#modalBenefits .benefit svg{

  flex-shrink:0;

  margin-top:2px;

}

/* ==========================================================
   BOTÓN WHATSAPP
========================================================== */

.modal-whatsapp{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:16px 30px;

  border-radius:999px;

  text-decoration:none;

  font-weight:600;

  background:var(--terra);

  color:white;

  transition:.3s;

}

.modal-whatsapp:hover{

  background:var(--mid);

  transform:translateY(-2px);

  box-shadow:var(--shadow-hover);

}

/*=========================================
TRANSICIONES PREMIUM
=========================================*/

.service-modal-content{

transition:
transform .35s cubic-bezier(.22,.61,.36,1),
opacity .35s ease;

}

.service-modal-content.loading{

opacity:.15;

transform:translateY(12px) scale(.98);

}

/*=========================================
BENEFICIOS
=========================================*/

.benefit{

opacity:0;

transform:translateX(-14px);

animation:benefitFade .45s forwards;

}

@keyframes benefitFade{

to{

opacity:1;

transform:none;

}

}

/*=========================================
BOTÓN
=========================================*/

.problem-link{

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

margin-top:auto;

background:none;

border:none;

cursor:pointer;

transition:.3s;

}

.problem-link::after{

content:"→";

transition:.3s;

}

.problem-link:hover{

letter-spacing:.05em;

}

.problem-link:hover::after{

transform:translateX(6px);

}

/*=========================================
MODAL APPEAR
=========================================*/

.service-modal.active .service-modal-content{

animation:modalAppear .4s cubic-bezier(.22,.61,.36,1);

}

@keyframes modalAppear{

0%{

opacity:0;

transform:translateY(40px) scale(.92);

}

100%{

opacity:1;

transform:none;

}

}

/* ==========================================================
   HOVER CARD
========================================================== */

.problem-card {

  display:flex;

  flex-direction:column;

}

.problem-card .problem-link{

  margin-top:auto;

  background:none;

  border:none;

  cursor:pointer;

}

.problem-card:hover .problem-link{

  color:var(--terra);

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

.problems-grid{

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

}

.service-modal-content{

padding:40px;

max-width:700px;

}

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

.problems-grid{

grid-template-columns:1fr;

}

.service-modal{

padding:18px;

align-items:center;

}

.service-modal-content{

max-height:calc(100dvh - 36px);

padding:30px 24px;

border-radius:24px;

overscroll-behavior:contain;

animation:modalUp .35s ease;

}

.modal-close{

position:sticky;

top:0;

right:auto;

margin-left:auto;

margin-bottom:-44px;

z-index:3;

}

#modalTitle{

font-size:1.55rem;

}

#modalDescription{

font-size:.94rem;

line-height:1.75;

}

.modal-whatsapp{

width:100%;

}

}

/* ==========================================================
   ANIMACIÓN MOBILE
========================================================== */

@keyframes modalUp{

from{

transform:translateY(70px);

opacity:0;

}

to{

transform:translateY(0);

opacity:1;

}

}

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

#servicios {
  background: var(--cream);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.service-block {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.3s;

  /* Grid interno de 4 filas: imagen | eyebrow+título | descripción+lista | botón */
  display: grid;
  grid-template-rows: 300px auto 1fr auto;
}

.service-block:hover {
  box-shadow: var(--shadow-hover);
}

.service-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: var(--beige);
}

.service-img-placeholder {
  /* Ocupa exactamente la fila de imagen definida por grid-template-rows */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.service-img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-body {
  /* El body ocupa las 3 filas restantes del grid padre
     y usa su propio subgrid para empujar el botón al fondo */
  display: contents;
}

/* Eyebrow + título: fila 2 — siempre a la misma altura */
.service-header {
  padding: 32px 28px 0;
}

.service-header h3 {
  margin-top: 6px;
  margin-bottom: 0;
  color: var(--dark);
}

/* Descripción + lista: fila 3 — se estira para ocupar el espacio libre */
.service-middle {
  padding: 16px 28px 0;
  display: flex;
  flex-direction: column;
}

.service-middle > p {
  margin-bottom: 16px;
}

.service-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* La lista crece para empujar el botón hacia abajo */
  flex: 1;
}

.service-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--mid);
  font-weight: 400;
}

.service-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* Fila 4 — botón siempre pegado al fondo, mismo padding inferior */
.service-footer {
  padding: 28px 28px 32px;
}

.service-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--cream);
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--terra);
  margin-bottom: 8px;
}

/* ============================================


/* ============================================
   POR QUÉ ELEGIRNOS
   ============================================ */

#por-que {
  background: var(--white);
}

#por-que .section-center {
  margin-bottom: 56px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.why-card {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-height: 270px;
  padding: 40px 26px;

  text-align: center;

  background: var(--cream);
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.why-card:hover {
  background: var(--white);
  border-color: var(--gold-light);
  box-shadow: var(--shadow-hover);
  transform: translateY(-6px);
}

.why-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg, var(--beige), var(--sand));
  border-radius: 22px;

  transition: transform 0.3s ease;
}

.why-card:hover .why-icon {
  transform: scale(1.08);
}

.why-icon svg {
  display: block;
}

.why-card h3 {
  margin-bottom: 12px;

  color: var(--dark);
  font-size: 1.35rem;
  line-height: 1.2;
}

.why-card p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.75;
}

/* Responsive */

@media (max-width: 1024px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .why-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .why-card {
    min-height: auto;
    padding: 34px 24px;
  }
}