/* ==========================================================================
   faq.css — Preguntas frecuentes (#faq)                 prefijo: .faq-
   A la izquierda el encabezado y una foto con la tarjeta de WhatsApp
   encastrada (mismo recorte .notch-cut de Nosotros y Equipo); a la derecha
   el acordeón (<details> nativo).
   ========================================================================== */

/* sin padding propio: Equipo deja aire abajo y Contacto arriba.
   Sin brillos de fondo: el recorte encastrado se pinta con --bg. */
.faq { position: relative; }

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(2.5rem, 1.5rem + 4vw, 6rem);
}

/* en pantallas altas la columna izquierda acompaña mientras se leen las respuestas */
@media (min-width: 961px) and (min-height: 820px) {
  .faq-side { position: sticky; top: calc(var(--hdr-h) + var(--hdr-top) + 2rem); }
}

/* ---------- foto con tarjeta encastrada ---------- */
.faq-media {
  --cut-gap: .6rem;
  --cut-r: 1.1rem;
  position: relative;
  margin-top: 2.5rem;
  max-width: 36rem;
}
.faq-photo {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--r-xl);
}
.faq-cta {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: 82%;
}
.faq-cta__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.4rem 1rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background:
    linear-gradient(160deg, var(--surface-3), var(--surface)) padding-box,
    linear-gradient(200deg, var(--line-strong), rgba(193, 44, 229, .75)) border-box;
  box-shadow: 0 18px 50px -14px rgba(193, 44, 229, .55);
}
.faq-cta__ic {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-btn);
  color: #fff;
  box-shadow: 0 0 20px rgba(193, 44, 229, .55);
  transition: transform var(--t-med) var(--ease-out);
}
.faq-cta__ic svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.faq-cta__text { display: grid; gap: .1rem; line-height: 1.3; }
.faq-cta__text strong { color: var(--text); font-size: var(--fs-base); }
.faq-cta__text span { color: var(--brand-hi); font-size: var(--fs-sm); font-weight: 700; transition: color var(--t-fast) var(--ease); }
.faq-cta__card:hover .faq-cta__ic { transform: scale(1.08) rotate(-8deg); }
.faq-cta__card:hover .faq-cta__text span { color: var(--text); }

/* ---------- acordeón ---------- */
.faq-list { display: grid; gap: .9rem; }

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  interpolate-size: allow-keywords;     /* permite animar el alto hasta "auto" (Chrome/Edge) */
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.faq-item:hover { border-color: var(--line-strong); }
.faq-item[open] {
  border-color: rgba(193, 44, 229, .45);
  background:
    radial-gradient(70% 90% at 0% 100%, rgba(193, 44, 229, .14), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 24px 60px -30px rgba(193, 44, 229, .6);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.3rem 1.25rem 1.3rem 1.5rem;
  border-radius: var(--r-lg);
  list-style: none;
  cursor: pointer;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline-offset: -2px; border-radius: var(--r-lg); }

/* + que pasa a − al abrir */
.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-2);
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-med) var(--ease-out);
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .75rem;
  height: 2px;
  margin: -1px 0 0 -.375rem;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-med) var(--ease-out);
}
.faq-item__icon::after { transform: rotate(90deg); }
.faq-item summary:hover .faq-item__icon { border-color: rgba(193, 44, 229, .55); color: var(--text); }
.faq-item[open] .faq-item__icon {
  border-color: transparent;
  background: var(--grad-btn);
  color: #fff;
  transform: rotate(180deg);
}
.faq-item[open] .faq-item__icon::after { transform: rotate(0deg); }

.faq-item__body {
  padding: 0 1.5rem 1.6rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* apertura animada donde el navegador lo permite; en el resto abre al instante */
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }

.faq-checks {
  display: grid;
  gap: .6rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}
.faq-checks li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
}
.faq-checks svg {
  flex-shrink: 0;
  width: 1.3rem;
  height: 1.3rem;
  padding: .25rem;
  border: 1.5px solid var(--brand);
  border-radius: 50%;
  color: var(--brand-hi);
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-media { max-width: 32rem; }
}

@media (max-width: 640px) {
  .faq-media { --cut-gap: .5rem; --cut-r: .9rem; margin-top: 2rem; }
  .faq-cta { max-width: 90%; }
  .faq-cta__card { gap: .7rem; padding: .75rem 1rem .75rem .75rem; }
  .faq-cta__ic { width: 2.25rem; height: 2.25rem; }
  .faq-cta__ic svg { width: 1.1rem; height: 1.1rem; }
  .faq-cta__text strong { font-size: var(--fs-sm); }
  .faq-cta__text span { font-size: var(--fs-xs); }
  .faq-item summary { padding: 1.1rem 1rem 1.1rem 1.15rem; gap: 1rem; }
  .faq-item__body { padding: 0 1.15rem 1.35rem; font-size: var(--fs-sm); }
  .faq-item__icon { width: 2rem; height: 2rem; }
}