/* ==============================================================
   pages/microservicios.css — estilos exclusivos de esta página
   Se carga solo en su HTML correspondiente (PageSpeed).
   Requiere: tokens.css, base.css, components.css, layout.css
   ============================================================== */

/* --- Hero de Microservicios ----------------------------------------- */
/* Especificación: docs/componente-microservicios-noedelaflor.md §1.
   Misma construcción que los demás Hero de páginas internas (carbón + efecto
   de puntos, dos wrappers de 62px, bloque de texto de 1053px). Título en
   crema con "puntual" en itálica oro. El borde inferior oro lo separa de la
   sección de cards, que también va sobre carbón — mismo ajuste que el Hero
   de Acerca de Mí. */
.ms-hero {
  --ms-hero-pad-y: clamp(var(--space-7), 8.6vw, 124px);  /* 62 + 62 en desktop */
  --ms-hero-pad-x: 20px;
  --ms-hero-text-max: 1053px;
  --ms-hero-gap: 32px;               /* título → intro */

  position: relative;                /* contiene el canvas absoluto */
  overflow: hidden;
  background-color: var(--color-carbon);
  color: var(--color-crema);
  padding: var(--ms-hero-pad-y) var(--ms-hero-pad-x);
  border-bottom: 1px solid var(--color-oro);
}

/* Canvas del efecto de puntos: detrás de todo, nunca captura el puntero */
.ms-hero .dots-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ms-hero__inner {
  position: relative;                /* por encima del canvas */
  max-width: var(--ms-hero-text-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ms-hero-gap);
  text-align: center;
}

.ms-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-body);   /* Fraunces Regular (400) */
  font-size: var(--fs-hero);         /* 36px → 57px */
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.ms-hero__title em {
  font-style: italic;
  font-weight: inherit;
  color: var(--color-oro);
}

.ms-hero__intro {
  margin: 0;
  font-weight: var(--weight-semibold);  /* Hanken Grotesk SemiBold (600) */
  font-size: var(--fs-h2);           /* 24px → 32px */
  line-height: 1.5;
}

/* --- Las 6 cards de microservicios ----------------------------------- */
/* Especificación: §2. Una sola columna de cards a 1056px (10 columnas del
   grid de 92px + 9 gutters de 16px) dentro del contenedor de 1280px.
   La card va sobre carbón, igual que la sección: se distingue solo por su
   borde oro, con radio de 10px (no 5px). Layout interno de 2 columnas con
   divisor vertical, mismo sistema que la card principal de Precios; en
   mobile pasa a una columna con divisor horizontal.
   Hover de card (sombra oro + scale) y flash diagonal del botón: misma
   técnica que .pr-card y .pr-btn de Precios. */
.ms-servicios {
  --ms-pad-y: clamp(var(--space-7), 13.3vw, 192px);
  --ms-pad-x: 20px;
  --ms-content-max: 1280px;
  --ms-card-max: 1056px;             /* 10 col × 92 + 9 gutters × 16 */
  --ms-eyebrow-to-cards: clamp(var(--space-6), 4.3vw, 62px);
  --ms-cards-gap: clamp(var(--space-5), 3.3vw, 48px);
  --ms-card-pad: 32px;               /* mismo que las cards de Precios */
  --ms-card-radius: 10px;
  --ms-card-gap: 16px;               /* separación base entre bloques del cuerpo */
  --ms-card-gap-lg: 32px;            /* descripción → precio, y nota/precio → botón */
  --ms-hint-gap: 16px;               /* "Recomendado para…" → nombre del servicio */
  --ms-list-pad-left: 32px;          /* separa las características del divisor vertical */
  --ms-col-gap: clamp(var(--space-4), 3vw, 40px);  /* columna izquierda → divisor → derecha */
  --ms-list-gap: 12px;               /* entre características */
  --ms-icon-gap: 8px;                /* ícono → texto */
  --ms-icon-size: 16px;
  --ms-card-shadow-hover: 0 4px 32px var(--color-oro-50);
  --ms-card-scale-hover: 1.03;
  --ms-btn-pad-y: 18px;
  --ms-btn-pad-x: 24px;
  --ms-btn-radius: 10px;
  --ms-btn-gap: 10px;                /* ícono → texto */
  --ms-btn-lift: -2px;
  --ms-btn-scale-hover: 1.03;
  --ms-flash-duration: 600ms;        /* una sola pasada, no usa los tokens de estado */
  --ms-flash-width: 40%;

  background-color: var(--color-carbon);
  color: var(--color-crema);
  padding: var(--ms-pad-y) var(--ms-pad-x);
}

.ms-servicios__inner {
  max-width: var(--ms-content-max);
  margin-inline: auto;
}

/* Eyebrow: es el heading real de la sección, con aspecto de etiqueta */
.ms-servicios__eyebrow {
  margin: 0 0 var(--ms-eyebrow-to-cards);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 1rem;                   /* 16px */
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.ms-servicios__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ms-cards-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-card {
  width: 100%;
  max-width: var(--ms-card-max);
  /* Scale con rebote; la sombra con curva estándar para que no "rebote" */
  transition: transform var(--ease-base) var(--curve-spring),
              box-shadow var(--ease-base) var(--curve-standard);
}

/* Mobile: una sola columna, divisor horizontal entre info y características */
.ms-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--ms-col-gap);
  padding: var(--ms-card-pad);
  border: 1px solid var(--color-oro);
  border-radius: var(--ms-card-radius);
  background-color: var(--color-carbon);
}

/* Hover de la card completa (solo con puntero real), igual que Precios */
@media (hover: hover) and (pointer: fine) {
  .ms-card:hover {
    transform: scale(var(--ms-card-scale-hover));
    box-shadow: var(--ms-card-shadow-hover);
  }
}

.ms-card__main {
  display: flex;
  flex-direction: column;
  gap: var(--ms-card-gap);
}

.ms-card__main > * { margin: 0; }

/* Separaciones que suman al gap base de la columna: 16 + 16 = 32px entre la
   descripción y el precio, y entre el precio (o su nota) y el botón. */
.ms-card__hint { padding-bottom: var(--ms-hint-gap); }
.ms-card__desc { margin-bottom: calc(var(--ms-card-gap-lg) - var(--ms-card-gap)); }

/* "Recomendado para…": círculo con palomita en oro, 16px + texto 12px.
   Usa circle-check-icon.svg, no el check-icon.svg de Precios (decisión de Rey). */
.ms-card__hint,
.ms-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-icon-gap);
  font-size: var(--fs-caption);      /* 12px */
  line-height: 1.5;
}

.ms-check,
.ms-star {
  width: var(--ms-icon-size);
  height: var(--ms-icon-size);
  flex-shrink: 0;
  margin-top: 1px;                   /* centra el ícono con la primera línea */
}

.ms-card__name {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h3);           /* 20px → 24px */
  line-height: 1.3;
  text-transform: uppercase;
}

.ms-card__desc {
  font-size: var(--fs-body);         /* 16px → 18px */
  line-height: 1.5;
}

/* Precio: "Desde" pequeño antes de la cifra grande */
.ms-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ms-icon-gap);
  text-transform: uppercase;
}

.ms-card__from {
  font-weight: var(--weight-bold);
  font-size: var(--fs-label);        /* 13px → 14px */
  line-height: 1.5;
}

/* La cifra va en oro (el "Desde" y la nota se quedan en crema): sobre carbón
   da 8.07:1, AAA — ver tabla de contraste de estilo-noedelaflor.md */
.ms-card__amount {
  font-weight: var(--weight-bold);
  font-size: var(--fs-h1);           /* 28px → 43px, mismo que el precio de Precios */
  line-height: 1.1;
  color: var(--color-oro);
}

/* Unidad o condición debajo del precio ("precio por producto", etc.) */
.ms-card__note {
  font-weight: var(--weight-bold);
  font-size: var(--fs-label);
  line-height: 1.5;
  text-transform: uppercase;
}

/* Lista "qué incluye": estrella de 4 puntas, no check (§2).
   El selector lleva el elemento (ul.…) a propósito: base.css resetea
   ul[role="list"] con padding: 0, y esa regla (0,1,1) le gana a una clase
   sola (0,1,0). Sin el ul. los paddings de esta lista se quedan en cero. */
ul.ms-card__list {
  display: flex;
  flex-direction: column;
  justify-content: center;           /* centradas en la altura de su columna */
  align-items: flex-start;           /* sin perder la alineación izquierda del texto */
  gap: var(--ms-list-gap);
  margin: 0;
  padding-top: var(--ms-col-gap);
  border-top: 1px solid var(--color-oro);  /* divisor horizontal en mobile */
  list-style: none;
}

/* Botón: mismo tamaño y flash diagonal que los CTAs de Precios */
.ms-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;                /* el ::after no se sale del contexto del botón */
  align-self: stretch;               /* ancho completo en mobile (ver media query) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-btn-gap);
  margin-top: calc(var(--ms-card-gap-lg) - var(--ms-card-gap));
  padding: var(--ms-btn-pad-y) var(--ms-btn-pad-x);
  border: 1px solid var(--color-oro);
  border-radius: var(--ms-btn-radius);
  background-color: var(--color-oro);
  color: var(--color-carbon);
  font-size: var(--fs-cta);
  line-height: 1.3;
  text-decoration: none;
  transition: transform var(--ease-base) var(--curve-spring);
}

/* El SVG de WhatsApp trae fill oro fijo, que sobre este botón (fondo oro)
   sería invisible: se pinta con máscara para que tome el color del texto,
   misma técnica que los íconos sociales del footer. */
.ms-btn__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/svgs/whatsapp-icon.svg") center / contain no-repeat;
  mask: url("/assets/img/svgs/whatsapp-icon.svg") center / contain no-repeat;
}

/* Flash diagonal: banda de brillo fuera del botón por la izquierda */
.ms-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ms-flash-width);
  background: linear-gradient(to right, rgba(245, 237, 220, 0), rgba(245, 237, 220, 0.45), rgba(245, 237, 220, 0));
  transform: translateX(-250%) skewX(-20deg);
  pointer-events: none;
  z-index: -1;                       /* debajo del texto, encima del fondo (isolation) */
}

@media (hover: hover) and (pointer: fine) {
  .ms-btn:hover {
    transform: translateY(var(--ms-btn-lift)) scale(var(--ms-btn-scale-hover));
  }

  /* El flash cruza una sola vez: solo transiciona al entrar */
  .ms-btn:hover::after {
    transform: translateX(350%) skewX(-20deg);
    transition: transform var(--ms-flash-duration) var(--curve-standard);
  }
}

/* Touch: el botón responde mientras se mantiene presionado */
.ms-btn:active { transform: scale(0.98); transition-duration: var(--ease-fast); }

/* --- Desktop (≥ 1024px): card en 2 columnas con divisor vertical ------ */
@media (min-width: 64em) {
  .ms-card__inner {
    flex-direction: row;
    align-items: stretch;
  }

  .ms-card__main { flex: 1 1 52%; }

  /* En fila el botón vuelve a medir lo que mide su texto */
  .ms-btn { align-self: flex-start; }

  ul.ms-card__list {
    flex: 1 1 48%;
    padding-top: 0;
    padding-left: var(--ms-list-pad-left);
    border-top: 0;
    border-left: 1px solid var(--color-oro);  /* divisor vertical */
  }
}

/* Movimiento reducido: sin scale ni flash */
@media (prefers-reduced-motion: reduce) {
  .ms-card, .ms-btn, .ms-btn::after { transition: none; }
  .ms-card:hover, .ms-btn:hover { transform: none; }
  .ms-btn:hover::after { transform: translateX(-250%) skewX(-20deg); }
}