/* ==========================================
   Jordi Ponsí Web Deluxe — Estil Principal
   Fitxer: estilo_deluxe.css
   Versió: PONSI_WEB_DELUXE_MODULAR_2025_FULL_FIX_UTF8
   Revisió: OPTIM_J6 — 11/10/2025
   Desenvolupat per: J. 6 & ChatGPT
   Descripció: Full d’estils principal de la versió Deluxe 2025.
   Manté estètica negra/daurada, animacions suaus, efectes moderns
   i optimització responsive per a tots els dispositius.
   ==========================================
   Compatibilitat i Rendiment
   Compatible amb: Chrome, Edge, Firefox, Safari, Opera
   Optimitzat per a: iPhone 16+, Android 14+, tablets i escriptoris moderns
   Codificació: UTF-8 sense BOM
   Rendiment: Animacions suaus amb transicions GPU-friendly
   Última revisió: 11/10/2025
   ========================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Arial', sans-serif;
  background-color: #000;
  color: #fff;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ===== INTRO SUAU ===== */
#intro-deluxe {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000; color: #f0db4f;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  z-index: 3000; text-align: center;
  animation: fadeOut 3s ease 2.5s forwards;
}
.intro-logo {
  position: relative;
  font-family: 'Orbitron', sans-serif;
  font-size: 3.8rem; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: red;
  text-shadow: 0 0 25px rgba(240,219,79,0.8);
  opacity: 0; transform: scale(0.7);
  animation: logoRedDeluxe 1.8s ease-out 0.5s forwards;
}
.intro-logo::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 260px; height: 260px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,219,79,0.25) 0%, rgba(0,0,0,0) 70%);
  opacity: 0; animation: glowBackground 2s ease-out 0.5s forwards;
  z-index: -1;
}
@keyframes logoRedDeluxe {
  0% { opacity: 0; transform: scale(0.7); text-shadow: 0 0 6px rgba(240,219,79,0.2); }
  40% { opacity: 1; transform: scale(1.06); text-shadow: 0 0 35px rgba(240,219,79,1); }
  100% { opacity: 1; transform: scale(1); text-shadow: 0 0 25px rgba(240,219,79,0.6); }
}
@keyframes glowBackground {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
}
.intro-text {
  font-size: 1.4rem; margin-top: 20px; opacity: 0;
  animation: showText 1s ease 1.8s forwards, pulseGlow 1.5s ease-in-out 2.8s infinite alternate;
}
@keyframes showText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { 0%,70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes pulseGlow { from { text-shadow: 0 0 10px rgba(240,219,79,0.6); } to { text-shadow: 0 0 25px rgba(240,219,79,0.9); } }

/* ===== TOPBAR ===== */
.topbar {
  position: fixed; top: 0; left: 0; width: 100%;
  display: flex; justify-content: center; align-items: center;
  padding: 10px 0; z-index: 1000;
  background: rgba(0,0,0,0.6);
  transition: background 0.4s ease, padding 0.3s ease;
  backdrop-filter: blur(8px);
}
.topbar.scrolled { background: rgba(0,0,0,0.95); padding: 8px 0; }
.topbar a img {
  width: 44px; height: 44px; margin: 0 10px;
  filter: brightness(0.85);
  transition: transform 0.3s ease, filter 0.3s ease;
}
.topbar a img:hover { transform: scale(1.15); filter: brightness(1.2); }

/* Menu desplegable */
.social-dropdown { position: relative; display: inline-block; }
.dropdown-content {
  display: none; position: absolute; top: 55px; left: 50%; transform: translateX(-50%);
  background-color: rgba(0,0,0,0.85);
  border-radius: 8px; padding: 5px 0; min-width: 140px; text-align: center; z-index: 9999;
}
.dropdown-content a {
  display: block; padding: 8px 12px; color: #f0db4f; text-decoration: none;
  font-size: 0.9rem; transition: background 0.3s;
}
.dropdown-content a:hover { background: rgba(240,219,79,0.15); color: #fff; }
.social-dropdown.open .dropdown-content { display: block !important; }

/* ===== HERO ===== */
.hero {
  position: relative;
  background: url("../imatges/estudi.png") no-repeat center center / cover;
  height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding-top: 80px; overflow: hidden; opacity: 0; transform: scale(1);
  animation: heroFadeZoom 5s ease-out forwards; animation-delay: 2.4s;
}
.hero::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
  pointer-events: none;
}
.hero h1, .hero p {
  position: relative; z-index: 1; color: #fff; font-family: 'Poppins', sans-serif;
  opacity: 0; text-shadow: 0 0 18px rgba(0,0,0,0.7);
}
.hero h1 {
  font-size: 3.2rem; transform: translateY(40px);
  animation: fadeInUpStrong 1.8s ease-out forwards 2.8s;
}
.hero p {
  font-size: 1.7rem; margin-top: 14px; transform: translateY(30px);
  animation: fadeInUpStrong 1.8s ease-out forwards 3.3s;
}
@keyframes heroFadeZoom {
  0% { opacity: 0; transform: scale(1); filter: brightness(0.6); }
  60% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1.05); }
}
@keyframes fadeInUpStrong {
  0% { opacity: 0; transform: translateY(60px); }
  60% { opacity: 1; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Efecte hover i reflex suau al text Hero */
.hero h1 span,
.hero p span {
  color: #fff;
  transition: color 0.4s ease, text-shadow 0.4s ease;
  animation: glowAuto 3s ease-in-out infinite alternate;
}
.hero h1 span:hover,
.hero p span:hover {
  color: #f0db4f;
  text-shadow: 0 0 15px rgba(240,219,79,0.6);
}
@keyframes glowAuto {
  from { text-shadow: 0 0 10px rgba(240,219,79,0.2); color: #fff; }
  to   { text-shadow: 0 0 25px rgba(240,219,79,0.7); color: #f0db4f; }
}

/* ===== SOBRE MI ===== */
.sobre-mi {
  background:#000; padding:80px 20px;
  display:flex; justify-content:center; align-items:center;
}
.sobre-mi-contenido {
  display:flex; justify-content:center; align-items:center;
  gap:60px; flex-wrap:wrap; max-width:1100px; margin:0 auto;
}
.sobre-mi-foto img {
  width:320px; max-width:100%; height:auto; border-radius:12px;
  box-shadow:0 0 25px rgba(240,219,79,0.4);
  border:2px solid rgba(240,219,79,0.3);
  transition:transform 0.4s ease, box-shadow 0.4s ease;
  object-fit:cover;
}
.sobre-mi-foto img:hover { transform:scale(1.04); box-shadow:0 0 45px rgba(240,219,79,0.7); }
.sobre-mi-texto {
  flex:1; text-align:left; font-size:1.1rem; line-height:1.7;
  color:#ddd; max-width:600px;
}
.sobre-mi-texto h2 {
  color:#f0db4f; font-size:2.4rem; margin-bottom:25px;
  font-family:'Orbitron',sans-serif; text-transform:uppercase; letter-spacing:1px;
}
.sobre-mi strong, .sobre-mi em {
  color:#f0db4f; transition:color 0.4s ease, text-shadow 0.4s ease;
}
.sobre-mi strong:hover, .sobre-mi em:hover {
  color:#fff; text-shadow:0 0 15px rgba(240,219,79,0.7);
}

/* Efecte i protecció de "J. 6" */
.sobre-mi .j6 {
  animation: glowJ6 3s ease-in-out infinite alternate;
  display: inline-block;
  white-space: nowrap;
}
@keyframes glowJ6 {
  from { text-shadow:0 0 8px rgba(240,219,79,0.3); color:#f0db4f; }
  to { text-shadow:0 0 20px rgba(240,219,79,0.9); color:red; }
}

/* Responsive */
@media (max-width:900px){
  .sobre-mi{flex-direction:column;text-align:center;}
  .sobre-mi-contenido{flex-direction:column;gap:30px;}
  .sobre-mi-texto{text-align:center;max-width:90%;}
  .sobre-mi-foto img{width:85%;margin-bottom:25px;}
}

/* ===== TITOLS GENERALS ===== */
.sobre-mi-texto h2, .portfolio h2, .servicios h2,
.contacto h2, .pagos-deluxe h2 {
  color:#f0db4f; font-family:'Orbitron',sans-serif;
  text-transform:uppercase; letter-spacing:2px;
  font-weight:700; font-size:2.3rem; margin-bottom:25px;
  text-align:center;
}
@media (min-width:901px){
  .sobre-mi-texto h2{text-align:left;}
}

/* ===== PORTFOLIO ===== */
.portfolio {
  background:#111; padding:80px 20px; text-align:center;
}
.portfolio iframe {
  border:none; border-radius:12px;
  box-shadow:0 0 20px rgba(240,219,79,0.3);
  width:90%; max-width:600px; height:380px; margin:20px 0;
}

/* ===== SERVEIS ===== */
.servicios {
  padding:60px 20px; background:#111; text-align:center;
}
.cards {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px; max-width:1000px; margin:auto;
}
.card {
  background:#222; padding:25px; border-radius:12px;
  transition:transform .3s,background .3s,box-shadow .4s,opacity 1s ease;
  opacity:0; transform:translateY(30px); cursor:pointer;
}
.card.visible {opacity:1;transform:translateY(0);}
.card:hover {
  transform:scale(1.05); background:#333;
  box-shadow:0 0 25px rgba(240,219,79,0.35);
}
.card h3 {color:#f0db4f;margin-bottom:10px;}
.card p {color:#f8eec4;}

/* ===== CONTACTE ===== */
.contacto {
  padding:60px 20px; background:#111; text-align:center;
}
.formulario {
  max-width:600px; margin:30px auto; text-align:left;
}
.formulario input, .formulario textarea {
  width:100%; padding:12px; margin-bottom:20px;
  border:none; border-radius:8px; background:#222;
  color:#fff; font-size:1rem;
}
.formulario button {
  background:#f0db4f; color:#000; border:none;
  padding:12px 20px; border-radius:8px; font-size:1rem;
  cursor:pointer; transition:background .3s ease;
}
.formulario button:hover {background:#e5c93d;}

/* ===== METODES DE PAGAMENT ===== */
.pagos-deluxe {
  background:#111; text-align:center; padding:50px 20px;
}
.pagos-deluxe p {color:#ddd; margin-bottom:30px;}
.btn-pago {
  display:inline-flex; align-items:center; gap:10px;
  background-color:#000; color:#f0db4f; font-weight:bold;
  padding:12px 28px; border:2px solid #f0db4f; border-radius:8px;
  text-decoration:none; margin:8px;
  box-shadow:0 0 15px rgba(240,219,79,0.4);
  transition:all 0.3s ease;
}
.btn-pago:hover {background-color:#f0db4f; color:#000;}
.nota-pago {color:#888; font-size:0.9rem; margin-top:25px;}
@media (max-width:600px){
  .btn-pago{width:85%;font-size:1rem;padding:12px 16px;}
}

/* ===== FOOTER ===== */
footer {
  background:#111; text-align:center;
  padding:15px; font-size:.9rem; color:#aaa;
}

/* ===== BOTO TORNAR AMUNT ===== */
#btnSubir {
  position:fixed; bottom:25px; right:25px;
  background:#f0db4f; color:#000; border:none;
  padding:12px 16px; border-radius:50%;
  font-size:20px; cursor:pointer;
  box-shadow:0 0 15px rgba(240,219,79,0.4);
  transition:opacity .3s,transform .3s,box-shadow .4s ease;
  opacity:0; visibility:hidden; z-index:999;
}
#btnSubir.visible {opacity:1;visibility:visible;}
#btnSubir:hover {
  box-shadow:0 0 25px rgba(240,219,79,0.8);
  transform:translateY(-4px);
}

/* ===== MODALS ===== */
.modal {
  display:none; position:fixed; z-index:2000; left:0; top:0;
  width:100%; height:100%; background-color:rgba(0,0,0,0.8);
  backdrop-filter:blur(4px);
}
.modal-content {
  background:#111; color:#fff;
  margin:10% auto; padding:25px 35px;
  border:2px solid rgba(240,219,79,0.4);
  border-radius:12px; max-width:520px;
  box-shadow:0 0 30px rgba(240,219,79,0.4);
  animation:aparecer 0.4s ease; text-align:center;
}
.cerrar {
  color:#f0db4f; float:right; font-size:26px;
  font-weight:bold; cursor:pointer;
}
.cerrar:hover {color:#fff; text-shadow:0 0 10px #f0db4f;}
.btn-solicitar {
  display:inline-block; margin-top:10px;
  padding:10px 20px; background:#f0db4f;
  color:#000; border-radius:8px; text-decoration:none; font-weight:bold;
}
.btn-solicitar:hover {background:#e5c93d;}
@keyframes aparecer {from{opacity:0;transform:scale(0.9);}to{opacity:1;transform:scale(1);}}

/* ===== WHATSAPP ===== */
.btn-wa-inline {
  display:inline-flex; align-items:center; gap:10px;
  background-color:#1fb255; color:#fff;
  padding:12px 24px; border-radius:8px;
  text-decoration:none; font-weight:bold; font-size:1rem;
  box-shadow:0 0 18px rgba(240,219,79,0.25);
  transition:all 0.3s ease;
}
.btn-wa-inline:hover {
  background-color:#1DA851;
  box-shadow:0 0 25px rgba(37,211,102,0.7);
}
.whatsapp-float {
  position:fixed; bottom:95px; right:25px;
  background-color:#25D366; color:#000;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 15px rgba(240,219,79,0.5);
  z-index:9999; transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-float:hover {
  transform:scale(1.1);
  box-shadow:0 0 25px rgba(240,219,79,0.9);
}
/* ===== MENÚS DESPLEGABLES INDEPENDENTS ===== */

/* Facebook */
.dropdown-facebook .dropdown-content {
  left: 5px;             /* petit desplaçament a la dreta */
  transform: none;
  background-color: rgba(0, 0, 0, 0.88);
  min-width: 150px;
}

/* YouTube */
.dropdown-youtube .dropdown-content {
  left: 50%;             /* centrat */
  transform: translateX(-50%);
  background-color: rgba(10, 10, 10, 0.9);
  min-width: 160px;
}

/* Responsive: correccions mòbil */
@media (max-width: 768px) {
  .dropdown-facebook .dropdown-content {
    left: 10px;
  }
  .dropdown-youtube .dropdown-content {
    left: 50%;
    transform: translateX(-50%);
  }
}