/*
Theme Name: Musica360
Theme URI: https://musica360.local
Author: Codex
Description: Tema WordPress generado desde index.html para Musica360.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: musica360
*/

:root {
      --bg: #050505;
      --paper: #f8f6f3;
      --white: #fafafa;
      --orange: #fd603a;
      --pink: #e261ed;
      --yellow: #dce75c;
      --blue: #2451c4;
      --blue-soft: #7ba5d7;
      --text: #121212;
      --muted: #d8d8d8;
      --radius: 28px;
      --shadow: 0 20px 60px rgba(0,0,0,.16);
      --max: 1220px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: Inter, Arial, sans-serif; background: var(--paper); color: var(--text); }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    .container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
    .fun-title { font-family: Arial Black, Impact, sans-serif; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; line-height: .92; }
    .eyebrow { display:inline-block; padding:10px 16px; border-radius:999px; background: var(--yellow); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
    .soft-chip { display:inline-block; padding:8px 14px; border-radius:999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color:var(--white); font-size:13px; }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 22px; border-radius:999px; font-weight:800; border:2px solid transparent; transition:.25s ease; }
    .btn-primary { background: var(--orange); color:white; }
    .btn-secondary { background: transparent; color:white; border-color: rgba(255,255,255,.35); }
    .btn:hover { transform: translateY(-2px); }

    header { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); background: rgba(248,246,243,.74); border-bottom:1px solid rgba(0,0,0,.06); }
    .nav { display:flex; align-items:center; justify-content:space-between; gap:18px; padding: 14px 0; }
    .brand { display:flex; align-items:center; gap:12px; font-weight:900; }
    .brand-badge { width:44px; height:44px; border-radius:50%; background:var(--bg); color:var(--white); display:grid; place-items:center; font-size:10px; font-weight:900; overflow:hidden; }
    .brand-badge img { width:100%; height:100%; object-fit:cover; }
    .nav-toggle { display:none; border:0; background:var(--bg); color:var(--white); width:48px; height:48px; border-radius:16px; padding:0; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
    .nav-toggle span { display:block; width:20px; height:2px; background:currentColor; border-radius:999px; transition:.25s ease; }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-links { display:flex; gap:16px; flex-wrap:wrap; font-weight:700; font-size:14px; }
    .nav-links .nav-links-list { display:flex; gap:16px; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
    .nav-links .nav-links-list li { margin:0; padding:0; list-style:none; }
    .nav-links .nav-links-list a { font-weight:700; font-size:14px; }
    .nav-links a { font-weight:700; font-size:14px; }

    .hero { background: var(--bg); color: var(--white); position: relative; overflow: hidden; }
    .hero::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at top right, rgba(226,97,237,.22), transparent 30%), radial-gradient(circle at bottom left, rgba(36,81,196,.28), transparent 28%); pointer-events:none; }
    .hero-wrap { position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: center; padding: 42px 0 56px; }
    .hero-copy h1 { font-size: clamp(48px, 9vw, 96px); margin: 16px 0 18px; max-width: 9ch; }
    .hero-copy p { font-size: clamp(18px, 2.2vw, 24px); color: #eaeaea; max-width: 650px; line-height: 1.28; }
    .hero-cta { display:flex; gap:14px; flex-wrap:wrap; margin-top: 28px; }
    .hero-note { display:flex; gap:10px; flex-wrap:wrap; margin-top: 22px; }

    .slider { position:relative; min-height: 610px; border-radius: 36px; overflow:hidden; box-shadow: var(--shadow); background:#111; }
    .slide { position:absolute; inset:0; opacity:0; animation: fade 18s infinite; }
    .slide:nth-child(1){ animation-delay:0s; }
    .slide:nth-child(2){ animation-delay:6s; }
    .slide:nth-child(3){ animation-delay:12s; }
    .slide img { width:100%; height:100%; object-fit:cover; }
    .slide::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.42), transparent 42%); }
    .slide-caption { position:absolute; left:22px; bottom:20px; right:22px; z-index:2; display:flex; justify-content:space-between; gap:14px; align-items:end; }
    .caption-box { background: rgba(250,250,250,.92); color:#111; padding:14px 16px; border-radius: 18px; max-width: 320px; box-shadow: var(--shadow); }
    .dots { display:flex; gap:8px; }
    .dot { width:12px; height:12px; border-radius:50%; background: rgba(255,255,255,.55); }
    .dot:nth-child(1){ background: var(--orange); }
    @keyframes fade { 0%, 30% { opacity:1; } 33.33%, 100% { opacity:0; } }

    .story-strip { background: linear-gradient(90deg, var(--blue) 0 25%, var(--orange) 25% 50%, var(--pink) 50% 75%, var(--yellow) 75% 100%); padding: 14px 0; color:#111; font-weight:900; text-transform:uppercase; overflow:hidden; white-space:nowrap; }
    .story-strip span { display:inline-block; padding-left:100%; animation: marquee 22s linear infinite; }
    @keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-100%); } }

    section { padding: 86px 0; }
    .intro-grid { display:grid; grid-template-columns: .95fr 1.05fr; gap: 26px; align-items:center; }
    .panel { background:white; border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; }
    .panel.p-dark { background: var(--bg); color:var(--white); }
    .panel.pad { padding: 28px; }
    .intro-grid h2 { font-size: clamp(34px, 5vw, 64px); margin: 14px 0; }
    .lead { font-size: 20px; line-height: 1.45; }
    .mini-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:14px; margin-top: 22px; }
    .mini-card { padding:18px; border-radius: 22px; font-weight:700; min-height:110px; display:flex; align-items:end; }

    .section-head { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom: 28px; }
    .section-head h2 { font-size: clamp(34px, 6vw, 72px); margin: 0; max-width: 11ch; }
    .section-head p { max-width: 520px; font-size: 18px; line-height: 1.5; margin: 0; }

    .cards { display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .service-card { position:relative; overflow:hidden; border-radius: 32px; background: #fff; box-shadow: var(--shadow); min-height: 520px; display:flex; flex-direction:column; }
    .service-card .media { height: 290px; position:relative; overflow:hidden; }
    .service-card .media img { width:100%; height:100%; object-fit:cover; }
    .service-card .media::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.12), transparent 45%); }
    .sticker { position:absolute; top:16px; right:16px; padding:10px 14px; border-radius:999px; font-size:12px; font-weight:900; text-transform:uppercase; }
    .service-card .body { padding: 24px; display:flex; flex-direction:column; gap:14px; flex:1; }
    .service-card h3 { margin:0; font-size: 28px; line-height:1; }
    .service-card p { margin:0; line-height:1.5; font-size: 16px; }
    .tag-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }
    .tag { border-radius:999px; padding:8px 12px; font-size:12px; font-weight:800; background:#f2f2f2; }

    .testimonial { background: var(--bg); color: var(--white); overflow:hidden; position:relative; }
    .testimonial-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap:28px; align-items:center; }
    .quote-card { background:#f4f1f4; color:#131313; border-radius:32px; padding:28px; box-shadow: var(--shadow); }
    .quote-card h3 { margin: 0 0 10px; font-size: 38px; }
    .quote-card p { font-size: 24px; line-height:1.35; margin:0; }
    .quote-meta { margin-top: 18px; font-weight: 800; color:#666; }
    .review-shot { border-radius:32px; overflow:hidden; box-shadow:var(--shadow); }

    .cta-band { padding: 70px 0; }
    .cta-box { background: linear-gradient(135deg, var(--orange), #ff7e58 52%, var(--pink)); color:white; border-radius:40px; padding: 36px; display:grid; grid-template-columns: 1.15fr .85fr; gap:24px; align-items:center; box-shadow: var(--shadow); }
    .cta-box h2 { font-size: clamp(36px, 6vw, 72px); margin:0 0 10px; }
    .cta-box p { font-size:20px; line-height:1.45; margin:0; max-width: 650px; }
    .cta-box .actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }

    footer { background:#111; color:#f2f2f2; padding: 40px 0 54px; }
    .footer-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
    .footer-card { background: rgba(255,255,255,.05); padding: 22px; border-radius: 24px; }
    .footer-card h4 { margin:0 0 12px; font-size: 13px; letter-spacing:.08em; text-transform:uppercase; color: var(--yellow); }
    .footer-card p, .footer-card a { margin:0; color:#ddd; line-height:1.6; }

    @media (max-width: 1080px) {
      .hero-wrap, .intro-grid, .testimonial-grid, .cta-box, .cards { grid-template-columns: 1fr 1fr; }
      .cards .service-card:last-child { grid-column: span 2; }
    }
    @media (max-width: 780px) {
      .nav { align-items:center; flex-wrap:wrap; }
      .brand { flex:1; min-width:0; }
      .nav-toggle { display:inline-flex; }
      .nav-links { display:none; width:100%; flex-direction:column; gap:0; padding:14px; border-radius:24px; background:rgba(255,255,255,.96); box-shadow: var(--shadow); }
      .nav-links.is-open { display:flex; }
      .nav-links .nav-links-list { width:100%; flex-direction:column; gap:0; font-size:13px; }
      .nav-links .nav-links-list a,
      .nav-links a { display:block; padding:14px 4px; font-size:13px; border-bottom:1px solid rgba(0,0,0,.08); }
      .nav-links .nav-links-list li:last-child a,
      .nav-links a:last-child { border-bottom:0; }
      .hero-wrap, .intro-grid, .testimonial-grid, .cta-box, .cards, .footer-grid { grid-template-columns: 1fr; }
      .cards .service-card:last-child { grid-column: auto; }
      .slider { min-height: 460px; }
      .section-head { flex-direction:column; align-items:flex-start; }
      .hero-copy h1 { max-width: none; }
      .mini-grid { grid-template-columns: 1fr; }
      .cta-box .actions { justify-content:flex-start; }
    }