/* ============================================================
   Keto Real · Taller Intensivo — piezas propias que no existen
   en la landing de referencia: sección del equipo, aviso de
   cookies (Pixel solo con consentimiento) y página de gracias.
   Usa los tokens de tokens.css.
   ============================================================ */

/* ---------- Equipo (B/N) ---------- */
.equipo { padding-block: var(--section-py); background: var(--c-bg-alt); }

.equipo__tagline {
  font-family: var(--ff-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent-text);
  text-align: center;
}

.equipo__tit {
  margin-top: var(--sp-3);
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-text);
  text-align: center;
}

.equipo__sub {
  margin: var(--sp-3) auto 0;
  max-width: 34ch;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-text-soft);
  text-align: center;
}

.equipo__rejilla {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-4);
  list-style: none;
  padding: 0;
}

.equipo__card { text-align: center; }

.equipo__card img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  filter: grayscale(1);
  background: var(--c-bg-card);
}

.equipo__nombre {
  margin-top: var(--sp-3);
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  color: var(--c-text);
}

.equipo__rol {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.equipo__cta {
  display: block;
  width: fit-content;
  margin: var(--sp-7) auto 0;
  padding: .95rem 2rem;
  border-radius: var(--r-full);
  background: var(--c-accent-fill);
  color: var(--c-accent-ink);
  font-family: var(--ff-body);
  font-size: 1.02rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(237, 30, 121, .3);
  transition: background var(--t-fast), transform var(--t-fast);
}
.equipo__cta:hover { background: var(--c-accent-fill-h); transform: translateY(-1px); }

@media (min-width: 760px) {
  .equipo__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .equipo__rejilla { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
}

/* ---------- Distintivo sobre la foto del hero ---------- */
.foto-badge {
  position: absolute;
  left: 50%;
  bottom: clamp(.9rem, 2vw, 1.4rem);
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  padding: .5rem 1rem;
  border-radius: var(--r-full);
  border: 1px solid var(--c-accent-line);
  background: rgba(10, 10, 10, .78);
  backdrop-filter: blur(4px);
  font-family: var(--ff-display);
  font-size: clamp(.68rem, 1.6vw, .8rem);
  font-weight: var(--fw-semi);
  letter-spacing: .14em;
  color: var(--c-text);
}

.foto-badge__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 8px 2px rgba(237, 30, 121, .55);
  animation: foto-badge-pulso 1.6s ease-in-out infinite;
}

@keyframes foto-badge-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .foto-badge__punto { animation: none; }
}

/* Descargo de salud del pie */
.pie__salud {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--c-text-muted);
}

/* ---------- Aviso de cookies ---------- */
.aviso-cookies {
  position: fixed;
  inset-inline: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 90; /* por encima de la barra fija de la fecha */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  max-width: 640px;
  margin-inline: auto;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--c-bg-elevated);
  box-shadow: var(--shadow-lg);
}
.aviso-cookies[hidden] { display: none; }

.aviso-cookies__txt {
  flex: 1 1 260px;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--c-text-soft);
}
.aviso-cookies__txt a { color: var(--c-accent-text); }

.aviso-cookies__botones { display: flex; gap: var(--sp-3); }

.aviso-cookies__ok,
.aviso-cookies__no {
  padding: .55rem 1.2rem;
  border-radius: var(--r-full);
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.aviso-cookies__ok {
  border: 0;
  background: var(--c-accent-fill);
  color: var(--c-accent-ink);
}
.aviso-cookies__ok:hover { background: var(--c-accent-fill-h); }
.aviso-cookies__no {
  border: 1px solid var(--c-border-strong);
  background: transparent;
  color: var(--c-text-soft);
}
.aviso-cookies__no:hover { border-color: rgba(255, 255, 255, .3); }

/* ---------- Bloque "Tu inicio de consulta" ---------- */
/* La foto de la consulta con el móvil del test solapado: la foto es la
   consulta real, el móvil es la puerta digital a esa consulta. */
.consulta__media { position: relative; overflow: visible; }

.consulta__movil {
  display: block;
  position: absolute;
  z-index: 3;
  right: 4%;
  bottom: clamp(-1rem, -1.5vw, -1.5rem);
  width: clamp(96px, 24%, 150px);
  border-radius: 18px;
  border: 4px solid #1C1C1C;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: rotate(4deg);
  background: #000;
}
.consulta__movil img { display: block; width: 100%; height: auto; }
.consulta__media > img { border-radius: var(--r-lg); }

/* En escritorio, fases.css colapsa .cierre__media (altura 0 + img absoluta)
   para que el cuaderno del original sobresalga de la tarjeta. Nuestra foto
   de la consulta va contenida en su columna: se restaura el flujo normal. */
@media (min-width: 900px) {
  .consulta__media { height: auto; max-width: 460px; margin-inline: auto; }
  .consulta__media > img {
    position: static;
    width: 100%;
    max-width: 100%;
    transform: none;
  }
  .cierre__tarjeta:hover .consulta__media > img { transform: translateY(-6px) rotate(-1deg); }

  /* La captura del test dentro del marco del móvil también cae bajo la regla
     .cierre__media img de escritorio: se restaura igual. */
  .consulta__movil img {
    position: static;
    width: 100%;
    max-width: 100%;
    transform: none;
  }
  .cierre__tarjeta:hover .consulta__movil img { transform: none; }
}

/* Caja de regalo del bloque del test: emoji grande en el eyebrow y lazo
   en la esquina de la tarjeta para que se LEA como regalo de un vistazo. */
.regalo-icono {
  display: inline-block;
  font-size: 1.5em;
  margin-right: .35rem;
  transform: translateY(2px) rotate(-8deg);
}
.cierre__tarjeta::after {
  content: '🎁';
  position: absolute;
  top: -22px;
  right: clamp(1rem, 4vw, 2.5rem);
  font-size: 52px;
  transform: rotate(10deg);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35));
}