/* ============================================================
   NELSON DÍAZ — OFFICIAL CSS 2026 (PREMIUM UPDATE)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');

.handwritten-note {
    font-family: 'Caveat', cursive;
    color: #e30613;
    font-size: 55px; /* Cambia el tamaño aquí */
    
    /* EL SECRETO: Posicionamiento absoluto */
    position: absolute; 
    
    /* COORDENADAS: Juega con estos números */
    bottom: 300px;    /* Qué tan cerca del final de la intro está */
    left: -90px;    /* Qué tan a la derecha está (puedes usar 'left' si prefieres) */
    
    transform: rotate(-5deg); /* Inclinación */
    z-index: 20; /* Asegura que esté por encima de la cuadrícula */
    white-space: nowrap; /* Evita que el texto se parta en dos líneas */
}

/* Opcional: una pequeña flecha dibujada debajo del texto */
.handwritten-note::after {
    content: "↴";
    position: absolute;
    bottom: -20px;
    right: -20px;
    font-size: 30px;
    transform: rotate(10deg);
}

/* 1. RESET & BASE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: #ffffff;
    color: #000;
    line-height: 1.5;
    overflow-x: hidden;
}

/* 2. LAYOUT & CONTAINERS */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}

/* 3. BRANDING */
.brand-section {
    text-align: center;
    margin-bottom: 80px;
}

.brand-name {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 800;
    letter-spacing: -4px;
}

.brand-tagline {
    font-size: 18px;
    color: #666;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.brand-divider {
    height: 1px;
    background: #eee;
    margin-bottom: 80px;
}

/* 4. INTRO SECTION (AMIGABLE & PRO) */
.intro-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 120px;
}

.badge {
    background-color: #e30613; /* Rojo poder de Nelson */
    color: #ffffff; /* Letra blanca pura */
    padding: 8px 16px; /* Un poco más de aire para que se vea premium */
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    display: inline-block;
    margin-bottom: 25px;
    border-radius: 4px; /* Un toque leve de redondeado para que no sea tan rudo */
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(227, 6, 19, 0.2); /* Un brillo rojo sutil abajo */
}

.intro-text h2 {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 0.9;
    margin-bottom: 35px;
    font-weight: 800;
    letter-spacing: -2px;
}

.intro-text p {
    font-size: 19px;
    color: #333;
    margin-bottom: 25px;
    max-width: 520px;
}

.intro-image img {
    width: 100%;
    height: auto;
    filter: grayscale(100%);
    mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
}

.intro-image {
    position: relative !important;
    overflow: visible !important; /* CLAVE: Esto permite que el texto se salga de la foto */
    display: inline-block; /* Ajusta la caja al tamaño de la imagen */
}

.handwritten-welcome {
    font-family: 'Caveat', cursive;
    color: #e30613;
    font-size: 45px;
    line-height: 1;
    position: absolute !important;
    
    /* Coordenadas extremas para que lo veas sí o sí */
    bottom: 80%; 
    left: -60px; 
    
    z-index: 999; /* Lo pone por encima de TODO */
    transform: rotate(-10deg);
    width: 250px; /* Le damos un ancho para que no se comprima */
    pointer-events: none; /* Para que no estorbe si quieres hacer clic en la foto */
}

/* ============================================================
   MÉTODO 360 ESPECTACULAR - CLEAN & GLOW
   ============================================================ */

.method-spectacular {
    padding: 120px 20px;
    background: #ffffff; /* Fondo blanco para que resalten las sombras */
    text-align: center;
}

.method-intro {
    position: relative; /* Esto es el ancla */
    padding-bottom: 20px; /* Deja un espacio extra abajo para que el texto no tape lo que sigue */
}

.red-title {
    color: #e30613; /* Rojo poder */
    font-size: clamp(50px, 8vw, 85px);
    font-weight: 800;
    letter-spacing: -3px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.method-desc {
    font-size: 30px;
    color: #444;
    max-width: 700px;
    margin: 0 auto;
    letter-spacing: -1px;
}

/* GRILLA ESPECTACULAR */
/* GRILLA ESPECTACULAR - FORZANDO 4 COLUMNAS */
.spectacular-grid {
    display: grid;
    /* Forzamos 4 columnas iguales en desktop */
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; /* Reducimos un poco el espacio para que respiren mejor */
    max-width: 1300px; /* Ampliamos un poco el ancho máximo para darles aire */
    margin: 0 auto;
    padding: 20px 0;
}

.spectacular-card {
    background: #ffffff;
    padding: 40px 25px; /* Ajustamos padding para que el texto no se vea apretado */
    border-radius: 25px;
    border: 1px solid #f0f0f0;
    text-align: left;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%; /* Para que todas midan lo mismo aunque tengan distinto texto */
}

/* AJUSTE RESPONSIVE: Aquí es donde decidimos cuándo romperse */
@media (max-width: 1100px) {
    .spectacular-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 en tablets */
    }
}

@media (max-width: 650px) {
    .spectacular-grid {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }
    .red-title {
        font-size: 42px;
    }
}

.card-num {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #e30613;
    margin-bottom: 25px;
    font-family: monospace;
}

.spectacular-card h4 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: #000;
}

.spectacular-card p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin: 0 !important; /* Resetea margenes previos */
}

/* EFECTO WOW AL PASAR EL CURSOR */
.spectacular-card:hover {
    transform: translateY(-15px); /* Levitación espectacular */
    border-color: rgba(227, 6, 19, 0.2);
    
    /* Sombra Roja Glow (Efecto espectacular) */
    box-shadow: 0 20px 50px rgba(227, 6, 19, 0.15), 
                0 0 20px rgba(227, 6, 19, 0.05);
}

.spectacular-card:hover h4 {
    color: #e30613; /* El título de la tarjeta cambia a rojo al hacer hover */
}

/* AJUSTE PARA MÓVIL */
@media (max-width: 768px) {
    .red-title {
        font-size: 45px;
    }
    .spectacular-grid {
        gap: 25px;
    }
    .spectacular-card {
        padding: 40px 30px;
    }
}

/* ==================6. GENERIC SECTIONS & EDITORIAL */
/* 6. GENERIC SECTIONS & EDITORIAL - CORREGIDO Y CENTRADO */
.section {
    text-align: center;
    margin-top: 120px; /* Espacio hacia arriba para que no se pegue */
    margin-bottom: 140px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos hijos horizontalmente */
}

.section h2 {
    font-size: 42px;
    margin-bottom: 40px;
    font-weight: 800;
    letter-spacing: -1px;
    width: 100%; /* Asegura que el título ocupe su espacio para centrarse */
}

.section p {
    font-size: 20px;
    max-width: 800px;
    /* EL SECRETO DEL CENTRADO: 0 arriba/abajo y auto a los lados */
    margin: 0 auto 25px auto; 
    color: #444;
    line-height: 1.6;
}

.italic {
    font-style: italic;
    font-size: 26px;
    color: #000;
    margin: 40px auto 0 auto !important; /* Centrado forzado */
    font-weight: 500;
    max-width: 900px !important;
    line-height: 1.4;
    position: relative;
}

/* Específicamente para el botón de reporte */
.section .btn {
    display: inline-block; /* Permite que el margen funcione correctamente */
    margin-top: 50px;      /* Crea el espacio que necesitas con la frase de arriba */
    padding: 18px 35px;    /* Lo hace un poco más grande y fácil de tocar */
    transition: all 0.3s ease;
}

/* Si quieres que el botón tenga el efecto de Nelson al pasar el mouse */
.section .btn:hover {
    background-color: #e30613;
    color: #fff;
    box-shadow: 0 10px 20px rgba(227, 6, 19, 0.2);
    transform: translateY(-3px);
}

/* ============================================================
   SECCIÓN CONSULTORÍA: UNIFORMIDAD Y ESTILO PREMIUM
   ============================================================ */

.services-section {
    padding-top: 180px !important; /* Usamos padding en lugar de margin para no romper el grid */
    margin-top: 0 !important;
}

/* Forzamos a que el grid mantenga sus 3 columnas originales */
.services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
}

/* Si en móvil se veía uno por fila, esto lo respeta */
@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: 1fr !important;
    }
}

.service-card {
    /* Fondo blanco sólido para TAPAR la cuadrícula */
    background-color: #ffffff !important; 
    padding: 50px 40px;
    border-radius: 20px;
    border: 1px solid #eee;
    text-align: left;
    
    /* El truco para que todas midan lo mismo */
    display: flex;
    flex-direction: column;
    height: 100%; 
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: relative;
    z-index: 10;
}

.service-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    min-height: 50px; /* Alinea los títulos si uno tiene 2 líneas */
}

.service-card p {
    font-size: 17px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 30px;
    /* Empuja el precio y el botón hacia abajo */
    flex-grow: 1; 
}

.service-card .price {
    display: block;
    font-weight: 800;
    font-size: 13px;
    color: #e30613;
    letter-spacing: 1px;
    margin-bottom: 25px;
    padding-top: 15px;
    border-top: 1px solid #f9f9f9;
}

/* El Botón de Nelson */
.service-card .btn.small {
    width: 100%;
    text-align: center;
    padding: 16px;
    font-size: 12px;
    margin-top: auto; /* Se pega al fondo de la tarjeta */
}

/* Efecto al pasar el mouse */
.service-card:hover {
    transform: translateY(-10px);
    border-color: #e30613;
    box-shadow: 0 20px 40px rgba(227, 6, 19, 0.1);
}

/* EFECTO WOW EN CONSULTORÍA */
.service-card:hover {
    transform: translateY(-15px); /* Elevación un poco más pronunciada */
    border-color: rgba(227, 6, 19, 0.4); /* El borde se tiñe de rojo suave */
    
    /* SOMBREADO ROJO GLOW (Efecto espectacular) */
    /* Combinamos una sombra profunda con un resplandor neón suave */
    box-shadow: 
        0 20px 40px rgba(227, 6, 19, 0.15), 
        0 0 25px rgba(227, 6, 19, 0.1);
}

/* Opcional: Que el título también cambie a rojo al pasar el cursor para avisar que es interactivo */
.service-card:hover h3 {
    color: #e30613;
    transition: color 0.3s ease;
}

/* Transición suave para que el brillo no sea brusco */
.service-card {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Responsive: 1 columna en móviles */
@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* 8. BUTTONS */
.btn {
    display: inline-block;
    background: #e30613;
    color: #fff;
    padding: 18px 40px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    transition: 0.3s ease;
}

.btn:hover {
    background: #000;
    transform: translateY(-2px);
}

.btn.small {
    padding: 14px 25px;
    margin-top: auto;
    text-align: center;
}

/* 9. ICONIC QUOTE */
.quote-section {
    padding: 140px 20px;
    text-align: center;
    background: #fff;
}

.iconic-quote {
    font-size: clamp(36px, 7vw, 90px);
    font-weight: 800;
    color: #e30613;
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -3px;
}

/* ========================10. FOOTER - LIMPIO Y CONSOLIDADO */
.footer {
    border-top: 1px solid #eee;
    padding: 80px 20px;
    text-align: center;
    position: relative; /* Para que la nota manuscrita se posicione bien */
}

.handwritten-footer {
    font-family: 'Caveat', cursive;
    color: #e30613;
    font-size: 40px;
    margin-bottom: 15px;
    display: inline-block;
    
    /* EFECTO ARCO: Inclinación + curvatura visual */
    transform: rotate(-3deg) translateY(-10px);
    letter-spacing: 1px;
    
    /* Animación sutil de "escritura" o flotado */
    animation: floatHandwritten 3s ease-in-out infinite;
}

.footer-arrow {
    display: inline-block;
    font-size: 35px;
    transform: rotate(20deg) translateX(5px);
    vertical-align: middle;
}

/* Animación para que cobre vida */
@keyframes floatHandwritten {
    0%, 100% { transform: rotate(-3deg) translateY(-10px); }
    50% { transform: rotate(-1deg) translateY(-15px); }
}

.social {
    margin-top: 20px;
    margin-bottom: 40px; /* Fusionamos los dos márgenes en uno solo */
}

.social a {
    margin: 0 20px;
    text-decoration: none;
    font-weight: 800;
    color: #000;
    font-size: 12px;
    letter-spacing: 2px;
    transition: color 0.3s ease; /* Para que el cambio a rojo sea suave */
}

/* Efecto Nelson: Redes sociales cambian a rojo al pasar el mouse */
.social a:hover {
    color: #e30613;
}

.copyright {
    font-size: 12px;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- ESTILO BASE PARA LAS 3 FRASES NUEVAS --- */
.frase-metodo {
    font-family: 'Caveat', cursive;
    color: #e30613;
    font-size: 45px;
    text-align: center;
    display: block;
    width: 100%;
    position: relative;
    z-index: 10;
    line-height: 1;
}

/* --- POSICIÓN FRASE 1 (MÉTODO) --- */
.frase-metodo {
    margin-top: 40px;
    transform: rotate(-2deg);
}

.frase-insignia {
    color: #e30613 !important; /* Esto fuerza el rojo Nelson */
    margin-top: 30px;
    transform: rotate(1deg);
    font-family: 'Caveat', cursive !important; /* Por si acaso se puso gris y perdió la fuente */
    font-size: 45px;
    line-height: 1.1;
}

/* --- POSICIÓN FRASE 2 (INSIGNIA) --- */
.frase-insignia {
    margin-top: -250px !important; 
    font-size: 35px !important; /* Súbelo a 60px o 70px si la quieres más grande */
    line-height: 0.7 !important;
    transform: rotate(-7deg) translateX(-600px); 
    
    /* 3. ALINEACIÓN: */
    text-align: left; /* Opcional: cámbialo a left si quieres que el texto mismo se pegue a la izquierda */
    padding-left: 5%; /* Un pequeño respiro del borde */
}

/* --- POSICIÓN FRASE 3 (SERVICIOS) --- */
.frase-servicios {
    /* 1. COLOR */
    color: #e30613 !important; /* Rojo Nelson */

    /* 2. TAMAÑO */
    font-size: 42px !important; /* Ajusta este número para el tamaño */
    line-height: 1 !important;  /* Espacio entre líneas (más bajo = más pegadas) */

    /* 3. UBICACIÓN (Arriba / Abajo) */
    margin-top: 50px !important;   /* Positivo baja, Negativo sube */
    margin-bottom: 20px;

    /* 4. UBICACIÓN (Izquierda / Derecha / Rotación) */
    /* translateX: Negativo mueve a la izquierda, Positivo a la derecha */
    /* rotate: Grados de inclinación */
    transform: rotate(-1deg) translateX(-50px); 
    
    /* 5. FUENTE (Por si se pierde) */
    font-family: 'Caveat', cursive !important;
    display: block;
    text-align: center;
}

/* Ajuste móvil para las tres */
@media (max-width: 768px) {
    .frase-metodo, .frase-insignia, .frase-servicios {
        font-size: 24px;
        padding: 0 10px;
    }
}

/* ============================================================
   SOLUCIÓN QUIRÚRGICA PARA MÓVILES (NO TOCA EL DESKTOP)
   ============================================================ */

@media (max-width: 800px) {
    /* 1. Evitamos que la página se mueva hacia los lados */
    body {
        overflow-x: hidden !important;
    }

    /* 2. Reseteamos las frases de Nelson para que no se vuelen */
    .frase-metodo, 
    .frase-insignia, 
    .frase-servicios {
        position: static !important; /* Quita el comportamiento de vuelo */
        transform: rotate(-2deg) translateX(0) !important; /* Las centra */
        margin: 30px auto !important; /* Les da espacio vertical limpio */
        font-size: 28px !important; /* Tamaño legible en pantalla pequeña */
        text-align: center !important;
        width: 100% !important;
        padding: 0 15px !important;
        line-height: 1.2 !important;
    }

    /* 3. Corregimos el "apeñizco" en Mobile sin romper las tarjetas */
    .services-section {
        padding-top: 50px !important;
        margin-top: 0 !important;
    }

    /* 4. Aseguramos que las tarjetas se vean una debajo de otra en celular */
    .spectacular-grid, 
    .services-grid {
        grid-template-columns: 1fr !important; /* Una sola columna */
        gap: 20px !important;
    }

    /* 5. Ajustamos la bienvenida sobre la foto para que no estorbe */
    .handwritten-welcome {
        font-size: 28px !important;
        left: 10px !important;
        bottom: 10px !important;
        width: auto !important;
    }

    /* 6. El título gigante de abajo lo bajamos un poco */
    .iconic-quote {
        font-size: 35px !important;
        padding: 60px 20px !important;
    }
}

/* AJUSTE ESPECÍFICO PARA CABECERA E INTRO EN MÓVIL */
@media (max-width: 768px) {
    /* 1. Ajuste del Nombre (Nelson Díaz) */
    .brand-name {
        font-size: 45px !important; /* Evita que el nombre se corte o use 3 líneas */
        letter-spacing: -1px !important;
        line-height: 1 !important;
        margin-bottom: 10px;
    }

    .brand-tagline {
        font-size: 14px !important;
        letter-spacing: 2px !important;
    }

    .brand-divider {
        margin-bottom: 40px !important; /* Menos espacio muerto en móvil */
    }

    /* 2. Intro Section: De 2 columnas a 1 sola fila vertical */
    .intro-section {
        display: flex !important;
        flex-direction: column !important; /* Pone el texto arriba y la foto abajo */
        gap: 40px !important;
        text-align: center !important;
        padding: 0 10px !important;
    }

    .intro-text h2 {
        font-size: 38px !important;
        line-height: 1 !important;
    }

    .intro-text p {
        font-size: 17px !important;
        margin: 0 auto 20px auto !important; /* Centra los párrafos */
        max-width: 100% !important;
    }

    /* 3. La foto y el mensaje de bienvenida */
    .intro-image {
        width: 100% !important;
        max-width: 400px; /* Para que la foto no sea gigante en pantallas largas */
        margin: 0 auto !important;
    }
}

@media (max-width: 768px) {
    /* Contenedor de la foto y la frase */
    .intro-image {
        display: flex !important;
        flex-direction: column !important; /* Los pone en fila vertical */
        align-items: flex-start !important; /* Alinea todo a la izquierda */
    }

    /* La frase hecha a mano */
    .handwritten-welcome {
        position: relative !important;
        order: -1 !important; /* EL SECRETO: El valor -1 la obliga a ponerse DE PRIMERAS */
        
        bottom: auto !important;
        left: auto !important;
        
        text-align: left !important;
        width: 100% !important;
        padding-left: 5px !important;
        
        margin-top: 20px !important;
        margin-bottom: 10px !important; /* Espacio con la foto que viene debajo */
        
        transform: rotate(-4deg) !important;
        font-size: 32px !important;
        line-height: 1 !important;
    }

    /* La imagen de Nelson */
    .intro-image img {
        order: 2 !important; /* Se queda debajo de la frase */
        width: 100% !important;
        max-width: 450px !important;
        margin: 0 auto !important; /* La foto sí puede ir centrada si quieres */
    }
}

    /* 2. REDUCIR ESPACIO EN LA QUOTE FINAL */
    .quote-section {
        padding: 10px 20px !important; /* Bajamos de 140px a 40px */
    }

    .iconic-quote {
        font-size: 40px !important; /* Tamaño ajustado para que no ocupe toda la pantalla */
        line-height: 1.1 !important;
        letter-spacing: -1px !important;
    }
}

.handwritten-note {
        /* 1. REDUCIR TAMAÑO */
        font-size: 24px !important; /* Ajusta este número si la quieres aún más pequeña */
        
        /* 2. REUBICACIÓN EN MOBILE */
        /* En Desktop usabas position: absolute, aquí la volvemos normal para que no flote */
        position: relative !important; 
        bottom: auto !important;
        left: 0 !important;
        
        /* 3. ALINEACIÓN */
        display: block !important;
        text-align: center !important; /* La centramos para que acompañe al título y descripción */
        margin: 20px auto !important; 
        transform: rotate(-3deg) !important;
        white-space: normal !important; /* Permite que el texto respire si la pantalla es muy angosta */
    }
    
/* ============================================================
   NUEVA SECCIÓN: PILARES Y DIAGRAMA
   ============================================================ */

.pillars-section {
    padding: 60px 20px;
    background: #fdfdfd; /* Un tono casi blanco para diferenciar sutilmente */
    text-align: center;
}

.pillars-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto 80px auto;
}

.pillar-item {
    border-left: 1px solid #eee; /* Líneas divisorias sutiles */
    padding: 20px;
    transition: all 0.3s ease;
}

.pillar-item:first-child { border-left: none; }

.pillar-label {
    font-size: 12px;
    font-weight: 800;
    color: #e30613;
    display: block;
    margin-bottom: 10px;
}

.pillar-item h3 {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.pillar-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

/* CONTENEDOR DEL DIAGRAMA */
.diagram-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding: 40px 0;
}

.main-diagram {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.05));
}

.handwritten-note-alt {
    font-family: 'Caveat', cursive;
    color: #e30613;
    font-size: 38px;
    position: absolute;
    
    /* CONTROL DE POSICIÓN */
    right: -100px; 
    top: -350px; /* MÁS NEGATIVO = MÁS ARRIBA. Estaba en -50, lo subí a -150 */
    
    transform: rotate(-5deg);
    
    /* CONTROL DE ESPACIO ENTRE LÍNEAS */
    line-height: 0.8 !important; /* Valor bajo para que las líneas se toquen */
    display: block;
}

/* EFECTO DE SOMBREADO ROJO EN LOS PILARES */
.pillar-item {
    border-left: 1px solid #eee; 
    padding: 30px 20px; /* Un poco más de aire */
    border-radius: 20px; /* Redondeamos para que el brillo se vea mejor */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    background: #ffffff;
}

/* EL EFECTO WOW AL PASAR EL CURSOR */
.pillar-item:hover {
    transform: translateY(-10px); /* Levitación */
    border-color: rgba(227, 6, 19, 0.3); /* El borde se tiñe de rojo */
    background-color: #ffffff;
    z-index: 5;
    
    /* Sombra Roja Glow (Igual al Método 360) */
    box-shadow: 0 20px 40px rgba(227, 6, 19, 0.15), 
                0 0 20px rgba(227, 6, 19, 0.05);
}

/* Cambio de color del número y título al hacer hover */
.pillar-item:hover h3 {
    color: #e30613;
    transition: color 0.3s ease;
}

/* Quitamos la línea divisoria si es el primero o si se le hace hover al vecino */
.pillar-item:first-child { border-left: none; }
.pillar-item:hover { border-left-color: transparent; }



/* RESPONSIVE PARA LOS PILARES */
@media (max-width: 900px) {
    .pillars-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .pillar-item {
        border-left: none;
        border-bottom: 1px solid #eee;
    }
    .handwritten-note-alt {
        position: static;
        margin-top: 20px;
    }
}

@media (max-width: 500px) {
    .pillars-container {
        grid-template-columns: 1fr;
    }
}