/* ═══════════════════════════════════════════════════════════════
   AllDog Hub — main.css
   Paleta basada en logo AllDog 2026: azul marino + carmín + ice
   ═══════════════════════════════════════════════════════════════ */

:root {
  --navy:         #1B3A6B;
  --navy-dark:    #112649;
  --navy-mid:     #2A5298;
  --navy-pale:    #E8EEF8;
  --navy-light:   #B8CCE8;
  --crimson:      #8B1A2F;
  --crimson-mid:  #A82540;
  --crimson-pale: #F5E6E9;
  --ice:          #C8E8F0;
  --ice-pale:     #EEF8FB;
  --white:        #FFFFFF;
  --off-white:    #F7F9FC;
  --gray-light:   #EDF0F5;
  --gray-mid:     #8A95A8;
  --gray-dark:    #3D4A5C;
  --font-head:    'Montserrat', sans-serif;
  --font-body:    'Nunito', sans-serif;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--white); color: var(--gray-dark); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }

/* ANIMATIONS */
@keyframes fadeUp  { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes floatY  { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes pulse   { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.4); opacity:.6; } }
@keyframes barIn   { from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.au { animation: fadeUp .7s ease both; }
.ai { animation: fadeIn .9s ease both; }
.d1 { animation-delay:.1s; } .d2 { animation-delay:.25s; } .d3 { animation-delay:.4s; }
.d4 { animation-delay:.55s; } .d5 { animation-delay:.7s; }

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gray-light);
  padding: 0 clamp(1.5rem,5vw,5rem);
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.nav-brand { display:flex; align-items:center; gap:10px; }
.nav-brand-name { font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--navy); line-height:1.2; }
.nav-brand-name em { color:var(--crimson); font-style:normal; }
.nav-brand-sub { font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-mid); }
.nav-links { display:flex; align-items:center; gap:24px; list-style:none; }
.nav-links a { font-size:13px; font-weight:600; color:var(--gray-dark); transition:color .2s; }
.nav-links a:hover { color:var(--navy); }
.nav-cta { background:var(--navy) !important; color:var(--white) !important; padding:9px 20px; border-radius:100px; transition:background .2s,transform .15s !important; }
.nav-cta:hover { background:var(--navy-dark) !important; transform:translateY(-1px); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--navy); border-radius:2px; transition:all .3s; }

/* ── HERO ── */
.hero {
  background: var(--navy-dark);
  min-height: 90vh;
  display: grid; grid-template-columns:1fr 1fr; align-items:center;
  padding: clamp(3rem,6vw,5rem) clamp(1.5rem,5vw,5rem);
  position: relative; overflow: hidden;
}
.hero-bg-circle-1 { position:absolute; top:-140px; right:-100px; width:560px; height:560px; background:var(--navy-mid); border-radius:50%; opacity:.2; }
.hero-bg-circle-2 { position:absolute; bottom:-120px; left:38%; width:380px; height:380px; background:var(--crimson); border-radius:50%; opacity:.1; }
.hero-left { position:relative; z-index:1; padding-right:3rem; }

.hero-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ice); margin-bottom:1.5rem; }
.eyebrow-dot { width:8px; height:8px; background:var(--ice); border-radius:50%; animation:pulse 2s ease-in-out infinite; }

.hero h1 { font-family:var(--font-head); font-size:clamp(2.4rem,4.5vw,3.8rem); font-weight:800; line-height:1.1; color:var(--white); margin-bottom:1.25rem; }
.hero h1 .c-ice { color:var(--ice); }
.hero h1 .c-red { color:#E8789A; }
.hero-desc { font-size:16px; font-weight:300; line-height:1.75; color:rgba(255,255,255,.7); max-width:460px; margin-bottom:2.5rem; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:3rem; }

.hero-stats { display:flex; gap:2.5rem; }
.stat-num { font-family:var(--font-head); font-size:2rem; font-weight:800; color:var(--white); line-height:1; }
.stat-label { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-top:4px; }
.stat-sep { width:1px; background:rgba(255,255,255,.12); }

.hero-right { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; }
.hero-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:24px; padding:1.75rem; width:100%; max-width:420px; backdrop-filter:blur(8px); animation:floatY 7s ease-in-out infinite; }
.hero-card-img { width:100%; aspect-ratio:16/9; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.hero-card-img img { width:80%; height:auto; object-fit:contain; }
.hero-card-title { font-family:var(--font-head); font-size:.95rem; font-weight:700; color:var(--white); text-align:center; margin-bottom:.35rem; }
.hero-card-sub { font-size:11px; color:rgba(255,255,255,.45); text-align:center; margin-bottom:1.25rem; font-weight:600; letter-spacing:.04em; }
.chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.chip { font-size:11px; font-weight:600; padding:4px 12px; border-radius:100px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.12); }
.chip.red { background:rgba(139,26,47,.3); border-color:rgba(139,26,47,.5); color:#ffb3c0; }
.chip.ice { background:rgba(200,232,240,.1); border-color:rgba(200,232,240,.25); color:var(--ice); }

.hero-badge { position:absolute; bottom:-16px; left:-28px; background:var(--white); border:1px solid var(--gray-light); border-radius:14px; padding:12px 16px; display:flex; align-items:center; gap:10px; box-shadow:0 12px 40px rgba(27,58,107,.3); }
.badge-dot { width:9px; height:9px; background:#22C55E; border-radius:50%; animation:pulse 1.8s ease-in-out infinite; flex-shrink:0; }
.badge-text { font-size:12px; font-weight:700; color:var(--navy); }
.badge-sub { font-size:10px; color:var(--gray-mid); margin-top:1px; }

/* ── BUTTONS ── */
.btn-primary { background:var(--crimson); color:var(--white); padding:14px 28px; border-radius:100px; font-family:var(--font-head); font-size:13px; font-weight:700; letter-spacing:.04em; border:none; cursor:pointer; transition:background .2s,transform .15s; display:inline-flex; align-items:center; gap:8px; }
.btn-primary:hover { background:var(--crimson-mid); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--white); padding:14px 28px; border-radius:100px; font-family:var(--font-head); font-size:13px; font-weight:600; border:1.5px solid rgba(255,255,255,.3); cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:8px; }
.btn-ghost:hover { border-color:var(--white); background:rgba(255,255,255,.07); transform:translateY(-2px); }
.btn-secondary { background:transparent; color:var(--navy); padding:11px 22px; border-radius:100px; font-family:var(--font-head); font-size:13px; font-weight:700; border:1.5px solid var(--navy-light); transition:all .2s; display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.btn-secondary:hover { border-color:var(--navy); background:var(--navy-pale); }
.ico { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ── SEARCH ── */
.search-section { background:var(--off-white); border-top:1px solid var(--gray-light); padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,5vw,5rem); }
.search-inner { max-width:760px; margin:0 auto; }
.search-title { font-family:var(--font-head); font-size:clamp(1.3rem,2.5vw,1.8rem); font-weight:800; color:var(--navy); text-align:center; margin-bottom:.4rem; }
.search-sub { font-size:14px; color:var(--gray-mid); text-align:center; margin-bottom:1.75rem; }
.search-bar { display:flex; gap:8px; align-items:center; background:var(--white); border:1.5px solid var(--navy-light); border-radius:100px; padding:6px 6px 6px 20px; transition:border-color .2s,box-shadow .2s; }
.search-bar:focus-within { border-color:var(--navy); box-shadow:0 0 0 4px rgba(27,58,107,.08); }
.search-bar input { flex:1; background:none; border:none; outline:none; font-family:var(--font-body); font-size:15px; color:var(--navy-dark); caret-color:var(--navy); }
.search-bar input::placeholder { color:var(--gray-mid); }
.search-select { background:var(--gray-light); border:none; outline:none; border-radius:100px; padding:8px 14px; font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--gray-dark); cursor:pointer; }
.search-btn { background:var(--navy); color:var(--white); border:none; border-radius:100px; padding:12px 22px; font-family:var(--font-head); font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; transition:background .2s; }
.search-btn:hover { background:var(--navy-dark); }
.search-tags { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:1rem; }
.search-tag { font-size:12px; font-weight:600; color:var(--navy-mid); background:var(--navy-pale); border:1px solid var(--navy-light); padding:4px 14px; border-radius:100px; cursor:pointer; transition:background .2s; }
.search-tag:hover { background:var(--navy-light); }

/* ── SECTIONS ── */
.section { padding:clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,5rem); }
.section-label { font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-mid); display:flex; align-items:center; gap:10px; margin-bottom:.75rem; }
.section-label::before { content:''; display:inline-block; width:28px; height:2px; background:var(--crimson); transform-origin:left; animation:barIn .6s ease both; }
.section-title { font-family:var(--font-head); font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800; line-height:1.1; color:var(--navy-dark); margin-bottom:3rem; max-width:540px; }
.section-title .acc { color:var(--navy-mid); }
.section-title .red { color:var(--crimson); }

/* ── PILLARS ── */
.pillars-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pillar-card { background:var(--white); border:1.5px solid var(--gray-light); border-radius:20px; padding:2rem 1.75rem; transition:border-color .25s,transform .25s,box-shadow .25s; cursor:pointer; position:relative; overflow:hidden; }
.pillar-top-bar { position:absolute; top:0; left:0; right:0; height:3px; background:var(--navy); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.pillar-card:hover { border-color:var(--navy-light); transform:translateY(-5px); box-shadow:0 16px 48px rgba(27,58,107,.1); }
.pillar-card:hover .pillar-top-bar { transform:scaleX(1); }
.pillar-card.featured .pillar-top-bar { background:var(--crimson); transform:scaleX(1); }
.pillar-icon { width:52px; height:52px; border-radius:12px; background:var(--navy-pale); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.pillar-icon.red { background:var(--crimson-pale); }
.pillar-icon svg { width:26px; height:26px; stroke:var(--navy); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pillar-icon.red svg { stroke:var(--crimson); }
.pillar-badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-mid); background:var(--navy-pale); padding:3px 10px; border-radius:100px; margin-bottom:.75rem; }
.pillar-badge.red { color:var(--crimson); background:var(--crimson-pale); }
.pillar-title { font-family:var(--font-head); font-size:1.15rem; font-weight:800; color:var(--navy-dark); margin-bottom:.6rem; }
.pillar-desc { font-size:13px; line-height:1.7; color:var(--gray-mid); margin-bottom:1.25rem; }
.pillar-link { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--navy); transition:gap .2s; }
.pillar-link.red { color:var(--crimson); }
.pillar-link:hover { gap:10px; }

/* ── ARTICLES ── */
.articles { background:var(--off-white); }
.articles-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:2.5rem; flex-wrap:wrap; gap:1rem; }
.articles-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px; }
.article-card { background:var(--white); border:1px solid var(--gray-light); border-radius:18px; overflow:hidden; color:inherit; display:flex; flex-direction:column; transition:transform .25s,box-shadow .25s; }
.article-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(27,58,107,.1); }
.article-img { width:100%; aspect-ratio:16/9; background:var(--navy-pale); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:.75rem; font-weight:700; color:var(--navy-light); text-align:center; padding:1rem; background-size:cover; background-position:center; }
.article-card.featured .article-img { aspect-ratio:4/3; }
.article-body { padding:1.25rem 1.25rem 1.5rem; flex:1; display:flex; flex-direction:column; }
.article-tags { display:flex; gap:6px; margin-bottom:.75rem; flex-wrap:wrap; }
.article-tag { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-mid); background:var(--navy-pale); padding:2px 8px; border-radius:100px; }
.article-tag.red { color:var(--crimson); background:var(--crimson-pale); }
.article-title { font-family:var(--font-head); font-size:1rem; font-weight:700; color:var(--navy-dark); line-height:1.35; margin-bottom:.5rem; flex:1; }
.article-card.featured .article-title { font-size:1.35rem; }
.article-meta { font-size:11px; color:var(--gray-mid); margin-top:.75rem; font-weight:600; }

/* ── CTA DUAL ── */
.cta-dual { display:grid; grid-template-columns:1fr 1fr; }
.cta-block { padding:clamp(3.5rem,7vw,6rem) clamp(2rem,5vw,5rem); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.cta-mx { background:var(--navy-dark); }
.cta-us { background:var(--crimson); }
.cta-deco { position:absolute; width:300px; height:300px; border-radius:50%; opacity:.12; }
.cta-mx .cta-deco { background:var(--ice); top:-80px; right:-80px; }
.cta-us .cta-deco { background:var(--white); bottom:-80px; left:-80px; }
.cta-eyebrow { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:1rem; position:relative; }
.cta-heading { font-family:var(--font-head); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; line-height:1.1; color:var(--white); margin-bottom:1rem; position:relative; }
.cta-desc { font-size:14px; line-height:1.7; color:rgba(255,255,255,.65); margin-bottom:2rem; position:relative; }
.cta-btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-size:13px; font-weight:700; letter-spacing:.04em; padding:13px 26px; border-radius:100px; transition:all .2s; position:relative; align-self:flex-start; }
.cta-mx .cta-btn { background:var(--white); color:var(--navy-dark); }
.cta-mx .cta-btn:hover { background:var(--ice-pale); transform:translateY(-2px); }
.cta-us .cta-btn { background:var(--navy-dark); color:var(--white); }
.cta-us .cta-btn:hover { background:var(--navy); transform:translateY(-2px); }
.cta-url { font-size:11px; color:rgba(255,255,255,.28); margin-top:1rem; position:relative; font-weight:600; letter-spacing:.04em; }

/* ── TESTIMONIALS ── */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:2.5rem; }
.testimonial-card { background:var(--white); border:1.5px solid var(--gray-light); border-radius:20px; padding:1.75rem; position:relative; }
.testimonial-card::before { content:'"'; font-family:var(--font-head); font-size:4rem; font-weight:800; color:var(--navy-pale); position:absolute; top:.75rem; right:1.25rem; line-height:1; }
.t-stars { color:#F59E0B; font-size:12px; margin-bottom:.75rem; }
.t-quote { font-size:14px; line-height:1.7; color:var(--gray-dark); margin-bottom:1.25rem; font-style:italic; }
.t-author { display:flex; align-items:center; gap:10px; }
.t-avatar { width:38px; height:38px; border-radius:50%; background:var(--navy-pale); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:13px; font-weight:800; color:var(--navy); flex-shrink:0; }
.t-avatar.red { background:var(--crimson-pale); color:var(--crimson); }
.t-name { font-size:13px; font-weight:700; color:var(--navy-dark); }
.t-city { font-size:11px; color:var(--gray-mid); margin-top:1px; }

/* ── FOOTER ── */
footer { background:var(--navy-dark); color:rgba(255,255,255,.55); padding:clamp(3rem,6vw,5rem) clamp(1.5rem,5vw,5rem) 2rem; }
.footer-grid { display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-brand-name { font-family:var(--font-head); font-size:1.1rem; font-weight:800; color:var(--white); margin-bottom:.5rem; }
.footer-brand-name em { color:var(--ice); font-style:normal; }
.footer-tagline { font-size:13px; line-height:1.7; max-width:260px; margin-bottom:1rem; }
.footer-site-links { display:flex; flex-direction:column; gap:6px; }
.footer-site-link { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ice); transition:color .2s; }
.footer-site-link:hover { color:var(--white); }
.footer-col-title { font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--white); margin-bottom:1rem; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-links a { font-size:13px; color:rgba(255,255,255,.5); transition:color .2s; }
.footer-links a:hover { color:var(--white); }
.footer-links a.rl { color:rgba(232,120,154,.65); }
.footer-links a.rl:hover { color:#ffb3c5; }
.footer-hr { border:none; border-top:1px solid rgba(255,255,255,.07); margin-bottom:1.5rem; }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:11px; color:rgba(255,255,255,.28); font-weight:600; }

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .articles-grid { grid-template-columns:1fr 1fr; }
  .article-card.featured { grid-column:1/-1; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
}

@media (max-width: 768px) {
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:4rem; }
  .hero-right, .hero-bg-circle-1, .hero-bg-circle-2 { display:none; }
  .hero-left { padding-right:0; }
  .pillars-grid { grid-template-columns:1fr; }
  .articles-grid { grid-template-columns:1fr; }
  .cta-dual { grid-template-columns:1fr; }
  .testimonials-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .nav-links { display:none; flex-direction:column; position:absolute; top:68px; left:0; right:0; background:var(--white); border-bottom:1px solid var(--gray-light); padding:1rem 2rem 1.5rem; gap:16px; }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; }
  .search-bar { flex-wrap:wrap; border-radius:16px; padding:12px; }
  .search-bar input { min-width:100%; }
}