/*
Theme Name: Mazatlán Marketing
Theme URI: https://www.mazatlanmarketing.com
Author: Mazatlán Marketing
Author URI: https://www.mazatlanmarketing.com
Description: Sitio oficial de Mazatlán Marketing — Agencia de Marketing Digital en Mazatlán, Sinaloa. Colores tropicales del mar, atardecer y la magia de Mazatlán. SEO optimizado para hoteles, restaurantes y comercios.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: business, marketing, one-page, full-width-template, custom-colors, responsive-layout
Text Domain: mazatlan-mkt
*/

:root {
  --ocean:    #0077b6;
  --deep-sea: #023e8a;
  --turquoise:#00b4d8;
  --sky:      #90e0ef;
  --sunset:   #f77f00;
  --orange:   #f4a261;
  --fuchsia:  #e63946;
  --hot-pink: #ff006e;
  --gold:     #ffd60a;
  --lime:     #06d6a0;
  --palm:     #2d6a4f;
  --white:    #ffffff;
  --dark:     #0d1b2a;
  --sand:     #fff8f0;
}
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family:'Nunito',sans-serif;
  background:var(--dark);
  color:var(--white);
  overflow-x:hidden;
}
body::before {
  content:'';
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(0,119,182,0.4) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(247,127,0,0.3) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(230,57,70,0.2) 0%, transparent 45%),
    var(--dark);
  pointer-events:none;
}
.wa-float {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:999;
  display:flex; align-items:center; gap:0.6rem;
  background:#25D366; color:var(--white);
  text-decoration:none; font-weight:900; font-size:0.9rem;
  padding:0.8rem 1.4rem; border-radius:50px;
  box-shadow:0 4px 24px rgba(37,211,102,0.6);
  animation:bounce 2s ease-in-out infinite;
  letter-spacing:1px;
}
.wa-float:hover { background:#1ebe5d; transform:scale(1.05); }
.wa-float .wa-icon { font-size:1.5rem; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes glow-wa {
  0%,100%{ box-shadow:0 6px 24px rgba(37,211,102,0.6); }
  50%{ box-shadow:0 6px 36px rgba(37,211,102,0.9), 0 0 50px rgba(37,211,102,0.3); }
}
#nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(2,62,138,0.95);
  backdrop-filter:blur(12px);
  border-bottom:3px solid var(--turquoise);
  padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
  box-shadow:0 4px 20px rgba(0,180,216,0.3);
}
.nav-logo {
  font-family:'Bebas Neue',cursive;
  font-size:1.6rem; letter-spacing:3px;
  color:var(--white); text-decoration:none;
  display:flex; align-items:center; gap:0.4rem;
}
.nav-logo .dot { color:var(--gold); }
.nav-logo .com { color:var(--turquoise); font-size:1.2rem; }
nav ul { list-style:none; display:flex; gap:0.3rem; align-items:center; }
nav ul a {
  color:rgba(255,255,255,0.85); text-decoration:none;
  font-size:0.78rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; padding:0.45rem 0.9rem; border-radius:4px;
  transition:all 0.2s;
}
nav ul a:hover { color:var(--gold); background:rgba(255,255,255,0.08); }
.nav-wa {
  background:var(--hot-pink)!important; color:var(--white)!important;
  border-radius:25px!important; padding:0.5rem 1.3rem!important;
  font-weight:900!important; box-shadow:0 0 12px rgba(255,0,110,0.5)!important;
}
.nav-wa:hover { box-shadow:0 0 24px rgba(255,0,110,0.8)!important; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
.hamburger span { display:block; width:24px; height:2px; background:var(--white); border-radius:2px; }
.mobile-menu { display:none; }
.hero {
  min-height:100vh;
  padding-top:60px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  position:relative; overflow:hidden;
  padding-left:1.5rem; padding-right:1.5rem; padding-bottom:3rem;
}
.hero::before {
  content:'';
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg,
    rgba(0,119,182,0.6) 0%, rgba(0,180,216,0.3) 30%,
    rgba(247,127,0,0.3) 60%, rgba(230,57,70,0.4) 100%);
}
.hero-badge {
  display:inline-block; z-index:1; position:relative;
  background:rgba(0,0,0,0.4); border:2px solid var(--turquoise);
  color:var(--turquoise); font-size:0.75rem; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  padding:0.4rem 1.2rem; border-radius:20px; margin-bottom:1rem;
  backdrop-filter:blur(4px);
}
.hero-title {
  font-family:'Bebas Neue',cursive;
  font-size:clamp(2.5rem,8vw,6rem);
  line-height:0.95; z-index:1; position:relative;
  text-shadow:3px 3px 0 rgba(0,0,0,0.4);
  margin-bottom:0.5rem; letter-spacing:2px;
}
.hero-title .line1 { color:var(--white); display:block; }
.hero-title .line2 {
  color:var(--gold); font-family:'Pacifico',cursive;
  font-size:clamp(2rem,7vw,5rem); display:block; letter-spacing:1px;
  text-shadow:3px 3px 0 rgba(247,127,0,0.4), 0 0 30px rgba(255,214,10,0.3);
}
.hero-title .line3 {
  color:var(--turquoise); display:block;
  font-size:clamp(1.5rem,5vw,3.5rem);
  text-shadow:2px 2px 0 rgba(0,0,0,0.4), 0 0 20px rgba(0,180,216,0.5);
}
.hero-sub {
  z-index:1; position:relative;
  font-family:'Bebas Neue',cursive;
  font-size:clamp(1rem,3vw,1.8rem);
  letter-spacing:4px; color:var(--white);
  background:linear-gradient(90deg,var(--fuchsia),var(--hot-pink));
  display:inline-block; padding:0.4rem 2rem; border-radius:4px;
  margin:0.8rem 0 2rem;
  box-shadow:0 4px 20px rgba(255,0,110,0.4);
}
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; z-index:1; position:relative; }
.btn-wa {
  display:inline-flex; align-items:center; gap:0.7rem;
  background:#25D366; color:var(--white);
  text-decoration:none; font-weight:900; font-size:1rem;
  padding:1rem 2.5rem; border-radius:50px;
  letter-spacing:1px; text-transform:uppercase;
  box-shadow:0 6px 24px rgba(37,211,102,0.6);
  transition:all 0.2s; border:3px solid rgba(255,255,255,0.3);
  animation:glow-wa 2.5s ease-in-out infinite;
}
.btn-wa:hover { background:#1ebe5d; transform:translateY(-3px) scale(1.03); }
.btn-wa .wa-icon { font-size:1.4rem; }
.btn-sec {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:transparent; color:var(--white);
  text-decoration:none; font-weight:900; font-size:0.9rem;
  padding:1rem 2rem; border-radius:50px;
  border:2px solid var(--turquoise);
  letter-spacing:1px; text-transform:uppercase;
  transition:all 0.2s;
}
.btn-sec:hover { background:var(--turquoise); color:var(--dark); }
.wave { width:100%; overflow:hidden; line-height:0; display:block; margin-top:-2px; }
.wave svg { display:block; width:100%; }
.flyers {
  background:linear-gradient(180deg,var(--ocean) 0%,var(--deep-sea) 100%);
  padding:3rem 2rem 4rem;
}
.flyers-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:2rem; max-width:1000px; margin:0 auto;
}
.flyer-card {
  border-radius:16px; overflow:hidden;
  border:3px solid var(--turquoise);
  box-shadow:0 0 30px rgba(0,180,216,0.4), 0 20px 40px rgba(0,0,0,0.4);
  transition:transform 0.3s, box-shadow 0.3s;
  position:relative;
}
.flyer-card:first-child { border-color:var(--gold); box-shadow:0 0 30px rgba(255,214,10,0.4), 0 20px 40px rgba(0,0,0,0.4); }
.flyer-card:hover { transform:translateY(-8px) scale(1.02); }
.flyer-card img { width:100%; display:block; height:auto; }
.flyer-ribbon {
  position:absolute; top:12px; left:-6px;
  background:var(--hot-pink); color:var(--white);
  font-family:'Bebas Neue'; font-size:0.95rem; letter-spacing:2px;
  padding:0.3rem 1rem 0.3rem 0.8rem; border-radius:0 4px 4px 0;
  box-shadow:3px 3px 8px rgba(0,0,0,0.3);
}
section { padding:5rem 2rem; }
.container { max-width:1100px; margin:0 auto; }
.sec-tag {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.72rem; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--turquoise); margin-bottom:0.6rem;
}
.sec-tag::before { content:''; display:block; width:20px; height:2px; background:var(--turquoise); }
.sec-title {
  font-family:'Bebas Neue',cursive;
  font-size:clamp(2.2rem,5vw,3.8rem);
  letter-spacing:3px; line-height:1; margin-bottom:0.8rem;
}
.sec-title .g { color:var(--gold); }
.sec-title .t { color:var(--turquoise); }
.sec-title .p { color:var(--hot-pink); }
.sec-desc { font-size:0.97rem; color:rgba(255,255,255,0.75); line-height:1.8; max-width:620px; margin-bottom:3rem; }
.wave-sep { width:80px; height:4px; margin-bottom:1.2rem; background:linear-gradient(90deg,var(--ocean),var(--turquoise),var(--gold)); border-radius:2px; }
.servicios { background:linear-gradient(135deg,var(--deep-sea) 0%,#051a3a 100%); }
.servicios-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem; }
.servicio-card {
  background:rgba(255,255,255,0.05); border:1px solid rgba(0,180,216,0.25);
  border-radius:12px; padding:2rem 1.5rem; text-align:center;
  transition:all 0.3s; position:relative; overflow:hidden;
}
.servicio-card:hover { transform:translateY(-6px); border-color:var(--turquoise); box-shadow:0 8px 30px rgba(0,180,216,0.25); }
.serv-icon { font-size:2.8rem; margin-bottom:0.8rem; display:block; }
.serv-title { font-family:'Bebas Neue'; font-size:1.4rem; letter-spacing:2px; color:var(--gold); margin-bottom:0.5rem; }
.servicio-card p { font-size:0.88rem; color:rgba(255,255,255,0.65); line-height:1.7; }
.serv-bar { height:3px; width:40px; margin:1rem auto 0; border-radius:2px; }
.sb-t { background:linear-gradient(90deg,var(--ocean),var(--turquoise)); }
.sb-g { background:linear-gradient(90deg,var(--sunset),var(--gold)); }
.sb-p { background:linear-gradient(90deg,var(--fuchsia),var(--hot-pink)); }
.sb-l { background:linear-gradient(90deg,var(--palm),var(--lime)); }
.nichos { background:linear-gradient(180deg,#051a3a 0%,var(--deep-sea) 100%); }
.nichos-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }
.nicho-card { border-radius:16px; overflow:hidden; border:2px solid rgba(255,255,255,0.1); transition:all 0.3s; }
.nicho-card:hover { transform:translateY(-5px); border-color:var(--turquoise); }
.nicho-top { height:160px; display:flex; align-items:center; justify-content:center; font-size:4rem; }
.nt-hotel { background:linear-gradient(135deg,#0077b6,#00b4d8); }
.nt-rest  { background:linear-gradient(135deg,#f77f00,#f4a261); }
.nt-com   { background:linear-gradient(135deg,#e63946,#ff006e); }
.nicho-body { background:rgba(255,255,255,0.05); padding:1.5rem; }
.nicho-title { font-family:'Bebas Neue'; font-size:1.5rem; letter-spacing:2px; color:var(--white); margin-bottom:0.8rem; }
.nicho-list { list-style:none; display:flex; flex-direction:column; gap:0.4rem; }
.nicho-list li { display:flex; align-items:center; gap:0.5rem; font-size:0.88rem; color:rgba(255,255,255,0.8); }
.nicho-list li::before { content:'✦'; color:var(--gold); font-size:0.7rem; flex-shrink:0; }
.nicho-list li strong { color:var(--gold); }
.paises { background:linear-gradient(135deg,#023e8a 0%,#0077b6 100%); text-align:center; }
.paises-titulo { font-family:'Bebas Neue'; font-size:clamp(1.5rem,4vw,2.5rem); letter-spacing:3px; color:var(--white); margin-bottom:0.5rem; }
.paises-sub { font-size:1rem; color:rgba(255,255,255,0.75); margin-bottom:2.5rem; }
.flags-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; max-width:700px; margin:0 auto 1.5rem; }
.flag-item { display:flex; flex-direction:column; align-items:center; gap:0.3rem; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:10px; padding:0.8rem 1.2rem; min-width:90px; transition:all 0.2s; }
.flag-item:hover { background:rgba(255,255,255,0.15); transform:translateY(-3px); }
.flag-emoji { font-size:2rem; }
.flag-name { font-size:0.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.85); }
.mas-paises { font-family:'Bebas Neue'; font-size:1.3rem; letter-spacing:2px; color:var(--gold); display:inline-block; padding:0.5rem 1.5rem; border:2px solid var(--gold); border-radius:25px; }
.resultados { background:linear-gradient(135deg,#051a3a 0%,var(--deep-sea) 50%,#051a3a 100%); }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.5rem; margin-bottom:3rem; }
.stat-card { text-align:center; padding:2rem 1rem; background:rgba(255,255,255,0.04); border:1px solid rgba(0,180,216,0.2); border-radius:12px; transition:all 0.3s; }
.stat-card:hover { border-color:var(--gold); background:rgba(255,214,10,0.05); }
.stat-num { font-family:'Bebas Neue'; font-size:3.5rem; line-height:1; color:var(--gold); display:block; text-shadow:0 0 20px rgba(255,214,10,0.4); }
.stat-label { font-size:0.8rem; color:rgba(255,255,255,0.6); letter-spacing:1px; text-transform:uppercase; margin-top:0.3rem; }
.garantias-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.garantia { display:flex; align-items:center; gap:0.8rem; background:rgba(0,180,216,0.08); border:1px solid rgba(0,180,216,0.2); border-radius:8px; padding:1rem 1.2rem; }
.gar-icon { font-size:1.8rem; flex-shrink:0; }
.gar-text { font-size:0.88rem; color:rgba(255,255,255,0.8); line-height:1.5; }
.gar-text strong { color:var(--turquoise); font-size:0.95rem; display:block; }
.cta-final { padding:6rem 2rem; background:linear-gradient(135deg,#0d1b2a 0%,#023e8a 50%,#0d1b2a 100%); text-align:center; position:relative; overflow:hidden; }
.cta-final::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(247,127,0,0.15) 0%, transparent 65%), radial-gradient(ellipse 40% 30% at 80% 20%, rgba(255,0,110,0.12) 0%, transparent 55%); }
.cta-emoji { font-size:3rem; display:block; margin-bottom:1rem; position:relative; z-index:1; }
.cta-title { font-family:'Bebas Neue'; font-size:clamp(2.5rem,6vw,5rem); letter-spacing:3px; line-height:1; margin-bottom:0.8rem; position:relative; z-index:1; }
.cta-title .w { color:var(--white); }
.cta-title .g { color:var(--gold); text-shadow:0 0 20px rgba(255,214,10,0.5); }
.cta-title .t { color:var(--turquoise); }
.cta-sub { font-size:1.1rem; color:rgba(255,255,255,0.8); max-width:560px; margin:0 auto 2.5rem; line-height:1.75; position:relative; z-index:1; }
.cta-big-btn { display:inline-flex; align-items:center; gap:1rem; background:linear-gradient(135deg,#25D366,#1ebe5d); color:var(--white); text-decoration:none; font-weight:900; font-size:1.3rem; padding:1.2rem 3rem; border-radius:60px; letter-spacing:2px; text-transform:uppercase; box-shadow:0 8px 32px rgba(37,211,102,0.6); transition:all 0.2s; border:3px solid rgba(255,255,255,0.3); position:relative; z-index:1; animation:glow-wa 2s ease-in-out infinite; }
.cta-big-btn:hover { transform:translateY(-4px) scale(1.04); }
.cta-big-btn .icon { font-size:2rem; }
.cta-phone { display:block; margin-top:1.5rem; font-family:'Bebas Neue'; font-size:clamp(1.8rem,4vw,2.8rem); letter-spacing:4px; color:var(--gold); position:relative; z-index:1; text-shadow:0 0 20px rgba(255,214,10,0.4); text-decoration:none; }
.cta-url { display:block; margin-top:0.5rem; font-size:1rem; color:var(--turquoise); letter-spacing:2px; position:relative; z-index:1; text-decoration:none; }
.cta-url:hover { color:var(--gold); }
.cta-tags { margin-top:2rem; position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:0.6rem; }
.tag { font-size:0.75rem; font-weight:700; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.7); padding:0.3rem 0.8rem; border-radius:20px; letter-spacing:1px; }
footer { background:#030d1a; color:rgba(255,255,255,0.4); padding:2.5rem 2rem; text-align:center; border-top:3px solid var(--turquoise); }
footer strong { color:var(--turquoise); }
footer a { color:var(--gold); text-decoration:none; }
footer a:hover { color:var(--turquoise); }
.footer-kw { font-size:0.65rem; color:rgba(255,255,255,0.1); margin-top:1rem; line-height:2; }
@media(max-width:700px){
  .flyers-grid { grid-template-columns:1fr; }
  nav ul { display:none; }
  .hamburger { display:flex; }
  .mobile-menu.open { display:flex; flex-direction:column; position:fixed; top:60px; left:0; right:0; bottom:0; background:rgba(2,62,138,0.98); padding:2rem; gap:0.5rem; z-index:99; overflow-y:auto; }
  .mobile-menu.open a { color:var(--white); text-decoration:none; font-weight:700; font-size:1.1rem; letter-spacing:1px; text-transform:uppercase; padding:0.9rem 0; border-bottom:1px solid rgba(255,255,255,0.1); }
  .cta-big-btn { font-size:1rem; padding:1rem 2rem; }
  section { padding:3.5rem 1.5rem; }
}