.w-full{ width: 100%; }
.min-h-screen  { min-height: 100vh; }
.max-w-4xl     { max-width: 56rem; margin-left: auto; margin-right: auto; }
.max-w-5xl     { max-width: 64rem; margin-left: auto; margin-right: auto; }
.max-w-6xl     { max-width: 72rem; margin-left: auto; margin-right: auto; }
.max-w-xl      { max-width: 36rem; margin-left: auto; margin-right: auto; }
.mx-auto       { margin-left: auto; margin-right: auto; }
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.text-right    { text-align: right; }
.relative      { position: relative; }
.fixed { position: fixed; }
.absolute      { position: absolute; }
.inset-0       { top:0;right:0;bottom:0;left:0; }
.hidden{ display: none; }
.block { display: block; }
.flex  { display: flex; }
.inline-flex   { display: inline-flex; }
.grid  { display: grid; }
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center{ justify-content: center; }
.justify-between{justify-content: space-between; }
.flex-shrink-0 { flex-shrink: 0; }
.gap-2  { gap: .5rem; }
.gap-3  { gap: .75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-16 { gap: 4rem; }
.grid-cols-1   { grid-template-columns: repeat(1,1fr); }
.grid-cols-2   { grid-template-columns: repeat(2,1fr); }
.grid-cols-3   { grid-template-columns: repeat(3,1fr); }

/* spacing */
.p-5   { padding: 1.25rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }
.p-10  { padding: 2.5rem; }
.px-6  { padding-left:1.5rem; padding-right:1.5rem; }
.py-4  { padding-top:1rem;    padding-bottom:1rem; }
.py-5  { padding-top:1.25rem; padding-bottom:1.25rem; }
.py-20 { padding-top:5rem;    padding-bottom:5rem; }
.py-24 { padding-top:6rem;    padding-bottom:6rem; }
.py-32 { padding-top:8rem;    padding-bottom:8rem; }
.pt-12 { padding-top:3rem; }
.pt-28 { padding-top:7rem; }
.mb-1  { margin-bottom:.25rem; }
.mb-2  { margin-bottom:.5rem; }
.mb-3  { margin-bottom:.75rem; }
.mb-4  { margin-bottom:1rem; }
.mb-5  { margin-bottom:1.25rem; }
.mb-6  { margin-bottom:1.5rem; }
.mb-8  { margin-bottom:2rem; }
.mb-10 { margin-bottom:2.5rem; }
.mb-12 { margin-bottom:3rem; }
.mb-16 { margin-bottom:4rem; }
.mb-20 { margin-bottom:5rem; }
.mt-1  { margin-top:.25rem; }
.mt-2  { margin-top:.5rem; }
.mt-4  { margin-top:1rem; }
.mt-10 { margin-top:2.5rem; }
.mt-20 { margin-top:5rem; }
.mt-0\.5{ margin-top:.125rem; }

/* typography */
.text-xs   { font-size:.75rem;  line-height:1rem; }
.text-sm   { font-size:.875rem; line-height:1.25rem; }
.text-base { font-size:1rem;    line-height:1.5rem; }
.text-lg   { font-size:1.125rem;line-height:1.75rem; }
.text-xl   { font-size:1.25rem; line-height:1.75rem; }
.text-2xl  { font-size:1.5rem;  line-height:2rem; }
.text-3xl  { font-size:1.875rem;line-height:2.25rem; }
.text-4xl  { font-size:2.25rem; line-height:2.5rem; }
.font-medium  { font-weight:500; }
.font-semibold{ font-weight:600; }
.font-bold    { font-weight:700; }
.font-black   { font-weight:900; }
.tracking-wide    { letter-spacing:.025em; }
.tracking-wider   { letter-spacing:.05em; }
.tracking-widest  { letter-spacing:.1em; }
.tracking-normal  { letter-spacing:0; }
.normal-case  { text-transform:none; }
.uppercase    { text-transform:uppercase; }
.italic       { font-style:italic; }
.leading-tight   { line-height:1.25; }
.leading-relaxed { line-height:1.625; }
.underline{ text-decoration:underline; }
.underline-offset-2{ text-underline-offset:2px; }
.no-underline, a.no-underline { text-decoration:none; }

/* borders & radius */
.rounded-full { border-radius:9999px; }
.rounded-xl   { border-radius:12px; }
.rounded-2xl  { border-radius:16px; }
.rounded-3xl  { border-radius:24px; }

/* z-index */
.z-50  { z-index:50; }

/* sizing */
.w-6  { width:1.5rem; }
.w-12 { width:3rem; }
.w-36 { width:9rem; }
.w-40 { width:10rem; }
.h-6  { height:1.5rem; }
.h-10 { height:2.5rem; }
.h-12 { height:3rem; }
.w-auto { width:auto; }
.h-auto { height:auto; }

/* misc */
.overflow-hidden { overflow:hidden; }
.opacity-70      { opacity:.7; }
.drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgba(0,0,0,.45)); }
.border-t{ border-top-width:1px; }

/* ── Íconos SVG inline (reemplazan Font Awesome) ─────
   Usamos SVG directamente, sin ninguna descarga externa  */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
}
.icon-lg { font-size:1.5rem; }
.icon-xl { font-size:1.8rem; }

/* ── Animaciones ─────────────────────────────────────── */
@keyframes fadeSlideUp {
    from { opacity:0; transform:translateY(40px); }
    to   { opacity:1; transform:translateY(0); }
}
.hero-animate { opacity:0; animation:fadeSlideUp .9s cubic-bezier(.22,1,.36,1) forwards; }
.delay-1 { animation-delay:.15s; }
.delay-2 { animation-delay:.35s; }
.delay-3 { animation-delay:.55s; }
.delay-4 { animation-delay:.75s; }

.scroll-reveal {
    opacity:0;
    transform:
        translateY(40px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal-active {
    opacity:1;
    transform:
        translateY(0);
}

/* ── Método timeline ─────────────────────────────────── */
.method-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    position:relative;
}
.method-grid::before {
    content:'';
    position:absolute;
    top:28px; left:12.5%; right:12.5%;
    height:2px;
    background:linear-gradient(to right,#0ea5e9,#2dd4bf);
    z-index:0;
}
.method-item {
    display:flex; flex-direction:column;
    align-items:center; text-align:center;
    padding:0 1rem; position:relative; z-index:1;
}
.method-dot {
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg,#0ea5e9,#2dd4bf);
    color:white; font-weight:900; font-size:1.1rem;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:1.25rem;
    box-shadow:0 8px 20px rgba(14,165,233,.40);
    flex-shrink:0;
}

/* ── Iconos pilares ──────────────────────────────────── */
.pilar-icon {
    width:64px; height:64px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:1.5rem; font-size:1.6rem; color:white;
    background:linear-gradient(135deg,#0ea5e9,#2dd4bf);
    box-shadow:0 8px 20px rgba(14,165,233,.35);
    transition:transform .3s ease;
}
.glass-card:hover .pilar-icon { transform:scale(1.1) rotate(-5deg); }

/* ── WhatsApp flotante ───────────────────────────────── */
.wa-float {
    position:fixed; bottom:28px; right:28px; z-index:999;
    width:60px; height:60px; border-radius:50%;
    background:#25d366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 25px rgba(37,211,102,.45);
    transition:all .3s ease; text-decoration:none;
}
.wa-float:hover { transform:scale(1.12); box-shadow:0 12px 30px rgba(37,211,102,.55); }

/* ── Hamburguesa ─────────────────────────────────────── */
.hamburger {
    display:none; flex-direction:column; gap:5px;
    cursor:pointer; padding:4px; background:none; border:none;
}
.hamburger span { display:block; width:24px; height:2px; background:white; border-radius:2px; transition:all .3s ease; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu {
    display:none; position:fixed;
    top:70px; left:0; right:0;
    background:rgba(4,19,31,.97);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(103,232,249,.12);
    padding:1.5rem 2rem; z-index:49;
    flex-direction:column; gap:1.25rem;
}
.mobile-menu.open { display:flex; }
.mobile-menu a { font-size:1.1rem; font-weight:700; color:#f1f9ff; text-decoration:none; }
.mobile-menu a:hover { color:#67e8f9; }

/* ── Nav ─────────────────────────────────────────────── */
nav.site-nav {
    position:fixed; width:100%; z-index:50;
    padding:.9rem 2.5rem;
    background:rgba(15,23,42,.40);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(103,232,249,.10);
    display:flex; align-items:center; justify-content:space-between;
}
.nav-links { display:flex; gap:2rem; }
.nav-links a { font-size:1rem; font-weight:600; color:rgba(207,240,255,.90); text-decoration:none; letter-spacing:.01em; }
.nav-links a:hover { color:#67e8f9; }

/* ── Responsive ──────────────────────────────────────── */
@media (min-width:768px) {
    .md\:flex       { display:flex !important; }
    .md\:hidden     { display:none !important; }
    .md\:grid-cols-2{ grid-template-columns:repeat(2,1fr); }
    .md\:grid-cols-3{ grid-template-columns:repeat(3,1fr); }
    .md\:text-right { text-align:right; }
    .md\:flex-row   { flex-direction:row; }
    .md\:inline-flex{ display:inline-flex; }
    .md\:w-52       { width:13rem; }
    .md\:text-5xl   { font-size:3rem; }
    .md\:text-6xl   { font-size:3.75rem; }
    .md\:text-7xl   { font-size:4.5rem; }
    .md\:px-12      { padding-left:3rem; padding-right:3rem; }
    .md\:pl-16      { padding-left:4rem; }
    .md\:pr-12      { padding-right:3rem; }
}
@media (min-width:640px) {
    .sm\:flex-row   { flex-direction:row; }
    .sm\:grid-cols-3{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px) {
    .lg\:grid-cols-4{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:767px) {
    .hamburger   { display:flex; }
    .desktop-nav { display:none !important; }
    .method-grid { grid-template-columns:1fr 1fr; gap:2rem; }
    .method-grid::before { display:none; }
    .hero-title  { font-size:2.8rem; }
    nav.site-nav { padding:.9rem 1.25rem; }
}
@media (max-width:480px) {
    .method-grid { grid-template-columns:1fr; }
    .hero-title  { font-size:2.2rem; }
}