@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@700;900&display=swap');

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

:root {
    --ocean-deep: #0a1628;
    --ocean-mid: #0d2137;
    --foam: #e8f4f8;
    --gold: #ffd83ddd;
    --aqua: #4ecdc4;
    --coral: #ff8a65;
    --pearl: #ffffff;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    background: var(--ocean-deep);
    color: var(--pearl);
    overflow-x: hidden;
}

/* ==================== NAVBAR ==================== */
.barra-navegacion {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.4s ease;
    background: transparent;
}

.barra-navegacion.scrolled {
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    padding: 0.7rem 2rem;
}

.marca-logo-sitio {
    font-family: 'Dancing Script', cursive;
    font-size: 1.9rem;
    color: #ffd83d;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-pez-animado {
    font-size: 1.7rem;
    animation: swim 3s ease-in-out infinite;
}

@keyframes swim {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(5px) rotate(5deg); }
    75% { transform: translateX(-5px) rotate(-5deg); }
}

.lista-enlaces-navegacion {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.lista-enlaces-navegacion a {
    color: var(--foam);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    padding: 0.3rem 0;
    transition: color 0.3s;
}

.lista-enlaces-navegacion a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.3s;
}

.lista-enlaces-navegacion a:hover { color: var(--gold); }
.lista-enlaces-navegacion a:hover::after { width: 100%; }

.boton-conmutador-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 5px;
    /* Sits above the sliding panel, which would otherwise cover it once open */
    position: relative;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.boton-conmutador-menu span {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--foam);
    border-radius: 3px;
    transform-origin: center;
    transition: transform 0.3s ease, opacity 0.2s ease, background 0.3s ease;
}

/* Three bars fold into an X. The bars are 3px tall with a 5px gap, so the
   outer two travel 8px to meet in the middle. */
.boton-conmutador-menu.abierto span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.boton-conmutador-menu.abierto span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.boton-conmutador-menu.abierto span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.boton-conmutador-menu:hover span { background: var(--gold); }

.boton-conmutador-menu:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 6px;
    border-radius: 4px;
}

/* ==================== HERO ==================== */
.seccion-hero-inicio {
    min-height: 100vh;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 7rem 0 10rem;
}

.fondo-degradado-oceano {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        #4ecdc4 0%,
        #2d9db8 30%,
        #1a6b8a 50%,
        #134a6e 70%,
        #0d2847 85%,
        #0a1628 100%
    );
}


/* Animated bubbles */
.contenedor-burbujas-animadas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.burbuja-animada {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.15);
    animation: rise linear infinite;
}

@keyframes rise {
    0% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { opacity: 0.3; }
    100% { transform: translateY(-110vh) scale(0.5); opacity: 0; }
}

/* Light rays */
.rayos-luz-submarina {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 200%;
    height: 100%;
    background: conic-gradient(
        from 180deg,
        transparent 0deg,
        rgba(255, 217, 61, 0.08) 10deg,
        transparent 20deg,
        rgba(255, 217, 61, 0.05) 50deg,
        transparent 60deg,
        rgba(255, 217, 61, 0.08) 90deg,
        transparent 100deg,
        rgba(78, 205, 196, 0.04) 140deg,
        transparent 160deg,
        rgba(78, 205, 196, 0.08) 200deg,
        transparent 220deg
    );
    -webkit-mask-image: radial-gradient(
        ellipse 60% 70% at 50% 50%,
        black 30%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 60% 70% at 50% 50%,
        black 30%,
        transparent 100%
    );
    animation: lightRotate 20s linear infinite;
    pointer-events: none;
}

@keyframes lightRotate {
    from { transform: translateX(-50%) rotate(0deg) scale(3); }
    to { transform: translateX(-50%) rotate(360deg) scale(3); }
}

.insignia-hero {
    display: inline-block;
    background: rgba(78, 205, 196, 0.15);
    border: 1px solid rgba(78, 205, 196, 0.3);
    color: var(--aqua);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    animation: fadeInUp 1s ease 0.2s both;
}

.seccion-hero-inicio-contenido {
    position: relative;
    max-width: 800px;
    z-index: 30;
    padding: 0 2rem;
}

.seccion-hero-inicio h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    text-align: center;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    animation: fadeInUp 1s ease 0.4s both;
}

.seccion-hero-inicio h1 .highlight {
    background: linear-gradient(135deg, var(--gold), var(--coral));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.seccion-hero-inicio h2 {
    color: var(--gold);
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease 0.5s both;
}

.seccion-hero-inicio p {
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: rgba(232, 244, 248, 0.8);
    text-align: justify;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
    animation: fadeInUp 1s ease 0.6s both;
}

.botones-hero {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.8s both;
}

.btn {
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--aqua), #3ab4ab);
    color: var(--ocean-deep);
    box-shadow: 0 8px 30px rgba(78, 205, 196, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(78, 205, 196, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--pearl);
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
    border-color: var(--aqua);
}

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

/* Wave divider */
.divisor-ola-pie-pagina {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    z-index: 20;
}

.divisor-ola-pie-pagina svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------------- */
/* CONTENEDORES DE LOS CARDÚMENES              */
/* ------------------------------------------- */
.cardumen-sardinas-animadas,
.cardumen-sardinas-animadas-inverso {
    position: absolute;
    width: 1000px;
    height: 500px;
    z-index: 10;
}

.cardumen-sardinas-animadas {
    left: 0;
    transform: translateX(-100%);
}

.cardumen-sardinas-animadas-inverso {
    right: 0;
    transform: translateX(100%);
}

/* ------------------------------------------- */
/* ESTILOS COMUNES DE LAS SARDINITAS           */
/* ------------------------------------------- */
.sardina-izquierda, .sardina-derecha {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.sardina-izquierda {
    transform: scaleX(-1);
    animation: aleteo-volteado 1.5s infinite alternate ease-in-out;
}

.sardina-derecha {
    animation: aleteo-normal 1.5s infinite alternate ease-in-out;
}

@keyframes aleteo-volteado {
    0% { transform: scaleX(-1) translate(0px, 0px); }
    100% { transform: scaleX(-1) translate(5px, -12px); }
}

@keyframes aleteo-normal {
    0% { transform: translate(0px, 0px); }
    100% { transform: translate(-5px, -12px); }
}

button:nth-child(even) { animation-delay: 0.3s; animation-duration: 1.2s; }
button:nth-child(3n) { animation-delay: 0.7s; animation-duration: 1.8s; }
button:nth-child(5n) { animation-delay: 0.1s; animation-duration: 1.4s; }
button:nth-child(7n) { animation-delay: 0.9s; animation-duration: 1.6s; }

/* ------------------------------------------- */
/* ANIMACIONES DE FLOTE (PANZA ARRIBA)         */
/* ------------------------------------------- */
@keyframes sardinaFlotandoIzq {
    0%, 100% { transform: translateY(0px) rotate(10deg) scaleY(-1) scaleX(-1); }
    50% { transform: translateY(-15px) rotate(-5deg) scaleY(-1) scaleX(-1); }
}

@keyframes sardinaFlotandoDer {
    0%, 100% { transform: translateY(0px) rotate(10deg) scaleY(-1) scaleX(1); }
    50% { transform: translateY(-15px) rotate(-5deg) scaleY(-1) scaleX(1); }
}

/* ==================== RESPONSIVE ==================== */


@media (max-width: 768px) {
    .lista-enlaces-navegacion {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        width: min(280px, 80vw);
        height: 100vh;
        height: 100dvh;
        background: rgba(10, 22, 40, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 5rem 2rem;
        gap: 1.5rem;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
        /* visibility keeps the closed panel out of the tab order, and it
           transitions as a step so the slide-out stays visible on the way out */
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.35s ease, visibility 0.35s ease;
    }

    .lista-enlaces-navegacion.abierta {
        transform: translateX(0);
        visibility: visible;
    }

    .lista-enlaces-navegacion a {
        font-size: 1.1rem;
        padding: 0.5rem 0;
    }

    .boton-conmutador-menu { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .lista-enlaces-navegacion { transition: none; }
    .boton-conmutador-menu span { transition: none; }
}



/* ==================== SCROLL TOP BUTTON ==================== */
.boton-subir-arriba {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aqua), #3ab4ab);
    color: var(--ocean-deep);
    border: none;
    cursor: pointer;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s;
    z-index: 999;
    box-shadow: 0 5px 20px rgba(78, 205, 196, 0.4);
    pointer-events: none;
}

.boton-subir-arriba.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.boton-subir-arriba:hover { transform: translateY(-3px) scale(1.1); }



/* Custom cursor glow */
.efecto-resplandor-cursor {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(78, 205, 196, 0.06), transparent 70%);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
    display: none;
}