/* =========================================================================
   Sistema de diseño M360 — Fase A del rediseño
   Fuente de verdad: Manual de marca M360 V2 (2025) + reglas de Juan:
   rosados con rosados, morados con morados, crema puente entre ambos.
   ========================================================================= */

/* ---------- fuentes autoalojadas ---------- */

@font-face {
  font-family: "Switzer";
  src: url("fuentes/switzer-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fuentes/switzer-variable-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Andes";
  src: url("fuentes/andes-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Andes";
  src: url("fuentes/andes-light-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Andes";
  src: url("fuentes/andes-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  /* familia rosa */
  --rojo: #e15758;
  --rosa: #ff9191;
  --rosa-palo: #f6ddd8;

  /* familia morada */
  --morado: #5b497f;
  --lila: #aa90d3;
  --lila-suave: #e9e1f5;

  /* neutros: la crema es el puente entre familias */
  --crema: #f7f2eb;
  --blanco: #ffffff;
  --tinta: #3e3e3f;

  /* tipografía */
  --f-titulo: "Switzer", "Figtree", system-ui, sans-serif;
  --f-marca: "Andes", "Figtree", system-ui, sans-serif;

  /* escala (escritorio; el móvil ajusta con clamp) */
  --t-display: clamp(36px, 4.3vw, 58px);
  --t-h1: clamp(32px, 4.2vw, 56px);
  --t-h2: clamp(28px, 3vw, 40px);
  --t-h3: 24px;
  --t-lead: 21px;
  --t-cuerpo: 19px;
  --t-peque: 15px;
  --t-etiqueta: 14px;

  --radio-tarjeta: 24px;
  --radio-pastilla: 999px;
}

/* ---------- base ---------- */

.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }

.ds {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-size: var(--t-cuerpo);
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ---------- tipografía ---------- */

.t-display {
  font-size: var(--t-display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.t-h1 { font-size: var(--t-h1); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.t-h2 { font-size: var(--t-h2); font-weight: 300; line-height: 1.15; }
.t-h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.25; }
.t-lead { font-size: var(--t-lead); font-weight: 300; line-height: 1.5; }
.t-peque { font-size: var(--t-peque); }

/* énfasis dentro de titulares: medio, no negrita bruta */
.t-display b, .t-h1 b, .t-h2 b { font-weight: 500; }
.t-display em, .t-h1 em, .t-h2 em { font-style: italic; font-weight: 400; }

/* etiqueta de sección: Andes Medium, caps, con punto de marca */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-marca);
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.etiqueta::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- color de acento por familia ---------- */

.acento-rojo { color: var(--rojo); }
.acento-lila { color: var(--lila); }

/* ---------- botones ---------- */

.boton-m360 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 34px;
  border: 0;
  border-radius: var(--radio-pastilla);
  font-family: var(--f-titulo);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.boton-m360:hover { transform: translateY(-1px); }
.boton-m360:active { transform: translateY(0); }
.boton-m360 svg { width: 15px; height: 15px; fill: currentColor; }

/* primario: rojo sobre claros */
.boton-m360--rojo { background: var(--rojo); color: var(--blanco); box-shadow: 0 10px 26px rgba(225, 87, 88, .32); }
.boton-m360--rojo:hover { box-shadow: 0 14px 32px rgba(225, 87, 88, .4); }

/* primario en bloque morado: blanco sobre morado */
.boton-m360--claro { background: var(--blanco); color: var(--morado); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }

/* secundario: enlace con subrayado, nunca un segundo botón */
.enlace-secundario {
  color: inherit;
  font-size: 17px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.enlace-secundario:hover { text-decoration-thickness: 2px; }

/* ---------- la U de la marca ---------- */

/* máscara U: foto con la base redondeada, como el isotipo y las piezas de IG */
.u-marco {
  position: relative;
  display: inline-block;
}
.u-marco img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 0 999px 999px;
}
.u-marco--arriba img { border-radius: 999px 999px 0 0; }

/* puntos de marca: acentos absolutos alrededor de una U o una tarjeta */
.punto {
  position: absolute;
  border-radius: 50%;
  width: 18px;
  height: 18px;
}
.punto--rojo { background: var(--rojo); }
.punto--lila { background: var(--lila); }
.punto--crema { background: var(--crema); }
.punto--blanco { background: var(--blanco); }

/* ---------- tarjetas ---------- */

/* tarjeta de síntoma: familia rosa sobre crema/blanco */
.tarjeta-sintoma {
  position: relative;
  padding: 34px 34px 30px;
  border-radius: var(--radio-tarjeta);
  background: var(--blanco);
}
.tarjeta-sintoma__nombre {
  font-size: 26px;
  font-weight: 500;
  color: var(--rojo);
  line-height: 1.2;
}
.tarjeta-sintoma__texto { margin-top: 10px; font-size: 18px; font-weight: 300; line-height: 1.45; }
.tarjeta-sintoma::after {
  content: "";
  position: absolute;
  top: 30px;
  right: 30px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rosa);
}

/* tarjeta testimonio: frase gancho grande + resto pequeño */
.tarjeta-testimonio {
  padding: 38px 36px 32px;
  border-radius: var(--radio-tarjeta);
  background: var(--blanco);
}
.tarjeta-testimonio__gancho {
  font-size: 24px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--tinta);
}
.tarjeta-testimonio__gancho::before { content: "“"; color: var(--rojo); font-weight: 500; }
.tarjeta-testimonio__gancho::after { content: "”"; color: var(--rojo); font-weight: 500; }
.tarjeta-testimonio__resto { margin-top: 14px; font-size: 16px; font-weight: 300; line-height: 1.5; }
.tarjeta-testimonio__firma {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.tarjeta-testimonio__inicial {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  font-weight: 500;
  font-size: 19px;
}
.tarjeta-testimonio__firma b { display: block; font-weight: 500; font-size: 17px; }
.tarjeta-testimonio__firma small { display: block; font-size: 14px; font-weight: 300; color: #8a8a8a; }

/* ---------- bloques por familia ---------- */

.bloque {
  padding: 90px 6vw;
  border-radius: 32px;
}
.bloque--rosa { background: var(--rosa-palo); }
.bloque--rojo { background: var(--rojo); color: var(--blanco); }
.bloque--morado { background: var(--morado); color: var(--blanco); }
.bloque--morado .acento { color: var(--lila); }
.bloque--lila { background: var(--lila-suave); }

/* ---------- marquesina (se conserva del sitio, con Andes) ---------- */

.cinta {
  background: var(--rojo);
  padding: 18px 0;
  overflow: hidden;
}
.cinta__pista {
  display: flex;
  gap: 44px;
  width: max-content;
  font-family: var(--f-marca);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  animation: cinta-desfile 80s linear infinite;
}
.cinta__pista i { font-style: normal; color: rgba(255, 255, 255, .38); }
@keyframes cinta-desfile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cinta__pista { animation: none; } }