/* ============================================================
   PÁGINA "SERVICIOS" — DIAZA  (diseño nuevo)
   Concepto: "clínica editorial", el mismo de la portada.
   Composiciones asimétricas, números grandes, fotos en arco,
   listas finas con líneas divisorias y una sección oscura al
   final que cierra la página.

   Orden de carga: base.css → servicio.css → premium.css
   (premium.css aporta la paleta, el hero interior, las
   animaciones de aparición y los acabados)

   ÍNDICE
     0. Componentes compartidos del sistema
     1. Los tres servicios principales (piezas editoriales)
     2. Lista fina de puntos clave
     3. Las cuatro especialidades (retícula bento clara)
     4. Electroestimulación (pieza destacada a todo el ancho)
     5. Banda oscura "Reserva Una Cita"
     6. Responsive
     7. Movimiento reducido
   ============================================================ */

/* Aire a los costados: el .contenedor de base.css no trae margen
   lateral propio. Se lo damos aquí para que en pantallas medianas
   nada toque el borde (el hero ya lo trae desde premium.css). */
main > section > .contenedor { padding-inline: 24px; }

/* ============================================================
   0. COMPONENTES COMPARTIDOS DEL SISTEMA
   Mismas clases y mismos valores que en la portada (css/inicio.css),
   copiados aquí porque cada página carga solo su propio CSS.
   Si cambias un botón o una pieza del bento, cámbialo en ambos.
   ============================================================ */

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: 999px;
  font-family: var(--fuente-texto); font-size: 15px; font-weight: 600;
  letter-spacing: 0.2px; line-height: 1;
  transition: transform 0.25s var(--curva), box-shadow 0.25s, background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn svg { width: 14px; height: 14px; fill: currentColor; transition: transform 0.25s; }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--verde-400); outline-offset: 3px; }

/* Sólido: el verde de la marca, para la acción principal */
.btn--solido {
  background: var(--verde-600); color: #fff;
  box-shadow: 0 16px 34px -14px rgba(7, 168, 49, 0.7);
}
.btn--solido:hover { transform: translateY(-2px); box-shadow: 0 22px 42px -14px rgba(7, 168, 49, 0.85); }

/* De línea: contorno, para la acción secundaria */
.btn--linea {
  border: 1px solid rgba(12, 46, 78, 0.25); color: var(--tinta-900); background: transparent;
}
.btn--linea:hover { background: var(--azul-50); border-color: rgba(12, 46, 78, 0.4); transform: translateY(-2px); }
.btn--oscuro { border-color: rgba(12, 46, 78, 0.22); }

/* Claro: sobre fondos y fotos oscuras */
.btn--claro {
  background: rgba(255, 255, 255, 0.94); color: var(--tinta-900);
  padding: 13px 24px; font-size: 14px;
}
.btn--claro:hover { background: #fff; transform: translateY(-2px); }

/* ---------- Etiqueta de sección sobre fondo oscuro ---------- */
/* (la versión clara vive en premium.css) */
.etiqueta-seccion--clara { color: var(--verde-400); }

/* ---------- Retícula bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.bento__pieza {
  position: relative; overflow: hidden;
  border-radius: 24px; min-height: 300px;
  box-shadow: var(--sombra-md);
  isolation: isolate;
}
.bento__pieza--grande { grid-row: span 2; min-height: 560px; }

.bento__pieza img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform 0.7s var(--curva);
}
/* Velo para que el texto se lea siempre sobre la foto */
.bento__pieza::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 24, 43, 0.12) 0%, rgba(6, 24, 43, 0.62) 52%, rgba(6, 24, 43, 0.9) 100%);
}
.bento__pieza:hover img { transform: scale(1.06); }

.bento__capa {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end; gap: 10px;
  padding: clamp(22px, 2.4vw, 34px);
}
.bento__num {
  font-family: var(--fuente-titulos); font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--verde-400);
  font-variant-numeric: tabular-nums;
}
/* En esta página los títulos de las piezas son <h2> (van después
   del <h1> del hero); se estilan igual que los <h3> de la portada. */
.bento__capa h2,
.bento__capa h3 {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.9rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.025em;
  color: #fff; text-wrap: balance;
}
.bento__capa p {
  max-width: 46ch; font-size: 15px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.bento__capa .btn { margin-top: 8px; }

/* ============================================================
   1. LOS TRES SERVICIOS PRINCIPALES
   Pieza editorial: número grande + título muy grande + lista fina
   a un lado, y la foto en arco al otro. El lado se alterna.
   ============================================================ */
.servicios-clave { background: var(--color-blanco); }

.pieza {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(30px, 4.6vw, 74px);
  align-items: center;
}
.pieza + .pieza { margin-top: clamp(54px, 8vw, 118px); }

/* Alterna el lado: en la pieza invertida la foto se dibuja primero */
.pieza--invertida .pieza__foto { order: -1; }

.pieza__texto {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(12px, 1.4vw, 18px);
}

/* Número grande + línea verde que se desvanece (gesto de la marca) */
.pieza__num {
  display: flex; align-items: center; gap: 16px; width: 100%;
  font-family: var(--fuente-titulos);
  font-size: clamp(2.2rem, 1.6rem + 1.9vw, 3.2rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.05em;
  color: rgba(12, 46, 78, 0.18);
  font-variant-numeric: tabular-nums;
  transition: color 0.6s var(--curva);
}
.pieza__num::after {
  content: ""; height: 3px; width: clamp(48px, 7vw, 96px); border-radius: 999px;
  background: linear-gradient(90deg, var(--verde-600), rgba(7, 168, 49, 0));
}

.pieza__titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.95rem, 1.25rem + 2.5vw, 3rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.04em;
  color: var(--tinta-900);
  text-wrap: balance;
}
.pieza__entrada {
  max-width: 46ch;
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.1rem);
  line-height: 1.75; color: var(--tinta-600);
}
.pieza__entrada strong { color: var(--tinta-900); font-weight: 700; }

.pieza__texto .btn { margin-top: 6px; }

/* Foto en arco (mismo remate que la portada) */
.pieza__foto {
  margin: 0; overflow: hidden;
  border-radius: 200px 200px 26px 26px;
  box-shadow: var(--sombra-xl);
}
.pieza__foto img {
  width: 100%; height: clamp(400px, 44vw, 560px);
  object-fit: cover; object-position: center;
  transition: transform 0.8s var(--curva);
}
.pieza:hover .pieza__foto img { transform: scale(1.04); }

/* Al llegar desde la portada (#Análisis / #Interpretación),
   js/servicio.js enciende el número un momento para ubicar al
   visitante en la pieza correcta. */
.pieza--destacada .pieza__num { color: var(--verde-600); }

/* ============================================================
   2. LISTA FINA DE PUNTOS CLAVE
   Los antiguos "checks" pasan a ser una lista con líneas
   divisorias; el visto verde se dibuja con una máscara CSS.
   ============================================================ */
.lista-fina {
  width: 100%; margin-top: 2px;
  border-top: 1px solid rgba(12, 46, 78, 0.12);
}
.lista-fina li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(12, 46, 78, 0.12);
  font-family: var(--fuente-texto); font-size: 15.5px; font-weight: 500;
  line-height: 1.5; color: var(--tinta-600);
}
.lista-fina li::before {
  content: "";
  --icono-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
  flex: 0 0 17px; width: 17px; height: 17px; margin-top: 2px;
  background: var(--verde-600);
  -webkit-mask: var(--icono-check) center / contain no-repeat;
  mask: var(--icono-check) center / contain no-repeat;
}

/* Variante compacta: dentro de las tarjetas de especialidad */
.lista-fina--compacta { margin-top: 6px; }
.lista-fina--compacta li { padding: 11px 0; font-size: 14.5px; }

/* Variante clara: sobre foto oscura (pieza EMS) */
.lista-fina--clara { border-top-color: rgba(255, 255, 255, 0.22); }
.lista-fina--clara li {
  border-bottom-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.86);
}
.lista-fina--clara li::before { background: var(--verde-400); }

/* ============================================================
   3. LAS CUATRO ESPECIALIDADES (bento claro)
   La misma pieza del bento, pero como tarjeta blanca: sin foto,
   sin velo oscuro y con el contenido arriba.
   ============================================================ */
.especialidades { background: var(--azul-50); }

/* Cuatro piezas iguales: 2 × 2 */
.bento--cuatro { grid-template-columns: repeat(2, 1fr); }

.bento__pieza--claro {
  background: var(--color-blanco);
  border: 1px solid rgba(12, 46, 78, 0.07);
  transition: transform 0.35s var(--curva), box-shadow 0.35s;
}
.bento__pieza--claro::after { display: none; }   /* sin velo: no hay foto debajo */
.bento__pieza--claro:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); }
.bento__pieza--claro .bento__capa { justify-content: flex-start; gap: 12px; }
.bento__pieza--claro .bento__num { color: var(--verde-600); }
.bento__pieza--claro .bento__capa h2 { color: var(--tinta-900); }
.bento__pieza--claro .bento__capa p { color: var(--tinta-600); max-width: 44ch; }
.bento__pieza--claro .bento__capa p strong { color: var(--tinta-900); font-weight: 700; }

/* ============================================================
   4. ELECTROESTIMULACIÓN (EMS)
   Pieza del bento a todo el ancho: foto de fondo, velo en
   diagonal (como el hero) y el texto anclado abajo a la izquierda.
   ============================================================ */
.ems-destacado { background: var(--color-blanco); }

.bento__pieza--ancha {
  grid-row: auto;
  min-height: clamp(430px, 42vw, 520px);
}
/* Velo en diagonal: deja respirar la foto por la derecha */
.bento__pieza--ancha::after {
  background: linear-gradient(100deg, rgba(6, 24, 43, 0.94) 0%, rgba(6, 24, 43, 0.8) 42%, rgba(6, 24, 43, 0.28) 100%);
}
.bento__pieza--ancha .bento__capa {
  max-width: 660px; gap: 12px;
  padding: clamp(26px, 3vw, 44px);
}
.bento__pieza--ancha .bento__capa h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.4rem);
}
.bento__pieza--ancha:hover img { transform: scale(1.04); }

/* ============================================================
   5. BANDA OSCURA "RESERVA UNA CITA"
   Foto fija (parallax en escritorio) + el degradado azul marino
   del sistema encima + grano fino (clase .con-grano de premium).
   ============================================================ */
.cta-reserva {
  position: relative; overflow: hidden;
  background-image: url("../media/uploads/2024/09/banner-contacto.webp");
  background-position: center center; background-repeat: no-repeat; background-size: cover;
}
@media (min-width: 1025px) {
  .cta-reserva { background-attachment: fixed; }
}
.cta-reserva::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(70% 60% at 88% 8%, rgba(97, 206, 112, 0.16), transparent 55%),
    linear-gradient(160deg, rgba(6, 24, 43, 0.95) 0%, rgba(10, 37, 64, 0.9) 58%, rgba(13, 48, 80, 0.86) 100%);
}
.cta-reserva__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(22px, 3vw, 34px);
}
.cta-reserva__titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.04em;
  color: var(--color-blanco);
  text-wrap: balance;
}
.cta-reserva__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
/* Los dos botones, del mismo tamaño (el claro es más chico por defecto) */
.cta-reserva .btn { padding: 16px 30px; font-size: 15px; }
/* Aquí el icono va DELANTE del texto: no se desplaza al pasar el mouse */
.cta-reserva .btn:hover svg { transform: none; }

/* ============================================================
   6. RESPONSIVE — mismos puntos de corte que el resto del sitio
   ============================================================ */

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
  /* Las piezas editoriales se apilan: texto arriba, foto abajo */
  .pieza { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); }
  .pieza--invertida .pieza__foto { order: 0; }
  .pieza__foto { border-radius: 160px 160px 22px 22px; }
  .pieza__foto img { height: clamp(340px, 50vw, 470px); }
  .pieza__entrada { max-width: 60ch; }
}

/* ---------- Móvil (≤767px) ---------- */
@media (max-width: 767px) {
  main > section > .contenedor { padding-inline: 20px; }

  .pieza__foto { border-radius: 120px 120px 20px 20px; }
  .pieza__foto img { height: 320px; }
  /* Estos botones llevan frases largas: al ocupar todo el ancho se
     parten en dos renglones y necesitan aire entre líneas */
  .pieza__texto .btn { width: 100%; line-height: 1.4; text-align: center; }

  .lista-fina li { font-size: 15px; }

  /* El bento pasa a una sola columna */
  .bento { grid-template-columns: 1fr; }
  .bento__pieza { min-height: 0; }
  .bento__pieza--ancha { min-height: 420px; }

  /* Banda de cita: botones a lo ancho */
  .cta-reserva__botones { width: 100%; flex-direction: column; align-items: stretch; }
  .cta-reserva .btn { width: 100%; }
}

/* ============================================================
   7. MOVIMIENTO REDUCIDO
   Si el sistema pide menos movimiento: sin zooms, sin elevaciones
   y sin parallax (premium.css apaga sus propios efectos).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pieza__foto img,
  .bento__pieza img,
  .bento__pieza--claro,
  .btn { transition: none; }
  .pieza:hover .pieza__foto img,
  .bento__pieza:hover img,
  .bento__pieza--claro:hover,
  .btn:hover, .btn:active { transform: none; }
  .cta-reserva { background-attachment: scroll !important; }
}