/* ==========================================================================
   FAQ Familias · Capa de rediseño «Alineación + hero y accesos» (29-sep-2026)
   --------------------------------------------------------------------------
   Hallmark · genre: playful · macrostructure: Workbench (página de app)
   design-system: el de iesquijada.com (css/estilo.css · propuesta 3 «luminosa»)
   --------------------------------------------------------------------------
   CAPA ADITIVA. Se carga DESPUÉS de style.css y solo redefine tokens y
   re-estiliza. No toca la lógica (app.js), el contenido (data.js) ni los
   nombres de clase: todo lo que genera el JS sigue funcionando igual.
   REVERTIR = quitar el <link> a este fichero en index.html.

   Por qué: el FAQ usaba otra paleta (azul de plantilla #1d4ed8 + teal) y otra
   tipografía (Outfit/Plus Jakarta) que la web del centro. Aquí adopta el
   idioma de la landing: crema, turquesa, coral, Poppins + Nunito, radios
   grandes, tarjetas con círculo decorativo y movimiento suave.

   Contrastes medidos (WCAG AA = 4.5 en texto normal):
     turquesa profundo #12707c sobre blanco ....... 5.78 ✅
     turquesa profundo sobre turquesa claro ....... 5.24 ✅
     gris #5d7280 sobre crema ..................... 4.82 ✅
     gris sobre blanco ............................ 5.02 ✅
     tinta #14212b sobre coral #ff7a59 ............ 6.38 ✅ (por eso el botón
        destacado lleva texto OSCURO: blanco sobre coral solo da 2.57 ❌)
     turquesa #22a8b8 sobre blanco ................ 2.85 ❌ → solo decoración
        (bordes, subrayados, fondos de icono), nunca texto ni texto encima.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Paleta de la web del centro */
  --turq: #22a8b8;
  --turq-profundo: #12707c;
  --turq-claro: #e6f7f9;
  --coral: #ff7a59;
  --coral-osc: #c9421f;
  --coral-claro: #fff1ec;
  --amarillo: #ffcc4d;
  --morado: #4a5ff5;
  --crema: #f7fbfc;
  --out: cubic-bezier(.16, 1, .3, 1);
  --sombra: 0 16px 40px -18px rgba(20, 33, 43, .22);
  --sombra-alta: 0 30px 54px -22px rgba(20, 33, 43, .3);

  /* Alias sobre los nombres que YA usa el FAQ: así el modo oscuro sigue vivo */
  --color-primary: #12707c;
  --color-primary-hover: #0d545d;
  --color-primary-light: #e6f7f9;
  --color-primary-rgb: 18, 112, 124;
  --color-accent: #ff7a59;
  --color-accent-light: #fff1ec;

  --bg-main: #f7fbfc;
  --bg-surface: #ffffff;
  --bg-surface-glass: rgba(255, 255, 255, .9);
  --border-color: #e2eef0;
  --border-focus: #12707c;

  --text-main: #14212b;
  --text-muted: #5d7280;
  --text-subtle: #7c919c;

  --shadow-sm: 0 2px 10px -6px rgba(20, 33, 43, .16);
  --shadow-md: 0 16px 40px -18px rgba(20, 33, 43, .22);
  --shadow-lg: 0 30px 54px -22px rgba(20, 33, 43, .3);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
}

[data-theme="dark"] {
  --turq-claro: #123039;
  --turq-profundo: #7fd8e4;   /* en oscuro, el turquesa legible es el claro */
  --turq: #4fbccb;
  --coral-claro: #2a1b16;
  --crema: #0e1a21;

  --color-primary: #7fd8e4;          /* 7,4:1 sobre el fondo oscuro */
  --color-primary-hover: #a5e6ef;
  --color-primary-light: #12303a;
  --color-primary-rgb: 127, 216, 228;
  --color-accent: #ff9c80;
  --color-accent-light: #2a1b16;

  --bg-main: #0e1a21;
  --bg-surface: #16272f;
  --bg-surface-glass: rgba(22, 39, 47, .9);
  --border-color: #264450;
  --border-focus: #7fd8e4;

  --text-main: #eaf4f6;
  --text-muted: #a9c2cb;             /* 7,1:1 sobre #16272f */
  --text-subtle: #8aa6b0;

  --sombra: 0 18px 40px -20px rgba(0, 0, 0, .62);
  --sombra-alta: 0 30px 54px -22px rgba(0, 0, 0, .72);
  --shadow-sm: 0 2px 10px -6px rgba(0, 0, 0, .5);
  --shadow-md: 0 16px 40px -18px rgba(0, 0, 0, .62);
  --shadow-lg: 0 30px 54px -22px rgba(0, 0, 0, .72);
}

/* ------------------------------------------------------------------ base -- */
body {
  font-family: var(--font-body);
  background: var(--bg-main);
  color: var(--text-main);
  line-height: 1.65;
  overflow-x: clip;
}

h1, h2, h3, h4, .hero-title, .results-title, .empty-state-title,
.modal-header h3, .brand-titles h1, .wizard-step h4 {
  font-family: var(--font-display);
  letter-spacing: -.01em;
  line-height: 1.15;
}

::selection { background: var(--turq-claro); color: var(--turq-profundo); }
[data-theme="dark"] ::selection { color: #0e1a21; }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.app-container {
  max-width: 1080px;
  padding: 16px 18px 8px;
}

/* -------------------------------------------------------------- cabecera -- */
header.glass-panel {
  top: 10px;
  padding: 11px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-surface-glass);
  box-shadow: 0 6px 24px -20px rgba(20, 33, 43, .55);
}

.brand-wrapper { gap: 12px; }

.brand-titles h1 {
  font-size: 1.16rem;
  font-weight: 700;
}

.brand-tag {
  background: var(--turq-claro);
  color: var(--turq-profundo);
  border-radius: var(--radius-full);
  font-weight: 700;
  letter-spacing: .08em;
}

.brand-titles p { color: var(--text-muted); }

.btn-icon {
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  transition: transform .3s var(--out), border-color .3s var(--out),
              color .3s var(--out), background .3s var(--out);
}

.btn-icon:hover {
  transform: translateY(-2px);
  border-color: var(--turq);
  color: var(--turq-profundo);
  background: var(--turq-claro);
}

/* ------------------------------------------------------- hero + manchas -- */
.hero-section {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 44px 26px 34px;
  margin-bottom: 26px;
  border-radius: 32px;
  background: linear-gradient(160deg, #f2fbfc 0%, #e9f7fa 55%, #fdf6ec 100%);
  box-shadow: var(--sombra);
}

[data-theme="dark"] .hero-section {
  background: linear-gradient(160deg, #13303a 0%, #10262e 55%, #241f1a 100%);
}

.hero-section > * {
  position: relative;
  z-index: 2;
}

/* Ojo con la especificidad: `.hero-section > *` (arriba) pondría los blobs en
   flujo. Con el selector compuesto (2 clases) ganan ellos. */
.hero-section > .blob {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .5;
  pointer-events: none;
  animation: respira 12s ease-in-out infinite;
}

.blob.b1 {
  width: 300px; height: 300px; top: -120px; right: -40px;
  background: radial-gradient(circle at 30% 30%, #8fe3ea, transparent 68%);
}
.blob.b2 {
  width: 230px; height: 230px; bottom: -110px; left: -50px;
  background: radial-gradient(circle at 40% 40%, #ffd79b, transparent 68%);
  animation-delay: -4s;
}
.blob.b3 {
  width: 150px; height: 150px; top: 26%; left: 54%;
  background: radial-gradient(circle at 50% 50%, #ffb9a6, transparent 68%);
  animation-delay: -7s;
}

@keyframes respira {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(22px, -20px) scale(1.06); }
  66%      { transform: translate(-16px, 14px) scale(.96); }
}

.hero-subtitle {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--turq-profundo);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--turq-claro);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}

[data-theme="dark"] .hero-subtitle {
  background: rgba(18, 48, 57, .6);
  border-color: #1d4b57;
}

.hero-title {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

.hero-desc {
  color: var(--text-muted);
  font-size: 1.03rem;
  max-width: 62ch;
  margin: 0 auto 24px;
}

/* ------------------------------------------------------------- buscador --- */
.search-container { max-width: 720px; margin: 0 auto 22px; }

.search-input {
  padding: 18px 52px 18px 54px;
  font-size: 1.02rem;
  border: 2px solid transparent;
  background: var(--bg-surface);
  box-shadow: var(--sombra);
  transition: box-shadow .3s var(--out), border-color .3s var(--out);
}

.search-input::placeholder { color: var(--text-subtle); }

.search-input:focus {
  border-color: var(--turq);
  box-shadow: 0 0 0 5px var(--turq-claro), var(--sombra-alta);
}

.search-icon { color: var(--turq-profundo); left: 20px; }

.search-chip {
  padding: 7px 14px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(20, 33, 43, .05);
}

.search-chip:hover {
  background: var(--turq-claro);
  border-color: var(--turq);
  color: var(--turq-profundo);
  transform: translateY(-2px);
}

.search-chips-label { color: var(--text-muted); font-weight: 700; }

/* ------------------------------------------------------- acciones rápidas -- */
.btn-quick {
  padding: 13px 22px;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: transform .3s var(--out), box-shadow .3s var(--out),
              border-color .3s var(--out), color .3s var(--out),
              background .3s var(--out);
}

.btn-quick:hover {
  transform: translateY(-3px);
  border-color: var(--turq);
  color: var(--turq-profundo);
  box-shadow: var(--sombra);
}

/* Destacado: coral con texto OSCURO (6,38:1). Con blanco sería 2,57 ❌ */
.btn-quick-featured {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #14212b !important;
  box-shadow: 0 12px 26px -14px rgba(201, 66, 31, .7);
}

.btn-quick-featured:hover {
  background: #ff8f73 !important;
  color: #14212b !important;
}

/* ---------------------------------------------------------- categorías ---- */
.categories-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* Tarjeta calcada de la landing (.tarjeta): blanca, radio 24, sombra y un
   círculo decorativo que crece al pasar el ratón. */
.category-card {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  text-align: left;
  gap: 14px;
  padding: 22px;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--sombra);
  transition: transform .45s var(--out), box-shadow .45s var(--out);
}

.category-card::after {
  content: '';
  position: absolute;
  right: -46px; bottom: -46px;
  width: 132px; height: 132px;
  border-radius: 50%;
  background: var(--turq-claro);
  transition: transform .5s var(--out);
  z-index: 1;
}

.category-card > * { position: relative; z-index: 2; }

.category-card:hover {
  transform: translateY(-9px);
  box-shadow: var(--sombra-alta);
  border: none;
}

.category-card:hover::after { transform: scale(1.7); }

.category-card.active {
  background: var(--bg-surface);
  box-shadow: 0 0 0 2px var(--turq-profundo), var(--sombra-alta);
  color: var(--text-main);
}

.category-icon {
  width: 54px; height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2ba7b7, var(--turq-profundo));
  color: #ffffff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

/* Rotación cromática como en la landing (cada 4 tarjetas) */
.category-card:nth-child(4n+2) .category-icon {
  background: linear-gradient(135deg, #ec6a45, var(--coral-osc));
}
.category-card:nth-child(4n+3) .category-icon {
  background: linear-gradient(135deg, #ffd971, #ffc63d);
  color: #5f4600;
}
.category-card:nth-child(4n) .category-icon {
  background: linear-gradient(135deg, #7b8cff, var(--morado));
}

.category-card.active .category-icon {
  background: linear-gradient(135deg, #2ba7b7, var(--turq-profundo));
  color: #ffffff;
  box-shadow: 0 0 0 3px var(--turq-claro);
}

.category-title {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
}

.section-label {
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 18px;
}

/* ------------------------------------------------------ resultados y FAQ -- */
.results-title { font-size: 1.28rem; font-weight: 700; }

.btn-clear-filter {
  font-family: var(--font-display);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-weight: 600;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--turq-profundo);
  transition: background .25s var(--out), border-color .25s var(--out);
}

.btn-clear-filter:hover {
  background: var(--turq-claro);
  border-color: var(--turq);
}

.faq-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .35s var(--out), border-color .35s var(--out),
              transform .35s var(--out);
}

.faq-item:hover {
  border-color: var(--turq);
  transform: translateY(-2px);
}

.faq-item.active {
  border-color: var(--turq-profundo);
  box-shadow: var(--sombra);
}

.faq-question-btn {
  font-family: var(--font-display);
  font-size: .99rem;
  font-weight: 600;
  padding: 20px 22px;
}

.faq-category-badge {
  background: var(--turq-claro);
  color: var(--turq-profundo);
  border-radius: var(--radius-full);
  font-weight: 700;
  letter-spacing: .06em;
}

.faq-chevron { color: var(--turq-profundo); }

.faq-answer {
  border-top: 1px solid var(--border-color);
  font-size: .96rem;
  padding: 18px 22px 22px;
}

.faq-link, .faq-answer a {
  color: var(--turq-profundo);
  font-weight: 600;
  text-decoration-color: var(--turq);
}

.faq-tag {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-weight: 600;
}

.faq-alert-box {
  border-radius: var(--radius-md);
  border-left-width: 4px;
}

.empty-state-icon {
  background: var(--turq-claro);
  border-radius: var(--radius-full);
  width: 84px; height: 84px;
  display: grid;
  place-items: center;
  margin: 0 auto 6px;
}

/* --------------------------------------------------------- modales, etc. -- */
.modal-content {
  border-radius: 26px;
  box-shadow: var(--sombra-alta);
}

.modal-header h3 { font-weight: 700; }

.modal-close-btn:hover { background: var(--turq-claro); color: var(--turq-profundo); }

.wizard-option-btn {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  transition: transform .3s var(--out), border-color .3s var(--out),
              box-shadow .3s var(--out);
}

.wizard-option-btn:hover {
  border-color: var(--turq);
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}

.wizard-result { border-radius: var(--radius-md); }
.wizard-back-btn { border-radius: var(--radius-full); }

.contact-icon {
  background: var(--turq-claro);
  color: var(--turq-profundo);
  border-radius: var(--radius-sm);
}

.pwa-banner {
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-alta);
  border: 1px solid var(--border-color);
}

.pwa-btn-install {
  border-radius: var(--radius-full);
  background: var(--turq-profundo);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 600;
}

.btn-top {
  background: var(--turq-profundo);
  color: #ffffff;
  box-shadow: var(--sombra);
  transition: transform .3s var(--out), background .3s var(--out);
}

.btn-top:hover { background: var(--color-primary-hover); transform: translateY(-3px); }

/* ------------------------------------------------------------------- pie -- */
footer {
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 26px 12px 14px;
}

.footer-links a { color: var(--turq-profundo); }

/* ------------------------------------------------- aparición al bajar ---- */
/* Las clases .rv/.v las pone el JS (nunca el HTML): si fallara el JS, la
   página se ve entera igualmente — nada queda oculto. */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--out), transform .7s var(--out);
}
.rv.v { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .blob { animation: none; }
  .category-card, .faq-item, .btn-quick, .btn-icon { transition: none; }
  .category-card:hover, .btn-quick:hover, .btn-icon:hover, .faq-item:hover { transform: none; }
  .category-card:hover::after { transform: none; }
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 980px) {
  .categories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mientras hay una búsqueda activa, en pantalla estrecha los tres accesos
   rápidos (que van apilados a ancho completo) empujan los resultados fuera de
   la pantalla. Ocultan igual que la rejilla de categorías: el usuario busca una
   respuesta, no un atajo. En pantalla ancha son una fila y se quedan. */
@media (max-width: 700px) {
  body.buscando .quick-actions { display: none; }
  /* Con 7 categorías en 2 columnas, la última queda sola: a ancho completo
     ocupa la fila y no deja medio hueco. */
  .category-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Al buscar, el hero solo contiene el buscador y los chips: se recorta el
   relleno inferior para que los resultados suban. */
body.buscando .hero-section { padding-bottom: 22px; }
body.buscando .search-container { margin-bottom: 12px; }

@media (max-width: 700px) {
  .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .hero-section { padding: 34px 18px 26px; border-radius: 26px; }
  .hero-desc { font-size: .98rem; }
  .category-card { padding: 18px; }
  .category-icon { width: 48px; height: 48px; border-radius: 16px; }
  .blob.b1 { width: 220px; height: 220px; }
  .blob.b2 { width: 170px; height: 170px; }
  .blob.b3 { width: 110px; height: 110px; }
  .search-input { padding: 16px 46px 16px 48px; font-size: .98rem; }
}