/* ==========================================================================
   1. RESET, FUENTES Y VARIABLES GLOBALES
   ========================================================================== */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

html {
  scroll-behavior: smooth;
}


@font-face {
    font-family: 'Chillax';
    src: url('fonts/Chillax-Medium.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('fonts/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Fondos principales (Mucha calma y espacio) */
    --color-bg-main: #f7e1d7;      /* Crema claro: Fondo general del portfolio */
    --color-bg-subtle: #dedbd2;    /* Gris hueso: Separaciones y detalles */

    /* Colores de acento (Detalles hechos con mimo) */
    --color-accent-pink: #edafb8;  /* Rosa empolvado: Para el branding MoniBe */
    --color-accent-green: #b0c4b1; /* Verde salvia: Rutas, hovers y wellness counters */

    /* Identidad Oscura / Consola (Mantiene la cmd relajante) */
    --color-dark-slate: #4a5759;   /* Pizarra verdoso: Fondo de la terminal y textos principales */
}

/* --- ESTILOS BASE --- */
body {
    background-color: var(--color-dark-slate); /* Empieza oscuro para la terminal */
    color: var(--color-bg-subtle);
    font-family: 'Satoshi', sans-serif; /* Tu fuente base relajante */
    margin: 0;
    overflow: hidden; /* Evita el scroll global inicial */
    transition: background-color 0.8s ease;
}

#main-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--color-bg-main);
}


/* ==========================================================================
   2. LATERAL (TERMINAL CMD / MENÚ DE NAVEGACIÓN)
   ========================================================================== */
#terminal-side {
    width: 100%; 
    height: 100%;
    background-color: var(--color-dark-slate);
    padding: 25px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden; 
    flex-shrink: 0;
    display: flex;          /* Permite que #terminal crezca con flex: 1 */
    flex-direction: column; /* Apila terminal + loader + nav en columna */
    transition: opacity 0.6s ease, background-color 0.8s ease;
}
.system-question {
    color: #ffffff;
    margin-top: 15px;
    font-weight: 500;
}

/* Limpia los estilos raros que añaden los móviles a los inputs de tipo search */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/* Clase para ocultar elementos de forma suave */
.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* ==========================================================================
   ANIMACIÓN DE CARGA INICIAL
   ========================================================================== */

/* Estilos del contenedor del Loader (pantalla completa) */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-dark-slate); 
    display: flex;
    flex-direction: column; /* texto debajo, animación arriba */
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 9999; /* Asegura que esté por encima de todo */
    opacity: 1;
    transition: opacity 1s ease-in-out !important;
}

#loader.fade-out{
    opacity: 0 !important;
    pointer-events: none;
}

.loader-text {
    font-family: monospace; /* Estilo terminal */
    color: var(--color-bg-main); 
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

/* ==========================================================================
   ANIMACIÓN DE CARGA (EFECTO ONDAS INTEGRADO Y CORPORATIVO)
   ========================================================================== */
.loader {
  position: relative;
  width: 600px;  /* Le damos un área fija para albergar las ondas */
  height: 600px;
  margin: 0 auto;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0px;
  height: 0px;
  border-radius: 100%;
  opacity: 0;
  animation: pulse_4923 4s infinite linear;
  border: 2px solid var(--color-bg-subtle);
  box-shadow: 0px 0px 20px var(--color-accent-pink);
}

/* Retardos de animación optimizados para un flujo constante */
.circle:nth-child(1) {
  animation-delay: 0.5s;
}

.circle:nth-child(2) {
  animation-delay: 1.5s;
}

.circle:nth-child(3) {
  animation-delay: 2.5s;
}

.circle:nth-child(4) {
  animation-delay: 3.5s;
}

@keyframes pulse_4923 {
  0% {
    opacity: 0.0;
    width: 0px;
    height: 0px;
    transform: translate(-50%, -50%) scale(1);
  }

  10% {
    opacity: 0.6;
    /* Un ligero pico de opacidad al nacer en el centro */
  }

  80% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.0;
    width: 560px; /* Crece de manera elegante cubriendo el espacio */
    height: 560px;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ==========================================================================
   MENÚ FLOTANTE
   ========================================================================== */

/* Cuando la terminal se convierte en menú flotante */
#terminal-side.as-menu {
    width: 200px; 
    background-color: var(--color-dark-slate);
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 100;
    transition: opacity 0.4s ease, transform 0.4s ease;
        box-shadow: 10px 0 20px rgba(0, 0, 0, 0.3), 
                3px 0 6px rgba(0, 0, 0, 0.2);
}

#terminal-side.menu-hidden {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

/* --- INTERFAZ INTERNA DE LA TERMINAL --- */
#terminal {
    display: flex;
    flex-direction: column;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    /* Ocupa el espacio de #terminal-side y gestiona el scroll completo */
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    justify-content: flex-start;
    scroll-behavior: smooth;
}

/* Scrollbar sutil estilo terminal */
#terminal::-webkit-scrollbar {
    width: 4px;
}
#terminal::-webkit-scrollbar-track {
    background: transparent;
}
#terminal::-webkit-scrollbar-thumb {
    background: var(--color-accent-green);
    border-radius: 2px;
    opacity: 0.5;
}

#output {
    color: var(--color-bg-subtle);
    line-height: 1.6;
    /* Ya NO tiene flex:1 — ocupa solo lo que necesita su contenido */
    flex-shrink: 0;
}

.input-line {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.prompt {
    margin-right: 10px;
    color: #cce3de; /* Un verde agua/salvia mucho más claro que contrasta perfecto */
    font-weight: bold;
}

input {
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 1em;
    outline: none;
    flex-grow: 1;
    caret-color: var(--color-accent-pink); /* ¡El cursor parpadeante es rosa MoniBe! */
}

/* Botón enviar (visible en móvil/tablet, sutil en escritorio) */
#send-btn {
    background: transparent;
    border: 1px solid var(--color-accent-green);
    color: var(--color-accent-green);
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    margin-left: 8px;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
    /* En escritorio es sutil; en móvil se convierte en el protagonista */
    opacity: 0.5;
}

#send-btn:hover,
#send-btn:active {
    background-color: var(--color-accent-green);
    color: var(--color-dark-slate);
    opacity: 1;
}

@media (max-width: 1024px) {
    #send-btn {
        opacity: 1;
        padding: 8px 14px;
        font-size: 1.1rem;
    }
}

/* Ocultar terminal al transformarse en menú */
#terminal-side.as-menu #terminal {
    display: none;
}

.terminal-error {
    color: var(--color-accent-pink); 
    font-weight: 500;
}

/* ==========================================================================
   3. DISEÑO DEL MENÚ DE NAVEGACIÓN 
   ========================================================================== */
#side-menu {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 30px;

}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 30px 10px 40px 7px; 
}

.nav-links li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-links a {
    color: var(--color-bg-subtle);
    font-family: 'Chillax', sans-serif; /* Títulos del menú estilizados */
    font-weight: 500;
    text-decoration: none;
    font-size: 1.15rem;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.nav-links a:hover {
    color: var(--color-accent-pink); /* Hover interactivo en rosa empolvado */
    padding-left: 5px;
}

/* --- ICONOS SOCIALES Y FOOTER DEL MENÚ --- */
.social-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding-left: 7px;
}


.social-btn {
    display: inline-block;
    transition: transform 0.3s ease;
}

.social-btn:hover {
    transform: scale(1.1);
}

.icon-svg {
    width: 26px;
    height: 26px;
    display: block;
    fill: var(--color-bg-subtle); 
    opacity: 0.8;
    /* Transición suave tanto para el cambio de color como para la opacidad */
    transition: fill 0.3s ease, opacity 0.3s ease;
}

.social-btn:hover .icon-svg {
    fill: var(--color-accent-pink); /* Aplicará tu #edafb8 exacto del menú */
    opacity: 1;
}
.menu-footer {
    font-size: 0.8em;
    color: var(--color-bg-subtle);
    opacity: 0.7;
    padding-left: 7px;
    margin-top: auto; 
    padding-bottom: 20px;
}

.menu-footer a {
    color: var(--color-bg-subtle);
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
}

.menu-footer a:hover {
    color: var(--color-accent-pink);
}

.menu-footer p, 
.menu-footer p strong {
    color: var(--color-bg-subtle) !important;
    opacity: 0.7;
}


/* ==========================================================================
   4a. BOTÓN HAMBURGUESA ANIMADO (X con efecto escalonado)
   ========================================================================== */
#hamburger {
    position: fixed;
    top: 14px;                /* Centrado verticalmente dentro de los 54px de la barra */
    left: 15px;
    z-index: 101;             /* Un nivel por encima del topbar para que no se oculte */
    width: 29px;
    height: 26px;
    background: transparent;  /* Eliminamos el fondo propio para que use el del topbar */
    border: none;
    appearance: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1002;
}

#hamburger:focus:not(:focus-visible) {
    outline: none;
}

#hamburger:hover {
    transform: scale(1.08);
}

#hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-bg-main);
    border-radius: 3px;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
    transform-origin: center; 
}



#hamburger.active span:nth-of-type(1) {
    transform: translateY(11.5px) rotate(45deg);
}

#hamburger.active span:nth-of-type(2) {
    opacity: 0;
}

#hamburger.active span:nth-of-type(3) {
    transform: translateY(-11.5px) rotate(-45deg);
}

/* =========================================================================
   VENTANA EMERGENTE (MODAL) - SECCIÓN CRÉDITOS
   ========================================================================*/
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(36, 39, 39, 0.6); /* Fondo traslúcido con --color-dark-slate */
    backdrop-filter: blur(5px); /* Suaviza el fondo de la web dando un efecto premium */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Asegura estar por encima del menú lateral y la barra superior */
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* El cuadro interior */
.modal-content {
    background-color: var(--color-dark-slate);
    color: var(--color-bg-main);
    padding: 40px;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(176, 196, 177, 0.2); /* Borde sutil verde salvia */
    transform: scale(1);
    transition: transform 0.3s ease;
}

/* Botón de cerrar (X) */
.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: var(--color-bg-subtle);
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-close-btn:hover {
    color: var(--color-accent-pink); /* Cambia a rosa empolvado al pasar el ratón */
}

/* Título */
.modal-title {
    font-family: 'Chillax', sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
    color: var(--color-bg-main);
}

.modal-divider {
    border: none;
    border-top: 1.5px solid var(--color-accent-green);
    margin: 15px 0 25px 0;
    width: 100%;
}

/* Lista de créditos */
.modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-list li {
    font-family: 'Satoshi', sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 12px;
    color: var(--color-bg-subtle);
}

.modal-list li strong {
    color: var(--color-accent-green); /* Destaca las etiquetas en verde salvia */
    font-weight: 600;
}

/* Clase de utilidad para ocultar el modal con display: none */
.modal.hidden {
    display: none !important;
}


/* ==========================================================================
   4b. TOPBAR — LOGO + NOMBRE (BARRA SUPERIOR FIJA)
   ========================================================================== */
#topbar {
    position: fixed;
    top: 0;
    left: 0;                  
    width: 100%;              
    height: 54px;             
    display: flex;
    align-items: center;      /* Centrado vertical de todos los bloques principales */
    padding-left: 90px;       /* Mantiene la separación generosa con la hamburguesa */
    z-index: 100;             
    background-color: var(--color-dark-slate); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 
                0 3px 6px rgba(0, 0, 0, 0.2);
    pointer-events: auto; 

}

/* El nuevo contenedor flex que evita que se monten y los alinea al milímetro */
.topbar-brand {
    display: flex;
    align-items: center;      /* ¡Esto fuerza el centrado vertical exacto entre logo y texto! */
    gap: 12px;                /* Separación perfecta y controlada entre el logo y el texto */
}

#topbar-logo {
    width: 42px;              /* Un tamaño imponente y bien visible */
    height: 42px;             
    object-fit: contain;      /* Mantiene la proporción esférica de tus ondas */
   /* filter: brightness(0) saturate(100%) invert(32%) sepia(15%) saturate(400%) hue-rotate(140deg) brightness(85%);*/
}

#topbar-name {
    font-family: 'Chillax', sans-serif;
    font-size: 1.8rem;        
    font-weight: 500;
    color: var(--color-bg-main);
    letter-spacing: 0.02em;
    line-height: 1;           /* Eliminamos espacios residuales que empujen el texto abajo */
}

#topbar:has(#hamburger.active) { 
        z-index: 1001; 
    }

/* ==========================================================================
   5. CONTROL DE AUDIO E INTERFAZ DE ONDA (MUSIC WAVE)
   ========================================================================== */
#music-control {
    margin-left: auto;       /* Esto empuja todo el bloque de música al extremo derecho */
    margin-right: 100px;      /* Separación del borde derecho de la pantalla */
    cursor: pointer;
    pointer-events: auto;    /* Asegura que el usuario pueda hacer clic */
    display: flex;
    align-items: center;
    height: 100%;
    background-color: transparent;
    border: none;
    padding: 0;
}

.loading-wave {
    width: auto;             /* Quitamos los 300px para que ocupe solo lo necesario */
    height: 24px;            /* Escalado proporcional para la barra de 54px */
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.loading-bar {
    width: 3px;              /* Más estilizado y fino para la barra superior */
    height: 6px;             /* Altura inicial base */
    margin: 0 2px;           /* Un poco más juntas */
    background-color: var(--color-accent-pink); /* Rosa MoniBe */
    border-radius: 3px;
    /* Aplicamos la animación por defecto */
    animation: loading-wave-animation 1s ease-in-out infinite;
}

/* Retardos de animación originales */
.loading-bar:nth-child(2) { animation-delay: 0.1s; }
.loading-bar:nth-child(3) { animation-delay: 0.2s; }
.loading-bar:nth-child(4) { animation-delay: 0.3s; }

@keyframes loading-wave-animation {
    0%, 100% { height: 6px; }
    50% { height: 22px; }    /* Sube casi al límite del contenedor */
}

/* --- ESTADO MUTED / PAUSADO (Líneas quietas e iguales) --- */
#music-control.muted .loading-bar {
    animation: none;         /* Detiene por completo el movimiento */
    height: 8px;             /* Se quedan alineadas en una posición fija */
    opacity: 0.6;            /* Sutil cambio visual para denotar que está apagado */
}

/* ==========================================================================
   6. CONTENIDO DEL PORTFOLIO (ZONA WELLNESS-TECH)
   ========================================================================== */
#portfolio-content {
    flex-grow: 1;
    width: 100%;
    padding: 0 !important; 
    background-color: var(--color-bg-main);
    color: var(--color-dark-slate);
    opacity: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: opacity 1.5s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
}

#portfolio-content.visible {
    opacity: 1;
}

.hidden {
    display: none !important;
}

.text-padding {
    padding: 60px 40px;
}

/* Tipografías fluidas y amables para las secciones */
h1, h2, h3 {
    font-family: 'Chillax', sans-serif;
    font-weight: 500;
    color: var(--color-dark-slate);
    letter-spacing: -0.01em;

}

h2 {
    font-size: 1.8rem;
    line-height: 1.4;
}

p {
    font-family: 'Satoshi', sans-serif;
    font-size: 1.15rem;
    line-height: 1.7; /* Mucho interlineado para que el texto "respire" */
    color: var(--color-dark-slate);
    opacity: 0.9;
}

strong {
    color: var(--color-bg-main); /* Los destacados usan el verde salvia terapéutico */
    font-weight: 600;
    font-family: 'Chillax', sans-serif;
}




/* ==========================================================================
   SECCIÓN HERO (ESTILO MINIMALISTA / ARTÍSTICO)
   ========================================================================== */
.hero-section {
    padding: 60px 40px 20px 40px;
}
.hero-brutalista {
    display: flex;
    height: 100vh; /* Ocupa exactamente toda la pantalla para ocultar el vídeo abajo */
    width: 100%;
    padding: 15px 120px 60px 120px; /* Más aire lateral */
    gap: 60px;
    align-items: flex-start;
    background-color: var(--color-bg-main); /* Tu crema de fondo */
    position: relative;
    z-index: 15; /* Asegura quedar por encima del contenedor del vídeo */
    box-sizing: border-box;

}

/* --- COLUMNA IZQUIERDA: DISEÑO TIPOGRÁFICO MASIVO --- */
.hero-left {
    flex: 1.3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* El título en cascada gigante */
.hero-title-massive {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    line-height: 1; /* Súper pegadas como el diseño brutalista */
}

.linea-grande {
    font-family: 'Chillax', sans-serif;
    font-size: 5.2rem; /* Tamaño masivo para las mayúsculas */
    font-weight: 600;
    color: var(--color-dark-slate);
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

/* Estilo para 'web' y 'empático' */
.italica-xl {
    font-family: 'Playfair Display', sans-serif; 
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    font-size: 6.2rem; /* ¡Más grande que las mayúsculas para que destaque! */
    color: var(--color-dark-slate);
    padding-right: 10px;
}

/* --- COLUMNA DERECHA: TEXTO Y BOTÓN APARTE --- */
.hero-right {
    flex: 0.7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    position: relative;
}

.disponibilidad {
    font-family: 'Chillax', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-dark-slate);
    margin-top: 200px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(74, 87, 89, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
}

.punto-verde {
    width: 8px;
    height: 8px;
    background-color: var(--color-accent-green);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(--color-accent-green);
}

.descripcion-intro {
    font-family: 'Satoshi', sans-serif;
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--color-dark-slate);
    opacity: 0.85;
    margin-bottom: 100px; /* Más separación respecto al botón */
}

.descripcion-intro strong {
    color: var(--color-dark-slate) !important;
    font-weight: 700;
}

/* ── BOTÓN CONTACTO HERO ── */
.btn-contacto-hero {
  /* Estado inicial: píldora "Hablemos" en la esquina inferior derecha del hero */
  position: absolute;
  bottom: 60px;
  right: 120px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  font-family: 'Chillax', sans-serif;
  font-size: 1.1rem;
  color: #2b3334;
  background-color: var(--color-accent-pink);
  border: 2px solid var(--color-dark-slate);
  border-radius: 35px;
  padding: 16px 32px;
  cursor: pointer;
  text-decoration: none;

  /* Anchura intrínseca: la justa para el texto */
  width: auto;
  height: auto;
  overflow: hidden;
  white-space: nowrap;

  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    transform 0.4s ease,
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.4s ease,
    padding 0.4s ease,
    bottom 0.4s ease,
    right 0.4s ease,
    box-shadow 0.4s ease;
}

.btn-contacto-hero:hover {
  background-color: var(--color-dark-slate);
  color: var(--color-accent-pink);
  border: 2px solid var(--color-accent-pink);
  transform: translateY(-2px);
}

/* Los tres puntos: ocultos en estado normal */
.btn-dots {
  display: none;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* ── ESTADO STICKY: píldora comprimida en círculo ── */
.btn-contacto-hero.is-sticky {
  position: fixed !important;
  bottom: 20px !important;
  right: 40px !important;
  top: auto !important;
  left: auto !important;

  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  border-radius: 50% !important;

  box-shadow: 0 8px 24px rgba(74, 87, 89, 0.25);
  z-index: 9999;

  /* Resetea el transform del hover en estado base */
  transform: none;
}

/* En sticky: ocultamos el texto, mostramos los puntos */
.btn-contacto-hero.is-sticky .btn-text {
  display: none;
}

.btn-contacto-hero.is-sticky .btn-dots {
  display: block;
}

/* ── HOVER EN STICKY (fuera del hero): se expande y muestra "Hablemos" ── */
.btn-contacto-hero.is-sticky.out-of-hero:hover {
  width: auto !important;
  height: 56px !important;
  border-radius: 35px !important;
  padding: 0 28px !important;
  gap: 0;
}

.btn-contacto-hero.is-sticky.out-of-hero:hover .btn-text {
  display: inline !important;
}

.btn-contacto-hero.is-sticky.out-of-hero:hover .btn-dots {
  display: none !important;
}

/* ── MODAL DE CONTACTO (placeholder) ── */
#modal-contacto {
  position: fixed;
  bottom: 110px;
  right: 40px;
  width: 320px;
  background: var(--color-dark-slate);
  border: 1px solid rgba(176, 196, 177, 0.25);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#modal-contacto.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

#modal-contacto p {
  color: var(--color-bg-subtle);
  font-size: 1rem;
  text-align: center;
  opacity: 0.7;
}

/* =========================================================================
    NUEVO ESTADO: BOTÓN EXPANDIDO EN EL FOOTER
   ========================================================================*/

/* Cuando el JS detecta el footer, anulamos el círculo y lo expandimos */
.btn-contacto-hero.is-sticky.is-at-footer {
  width: auto !important;
  height: 56px !important;
  border-radius: 35px !important;
  padding: 0 28px !important;
  
  /* Ajustamos la posición para que quede alineado visualmente en el footer */
  bottom: 32px !important; 
  right: 40px !important;
}

/* Mostramos el texto y ocultamos los puntos fijos */
.btn-contacto-hero.is-sticky.is-at-footer .btn-text {
  display: inline !important;
}

.btn-contacto-hero.is-sticky.is-at-footer .btn-dots {
  display: none !important;
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 20;
  pointer-events: none;
  
  /* Añade esto para sacarlo del flujo flex: */
  align-self: auto;
  flex-shrink: 0;
  width: max-content;
}

.scroll-arrow {
  width: 45px;
  height: auto;
  display: block;
  user-select: none;
  animation: bounce 2s infinite ease-in-out;
  /* Por si acaso hereda algún max-width raro: */
  max-width: 45px;
  flex-shrink: 0;
  animation: bounce 2s infinite ease-in-out;
}

.scroll-text {
  font-family: 'Playfair Display', sans-serif;
  font-style: italic;
  font-size: 1rem;
  color: #646c6c;
  white-space: nowrap;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===============================================
   FORMULARIO CONTACTO
   ===============================================*/
   #form-proyecto {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  min-height: 260px;
}

/* Barra de progreso */
.fp-progress-bar {
  width: 100%;
  height: 3px;
  background: rgba(247,225,215,0.15);
  border-radius: 99px;
  margin-bottom: 2.4rem;
  overflow: hidden;
}
.fp-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent-pink);
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(.4,0,.2,1);
}

/* Slides */
.fp-slides { position: relative; }
.fp-slide {
  display: none;
  flex-direction: column;
  gap: 1rem;
  animation: fpSlideIn 0.35s cubic-bezier(.4,0,.2,1);
}
.fp-slide.active { display: flex; }

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

.fp-step-label {
  font-family: 'Chillax', sans-serif;
  font-size: 0.75rem;
  color: var(--color-accent-green);
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.fp-question {
  font-family: 'Chillax', sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  color: var(--color-bg-main);
  line-height: 1.35;
}

.fp-input {
  background: rgba(247,225,215,0.07);
  border: none;
  border-bottom: 1.5px solid rgba(247,225,215,0.35);
  color: var(--color-bg-main);
  font-family: 'Satoshi', sans-serif;
  font-size: 1rem;
  padding: 0.6rem 0.2rem;
  outline: none;
  transition: border-color 0.2s;
  caret-color: var(--color-accent-pink);
}
.fp-input:focus { border-bottom-color: var(--color-accent-pink); }
.fp-input::placeholder { color: rgba(247,225,215,0.3); }

.fp-textarea {
  resize: none;
  border: 1.5px solid rgba(247,225,215,0.25);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
}
.fp-textarea:focus { border-color: var(--color-accent-pink); }

/* Opciones tipo chip */
.fp-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.2rem;
}
.fp-option {
  background: rgba(247,225,215,0.07);
  border: 1.5px solid rgba(247,225,215,0.2);
  color: var(--color-bg-main);
  font-family: 'Satoshi', sans-serif;
  font-size: 0.88rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.fp-option:hover,
.fp-option.selected {
  background: var(--color-accent-pink);
  border-color: var(--color-accent-pink);
  color: var(--color-dark-slate);
}

/* Botón continuar */
.fp-btn-next {
  align-self: flex-start;
  background: none;
  border: 1.5px solid var(--color-bg-main);
  color: var(--color-bg-main);
  font-family: 'Chillax', sans-serif;
  font-size: 0.95rem;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 0.4rem;
  transition: background 0.2s, color 0.2s;
}
.fp-btn-next:hover {
  background: var(--color-bg-main);
  color: var(--color-dark-slate);
}

/* Privacidad */
.fp-privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: 'Satoshi', sans-serif;
  font-size: 0.88rem;
  color: rgba(247,225,215,0.75);
  cursor: pointer;
  line-height: 1.5;
}
.fp-checkbox {
  accent-color: var(--color-accent-pink);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 3px;
  cursor: pointer;
}
.fp-privacy-link {
  color: var(--color-accent-pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fp-privacy-link:hover { opacity: 0.8; }

/* Botón enviar */
.fp-btn-send {
  align-self: flex-start;
  background: var(--color-accent-green);
  border: none;
  color: var(--color-dark-slate);
  font-family: 'Chillax', sans-serif;
  font-size: 1rem;
  padding: 0.7rem 1.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  margin-top: 0.4rem;
}
.fp-btn-send:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.fp-btn-send:not(:disabled):hover {
  opacity: 0.85;
  transform: scale(1.02);
}

.fp-error-msg {
  font-size: 0.82rem;
  color: var(--color-accent-pink);
  min-height: 1.2em;
}

/* ── Pantalla de Gracias ── */
.fp-gracias {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.fp-gracias:not(.hidden) {
  opacity: 1;
  pointer-events: all;
  animation: fpGraciasIn 0.6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes fpGraciasIn {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.fp-gracias-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.fp-gracias-icon {
  font-size: 2.4rem;
  color: var(--color-accent-pink);
  animation: fpPulse 2s ease-in-out infinite;
}
@keyframes fpPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.12); }
}

.fp-gracias-titulo {
  font-family: 'Chillax', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-bg-main);
  line-height: 1;
}

.fp-gracias-sub {
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(247,225,215,0.85);
}

.fp-gracias-linea {
  width: 40px;
  height: 1.5px;
  background: var(--color-accent-green);
  border-radius: 99px;
  margin: 0.4rem 0;
}

.fp-gracias-detalle {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.88rem;
  color: rgba(247,225,215,0.45);
}

/* ==========================================================================
   ONDAS EN TEXTO BRUTALISTA HERO
   ========================================================================== */

/* Un logo superior estático, limpio y elegante */
.monibe-logo-static {
    font-family: 'Chillax', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-dark-slate);
    margin-bottom: 20px;
}

/* Forzamos a que las 'O' se comporten de manera nativa dentro del flujo del texto */
.hero-title-massive .logo-o-container {
    display: inline-block;
    position: relative;
    width: auto;
    height: auto;
    vertical-align: baseline; /* Clave para que la Ó con tilde no flote hacia arriba */
}

/* El nuevo contenedor de las ondas para las letras de la frase */
.wave-inside {
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    border: 1px solid var(--color-accent-green);
    box-shadow: 0px 0px 8px var(--color-accent-pink);
}

/* Activación al pasar el ratón por todo el bloque #mouseContainer */
.mouse-glow-container:hover .wave-inside {
    animation: pulse_brutal_o 3s infinite linear;
}

/* Retardos escalonados idénticos a los tuyos */
.logo-o-container .wave-inside:nth-child(1) { animation-delay: 0.0s; }
.logo-o-container .wave-inside:nth-child(2) { animation-delay: 0.75s; }
.logo-o-container .wave-inside:nth-child(3) { animation-delay: 1.5s; }
.logo-o-container .wave-inside:nth-child(4) { animation-delay: 2.25s; }

/* Animación optimizada: Mantiene las letras en su sitio mientras la onda se expande hacia fuera */
@keyframes pulse_brutal_o {
  0% {
    opacity: 0.0;
    width: 0px;
    height: 0px;
  }
  15% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.0;
    width: 140px; /* Tamaño controlado para que sea elegante */
    height: 140px;
  }
} 


/* ==========================================================================
   7. SECCIÓN FRASE TRANSICIÓN ANTES DEL VÍDEO 
   ========================================================================== */

.frase-transicion-contenedor {
    height: 100vh; /* Ya no necesita ser 250vh, el scroll se gestiona por JS */
    background: linear-gradient(to bottom, #f7e1d7, #4a5759);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.frase-transicion-bloque {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.frase-wrapper {
    position: relative;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frase-transicion-texto {
    font-family: 'Chillax', sans-serif;
    font-size: clamp(2.5rem, 3.2vw, 6rem);
    color: #f7e1d7;
    text-shadow: 0px 2px 10px rgba(74, 87, 89, 0.3);
    white-space: nowrap;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% + 120vw), -50%); /* Empieza fuera por la derecha */
    opacity: 0;
    width: max-content;
    max-width: 90vw;           /* Salvavidas: nunca más ancho que la pantalla */
    will-change: transform, opacity;
    transition: none; /* El movimiento lo controla JS directamente */
}

.linea-1 {
    transform: translate(calc(-50% + 120vw), -50%);
    opacity: 0;
}

.linea-2 {
    transform: translate(calc(-50% + 120vw), -50%);
    opacity: 0;
    color: var(--color-dark-slate);
}

/* Responsive */
@media (max-width: 768px) {
    .frase-transicion-texto {
        font-size: clamp(1.1rem, 4.5vw, 1.6rem); 
        padding: 0 10px;
    }
}

/* ==========================================================================
   7. SECCIÓN SCROLL DEL VÍDEO TRANSICIÓN
   ========================================================================== */
#video-section {
    height: 300vh; 
    position: relative;
    width: 100%;
    background-color: var(--color-dark-slate);
}

.video-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: var(--color-bg-main);
    /* MÁSCARA OPTIMIZADA: Solo difumina el 15% superior y el 15% inferior */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#v0 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85; 
}

.video-overlay-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: flex-end;       
    pointer-events: none; 
    padding: 150px;          
}

.frase-animada {
    font-family: 'Chillax', sans-serif; /* Cambiado a Chillax para que impacte visualmente */
    font-weight: 500;
    font-size: 3.5rem;           
    text-align: right;           
    color: var(--color-bg-subtle);
    text-shadow: 0px 4px 20px rgba(74, 87, 89, 0.6);
    position: absolute; 
    opacity: 0; 
    transition: opacity 0.6s ease; 
    padding-right: 20px;
}
/* Empujar la "y" hacia la izquierda para que no se pegue al borde derecho */
#frase2 {
    padding-right: 140px;
    text-align: right;   /* Mantiene su alineación original a la derecha, pero con ese colchón */
}

/* Secciones de contenido inferior/proyectos */
.content-footer-block {
    height: 100vh;
    background: var(--color-dark-slate); /* Se vuelve oscuro al final de manera elegante */
    position: relative;
    z-index: 10;
    color: var(--color-bg-main);
}

.content-footer-block h2 {
    color: var(--color-bg-main);
}

/* Ajuste responsive para la frase de transición */
@media (max-width: 768px) {
    .frase-transicion-texto {
        font-size: 1.5rem;
        padding: 0 10px;
    }
}

/* =========================================================================
   SECCION PASADO (ACTUALIZADO 3 SLIDERS)
   ========================================================================*/
.seccion-pasado {
    height: 100vh; 
    background-color: var(--color-dark-slate);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6rem 4rem;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.pasado-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Track de slides */
.pasado-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Cada slide ocupa el 100% del wrapper */
.pasado-slide {
  min-width: 100%;
  padding: 0px 80px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Título */
.pasado-title {
  font-size: 5rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-align: center;
  color: var(--color-bg-main);
  margin: 0 0 5px 0;
  text-transform: uppercase;
}

.pasado-divider {
  width: 85%;
  border: none;
  border-top: 1.5px solid var(--color-accent-green); 
  margin: 10px auto 10px auto;
}

/* Subtítulo etiqueta */
.pasado-label {
  color: var(--color-bg-main);
  font-family: 'Satoshi', sans-serif;
  font-size: 2.3rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 25px;
  display: inline-block;
}

/* ---- NUEVO LAYOUT HORIZONTAL (SLIDE 1) ---- */
.pasado-cards-horizontal {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
  max-width: 1200px;
  margin-top: 70px;
}

.pasado-card-horizontal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 160px;
  cursor: default;
}

.icon-circle {
  width: 110px;
  height: 110px;
  border: 2px solid var(--color-accent-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  cursor:default;
}

/* Al hacer hover en el ítem, el círculo brilla e ilumina su fondo interior levemente */
.pasado-card-horizontal-item:hover .icon-circle {
    transform: scale(1.05); /* Un sutil escalado para dar dinamismo */
    background-color: rgba(163, 194, 172, 0.1); /* Un toque sutil del verde de fondo */
    box-shadow: 0 0 20px 6px var(--color-accent-green); /* El brillo (Glow) */
}

.icon-circle img {
  width: 55px;
  height: 55px;
  object-fit: contain;
  filter: brightness(0) invert(0.9) sepia(0.1) saturate(1); /* Tono claro/blanco suave para los iconos */
}

.text-pill {
  background-color: #ebdcd0; /* Color beige claro de tu captura */
  color: #242727;
  border-radius: 12px;
  padding: 14px 10px;
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
  width: 100%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- NUEVO LAYOUT PARA MAPA (SLIDE 2) ---- */
.pasado-content-row-maps {
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin-top: 10px;
}

.pasado-map-container {
  flex: 1;
  max-width: 420px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  position: relative;
}
/* Capa overlay con tu color #4a5759 */
.pasado-map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f7e1d7;
    opacity: 0.2; /* Controla aquí el nivel de tinte: más alto = más oscuro/teñido */
    z-index: 1; /* Se coloca justo por encima de la imagen */
    pointer-events: none; /* Permite que se pueda interactuar con lo que hay debajo si fuera necesario */
    mix-blend-mode: multiply; /* Multiplica el color para que se fusione con las texturas del mapa antiguo */
}

.pasado-map-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: brightness(0.9) contrast(0.9);
}

/* Columna ubicaciones */
.pasado-locations {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: default;
}

/* SVG pin */
.pasado-pin-svg {
  width: 60px;
  height: 68px;
  fill: var(--color-accent-green);
  margin-bottom: 10px;
}

.pasado-locations-label {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-bg-main);
  margin-bottom: 10px;
  text-align: center;
  cursor: default;
}

.pasado-cities-viewport {
  overflow: hidden;
  height: 1.8rem;
  position: relative;
  cursor: default;
}

.pasado-cities-track {
  display: flex;
  flex-direction: column;
  animation: scrollCities 6s linear infinite;
}

.pasado-city {
  font-size: 2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bg-main);
  text-align: center;
  line-height: 1.8rem;
  flex-shrink: 0;
}

@keyframes scrollCities {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.pasado-account-note {
  font-family: 'Georgia', cursive;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-accent-green);
  text-align: center;
  margin-top: 30px;
}

/* ---- SLIDE 3: Skills ---- */
.pasado-skills-label {
  color: var(--color-bg-main);
  font-family: 'Satoshi', sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0px 14px;
  margin-bottom: 36px;
  display: inline-block;
}

.pasado-skills-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 480px;
}

.pasado-skill-pill {
  background-color: var(--color-bg-subtle);
  color: var(--color-dark-slate);
  border-radius: 50px;
  padding: 12px 30px;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.03em;
  cursor: default;

}

.skills-visible .pasado-skill-pill {
  animation: pillGlow 0.6s ease-in-out forwards;
}

@keyframes pillGlow {
  0%   { opacity: 0.45; box-shadow: none; }
  50%  { opacity: 1;    box-shadow: 0 0 18px 4px var(--color-accent-green); }
  100% { opacity: 1; box-shadow: none; }
}

.pasado-skill-pill:nth-child(1) { animation-delay: 0.2s; }
.pasado-skill-pill:nth-child(2) { animation-delay: 0.9s; }
.pasado-skill-pill:nth-child(3) { animation-delay: 1.6s; }
.pasado-skill-pill:nth-child(4) { animation-delay: 2.3s; }
.pasado-skill-pill:nth-child(5) { animation-delay: 3.0s; }
.pasado-skill-pill:nth-child(6) { animation-delay: 3.7s; }

/* ---- Flechas de navegación ---- */
.pasado-arrow {
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  background-color: var(--color-bg-subtle);
  border: none;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.pasado-arrow:hover {
  background-color: var(--color-bg-subtle);
  transform: translateY(-50%) scale(1.08);
}

.pasado-arrow svg {
  width: 20px;
  height: 20px;
  fill: var(--color-dark-slate);
}

.pasado-arrow-left  { left: 18px; }
.pasado-arrow-right { right: 18px; }

/* Puntos indicadores */
.pasado-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 0 24px;
}

.pasado-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-accent-green);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.2s;
}

.pasado-dot.active {
  opacity: 1;
}
/* =========================================================================
    SECCION TRANSICIÓN PASADO-PRESENTE
    ========================================================================*/
.frase-transicion-2{
    min-height: 100vh;
    background: linear-gradient(to bottom, #4a5759, #f7e1d7);
    
}
/* Frases visibles y centradas (sin animación de scroll) */
.seccion-pasadopresente .frase-wrapper {
    flex-direction: column;
    gap: 1.5rem;
    height: auto;
}

.seccion-pasadopresente .frase-transicion-texto {
    position: relative;        /* Saca del posicionamiento absoluto */
    left: unset;
    top: unset;
    transform: none;           /* Elimina el translate que las ocultaba */
    opacity: 1;
    white-space: normal;
    text-align: center;
    padding: 0 2rem;
}
/* =========================================================================
    SECCION PRESENTE
    ========================================================================*/
/* Contenedor principal de la sección */
.seccion-presente {
  padding: 6rem 4rem;
  min-height: 100vh;
  background-color: var(--color-bg-main);
  color: var(--color-dark-slate);
  font-family: 'Satoshi', -apple-system, sans-serif;
  width: 100%;

}

.proyectos-divider-2 {
  width: 85%;
  border: none;
  border-top: 1.5px solid var(--color-dark-slate); 
  margin: 10px auto 10px auto;
}


.presente-header h2 {
    font-family: 'Chillax', sans-serif;
    font-size: 5rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    text-align: center;
    color: var(--color-dark-slate);
    margin-top: 0;
    margin-bottom: 19px;
    text-transform: uppercase;
}

.presente-header .titulacion {
  font-size: 1.2rem;
  opacity: 0.9;
  font-weight: 500;
  text-align: center;
  margin-bottom: 50px;
}

.hardskills {
  font-family: "Satohi", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}

/* Rejilla inteligente (Grid) para distribuir los arrays */
.skills-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 1rem;
  align-items: flex-start;
  width: fit-content;
  margin: 0 auto;
}

/* Estilo general de cada bloque interactivo [details] */
.array-category {
  background-color: var(--color-bg-main);
  transition: all 0.3s ease;
}

/* Encabezados de cada bloque interactivo [summary] */
.array-category summary {
  list-style: none; /* Oculta el triángulo nativo */
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.15rem;
  font-weight: bold;
  cursor: pointer;
  border-bottom: none; 
  
  /* Cambiamos el comportamiento a flex-direction: column para poner el + debajo */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra tanto el texto como el indicador (+/-) */
  gap: 0.5rem; /* Espacio sutil entre el texto y el símbolo inferior */
  
  user-select: none;
  text-align: center;
}

/* Quitar la flecha por defecto en Safari/Webkit */
.array-category summary::-webkit-details-marker {
  display: none;
}

/* Los indicadores dinámicos ahora aparecen DEBAJO gracias al flex column */
.array-category summary::after {
  content: '+';
  font-size: 1.3rem; /* Un pelín más grande para que se vea bien como eje */
  font-family: monospace;
  color: var(--color-dark-slate);
  opacity: 0.7; /* Lo hace un poco más sutil */
  transition: transform 0.2s ease;
}

/* Cuando el array está abierto, el + pasa a ser un - */
.array-category[open] summary::after {
  content: '-';
  opacity: 1; /* Gana total opacidad al estar desplegado */
}

/* Ajustamos el contenedor de los badges para que fluya bien con el nuevo diseño */
.skills-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
  /* Reducimos un poco el padding superior para compensar el espacio del símbolo */
  padding-top: 0.75rem; 
  animation: fadeIn 0.25s ease-out;
}

/* Los badges rosas basados en el botón de la captura image_ef063f.png */
.skill-badge {
  background-color: var(--color-accent-pink);
  color: #2b3334;
  padding: 0.65rem 1.6rem;
  border-radius: 50px; /* Bordes totalmente redondeados */
  font-size: 0.95rem;
  font-weight: 600; /* Peso visual para garantizar la accesibilidad de lectura */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 140px; /* Evita que queden excesivamente estrechas */
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efecto sutil al pasar el cursor (hover) para dar dinamismo */
.skill-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Animación de desvanecimiento al abrir un bloque */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.presente-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 2rem;
}

.presente-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.presente-slide {
    min-width: 100%;
    padding: 0px 40px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}



/* Estilos específicos de la maqueta Zen */
.zen-container {
    max-width: 800px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}

.zen-description {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--color-dark-slate);
    margin-bottom: 2.5rem;
    text-align: center;
}

.zen-description strong {
  color: var(--color-dark-slate);
}

.zen-code {
    font-family: monospace;
    background-color: #eeeee4;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--color-dark-slate);
}

.zen-link {
    color: var(--color-dark-slate);
    font-weight: bold;
    text-decoration: underline;
    transition: color 0.3s;
}

.zen-link:hover {
    color: var(--color-accent-pink);
}

.zen-subtitle {
    font-family: 'Chillax', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-dark-slate);
    margin-bottom: 3rem;
    max-width: 1000px;
}

/* --- EL BOTÓN INTERACTIVO Y SUS ONDAS EXPANSIVAS --- */
.zen-button-wrapper,
#zenButtonWrapper {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-zen {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 2px solid var(--color-dark-slate);
    background-color: #d2e4d3;
    color: var(--color-dark-slate);
    font-family: 'Chillax', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(74, 87, 89, 0.15);
    z-index: 2;
    position: relative;
    transition: transform 0.3s, background-color 0.3s;
}

.btn-zen:hover {
    transform: scale(1.05);
    background-color: var(--color-accent-pink);
}

/* Animación de desaparición del botón */
.zen-btn-fade {
    animation: zenFadeOut 0.6s ease forwards;
}

@keyframes zenFadeOut {
    to { opacity: 0; transform: scale(0.85); }
}

/* Ondas expansivas — UNA SOLA definición, circular */
.zen-ripple {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;               /* ← círculo, siempre */
    border: 2px solid var(--color-accent-green);
    background-color: rgba(176, 196, 177, 0.2);
    z-index: 1;
    pointer-events: none;
    animation: zenWaveExpansion 2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes zenWaveExpansion {
    0%   { transform: scale(1);   opacity: 1; border-color: var(--color-accent-green); }
    100% { transform: scale(2.2); opacity: 0; border-color: var(--color-accent-pink);  }
}

/* --- PANTALLA DE TEXTO ZEN FINAL --- */
.zen-phrase-display {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 2.2rem;
    line-height: 1.5;
    color: var(--color-dark-slate);
    max-width: 700px;
    text-align: center;
    margin-top: 1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.zen-phrase-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* --- FLECHAS Y DOTS ADAPTADOS PARA PRESENTE --- */
.presente-arrow {
    position: absolute;
    top: 13rem;
    transform:  none;
    background-color: var(--color-dark-slate);
    border: none;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.presente-arrow:hover {
    transform: scale(1.08);
    background-color: var(--color-accent-pink);
}

.presente-arrow svg {
    width: 20px;
    height: 20px;
    fill: var(--color-bg-main);
}

.presente-arrow:hover svg {
    fill: var(--color-dark-slate);
}

.presente-arrow-left  { left: 18px; }
.presente-arrow-right { right: 18px; }

.presente-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px 0 0 0;
}

.presente-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-dark-slate);
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s;
}

.presente-dot.active {
    opacity: 1;
    background-color: var(--color-accent-green);
}

/* Adaptación Mobile */
@media (max-width: 768px) {
    .zen-subtitle { font-size: 1.25rem; }
    .zen-phrase-display { font-size: 1.6rem; }
    .presente-arrow-left { left: 4px; }
    .presente-arrow-right { right: 4px; }
    .presente-slide { padding: 0 30px; }
}
 /* =========================================================================
    SECCION INTERACTIVA CON ONDAS
    ========================================================================*/
.wave-section{
    min-height: 100vh;
    background: linear-gradient(to bottom, #f7e1d7, #4a5759);
    position: relative;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Vital para que la onda no desmaquete la página */
    cursor: none;
    user-select: none;
}

.wave-section *{
    cursor: none;
}

.wave-section h2{
    font-size: 2.8rem;
}

.wave-section p{
    font-size: 1.5rem;
}


/* Estilo de la piedra */
.stone-cursor {
  position: absolute;
  width: 20px;
  height: 15px;
  background: radial-gradient(circle at 30% 30%, #a0a0a0, #555555);
  border-radius: 50% 40% 50% 45%; /* Forma ligeramente irregular de piedra */
  box-shadow: inset -2px -2px 5px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
  pointer-events: none; /* Para que no interfiera con el clic */
  transform: translate(-50%, -50%);
  z-index: 10;
  transition: transform 0.05s ease-out; /* Suaviza un poco el movimiento */
}

/* Animación cuando la piedra "se hunde" al hacer clic */
.stone-cursor.is-dropping {
  transform: translate(-50%, -50%) scale(0); /* Se encoge hasta desaparecer */
  opacity: 0;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

.wave-section p{
  color: var(--color-bg-main);
}

/* La onda (efecto agua) */
.wave-ripple {
  position: absolute;
  border: 2px solid rgba(0, 150, 255, 0.7); /* Color del borde de la onda */
  background: rgba(0, 150, 255, 0.1);       /* Un fondo muy sutil */
  border-radius: 50%;
  pointer-events: none;                      /* Para que no interfiera con otros clics */
  transform: translate(-50%, -50%);          /* Centra la onda en el cursor */
  animation: rippleEffect 0.8s ease-out forwards;
}

/* Animación de expansión y desvanecimiento */
@keyframes rippleEffect {
  0% {
    width: 0px;
    height: 0px;
    opacity: 1;
  }
  100% {
    width: 300px;  /* Tamaño máximo de la onda */
    height: 300px;
    opacity: 0;    /* Se desvanece por completo */
  }
}

/* =========================================================================
   SECCION PROYECTOS — Card Hover Interactions
   ========================================================================= */

/* Variables locales de animación (igual que el patrón de referencia) */
.seccion-proyectos {
    --d: 600ms;
    --e: cubic-bezier(0.19, 1, 0.22, 1);

    padding: 6rem 4rem;
    min-height: 100vh;
    background: linear-gradient(to bottom, #4a5759, #f7e1d7);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Título */
.proyectos-title {
    font-family: 'Chillax', sans-serif;
    font-size: 5rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    text-align: center;
    color: var(--color-bg-main);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.seccion-proyectos .algunos-proyectos {
    font-size: 1.2rem;
    opacity: 0.9;
    font-weight: 500;
    text-align: center;
    color: var(--color-bg-main);
    margin-bottom: 50px;
}

.proyectos-divider {
    width: 85%;
    border: none;
    border-top: 1.5px solid var(--color-accent-green);
    margin: 10px auto 10px auto;
}

/* Cuadrícula */
.proyectos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    font-family: 'Satoshi', sans-serif;
}

/* ── La tarjeta ── */
.proyecto-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    height: 580px;
    border-radius: 12px;
    color: var(--color-bg-main);
    cursor: pointer;
    box-shadow:
        0 1px 1px rgba(0,0,0,0.15),
        0 2px 2px rgba(0,0,0,0.15),
        0 4px 4px rgba(0,0,0,0.15),
        0 8px 8px rgba(0,0,0,0.15),
        0 16px 16px rgba(0,0,0,0.15);
}

/* Imagen de fondo con zoom */
.proyecto-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 110%;
    background-size: cover;
    background-position: top center;
    transition: transform calc(var(--d) * 1.5) var(--e), filter calc(var(--d) * 1.5) var(--e);
    pointer-events: none;
    filter: blur(0px);
}

.proyecto-card:hover .proyecto-card-bg {
    /* El truco: NO toques el transform aquí si ya se está encargando otra regla CSS, */
    /* solo añade el filtro que necesitas */
    filter: blur(5px);
}

/* Gradiente oscuro (de transparente a negro) */
.proyecto-card::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 200%;
    pointer-events: none;
    z-index: 2;   
    background-image: linear-gradient(
        to bottom,
        hsla(0,0%,0%,0)    0%,
        hsla(0,0%,0%,0.01) 11.7%,
        hsla(0,0%,0%,0.03) 22.1%,
        hsla(0,0%,0%,0.07) 31.2%,
        hsla(0,0%,0%,0.13) 39.4%,
        hsla(0,0%,0%,0.19) 46.6%,
        hsla(0,0%,0%,0.27) 53.1%,
        hsla(0,0%,0%,0.34) 58.9%,
        hsla(0,0%,0%,0.42) 64.3%,
        hsla(0,0%,0%,0.50) 69.3%,
        hsla(0,0%,0%,0.57) 74.1%,
        hsla(0,0%,0%,0.64) 78.8%,
        hsla(0,0%,0%,0.70) 83.6%,
        hsla(0,0%,0%,0.75) 88.7%,
        hsla(0,0%,0%,0.79) 94.1%,
        hsla(0,0%,0%,0.82) 100%
    );
    transform: translateY(-50%);
    transition: transform calc(var(--d) * 2) var(--e);
}

/* Contenido (título + tags + botón) */
.proyecto-card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1.5rem 1.2rem;
    z-index: 3;
    transition: transform var(--d) var(--e);
    text-align: center;
    background-color: #4a5759D9;
    
}

.proyecto-card-content > * + * {
    margin-top: 0.75rem;
}

/* Nombre del proyecto */
.proyecto-name {
    font-family: 'Chillax', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    color: var(--color-bg-main);
}

/* Tags como texto en línea */
.proyecto-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

/* Píldoras de tecnología */
.proyecto-tag {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    background-color: rgba(247, 225, 215, 0.18);;
    color: var(--color-accent-green);
    border: 1px solid var(--color-accent-green);
    padding: 3px 10px;
    border-radius: 50px;
    letter-spacing: 0.02em;
}

/* Botón Ver Web */
.proyecto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.65rem 1.4rem;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.proyecto-btn.btn-primary {
    background-color: var(--color-bg-main);
    color: var(--color-dark-slate);
}

.proyecto-btn.btn-primary:hover {
    background-color: var(--color-accent-green);
    color: var(--color-dark-slate);
}

.btn-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.proyecto-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(20, 30, 25, 0.55);
    transition: background-color calc(var(--d) * 1.5) var(--e);
}



@media (hover: hover) and (min-width: 600px) {
    .proyecto-card:hover .proyecto-card-overlay,
    .proyecto-card:focus-within .proyecto-card-overlay {
        background-color: rgba(20, 30, 25, 0.72);
    }
}

/* ── HOVER (solo dispositivos con ratón y pantalla ≥ 600px) ── */
@media (hover: hover) and (min-width: 600px) {

    /* El gradiente empieza en el centro en reposo */
    .proyecto-card::after {
        transform: translateY(0);
    }

    /* Contenido empujado hacia abajo: solo asoma el título */
    .proyecto-card-content {
        transform: translateY(calc(100% - 4rem));
    }

    /* Tags y botón invisibles y desplazados */
    .proyecto-card-content > *:not(.proyecto-name) {
        opacity: 0;
        transform: translateY(1rem);
        transition:
            transform var(--d) var(--e),
            opacity var(--d) var(--e);
    }

    /* Al hacer hover o focus-within */
    .proyecto-card:hover,
    .proyecto-card:focus-within {
        align-items: center;
    }

    .proyecto-card:hover .proyecto-card-bg,
    .proyecto-card:focus-within .proyecto-card-bg {
        transform: translateY(-4%);
    }

    .proyecto-card:hover::after,
    .proyecto-card:focus-within::after {
        transform: translateY(-50%);
    }

    .proyecto-card:hover .proyecto-card-content,
    .proyecto-card:focus-within .proyecto-card-content {
        transform: translateY(0);
    }

    .proyecto-card:hover .proyecto-card-content > *:not(.proyecto-name),
    .proyecto-card:focus-within .proyecto-card-content > *:not(.proyecto-name) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(var(--d) / 8);
    }

    /* Focus instantáneo (accesibilidad) */
    .proyecto-card:focus-within .proyecto-card-bg,
    .proyecto-card:focus-within::after,
    .proyecto-card:focus-within .proyecto-card-content,
    .proyecto-card:focus-within .proyecto-card-content > *:not(.proyecto-name) {
        transition-duration: 0s;
    }
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .proyectos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
}

@media (max-width: 768px) {
    .seccion-proyectos {
        padding: 4rem 2rem;
    }
    .proyectos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .proyecto-card {
        height: 480px;
    }
}

@media (max-width: 600px) {
    .proyectos-grid {
        grid-template-columns: 1fr;
    }
    .proyecto-card {
        height: 480px;
    }
    /* En táctil, el contenido siempre visible */
    .proyecto-card-content {
        transform: translateY(0) !important;
    }
    .proyecto-card-content > *:not(.proyecto-name) {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    .proyecto-card::after {
        transform: translateY(-50%) !important;
    }
}

@media (max-width: 480px) {
    .proyectos-title {
        font-size: 2rem;
    }
    .proyecto-card {
        height: 480px;
    }
}

/* ==========================================================================
   SECCIÓN CONTACTO
   ========================================================================== */

/* ── Mini-panel (abajo derecha) ── */
.contacto-mini {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 8000;
  width: 240px;
  min-height: 300px;
  background: var(--color-dark-slate);
  border: 1.5px solid var(--color-accent-green);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.contacto-mini.activo {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.contacto-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  background: none;
  /* border-bottom: eliminado */
  font-family: 'Chillax', sans-serif;
  font-size: 0.85rem;
  color: var(--color-bg-main);
}

.contacto-mini-cerrar {
  background: none;
  border: none;
  color: var(--color-accent-pink);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.1rem 0.3rem;
  border-radius: 50%;
  line-height: 1;
  transition: background 0.2s;
}
.contacto-mini-cerrar:hover {
  background: rgba(237, 175, 184, 0.2);
}

.contacto-mini-opciones {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.8rem 0.8rem;
  gap: 0.4rem;
  background: rgba(176, 196, 177, 0.18);
  border-radius: 0 0 12px 12px;
}

/* Píldoras */
.contacto-opcion {

      border: 2px solid var(--color-dark-slate);
    background-color: #d2e4d3;
    color: var(--color-dark-slate);

  border-radius: 999px;
  padding: 0.5rem 1rem;
  text-align: left;
  font-family: 'Satoshi', sans-serif;
  font-size: 0.82rem;

  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  line-height: 1.4;
}
.contacto-opcion:hover {
  background: rgba(176, 196, 177, 0.45);
  border-color: var(--color-bg-main);
  color: var(--color-bg-main);
}

/* ── Panel respuesta (overlay full) ── */
.contacto-panel {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(74, 87, 89, 0.92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.contacto-panel.activo {
  opacity: 1;
  pointer-events: all;
}

/* Botón cerrar del panel: tono crema */
.contacto-cerrar {
  position: absolute;
  top: 4.5rem;
  right: 1.5rem;
  background: none;
  border: 1.5px solid var(--color-bg-main);
  color: var(--color-bg-main);
  font-size: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.contacto-cerrar:hover {
  background: rgba(247, 225, 215, 0.15);
}

.contacto-respuesta {
  max-width: 660px;
  width: 100%;
  color: var(--color-dark-slate);
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  line-height: 1.7;
  animation: fadeInUp 0.35s ease;
  text-align: center;
}

.contacto-respuesta h3 {
  font-family: 'Chillax', sans-serif;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  margin-bottom: 1rem;
  color: var(--color-bg-main);
}

.contacto-respuesta p { margin-bottom: 0.8rem; }

.contacto-respuesta code {
  background: rgba(74, 87, 89, 0.12);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

.contenedor-modal {
  position: relative; /* Asegura que los corazones floten respecto a la ventana */
  overflow: hidden;
}




#btn-corazon {
  position: relative;
  z-index: 2;
}
.corazon-flotante {
  position: absolute;
  pointer-events: none; /* Para que no estorben a los clicks */
  animation: flotarYDesaparecer 1s ease-out forwards;
  font-size: 1.5rem;
  z-index: 1;
}

@keyframes flotarYDesaparecer {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-150px) scale(1.4) rotate(20deg);
    opacity: 0;
  }
}

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

/* =========================================================================
    SECCION FOOTER: MINIMALISMO EXTREMO (3 COLUMNAS)
   ========================================================================*/

.footer {
    background-color: var(--color-dark-slate);
    padding: 1rem 3rem 2rem;
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.3), 
                0 -3px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    gap: 2rem;
}

.footer-col {
    flex: 1;
}

.col-left {
    text-align: left;
    display: flex;
    justify-content: flex-start;  /* empuja el botón al borde izquierdo */
    align-items: center;
}
.col-center { text-align: center; }
.col-right { text-align: right; }

.footer-frase {
    font-family: 'Chillax', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--color-bg-main);
    letter-spacing: 0.02em;
    margin: 0;
}



.footer-action-link {
    background: none;
    border: none;
    padding: 0;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    color: var(--color-bg-main);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.footer-action-link:hover {
    opacity: 1;
}

/* =========================================================================
    NUEVO BOTÓN CIRCULAR PARA VOLVER ARRIBA
   ========================================================================*/

.btn-subir-circular {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-accent-pink);
    color: var(--color-dark-slate);
    border: 2px solid var(--color-dark-slate);    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
    margin-left: -50%;
}

/* El SVG interno de la flecha */
.btn-subir-circular .icon-chevron {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

/* Efecto Hover: se invierte como tu otro botón y sube un pelín */
.btn-subir-circular:hover {
    background-color: var(--color-dark-slate);
    color: var(--color-accent-pink);
    border-color: var(--color-accent-pink);
    transform: translateY(-4px);
}

/* Animación sutil en la flecha al hacer hover */
.btn-subir-circular:hover .icon-chevron {
    transform: translateY(-2px);
}

/* --- AJUSTE RESPONSIVE FOOTER --- */
@media (max-width: 1680px){
  .btn-subir-circular{
    margin-left: 0%;
  }
}
@media (max-width: 1024px) {
  .btn-subir-circular{
    margin-left: 0%;
  }
}

@media (max-width: 768px) {
    .footer-grid {
        flex-direction: column;
        gap: 2rem;
    }
    .footer-col {
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .col-left {
        order: 2;
        justify-content: flex-start !important; /* ← botón a la izquierda en móvil */
        align-self: flex-start;
    }
    .col-center { order: 1; }
    .col-right  { display: none; }

    .btn-subir-circular {
      margin-bottom: 30%;
      margin-left: 0%;
    }
}

@keyframes footer-flecha-pulso {
    0%, 100% { transform: translateX(0);   opacity: 1; }
    50%       { transform: translateX(6px); opacity: 0.6; }
}


/* ==========================================================================
   TABLETS Y MÓVILES - SECCIÓN INICIAL HERO
   ========================================================================== */


   @media (max-width: 1024px) {
    .hero-brutalista {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important; /* Cambiamos a auto para que no fuerce el contenido al fondo */
        min-height: 100vh;
        padding: 120px 30px 60px 30px !important; /* Buen margen abajo como en tu imagen */
        justify-content: flex-start !important; /* Alinea todo el bloque hacia arriba */
        gap: 35px !important; /* Controla la distancia exacta entre el bloque de letras y el bloque derecho */
    }

    /* Bloque del Título Gigante */
    .hero-left {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
        align-items: flex-start !important;
        margin: 0 !important;
    }

    .monibe-logo-static {
        font-size: 1.3rem !important;
        margin-bottom: 12px !important;
    }

    .linea-grande { 
        font-size: 5.0rem !important; 
        line-height: 1.05 !important;
        margin-bottom: 2px;
        text-align: left !important;
    }
    
    .italica-xl { 
        font-size: 5rem !important; 
    }

    /* Bloque de la Derecha: Ahora sube de forma natural sin ser empujado abajo */
    .hero-right {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
        align-items: flex-start !important;
        margin-top: 0 !important; /* Eliminamos el empuje automático al fondo */
    }

    /* El punto verde disponible */
    .disponibilidad {
        display: inline-flex !important;
        margin-top: 0 !important; /* Eliminamos margen superior para pegarlo más */
        margin-bottom: 15px !important;
    }

    .descripcion-intro {
        font-size: 1.15rem !important;
        line-height: 1.5 !important;
        margin-bottom: 25px !important; /* Espacio compacto antes del botón */
        text-align: left !important;
    }

    /* El botón se mantiene abajo a la derecha de su bloque */
    .btn-contacto-hero {
        display: inline-flex !important;
        align-self: flex-end !important; /* Se clava a la derecha de la pantalla */
        margin-right: 0 !important;
    }
}

/* 3. MÓVILES AJUSTE FINO (Ajuste para smartphones) */
@media (max-width: 764px) {
    .hero-brutalista {
        padding: 85px 24px 50px 24px !important;
        gap: 15px !important; /* Un pelín más juntos en pantallas de móvil */
    }

    .monibe-logo-static {
        font-size: 1.2rem !important;
        margin-bottom: 8px !important;
    }

    .linea-grande { 
        font-size: 2.2rem !important; 
        line-height: 1.1 !important;
    }
    
    .italica-xl { 
        font-size: 3.1rem !important; 
    }

    .descripcion-intro {
        font-size: 1.1rem !important;
        margin-bottom: 20px !important;
    }

    @keyframes pulse_brutal_o {
        0% { opacity: 0.0; width: 0px; height: 0px; }
        15% { opacity: 0.7; }
        80% { opacity: 0.3; }
        100% { opacity: 0.0; width: 60px; height: 60px; }
    }
}

/* ==========================================================================
   ADAPTACIÓN RESPONSIVE DE LA ANIMACIÓN DE CARGA (MÓVILES Y TABLETS)
   ========================================================================== */
@media (max-width: 768px) {
    /* Reducimos el contenedor para que no desborde la pantalla del móvil */
    .loader {
        width: 300px !important;
        height: 300px !important;
    }

    /* Reducimos el texto del loader para que guarde proporción */
    .loader-text {
        font-size: 1.2rem !important;
        padding: 0 20px;
    }

    /* Aplicamos una animación escalada para pantallas pequeñas */
    .circle {
        animation: pulse_mobile_loader 4s infinite linear !important;
        box-shadow: 0px 0px 12px var(--color-accent-pink) !important; /* Brillo más sutil para pantallas pequeñas */
    }

    /* Definimos cómo deben crecer las ondas en móviles sin salirse del borde */
    @keyframes pulse_mobile_loader {
        0% {
            opacity: 0.0;
            width: 0px;
            height: 0px;
            transform: translate(-50%, -50%);
        }
        10% {
            opacity: 0.6;
        }
        80% {
            opacity: 0.3;
        }
        100% {
            opacity: 0.0;
            width: 280px; /* Tamaño controlado: se expande al máximo pero se queda dentro de los 300px */
            height: 280px;
            transform: translate(-50%, -50%);
        }
    }
}

/* ==========================================================================
     ADAPTACIÓN PARA MÓVILES frases sobre vídeo scroleable
   ========================================================================== */
@media (max-width: 768px) { 
    .video-overlay-text {
        padding: 150px 20px; 
        align-items: right; 
    }

    .frase-animada {
        font-size: 3rem; 
        text-align: right; 
        width: 90%; 
        color: var(--color-bg-main);
    }
}


/* ==========================================================================
   MEDIAS QUERIES: OPTIMIZACIÓN DE TOPBAR PARA MÓVILES y TABLETS
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Modificamos el comportamiento del contenedor padre */
    #topbar {
        padding-left: 20px !important;  /* Quitamos los 90px fijos que empujaban todo */
        padding-right: 40px !important;
        display: flex;
        justify-content: space-between; /* Distribuye: Izquierda (Hamburguesa) - Derecha (Música) */
        align-items: center;
        position: fixed;
    }

    /* ¡EL TRUCO DEL ASPA X! Si el menú o la hamburguesa se activan, 
       forzamos a que el topbar se ponga por encima del menú lateral */
    #topbar:has(#hamburger.active) { /* Por si controlas la clase desde el JS en el topbar */
        z-index: 1001 !important; 
    }

    /* 2. Ajustamos la hamburguesa para que fluya en el flex (sin posiciones fijas invasivas) */
    #hamburger {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        z-index: 1002; /* Siempre visible */
        margin: 0;
    }

    /* 3. Forzamos el centrado absoluto del Logo y el Nombre en el espacio restante */
    .topbar-brand {
        position: absolute;
        left: 45%;
        top: 50%;
        transform: translate(-50%, -50%); /* Lo centra matemáticamente en el eje X e Y del topbar */
        gap: 8px !important; /* Un poco más juntos en móvil */
        pointer-events: none; /* Evita que bloquee clicks accidentales */
    }

    #topbar-logo {
        width: 32px !important;  /* Reducimos una pizca para pantallas pequeñas */
        height: 32px !important;
    }

    #topbar-name {
        font-size: 1.4rem !important; /* Tipografía más equilibrada para móviles */
    }

    /* 4. Aseguramos que la música se mantenga fluida a la derecha */
    #music-control {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        margin: 0;
    }
}

/* ============================================
   MEDIA QUERIES SECCION PASADO
   ============================================*/
     @media (max-width: 600px) {
    .pasado-slide { padding: 40px 20px 50px; }
    .pasado-title { font-size: 2.2rem; }
    .pasado-content-row { flex-direction: column; align-items: center; gap: 32px; }
    .pasado-arrow-left  { left: 6px; }
    .pasado-arrow-right { right: 6px; }
  }

/* ==========================================================================
   ██████╗ ███████╗███████╗██████╗  ██████╗ ███╗   ██╗███████╗
   ██╔══██╗██╔════╝██╔════╝██╔══██╗██╔═══██╗████╗  ██║██╔════╝
   ██████╔╝█████╗  ███████╗██████╔╝██║   ██║██╔██╗ ██║███████╗
   ██╔══██╗██╔══╝  ╚════██║██╔═══╝ ██║   ██║██║╚██╗██║╚════██║
   ██║  ██║███████╗███████║██║     ╚██████╔╝██║ ╚████║███████║
   ╚═╝  ╚═╝╚══════╝╚══════╝╚═╝      ╚═════╝ ╚═╝  ╚═══╝╚══════╝

   SISTEMA RESPONSIVE COMPLETO — MONIBE PORTFOLIO
   Breakpoints:
     L  ≤ 1280px  Portátiles pequeños / landscape tablet
     M  ≤ 1024px  Tablets portrait / landscape móvil grande
     S  ≤  768px  Móviles (todos los tamaños)
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   L — PORTÁTILES PEQUEÑOS  (≤ 1280px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {

  /* --- HERO --- */
  .hero-brutalista {
    padding: 80px 60px 60px 60px;
    gap: 40px;
  }

  .linea-grande {
    font-size: 4.4rem;
  }

  .italica-xl {
    font-size: 5.2rem;
  }

  .disponibilidad {
    margin-top: 100px;
  }

  .descripcion-intro {
    font-size: 1.2rem;
    margin-bottom: 60px;
  }

  /* --- SECCIÓN PASADO --- */
  .pasado-title {
    font-size: 4rem;
  }

  .pasado-slide {
    padding: 0 40px 20px;
  }

  .pasado-cards-horizontal {
    gap: 20px;
  }

  .icon-circle {
    width: 90px;
    height: 90px;
  }

  .icon-circle img {
    width: 44px;
    height: 44px;
  }

  /* --- SECCIÓN PRESENTE --- */
  .presente-header h2 {
    font-size: 4rem;
  }

  .skills-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.5rem;
  }



  /* --- FRASES TRANSICIÓN --- */
  .frase-transicion-texto {
    font-size: clamp(1.8rem, 3.5vw, 3rem); /* Fluido: nunca desborda */
    white-space: normal;
    text-align: center;
    width: 90%;                /* Limita el ancho para que haga wrap limpio */
    padding: 0 40px;
  }

  .frase-wrapper {
    height: auto;
    min-height: 100px;
    padding: 16px 0;
  }

  /* --- TOPBAR --- */
  #topbar {
    padding-left: 70px;
  }

  #music-control {
    margin-right: 60px;
  }

  /* --- BOTÓN STICKY --- */
  .btn-contacto-hero.is-sticky {
    bottom: 50px !important;
    right: 50px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   M — TABLETS  (≤ 1024px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* --- TOPBAR --- */
  #topbar {
    padding-left: 60px;
    padding-right: 20px;
    height: 54px;
  }

  #topbar-name {
    font-size: 1.5rem;
  }

  #topbar-logo {
    width: 36px;
    height: 36px;
  }

  #music-control {
    margin-right: 20px;
  }

  /* --- MENÚ LATERAL (as-menu) --- */
  #terminal-side.as-menu {
    width: 240px;
  }

  /* --- TERMINAL --- */
  #terminal {
    font-size: 0.95rem;
  }

  /* --- HERO: columna única --- */
  .hero-brutalista {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    padding: 90px 40px 60px 40px;
    gap: 30px;
    align-items: flex-start;
  }

  .hero-left {
    flex: none;
    width: 100%;
    height: auto;
    justify-content: flex-start;
  }

  .hero-right {
    flex: none;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .linea-grande {
    font-size: 4.8rem;
    line-height: 1.05;
  }

  .italica-xl {
    font-size: 5.5rem;
  }

  .disponibilidad {
    margin-top: 0;
    margin-bottom: 18px;
  }

  .descripcion-intro {
    font-size: 1.15rem;
    margin-bottom: 28px;
  }

  .btn-contacto-hero {
    align-self: flex-end;
    gap: 24px;
    padding: 14px 28px;
  }

  .btn-contacto-hero.is-sticky {
    bottom: 30px !important;
    right: 30px !important;
    width: 56px !important;
    height: 56px !important;
  }

  /* --- FRASE TRANSICIÓN PRE-VÍDEO --- */
  .frase-transicion-texto {
    font-size: clamp(1.4rem, 2.8vw, 2.4rem);
    white-space: normal;
    text-align: center;
    width: 85%;
    padding: 0 30px;
  }

  .frase-wrapper {
    height: auto;
    min-height: 90px;
    padding: 14px 0;
  }

  /* --- VÍDEO OVERLAY --- */
  .video-overlay-text {
    padding: 100px 30px;
    align-items: flex-end;
  }

  .frase-animada {
    font-size: 2.8rem;
  }

  #frase2 {
    padding-right: 80px;
  }

  /* --- SECCIÓN PASADO --- */
  .seccion-pasado {
    padding: 4rem 2rem;
  }

  .pasado-title {
    font-size: 3.4rem;
  }

  .pasado-label {
    font-size: 1.8rem;
  }

  .pasado-slide {
    padding: 0 30px 20px;
  }

  .pasado-cards-horizontal {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pasado-card-horizontal-item {
    min-width: 130px;
    flex: 0 1 calc(33% - 16px);
  }

  .icon-circle {
    width: 80px;
    height: 80px;
  }

  .icon-circle img {
    width: 40px;
    height: 40px;
  }

  .text-pill {
    font-size: 0.95rem;
    padding: 10px 8px;
  }

  /* Mapa (slide 2) */
  .pasado-content-row-maps {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 0;
  }

  .pasado-map-container {
    max-width: 100%;
    width: 100%;
  }

  .pasado-account-note {
    font-size: 1.2rem;
  }

  /* Skills (slide 3) */
  .pasado-skills-list {
    max-width: 380px;
  }

  .pasado-skill-pill {
    font-size: 1rem;
    padding: 10px 22px;
  }

  /* --- SECCIÓN PRESENTE --- */
  .seccion-presente {
    padding: 4rem 2rem;
  }

  .presente-header h2 {
    font-size: 3.4rem;
  }

  .skills-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem 1.2rem;
  }

  /* --- SECCIÓN ONDAS INTERACTIVAS --- */
  .wave-section h2 {
    font-size: 2.2rem;
    text-align: center;
    padding: 0 20px;
  }

  .wave-section p {
    font-size: 1.2rem;
    text-align: center;
    padding: 0 20px;
  }



  /* --- MODAL --- */
  .modal-content {
    padding: 30px;
  }

  .modal-title {
    font-size: 1.5rem;
  }

  /* --- FOOTER --- */
  .footer {
    height: auto;
    padding: 16px 20px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   S — MÓVILES  (≤ 768px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* --- TOPBAR --- */
  #topbar {
    padding-left: 54px;
    padding-right: 16px;
    height: 50px;
  }

  #hamburger {
    position: fixed;
    top: 12px;
    left: 12px;
  }

  .topbar-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    gap: 6px;
    pointer-events: none;
  }

  #topbar-logo {
    width: 28px;
    height: 28px;
  }

  #topbar-name {
    font-size: 1.3rem;
  }

  #music-control {
    position: relative;
    margin-left: auto;
    margin-right: 0;
  }

  /* --- MENÚ LATERAL (as-menu) --- */
  #terminal-side.as-menu {
    width: 100%;
    max-width: 280px;
  }

  .nav-links a {
    font-size: 1rem;
  }

  .nav-links li {
    padding: 12px 0;
  }

  /* --- TERMINAL CMD --- */
  #terminal {
    font-size: 0.9rem;
    letter-spacing: 0.03em;
  }

  #terminal-side {
    padding: 20px 18px;
  }

  .input-line {
    margin-top: 8px;
  }

  /* --- HERO --- */
  .hero-brutalista {
    flex-direction: column;
    height: auto;
    min-height: 100svh; /* svh: respeta el chrome del navegador móvil */
    padding: 75px 20px 50px 20px;
    gap: 20px;
    align-items: flex-start;
  }

  .monibe-logo-static {
    font-size: 1.1rem;
    margin-bottom: 8px;
  }

  .linea-grande {
    font-size: 2.6rem;
    line-height: 1.1;
  }

  .italica-xl {
    font-size: 3.2rem;
  }

  .disponibilidad {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 0.75rem;
  }

  .descripcion-intro {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .btn-contacto-hero {
    align-self: flex-end;
    gap: 16px;
    padding: 12px 22px;
    font-size: 1rem;
  }

  .btn-contacto-hero.is-sticky {
    bottom: 20px !important;
    right: 20px !important;
    width: 52px !important;
    height: 52px !important;
  }

  .hero-scroll-indicator {
    display: none; /* Poco espacio en móvil: quitamos el indicador de scroll */
  }

  /* --- FRASE TRANSICIÓN PRE-VÍDEO --- */
  .frase-transicion-texto {
    font-size: clamp(1.1rem, 4.5vw, 1.6rem); 
    white-space: normal;
    text-align: center;
    width: 88%;
    padding: 0 16px;
    line-height: 1.4;
  }

  .frase-wrapper {
    height: auto;
    min-height: 80px;
    padding: 16px 0;
  }

  /* --- VÍDEO OVERLAY --- */
  .video-overlay-text {
    padding: 80px 16px;
    align-items: flex-end;
  }

  .frase-animada {
    font-size: 2rem;
    width: 85%;
  }

  #frase2 {
    padding-right: 40px;
  }

  /* --- SECCIÓN PASADO --- */
  .seccion-pasado {
    padding: 3rem 1rem 2rem;
    height: auto;
    min-height: 100vh;
  }

  .pasado-header {
    margin-bottom: 10px;
  }

  .pasado-title {
    font-size: 2.4rem;
    letter-spacing: 0.1em;
  }

  .pasado-label {
    font-size: 1.4rem;
    margin-bottom: 16px;
  }

  .pasado-slide {
    padding: 0 10px 20px;
    align-items: center;
  }

  /* Slide 1: iconos en cuadrícula 2×3 */
  .pasado-cards-horizontal {
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 20px;
  }

  .pasado-card-horizontal-item {
    flex: 0 1 calc(50% - 14px);
    min-width: 120px;
  }

  .icon-circle {
    width: 70px;
    height: 70px;
  }

  .icon-circle img {
    width: 34px;
    height: 34px;
  }

  .text-pill {
    font-size: 0.85rem;
    padding: 8px 6px;
    min-height: 44px;
  }

  /* Slide 2: mapa en columna */
  .pasado-content-row-maps {
    flex-direction: column;
    gap: 20px;
    margin-top: 0;
  }

  .pasado-map-container {
    max-width: 100%;
    width: 100%;
  }

  .pasado-locations {
    gap: 4px;
  }

  .pasado-locations-label {
    font-size: 1.1rem;
  }

  .pasado-pin-svg {
    width: 40px;
    height: 46px;
  }

  .pasado-city {
    font-size: 1.5rem;
  }

  .pasado-account-note {
    font-size: 1rem;
    margin-top: 16px;
  }

  /* Slide 3: skills centradas */
  .pasado-skills-list {
    max-width: 100%;
    gap: 10px;
  }

  .pasado-skill-pill {
    font-size: 0.9rem;
    padding: 9px 18px;
  }

  /* Flechas más pequeñas */
  .pasado-arrow {
    top: auto;
    bottom: 10px;
    width: 36px;
    height: 36px;
  }

  .pasado-arrow-left  { left: 4px; }
  .pasado-arrow-right { right: 4px; }

  /* --- SECCIÓN TRANSICIÓN PASADO-PRESENTE --- */
  .frase-transicion-2 {
    min-height: 80vh;
  }

  /* --- SECCIÓN PRESENTE --- */
  .seccion-presente {
    padding: 3rem 1.2rem;
  }

  .presente-header h2 {
    font-size: 2.4rem;
    letter-spacing: 0.1em;
  }

  .presente-header .titulacion {
    font-size: 1rem;
    padding: 0 10px;
  }

  .skills-container {
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem 0.8rem;
  }

  .array-category summary {
    font-size: 0.95rem;
  }

  .skill-badge {
    font-size: 0.85rem;
    padding: 0.55rem 1.2rem;
    min-width: 110px;
  }

  /* --- SECCIÓN ONDAS INTERACTIVAS --- */
  .wave-section {
    min-height: 60vh; /* Más compacto en móvil */
    cursor: auto;
  }

  .wave-section * {
    cursor: auto;
  }

  .stone-cursor {
    display: none; /* El cursor personalizado no tiene sentido en táctil */
  }

  .wave-section h2 {
    font-size: 1.6rem;
    text-align: center;
    padding: 0 20px;
  }

  .wave-section p {
    font-size: 1rem;
    text-align: center;
    padding: 0 24px;
  }


  /* --- MODAL --- */
  .modal-content {
    padding: 24px 20px;
    border-radius: 12px;
  }

  .modal-title {
    font-size: 1.3rem;
  }

  .modal-list li {
    font-size: 0.95rem;
  }

  /* --- ANIMACIÓN DE CARGA --- */
  .loader {
    width: 280px;
    height: 280px;
  }

  .loader-text {
    font-size: 1.1rem;
    padding: 0 20px;
    text-align: center;
  }

  /* --- FOOTER --- */
  .footer {
    height: auto;
    padding: 14px 16px;
    justify-content: center;
  }

  .btn-clean {
    font-size: 0.9rem;
    padding: 10px 20px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   XS — MÓVILES PEQUEÑOS  (≤ 480px)
   Ajustes finos para iPhone SE, Galaxy A, etc.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* --- HERO --- */
  .hero-brutalista {
    padding: 68px 16px 44px 16px;
    gap: 16px;
  }

  .linea-grande {
    font-size: 2.1rem;
  }

  .italica-xl {
    font-size: 2.6rem;
  }

  .descripcion-intro {
    font-size: 0.95rem;
  }

  .btn-contacto-hero {
    gap: 12px;
    padding: 10px 18px;
    font-size: 0.95rem;
  }

  /* --- FRASES TRANSICIÓN --- */
  .frase-transicion-texto {
    font-size: clamp(1.1rem, 4.5vw, 1.6rem); 
    width: 92%;
    padding: 0 12px;
    line-height: 1.45;
  }

  .frase-wrapper {
    min-height: 70px;
  }

  /* --- VÍDEO --- */
  .frase-animada {
    font-size: 1.6rem;
  }

  /* --- PASADO --- */
  .pasado-title {
    font-size: 2rem;
  }

  .pasado-card-horizontal-item {
    flex: 0 1 calc(50% - 10px);
    min-width: 100px;
  }

  .icon-circle {
    width: 60px;
    height: 60px;
  }

  .icon-circle img {
    width: 28px;
    height: 28px;
  }

  .text-pill {
    font-size: 0.78rem;
  }

  /* --- PRESENTE --- */
  .presente-header h2 {
    font-size: 2rem;
  }

  .skills-container {
    grid-template-columns: 1fr;
  }


}
/* ══════════════════════════════════════════════════════════════════════════
   SECCION PRESENTE — RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PORTÁTIL (≤ 1280px) ── */
@media (max-width: 1280px) {

  .seccion-presente {
    padding: 5rem 3rem;
  }

  .presente-header h2 {
    font-size: 4rem;
  }

  .zen-description {
    font-size: 1.1rem;
  }

  .zen-subtitle {
    font-size: 1.4rem;
  }

  .zen-phrase-display {
    font-size: 1.9rem;
  }

  .skills-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem 0.8rem;
  }
}

/* ── TABLET (≤ 1024px) ── */
@media (max-width: 1024px) {

  .seccion-presente {
    padding: 4rem 2rem;
  }

  .presente-header h2 {
    font-size: 3.2rem;
  }

  .presente-header .titulacion {
    font-size: 1.05rem;
    padding: 0 8px;
  }

  /* Slide Zen */
  .zen-container {
    min-height: 40vh;
    padding: 0 1rem;
  }

  .zen-description {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .zen-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
  }

  .zen-button-wrapper,
  #zenButtonWrapper {
    width: 150px;
    height: 150px;
  }

  .btn-zen {
    width: 130px;
    height: 130px;
    font-size: 1.05rem;
  }

  .zen-ripple {
    width: 130px;
    height: 130px;
  }

  .zen-phrase-display {
    font-size: 1.7rem;
  }

  /* Slide Skills */
  .skills-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem 1rem;
  }

  .skill-badge {
    font-size: 0.9rem;
    min-width: 120px;
  }

  /* Flechas del slider */
  .presente-arrow {
    width: 40px;
    height: 40px;
  }

  .presente-arrow-left  { left: 10px; }
  .presente-arrow-right { right: 10px; }
}

/* ── MÓVIL (≤ 768px) ── */
@media (max-width: 768px) {

  .seccion-presente {
    padding: 3rem 1.2rem;
  }

  .presente-header h2 {
    font-size: 2.4rem;
    letter-spacing: 0.1em;
  }

  .presente-header .titulacion {
    font-size: 1rem;
    padding: 0 10px;
  }

  .presente-slide {
    padding: 0 20px 20px;
  }

  /* Slide Zen: layout en columna más compacto */
  .zen-container {
    min-height: 35vh;
    gap: 0;
  }

  .zen-description {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
  }

  .zen-subtitle {
    font-size: 1.1rem;
    margin-bottom: 2rem;
  }

  .zen-button-wrapper,
  #zenButtonWrapper {
    width: 130px;
    height: 130px;
  }

  .btn-zen {
    width: 110px;
    height: 110px;
    font-size: 0.95rem;
  }

  .zen-ripple {
    width: 110px;
    height: 110px;
  }

  .zen-phrase-display {
    font-size: 1.4rem;
    max-width: 100%;
    padding: 0 10px;
  }

  /* Slide Skills: 2 columnas en móvil ancho */
  .skills-container {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 0.8rem;
  }

  .array-category summary {
    font-size: 0.95rem;
  }

  .skill-badge {
    font-size: 0.85rem;
    padding: 0.55rem 1.2rem;
    min-width: 110px;
  }

  /* Flechas más pequeñas y pegadas al borde */
  .presente-arrow {
    top: 320px;
    width: 36px;
    height: 36px;
  }

  .presente-arrow-left  { left: 4px; }
  .presente-arrow-right { right: 4px; }
}

/* ── MÓVIL PEQUEÑO (≤ 480px) ── */
@media (max-width: 480px) {

  .presente-header h2 {
    font-size: 2rem;
  }

  .presente-header .titulacion {
    font-size: 0.9rem;
  }

  .presente-slide {
    padding: 0 12px 16px;
  }

  /* Zen en pantalla pequeña: todo más comprimido */
  .zen-description {
    font-size: 0.88rem;
  }

  .zen-subtitle {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .zen-button-wrapper,
  #zenButtonWrapper {
    width: 110px;
    height: 110px;
  }

  .btn-zen {
    width: 95px;
    height: 95px;
    font-size: 0.85rem;
  }

  .zen-ripple {
    width: 95px;
    height: 95px;
  }

  .zen-phrase-display {
    font-size: 1.2rem;
    line-height: 1.5;
  }

  /* Skills a una sola columna en móvil pequeño */
  .skills-container {
    grid-template-columns: 1fr;
  }
}