/* ==========================================================================
   /pay — página de pago
   Hoja aparte, cargada solo por esta página. Todo lo de aquí está bajo .pago,
   así que nada de esto puede alcanzar al resto del sitio.

   Reutiliza los tokens de style.css: verde #0B3D2E, oro #C5A65C, negro
   #0B0B0B, off-white #FAFAF8, gris acero #A7A9AC, y las fuentes ya cargadas
   (Cormorant Garamond en títulos, DM Sans en cuerpo). No añade tipografías
   nuevas ni dependencias externas.
   ========================================================================== */

.pago{
  /* Tokens locales: por omisión la página va en claro, y el bloque de
     prefers-color-scheme más abajo los redefine para el modo oscuro. */
  --fondo: var(--crema);
  --superficie: #FFFFFF;
  --tinta: var(--negro);
  --tinta-suave: rgba(11,11,11,.66);
  --borde: rgba(11,11,11,.14);
  --acento: var(--verde);
  --placa: #FFFFFF;      /* fondo de los logos de pago */

  background: var(--fondo);
  color: var(--tinta);
  min-height: 100dvh;
}

.pago__envoltura{
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 5vw, 2.5rem) clamp(3rem, 8vw, 5rem);
}

/* ---------- Cabecera ---------- */
.pago__cabecera{ text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.pago__marca{ display: inline-block; margin-bottom: var(--space-lg); }
.pago__marca img{ width: 128px; height: auto; }
.pago__titulo{
  font-family: var(--fuente-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  color: var(--tinta);
  margin: 0 0 var(--space-md);
}
.pago__titulo em{ font-style: italic; color: var(--oro); }
.pago__intro{
  font-family: var(--fuente-cuerpo);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  line-height: 1.75;
  color: var(--tinta-suave);
  max-width: 58ch;
  margin-inline: auto;
}

/* ---------- Tarjetas de servicio ----------
   Móvil primero: una columna. A partir de 640px entran dos, y en pantallas
   grandes tres. */
.pago__servicios{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.servicio{
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.servicio:hover{
  border-color: var(--oro);
  box-shadow: 0 10px 34px rgba(0,0,0,.10);
}
/* La membresía corporativa se distingue con un filete de oro arriba */
.servicio--destacado{ border-top: 2px solid var(--oro); }

.servicio__foto{
  position: relative;
  aspect-ratio: 1 / 1;       /* 1:1, como se pidió */
  background: var(--verde);
  overflow: hidden;
}
.servicio__foto img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Si la imagen aún no existe, se oculta y queda el nombre sobre el verde */
.servicio__foto.sin-foto img{ display: none; }
.servicio__respaldo{
  position: absolute; inset: 0;
  display: none;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--fuente-display);
  font-size: 1.4rem;
  color: var(--crema);
}
.servicio__foto.sin-foto .servicio__respaldo{ display: grid; }

.servicio__cuerpo{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: var(--space-md);
  flex: 1;
}
.servicio__nombre{
  font-family: var(--fuente-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta);
  margin: 0;
}
.servicio__detalle{
  font-family: var(--fuente-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0;
}
.servicio__precio{
  font-family: var(--fuente-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--tinta);
  margin: var(--space-sm) 0 var(--space-md);
}
.servicio__precio span{
  font-family: var(--fuente-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--tinta-suave);
  vertical-align: .55em;
  margin-right: .25rem;
}
.servicio__precio small{
  font-family: var(--fuente-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ---------- Botón de pago ----------
   Ancho completo y 48px de alto mínimo, también en escritorio: es la acción
   principal de la página y conviene que sea difícil de fallar en táctil. */
.boton-pago{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  min-height: 48px;
  padding: .9rem 1.25rem;
  background: var(--verde);
  color: #FFFFFF;
  border: 1px solid var(--verde);
  border-radius: var(--radius);
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.boton-pago svg{ width: 17px; height: 17px; transition: transform var(--dur-fast) var(--ease-out); }
.boton-pago:hover{ background: var(--oro); border-color: var(--oro); color: var(--negro); }
.boton-pago:hover svg{ transform: translateX(4px); }
.boton-pago:active{ transform: scale(.99); }

/* ---------- Métodos de pago ---------- */
.metodos{
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--borde);
  text-align: center;
}
.metodos__titulo{
  font-family: var(--fuente-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 var(--space-lg);
}
/* Placa clara fija para el distintivo: varios de los logos que contiene son
   negros y sin ella desaparecerían en modo oscuro. */
.metodos__placa{
  display: inline-block;
  padding: .9rem 1.1rem;
  margin: 0 auto var(--space-lg);
  background: var(--placa);
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  max-width: 100%;
}
.metodos__placa img{
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}
/* Respaldo en texto si el archivo no carga */
.metodos__respaldo{
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  gap: .45rem 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.metodos__respaldo li{
  font-family: var(--fuente-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: #0B0B0B;
  white-space: nowrap;
}
.metodos__placa.sin-logo img{ display: none; }
.metodos__placa.sin-logo .metodos__respaldo{ display: flex; }

.metodos__detalle{
  max-width: 62ch;
  margin-inline: auto;
  font-family: var(--fuente-cuerpo);
  font-size: .92rem;
  line-height: 1.8;
  color: var(--tinta-suave);
}
.metodos__detalle p{ margin: 0 0 .35rem; }
.metodos__excluye{ margin-top: var(--space-sm); color: var(--acero); }

/* ---------- Confianza ---------- */
.confianza{
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: var(--space-md);
  border: 1px solid var(--borde);
  border-left: 2px solid var(--acento);
  border-radius: var(--radius);
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  text-align: left;
}
.confianza__icono{ width: 26px; height: 26px; flex-shrink: 0; color: var(--acento); }
.confianza p{
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: .9rem;
  line-height: 1.75;
  color: var(--tinta-suave);
}

/* ---------- Ayuda ---------- */
.pago__ayuda{
  margin-top: clamp(2rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.boton-whatsapp{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  width: 100%;
  max-width: 340px;
  padding: .9rem 1.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: .88rem;
  color: var(--tinta);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.boton-whatsapp svg{ width: 19px; height: 19px; }
.boton-whatsapp:hover{ border-color: var(--acento); color: var(--acento); }
.pago__volver{
  font-family: var(--fuente-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acero);
}
.pago__volver:hover{ color: var(--oro); }

/* ==========================================================================
   Pantallas medianas y grandes
   ========================================================================== */
@media (min-width: 640px){
  .pago__servicios{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px){
  .pago__servicios{ grid-template-columns: repeat(3, 1fr); }
  .confianza{ align-items: center; }
}

/* ==========================================================================
   Modo oscuro
   Solo redefine los tokens locales de .pago. La placa de los logos se queda
   clara a propósito, porque el logo de Apple Pay es negro.
   ========================================================================== */
@media (prefers-color-scheme: dark){
  .pago{
    --fondo: var(--negro);
    --superficie: #131313;
    --tinta: var(--crema);
    --tinta-suave: rgba(250,250,248,.72);
    --borde: rgba(250,250,248,.16);
    --acento: var(--oro);            /* el verde no rinde sobre negro */
    --placa: #FFFFFF;
  }
  .servicio:hover{ box-shadow: 0 10px 34px rgba(0,0,0,.5); }
  .boton-pago{
    background: var(--oro);
    border-color: var(--oro);
    color: var(--negro);
  }
  .boton-pago:hover{ background: var(--crema); border-color: var(--crema); color: var(--negro); }
  .metodos__excluye{ color: rgba(250,250,248,.5); }
  .pago__volver{ color: rgba(250,250,248,.5); }
}

/* Quien pide menos movimiento: sin desplazamientos en los botones */
@media (prefers-reduced-motion: reduce){
  .boton-pago, .boton-pago svg, .servicio{ transition: none; }
  .boton-pago:hover svg{ transform: none; }
}