/* =====================================================================
   extra.css — FIC Corte Láser
   Complementa a styles.css (no lo reemplaza).
   1) Ajuste para páginas reales  2) Zonas y FAQ  3) Tema de temporada
   ===================================================================== */

/* 1) Cada archivo contiene una sola página: siempre visible */
.page { display: block !important; }

/* 2) Zonas de entrega y preguntas frecuentes */
.fic-zonas {
  max-width: 1100px; margin: 28px auto 0; padding: 0 20px; text-align: center;
}
.fic-zonas p {
  display: inline-block; margin: 0; padding: 12px 20px; border-radius: 12px;
  background: var(--gris2, #1a1a1a); border: 1px solid rgba(106,191,46,.25);
  color: var(--texto2, #aaa); font-size: .92rem; line-height: 1.5;
}
.fic-zonas strong { color: var(--verde, #6abf2e); }

.fic-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.fic-faq-item {
  background: var(--gris2, #1a1a1a); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; overflow: hidden;
}
.fic-faq-item summary {
  cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; position: relative;
  font-weight: 700; color: var(--texto, #f0f0f0); font-size: 1rem; line-height: 1.4;
}
.fic-faq-item summary::-webkit-details-marker { display: none; }
.fic-faq-item summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  color: var(--verde, #6abf2e); font-size: 1.4rem; font-weight: 400;
}
.fic-faq-item[open] summary::after { content: "–"; }
.fic-faq-item p {
  margin: 0; padding: 0 20px 18px; color: var(--texto2, #aaa); font-size: .93rem; line-height: 1.65;
}

.fic-terminos {
  max-width: 860px; margin: 48px auto 0; padding: 24px;
  background: var(--gris2, #1a1a1a); border: 1px solid rgba(255,255,255,.07); border-radius: 14px;
}
.fic-terminos h3 {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 1.5px;
  color: var(--texto, #f0f0f0); margin: 0 0 12px;
}
.fic-terminos ul { margin: 0; padding-left: 20px; }
.fic-terminos li { color: var(--texto2, #aaa); font-size: .88rem; line-height: 1.6; margin-bottom: 6px; }
.fic-terminos a { color: var(--verde, #6abf2e); }

/* 3) Tema de temporada (lo inserta tema.js) ------------------------- */
:root { --tema-1: #4a8f1e; --tema-2: #f5a800; --tema-texto: #ffffff; }

.tema-lienzo {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 900;
}

.tema-badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  padding: 8px 18px; border-radius: 999px; text-decoration: none;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; letter-spacing: 2px;
  color: var(--tema-texto); background: linear-gradient(90deg, var(--tema-1), var(--tema-2), var(--tema-1));
  background-size: 200% 100%; animation: tema-brillo 3s linear infinite, tema-entrada .6s ease-out both;
  box-shadow: 0 0 22px rgba(106,191,46,.45);
}

.tema-promo {
  position: relative; overflow: hidden; text-align: center; padding: 34px 20px 38px;
  background: linear-gradient(135deg, #0b1a04 0%, #111 55%, #1c1300 100%);
  border-top: 2px solid var(--tema-1); border-bottom: 2px solid var(--tema-2);
}
.tema-promo::before {
  content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent);
  animation: tema-barrido 4s ease-in-out infinite;
}
.tema-promo-etiqueta {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; color: var(--tema-2); margin-bottom: 8px;
}
.tema-promo h2 {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400; line-height: 1;
  font-size: clamp(2.4rem, 9vw, 4.4rem); letter-spacing: 2px; color: #fff; margin: 0 0 10px;
}
.tema-promo h2 span { color: var(--tema-2); display: inline-block; animation: tema-latido 1.8s ease-in-out infinite; }
.tema-promo p { color: #cfcfcf; max-width: 620px; margin: 0 auto 20px; font-size: 1rem; line-height: 1.55; }
.tema-promo-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
.tema-btn {
  display: inline-block; padding: 13px 24px; border-radius: 10px; text-decoration: none;
  font-weight: 800; font-size: .95rem; color: #fff; background: var(--tema-1);
  box-shadow: 0 6px 22px rgba(106,191,46,.4); transition: transform .2s;
}
.tema-btn:hover { transform: translateY(-2px); }
.tema-btn.sec { background: transparent; border: 2px solid var(--tema-2); color: var(--tema-2); box-shadow: none; }

.tema-pill {
  position: fixed; left: 14px; bottom: 18px; z-index: 950; max-width: 62vw;
  padding: 10px 16px; border-radius: 999px; text-decoration: none;
  font-weight: 800; font-size: .82rem; line-height: 1.2; color: #fff;
  background: linear-gradient(90deg, var(--tema-1), var(--tema-2));
  box-shadow: 0 6px 20px rgba(0,0,0,.5); animation: tema-entrada .6s ease-out both;
}

.tema-aviso {
  margin: 0 0 24px; padding: 16px 20px; border-radius: 12px; text-align: center;
  background: rgba(106,191,46,.12); border: 1px solid var(--tema-1);
  color: #fff; font-size: .95rem; line-height: 1.5;
}
.tema-aviso a { color: var(--tema-2); font-weight: 700; }

@keyframes tema-brillo { to { background-position: 200% 0; } }
@keyframes tema-barrido { 0% { left: -40%; } 60%, 100% { left: 110%; } }
@keyframes tema-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes tema-entrada { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .tema-badge, .tema-promo::before, .tema-promo h2 span, .tema-pill { animation: none; }
}