/* ================= ACCESSIBILITY ================= */

/* Skip to content link for keyboard navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--brand);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  z-index: 10000;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.skip-link:focus {
  top: 6px;
  transform: translateY(0);
  outline: 2px solid white;
  outline-offset: 2px;
}

/* Enhanced focus indicators */
*:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* High contrast focus for better visibility */
.btn:focus,
.links a:focus,
.contact-tile:focus {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 106, 42, 0.2);
}

/* Navigation focus improvements */
.links a {
  padding: 8px 10px;
  border-radius: 10px;
  position: relative;
}

.links a:focus {
  background: rgba(255, 106, 42, 0.1);
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Button focus enhancements */
.btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--brand);
}

/* Improved mobile menu accessibility */
.mnav-btn:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Table accessibility improvements */
.plans-table:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.plans-table th,
.plans-table td {
  padding: 1rem;
  text-align: left;
}

.plans-table th {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.875rem;
}

/* Review cards accessibility */
.review-card:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  transform: translateY(-2px);
}

/* FAQ accessibility enhancements */
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.faq summary:hover,
.faq summary:focus {
  background-color: rgba(255, 106, 42, 0.05);
}

.faq summary:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Interactive elements hover states */
.feature:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  background: #fff7f3;
  box-shadow: 0 6px 16px -4px rgba(255,106,42,.18);
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Disable scroll reveal animations */
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --line: #000000;
    --muted: #000000;
  }
  
  .btn {
    border: 2px solid currentColor;
  }
  
  .card {
    border: 2px solid var(--ink);
  }
}

/* Contact tile accessibility */
.contact-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.contact-tile:hover {
  background-color: rgba(255, 106, 42, 0.05);
  transform: translateY(-1px);
}

.contact-tile:focus {
  background-color: rgba(255, 106, 42, 0.1);
}

/* Screen reader only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================= TOKENS (match screenshot) ================= */
:root{
  --page:#f4f6f8;            /* page bg */
  --card:#ffffff;            /* cards */
  --ink:#111827;             /* headings */
  --muted:#6b7280;           /* body/labels */
  --line:#E6E9EF;            /* borders */
  --brand:#ff6a2a;           /* primary orange */
  --brand-600:#ff5b10;
  --pill:#101828;            /* dark tag text */
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 28px rgba(16,24,40,.08);
  --max:1040px;              /* content width in screenshot */
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--page);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
body{line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ================= SHELL ================= */
.container{max-width:var(--max);margin:0 auto;padding:0 16px}
.section{padding:48px 0}
/* reduce extra gap caused by first section + hero padding */
.section:first-of-type{padding-top:8px}
.h1{font-size:34px;line-height:1.1;margin:0 0 8px;font-weight:900;letter-spacing:-.01em}
.h2{font-size:24px;margin:0 0 8px;font-weight:900}
.overline{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9aa3b2;font-weight:900}
.subtle{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:1px solid var(--brand);padding:10px 16px;border-radius:999px;font-weight:800;box-shadow:0 6px 18px rgba(255,106,42,.25);transition:.2s transform,.2s box-shadow;cursor:pointer;font-size:14px}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(255,106,42,.32)}
.btn.secondary{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:none}
.small{font-size:12px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);padding:6px 10px;border-radius:999px;color:#374151;font-weight:700}

/* ================= HEADER ================= */
.topbar{height:58px;background:#fff;border-bottom:1px solid var(--line);position:fixed;top:0;left:0;width:100%;z-index:999;transition:.35s box-shadow,.35s background}
.topbar.is-scrolled{box-shadow:0 4px 18px rgba(16,24,40,.08);background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(4px)}
.nav{height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:8px}
.brand .logo{height:48px;width:180px;background:url('/images/logo-pretafit.jpeg') center/contain no-repeat;border-radius:4px}
.links{display:flex;gap:14px;align-items:center}
.links a{padding:8px 10px;border-radius:10px}
.links a:hover{background:#F2F4F7}
.mnav-btn{display:none}

/* ================= HERO ================= */
.hero{padding:12px 0 12px}
.hero .container{gap:20px}
.hero .hero-card{display:grid;grid-template-columns:1fr;overflow:hidden}
.hero-media{position:relative;border-radius:var(--radius);overflow:hidden}
.hero-media img{height:520px;width:100%;object-fit:cover}
.hero-event .hero-media img{height:560px}
@media (max-width:900px){.hero-event .hero-media img{height:500px}}
@media (max-width:600px){.hero-event .hero-media img{height:440px}}
@media (max-width:480px){.hero-event .hero-media img{height:400px}}
.hero-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:20px}
.hero-bubble{width:min(520px,92%);background:rgba(17,24,39,.88);color:#fff;border-radius:12px;padding:18px;border:1px solid rgba(255,255,255,.18);backdrop-filter:saturate(1.2) blur(2px)}
.hero-bubble .h1{font-size:28px;margin:0 0 6px}
.hero-bubble .subtle{color:#D1D5DB}
.hero-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
/* Event-specific hero bubble spacing (more breathing room at top) */
.hero-event .hero-bubble{padding-top:34px}
@media (max-width:900px){.hero-event .hero-bubble{padding-top:30px}}
@media (max-width:600px){.hero-event .hero-bubble{padding-top:26px}}
@media (max-width:480px){.hero-event .hero-bubble{padding-top:22px}}

/* mini features under hero */
.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px;max-width:800px;margin-left:auto;margin-right:auto}
.feature-row .feature{transition:.25s background,.25s box-shadow}
.feature-row .feature:hover{background:#fff7f3;box-shadow:0 6px 16px -4px rgba(255,106,42,.18)}
.feature{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
.badge-ico{width:34px;height:34px;border-radius:8px;background:#fff3ee;border:1px solid #ffd9c8;display:grid;place-items:center}

/* logos strip */
.logo-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.logo-strip .box{height:34px;border:1px dashed var(--line);border-radius:10px;background:#fff;display:grid;place-items:center;color:#9aa3b2;font-weight:800;font-size:11px}

/* ================= CLASSES ================= */
.classes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.class-card{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.class-card img{height:170px;width:100%;object-fit:cover}
.class-card .cap{position:absolute;left:10px;bottom:10px;background:#101828D0;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:6px 9px;font-weight:800;font-size:13px}
.promo{min-height:170px;display:grid;place-items:center;text-align:center;background:linear-gradient(180deg,#fff,#fff);border:1px dashed var(--line);border-radius:12px}
.promo .overline{color:#ff6a2a}

/* ================= AMENITIES ================= */
.amen{display:grid;grid-template-columns:360px 1fr;gap:16px}
.amen-list{display:flex;flex-direction:column;gap:10px}
.amen-item{display:flex;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.amen-item.active{outline:2px solid #FFD9C8;background:#FFF7F3}
.amen-item b{display:block}
.amen-visual{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.amen-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.amen-visual img.active{opacity:1}
.amen-visual{min-height:320px}

/* ================= TESTIMONIALS ================= */
.testi{display:grid;place-items:center}
.testi-card{width:min(680px,100%);padding:12px}
.testi-top{display:flex;justify-content:center;gap:8px;margin:6px 0 8px}
.avatar{width:26px;height:26px;border-radius:50%;background:#E5E7EB;border:1px solid #D1D5DB}
.quote{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.quote:after{content:"";position:absolute;left:18px;bottom:-10px;width:18px;height:18px;background:#fff;border:1px solid var(--line);border-top:0;border-left:0;transform:rotate(45deg)}
.dotbar{display:flex;gap:6px;justify-content:center;margin-top:8px}
.dotbar button{width:8px;height:8px;border-radius:999px;border:0;background:#e3e7ee;cursor:pointer}
.dotbar button.active{background:var(--brand)}

/* ================= PRICING ================= */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.price{padding:16px;position:relative}
.price.pop{outline:2px solid #FFD9C8}
.amount{font-size:28px;font-weight:900}
.price ul{margin:12px 0 14px;padding:0;list-style:none;border-top:1px dashed var(--line)}
.price li{display:flex;gap:8px;border-bottom:1px dashed var(--line);padding:8px 0}
.check{width:18px;height:18px;border-radius:4px;background:#e7f6ef;border:1px solid #b4ead6;display:grid;place-items:center;margin-top:2px;flex:0 0 18px}
.check svg{width:12px;height:12px;fill:#16a34a}

/* ================= FAQ ================= */
.faq-wrap{width:min(620px,100%);margin:0 auto}
.faq{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:8px 0}
.faq summary{list-style:none;padding:12px 14px;cursor:pointer;font-weight:800;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:0;padding:0 14px 12px;color:var(--muted)}

/* ================= CTA BANNER ================= */
.cta{display:grid;grid-template-columns:1fr 1.1fr;gap:0;overflow:hidden}
.cta > .left{padding:18px}
.mini-form{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:10px;margin-top:10px}
.mini-form input{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px}
.mini-form input:focus{outline:2px solid #FFD9C8;border-color:transparent}
.cta .right{border-left:1px solid var(--line)}
.cta .right img{height:100%;min-height:220px;width:100%;object-fit:cover}

/* ================= TEAM ================= */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.member{overflow:hidden}
.member .thumb{height:210px;background:#fff;position:relative;display:flex;align-items:center;justify-content:center;padding:12px}
/* removed solid overlay to let logos show */
.member .thumb:after{display:none}
.member img{height:100%;width:auto;max-height:100%;max-width:100%;object-fit:contain;mix-blend-mode:normal}
.member .info{padding:10px}

/* ================= GALLERY ================= */
.gallery{display:grid;grid-template-columns:2fr 1.2fr 1.2fr;gap:10px}
.gallery img:hover{filter:brightness(1.05)}
.gallery img{height:210px;object-fit:cover;border-radius:12px;border:1px solid var(--line);cursor:pointer}

/* ================= EVENT EXTRAS (rules & agenda) ================= */
.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:10px}
.rule-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.rule-item img{height:200px;width:100%;object-fit:cover;border-radius:8px}
.timeline{display:grid;gap:16px;margin-top:16px}
.time-block{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;position:relative;border-left:4px solid var(--brand)}
.time-block h3{color:#333;margin-bottom:8px !important}

/* ================= EVENT ENHANCEMENTS ================= */
#competidores .cards-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
#competidores .cards-nav button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;transition:.25s background,.25s color,.25s box-shadow}
#competidores .cards-nav button.active{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(255,106,42,.35)}
#competidores .card h3{font-size:16px;letter-spacing:.18em}
#competidores .card ul{font-size:13px}
#competidores .card{position:relative}
#competidores .card.highlight{outline:2px solid #ffcfb3;box-shadow:0 0 0 4px #fff,0 12px 28px -6px rgba(255,106,42,.35)}

.boxes-grid a{position:relative;overflow:hidden}
.boxes-grid a:hover{background:#fff7f3;border-color:#ffd9c8}
.boxes-grid a svg{width:16px;height:16px;fill:#ff6a2a}
.boxes-grid a .ig{display:inline-flex;align-items:center;gap:6px}

.team .member{position:relative;transition:.3s transform,.3s box-shadow}
.team .member:hover{transform:translateY(-4px);box-shadow:0 14px 32px -10px rgba(16,24,40,.25)}
.team .member .thumb{display:flex;align-items:center;justify-content:center;position:relative;background:#fff}
.team .member .thumb img{object-fit:contain;mix-blend-mode:normal}

/* Instagram icon (utility) */
.icon-ig{width:16px;height:16px;display:inline-block;vertical-align:middle}
.social-inline{display:inline-flex;align-items:center;gap:6px}

@keyframes competitorFlash{0%,100%{background:#fff}50%{background:#fff6f0}}
#competidores .card.highlight{animation:competitorFlash 3s ease-in-out infinite}

/* ================= CONTACT TILES ================= */
.contact-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:600px;margin:0 auto}
.contact-tile{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);padding:12px;border-radius:12px}
.contact-tile .ico{width:38px;height:38px;border-radius:9px;background:#fff3ee;border:1px solid #ffd9c8;display:grid;place-items:center}

/* ================= FOOTER ================= */
footer{background:#0f1116;margin-top:28px;color:#cfd6e6}
.footer-wrap{display:grid;place-items:center;padding:32px 0;gap:16px}
.footer-socials{display:flex;gap:16px;align-items:center}
.footer-socials a{color:#9aa3b2;transition:color 0.3s ease;padding:8px;border-radius:50%;transition:all 0.3s ease}
.footer-socials a:hover{color:#fff;background:rgba(255,255,255,0.1)}
.footer-sub{margin-top:8px;font-size:12px;color:#9aa3b2}

/* ================= UTILITY CLASSES ================= */

/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Margins */
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding */
.p-5 { padding: 20px; }
.px-7 { padding-left: 28px; padding-right: 28px; }
.py-10 { padding-top: 40px; padding-bottom: 40px; }

/* Flex & Grid Utilities */
.flex-center { display: flex; align-items: center; justify-content: center; }
.grid-auto-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.grid-auto-fit-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.no-decoration { text-decoration: none; }

/* Specific Component Classes */
.event-promo-section {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 40px 0;
}

.event-header {
  text-align: center;
  margin-bottom: 20px;
}

.event-overline {
  color: var(--brand);
}

.event-title {
  margin-bottom: 8px;
  font-size: 28px;
}

.event-description {
  margin-bottom: 16px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.event-date {
  color: var(--brand);
  font-weight: 700;
}

.event-cta-wrapper {
  text-align: center;
  margin-top: 24px;
}

.event-cta-btn {
  font-size: 16px;
  padding: 14px 28px;
  background: linear-gradient(90deg, var(--brand), var(--brand-600));
  box-shadow: 0 8px 25px rgba(255, 106, 42, 0.4);
  animation: pulse-cta 2s ease-in-out infinite;
}

.event-cta-note {
  margin-top: 12px;
  color: var(--muted);
}

/* Competition Format Classes */
.competition-section-spacing { margin-bottom: 40px; }
.competition-header { text-align: center; margin-bottom: 24px; }
.competition-description { margin: 0; color: #6b7280; max-width: 600px; margin: 0 auto; }

.hit-number {
  background: #ff6a2a;
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-weight: bold;
  font-size: 24px;
}

.hit-title {
  margin: 0 0 8px;
  font-size: 24px;
}

.category-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.category-card {
  padding: 20px;
}

.category-header {
  text-align: center;
  margin-bottom: 16px;
}

.category-title {
  margin: 0 0 8px;
  font-size: 18px;
  color: #ff6a2a;
}

.rule-figure {
  margin: 0;
  cursor: pointer;
}

.rule-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
}

.rule-caption {
  text-align: center;
  margin-top: 8px;
  font-weight: 600;
  color: #ff6a2a;
}

.shared-block {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 32px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.shared-figure {
  margin: 0;
  cursor: pointer;
  max-width: 500px;
  margin: 0 auto;
}

.shared-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.shared-caption {
  text-align: center;
  margin-top: 12px;
  font-weight: 600;
  color: #ff6a2a;
  font-size: 14px;
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 30;
  place-items: center;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

.lightbox-image {
  max-width: min(1080px, 92vw);
  max-height: 86vh;
  border-radius: 12px;
  border: 1px solid #fff;
}

/* Competition Description */
.competition-intro {
  margin-bottom: 32px;
  text-align: center;
}

/* @keyframes pulse-cta already exists in theme */

/* ================= RESPONSIVE ================= */
@media (max-width:1100px){
  .amen{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
}
@media (max-width:900px){
  .links{display:none}
  .mnav-btn{display:inline-flex}
  #mnav{padding:0 16px}
  #mnav .card{background:#101828;color:#fff;border-color:#1e2633}
  #mnav .btn.secondary{background:#1e2633;color:#fff;border-color:#2a3240}
  #mnav .btn{box-shadow:none}
  .feature-row{grid-template-columns:repeat(2,1fr)}
  .logo-strip{grid-template-columns:repeat(3,1fr)}
  .classes-grid{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr 1fr}
  .contact-strip{grid-template-columns:1fr}
}
@media (max-width:600px){
  .hero-media img{height:420px}
  .classes-grid{grid-template-columns:1fr}
  .mini-form{grid-template-columns:1fr;gap:12px}
  .team{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .cta .right{display:none}
}
/* ultra small phones */
@media (max-width:480px){
  .h1{font-size:30px}
  .hero-bubble .h1{font-size:24px}
  .feature-row{grid-template-columns:1fr}
  .logo-strip{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr}
  .contact-strip{grid-template-columns:1fr}
  #competidorCards .card ul,#competitorCards .card ul{columns:1 auto}
  .hero-media img{height:380px}
  .logo-strip .box{font-size:10px}
  .pricing{gap:18px}
  .timeline .time-block{padding:16px}
  .timeline{max-width:none}
  .time-block h3{flex-direction:column !important;align-items:flex-start !important;gap:8px !important}
  .time-block .small{margin-left:0 !important}
  .cta > .left{padding:16px}
  #competidores .cards-nav button{flex:1 1 45%;text-align:center}
  .boxes-grid{grid-template-columns:1fr}
  .amen-item{padding:10px}
  .amen-visual{min-height:240px}
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ================= MAIN LAYOUT ADJUSTMENT ================= */
main{padding-top:58px}

/* ================= COUNTDOWN TIMER - FUNNEL STYLE ================= */
.countdown-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
  position: relative;
}

.countdown-card {
  background: var(--card);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  color: var(--ink);
  box-shadow: 
    0 20px 60px rgba(16, 24, 40, 0.15),
    0 0 0 1px var(--line),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  max-width: 700px;
  width: 100%;
  position: relative;
  overflow: hidden;
  animation: pulse-glow 3s ease-in-out infinite alternate;
}

.countdown-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 106, 42, 0.08), transparent);
  animation: rotate-border 4s linear infinite;
  z-index: -1;
}

.countdown-card::after {
  content: 'EVENTO EXCLUSIVO';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--brand), var(--brand-600));
  color: white;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(255, 106, 42, 0.4);
  animation: bounce-badge 2s ease-in-out infinite;
}

.countdown-title {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ink);
  animation: text-glow 2s ease-in-out infinite alternate;
}

.countdown-title::after {
  content: '⚡ NO TE LO PIERDAS ⚡';
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-top: 5px;
  color: var(--muted);
  letter-spacing: 1px;
}

.countdown-display {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 25px 0;
}

.time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(145deg, #fff, #f8fafc);
  border-radius: 15px;
  padding: 20px 12px;
  border: 2px solid var(--line);
  position: relative;
  transform: perspective(500px) rotateX(10deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 
    0 10px 30px rgba(16, 24, 40, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.time-unit:hover {
  transform: perspective(500px) rotateX(0deg) scale(1.05);
  box-shadow: 
    0 15px 40px rgba(16, 24, 40, 0.12);
}

.time-unit::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--brand), var(--brand-600), var(--brand), var(--brand-600));
  border-radius: 17px;
  z-index: -1;
  opacity: 0;
  animation: border-rotate 3s linear infinite;
  transition: opacity 0.3s ease;
}

.time-unit:hover::before {
  opacity: 0;
}

.time-unit span {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--brand);
  text-shadow: 
    0 2px 4px rgba(255, 106, 42, 0.2),
    0 0 20px rgba(255, 106, 42, 0.1);
  animation: number-pulse 1s ease-in-out infinite;
}

.time-unit label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  background: rgba(255, 106, 42, 0.08);
  padding: 4px 8px;
  border-radius: 20px;
  border: 1px solid rgba(255, 106, 42, 0.15);
}

.event-message {
  font-size: 32px;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(90deg, var(--brand), var(--brand-600), var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 25px;
  border-radius: 15px;
  background-color: var(--card);
  border: 2px solid var(--line);
  animation: rainbow-text 2s linear infinite, scale-pulse 1.5s ease-in-out infinite;
  box-shadow: 
    0 10px 30px rgba(16, 24, 40, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

@keyframes pulse-glow {
  0% { 
    box-shadow: 
      0 20px 60px rgba(16, 24, 40, 0.15),
      0 0 0 1px var(--line),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  100% { 
    box-shadow: 
      0 25px 80px rgba(16, 24, 40, 0.2),
      0 0 0 1px rgba(255, 106, 42, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

@keyframes rotate-border {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes bounce-badge {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-5px); }
  60% { transform: translateX(-50%) translateY(-3px); }
}

@keyframes text-glow {
  0% { text-shadow: 0 2px 4px rgba(17, 24, 39, 0.1); }
  100% { text-shadow: 0 2px 4px rgba(17, 24, 39, 0.2), 0 0 15px rgba(255, 106, 42, 0.1); }
}

@keyframes border-rotate {
  0% { background-position: 0% 0%; }
  100% { background-position: 400% 0%; }
}

@keyframes number-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes rainbow-text {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes scale-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes pulse-cta {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 8px 25px rgba(255, 106, 42, 0.4);
  }
  50% { 
    transform: scale(1.05); 
    box-shadow: 0 12px 35px rgba(255, 106, 42, 0.6);
  }
}

@media (max-width: 900px) {
  .countdown-display {
    gap: 16px;
  }
  
  .countdown-title {
    font-size: 22px;
  }
  
  .time-unit span {
    font-size: 32px;
  }
}

@media (max-width: 600px) {
  .countdown-display {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .countdown-card {
    padding: 25px 20px;
    margin: 0 15px;
  }
  
  .countdown-card::after {
    font-size: 10px;
    padding: 6px 15px;
  }
  
  .countdown-title {
    font-size: 20px;
    letter-spacing: 1px;
  }
  
  .countdown-title::after {
    font-size: 12px;
  }
  
  .time-unit {
    padding: 15px 8px;
  }
  
  .time-unit span {
    font-size: 28px;
  }
  
  .time-unit label {
    font-size: 10px;
  }
  
  .event-message {
    font-size: 24px;
    padding: 20px 15px;
  }
}

@media (max-width: 480px) {
  .countdown-container {
    padding: 20px 0;
  }
  
  .countdown-card {
    padding: 20px 15px;
    margin: 0 10px;
  }
  
  .countdown-title {
    font-size: 18px;
    margin-bottom: 6px;
  }
  
  .countdown-title::after {
    font-size: 11px;
    margin-top: 3px;
  }
  
  .countdown-display {
    gap: 12px;
    margin: 20px 0;
  }
  
  .time-unit {
    padding: 12px 6px;
  }
  
  .time-unit span {
    font-size: 24px;
  }
  
  .time-unit label {
    font-size: 9px;
    padding: 3px 6px;
  }
  
  .event-message {
    font-size: 20px;
    padding: 18px 12px;
  }
}

@media (max-width: 360px) {
  .countdown-card {
    padding: 18px 12px;
    margin: 0 8px;
  }
  
  .countdown-title {
    font-size: 16px;
    letter-spacing: 1px;
  }
  
  .countdown-title::after {
    font-size: 10px;
  }
  
  .countdown-card::after {
    font-size: 9px;
    padding: 5px 12px;
  }
  
  .countdown-display {
    gap: 10px;
    margin: 16px 0;
  }
  
  .time-unit {
    padding: 10px 4px;
  }
  
  .time-unit span {
    font-size: 20px;
  }
  
  .time-unit label {
    font-size: 8px;
    padding: 2px 4px;
  }
  
  .event-message {
    font-size: 18px;
    padding: 16px 10px;
  }
}

/* Additional Utility Classes for Inline Style Extraction */

/* Additional Spacing Classes */
.mb-60 { margin-bottom: 60px; }

/* Typography Sizes */
.text-xl { font-size: 20px; }
.text-3xl { font-size: 30px; }
.text-sm { font-size: 13px; }
.text-2xs { font-size: 14px; }

/* Layout Classes */
.relative { position: relative; }
.z-1 { z-index: 1; }
.grid-gap-14 { display: grid; gap: 14px; }
.columns-2 { columns: 2 180px; }
.padding-18 { padding: 18px; }
.padding-32 { padding: 32px; }
.pl-20 { padding-left: 20px; }

/* Margins */
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Border */
.border-radius-16 { border-radius: 16px; }
.border-light { border: 1px solid #e2e8f0; }

/* Line Height */
.line-height-15 { line-height: 1.5; }

/* Letter Spacing */
.letter-spacing-wide { letter-spacing: .18em; }

/* Gradients */
.gradient-card {
  background: linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);
}

/* Max Width */
.max-w-500 { max-width: 500px; }

/* Colors */
.text-gray-500 { color: #6b7280; }

/* Combined margin classes */
.m-auto-mb-16 { 
  margin: 0 auto 16px; 
}

/* Error message styles */
.error-message {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  background: linear-gradient(90deg, #dc2626, #ef4444, #dc2626);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 20px;
  border-radius: 12px;
  background-color: #fef2f2;
  border: 2px solid #fecaca;
  animation: error-pulse 2s ease-in-out infinite;
}

@keyframes error-pulse {
  0%, 100% { 
    opacity: 1;
  }
  50% { 
    opacity: 0.8;
  }
}

/* Mobile navigation styles */
.mobile-nav {
  display: none;
}

.mobile-nav-card {
  padding: 10px;
  margin: 10px 0;
}

.mobile-nav-content {
  display: grid;
  gap: 10px;
}

/* Screen reader only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Competitor card styles */
.comp-header {
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ff6a2a;
}

.comp-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  columns: 2 180px;
  line-height: 1.5;
}

/* Schedule styles */
.mb-2 { margin-bottom: 8px; }
.schedule-header {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}

.schedule-time {
  background: var(--brand);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 14px;
  min-width: 70px;
  text-align: center;
}

.schedule-description {
  margin-left: 82px;
}