* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #0f172a;
    /* Layout para sticky footer */
    display: flex;
    flex-direction: column;
    /* Fallback + soporte para barras dinámicas móviles */
    min-height: 100vh;
    min-height: 100dvh;
    /* Fondo global para evitar franja blanca fuera del contenedor */
    background-image: url("data:image/svg+xml,%3csvg width='1920' height='1080' viewBox='0 0 1920 1080' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_857_2)'%3e%3crect width='1920' height='1080' fill='url(%23paint0_linear_857_2)'/%3e%3cpath d='M-69.6133 918.002C-105.065 1025.9 -101.126 1138.27 198.247 724.524C572.464 207.34 202.186 -138.689 690.638 -116.365C816.316 -110.62 928.016 -106.262 1024.36 -102.992C1142.73 -164.065 1308.66 -134.837 1416 -94.0401C1362.43 -94.0401 1227.56 -96.0948 1024.36 -102.992C934.013 -56.3787 871.379 42.8383 883.655 229.665C919.107 769.173 1348.47 1319.84 229.76 1338.45C-665.209 1353.33 -342.726 1064.35 -69.6133 918.002Z' fill='%23FFFFFF' fill-opacity='0.5'/%3e%3cpath d='M1065.39 1187C1029.93 1294.9 1033.87 1407.27 1333.25 993.524C1707.46 476.34 1337.19 130.311 1825.64 152.635C1951.32 158.38 2063.02 162.738 2159.36 166.008C2277.73 104.935 2443.66 134.163 2551 174.96C2497.43 174.96 2362.56 172.905 2159.36 166.008C2069.01 212.621 2006.38 311.838 2018.66 498.665C2054.11 1038.17 2483.47 1588.84 1364.76 1607.45C469.791 1622.33 792.274 1333.35 1065.39 1187Z' fill='%23E5E7EB'/%3e%3cpath d='M-308.613 575.002C-344.065 682.904 -340.126 795.271 -40.7527 381.524C333.464 -135.66 -36.8135 -481.689 451.638 -459.365C577.316 -453.62 689.016 -449.262 785.357 -445.992C903.725 -507.065 1069.66 -477.837 1177 -437.04C1123.43 -437.04 988.559 -439.095 785.357 -445.992C695.013 -399.379 632.379 -300.162 644.655 -113.335C680.107 426.173 1109.47 976.843 -9.23969 995.447C-904.209 1010.33 -581.726 721.352 -308.613 575.002Z' fill='%23F3F4F6' fill-opacity='0.6'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear_857_2' x1='1644.5' y1='66' x2='120.5' y2='858' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%23F9FAFB'/%3e%3cstop offset='1' stop-color='%23E5E7EB'/%3e%3c/linearGradient%3e%3cclipPath id='clip0_857_2'%3e%3crect width='1920' height='1080' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.container {
    position: relative;
    flex: 1 0 auto; /* ocupa el alto disponible sin interferir con el footer */
    width: 100%;
    overflow: hidden;
    display: flex; /* Para centrar el contenido interno */
}

/* Animated background circles - pulse effect */
.pulse-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.pulse-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    border-radius: 50%;
    border: 1px solid rgba(13, 148, 136, 0.2);
    opacity: 0;
}

.pulse-circle-1 {
    animation: pulseWave 4s ease-out infinite;
}

.pulse-circle-2 {
    animation: pulseWave 4s ease-out infinite 1.3s;
}

.pulse-circle-3 {
    animation: pulseWave 4s ease-out infinite 2.6s;
}

@keyframes pulseWave {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* Main content */
.main-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; /* Asegura que ocupe todo el ancho del contenedor flex */
    /* Que ocupe el alto del contenedor para centrar verticalmente */
    min-height: 100%;
    /* Espaciado lateral + margen superior seguro en móviles */
    padding: calc(1rem + env(safe-area-inset-top)) 1.5rem 1rem;
}

/* Logo */
.logo-wrapper {
    margin-bottom: 3rem;
    opacity: 0;
    animation: fadeInScale 1s ease-out forwards;
}

.logo-container {
    animation: logoBreath 2.5s ease-in-out infinite;
}

.logo {
    height: 12rem;
    width: 12rem;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* Tagline */
.tagline {
    margin-bottom: 4rem;
    text-align: center;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.title {
    font-family: 'Poppins', sans-serif;
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    background: linear-gradient(to right, #0f766e, #0d9488);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #475569;
    max-width: 28rem;
    margin: 0 auto;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Services grid */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 80rem;
    width: 100%;
}

.service-card {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

.service-card:nth-child(1) {
    animation-delay: 0.5s;
}

.service-card:nth-child(2) {
    animation-delay: 0.6s;
}

.service-card:nth-child(3) {
    animation-delay: 0.7s;
}

.service-card:nth-child(4) {
    animation-delay: 0.8s;
}

.card-inner {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid #D1D5DB; /* --color-border del SDL */
    background: #FFFFFF; /* --color-surface del SDL */
    padding: 1.5rem;
    cursor: default;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.card-inner:hover {
    border-color: #0D9488; /* --color-primary del SDL */
    /* Sombra más pronunciada en hover, inspirada en el SDL */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px) scale(1.05);
}

.shine-effect {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.7s ease;
}

.card-inner:hover .shine-effect {
    transform: translateX(100%);
}

.card-content {
    position: relative;
    /* Center content horizontally inside each card */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    background: #CCFBF1; /* bg-teal-100 del SDL */
    margin-bottom: 0.75rem;
}

.card-icon i,
.card-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #0d9488; /* Color primario del SDL */
}

.card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
    color: #1e293b;
}

/* Coming soon */
.coming-soon {
    margin-top: 5rem;
    opacity: 0;
    animation: fadeIn 1s ease-out 1.2s forwards;
}

.coming-soon-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
}

.pulse-icon {
    width: 0.875rem; /* 14px */
    height: 0.875rem; /* 14px */
    color: #0d9488;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Gradient overlay */
.gradient-overlay {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 70%, rgba(255, 255, 255, 0.25));
}

/* Footer */
.footer {
    /* Fuera del contenedor; body es flex column → queda al fondo */
    position: static;
    align-self: center; /* centrado horizontal */
    z-index: 20;
    background: transparent;
    padding: 0;
    margin: 0 auto calc(0.75rem + env(safe-area-inset-bottom)) auto; /* safe-area */
}

/* Badge interno que recibe la apariencia de píldora */
/* Texto de footer simple, sin fondo ni cápsula */
.footer-text {
    text-align: center;
    color: #6b7280; /* gris neutro */
    font-size: 0.625rem; /* 10px más pequeño */
    line-height: 1.3;
    margin: 0;
    white-space: normal; /* permite envolver naturalmente */
    word-break: normal;
    overflow-wrap: anywhere; /* seguridad para pantallas muy estrechas */
}

/* Ajustes para pantallas con poca altura: reduce espacios verticales */
@media (max-height: 700px) {
    .logo {
        height: 10rem;
        width: 10rem;
    }
    .logo-wrapper {
        margin-bottom: 1.5rem;
    }
    .tagline {
        margin-bottom: 2rem;
    }
    .coming-soon {
        margin-top: 2.5rem;
    }
}

/* Responsive */
@media (min-width: 640px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* En pantallas muy estrechas, incrementa ligeramente el padding superior */
@media (max-width: 400px) {
    .main-content {
        padding-top: calc(1.25rem + env(safe-area-inset-top));
    }
}

@media (min-width: 768px) {
    .logo {
        height: 16rem;
        width: 16rem;
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}