/* Import Fonts - Using Inter for Apple-like feel */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Define Color Palette & Variables */
:root {
    --ater-dark-grey: #383E42;
    --ater-light-grey: #6c757d;
    --ater-accent-green: #67C18B;
    --ater-accent-yellow: #FCEB7F;
    --ater-accent-orange: #F6A060;
    --ater-accent-pink: #E55B8A;
    --pastel-blue: #A0D2DB;
    --pastel-yellow: #FDFCDC;
    --pastel-violet: #D8BFD8;
    --color-background: #FFFFFF;
    --color-background-alt: #F8F9FA;
    --color-text: var(--ater-dark-grey);
    --color-headings: #1d2129;
    --color-link: var(--ater-accent-green);
    --card-background: rgba(255, 255, 255, 0.85);
    --card-shadow: rgba(0, 0, 0, 0.1);
}

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

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: linear-gradient(135deg, var(--ater-accent-pink), var(--pastel-violet), var(--pastel-blue), var(--ater-accent-green), var(--pastel-yellow));
    background-size: 300% 300%;
    animation: gradientAnimation 35s ease-in-out infinite;
    color: var(--color-text);
    line-height: 1.7;
    overflow-x: hidden;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 25px; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    color: var(--color-headings);
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
h1 { font-size: 3rem; line-height: 1.15; font-weight: 700; margin-bottom: 1.2rem; }
h2 { font-size: 1.6rem; margin-top: 0.5rem; margin-bottom: 1.5rem; font-weight: 400; color: var(--ater-light-grey); letter-spacing: normal;}
h3 { font-size: 1.4rem; margin-top: 2rem; color: var(--color-headings); font-weight: 600; }

p { margin-bottom: 1.2rem; font-size: 1rem; color: #495057; }
a { color: var(--color-link); text-decoration: none; font-weight: 500; transition: opacity 0.2s ease; }
a:hover { opacity: 0.7; }

.content-card {
    background-color: var(--card-background);
    border-radius: 20px;
    padding: 2.5rem 3rem;
    box-shadow: 0 8px 32px 0 var(--card-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    margin-bottom: 3rem;
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* Añade esta línea para la transición suave */
```
}


.content-card:hover {
    transform: translateY(-5px) scale(1.01); /* Levanta y escala ligeramente */
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.15); /* Sombra un poco más pronunciada */
}
```
#main-header {
    padding: 1rem 0;
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
#main-header .container { display: flex; justify-content: space-between; align-items: center; }
.logo-img { max-height: 90px; width: auto; }

main { padding: 50px 0; }

#intro-section { text-align: center; }
#intro-section h2 {
    font-size: 1.6rem;
    color: var(--ater-light-grey);
    font-weight: 400;
    margin-bottom: 1.5rem;
    letter-spacing: normal;
}
#intro-section .instructions {
    font-size: 1.1rem;
    color: #495057;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}

#form-section {}
#tally-embed-area {
    margin: 0 auto;
    max-width: 850px;
}
#tally-embed-area iframe {
    width: 100%;
    min-height: 700px;
    border: none;
    border-radius: 10px;
    overflow: hidden;
}

.disclaimer {
    margin: 1rem auto 2rem auto;
    padding: 1rem;
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    max-width: 700px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}
.disclaimer strong { font-weight: 600; }

#main-footer {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.7);
    padding: 2rem 0;
    margin-top: 0;
    text-align: center;
    font-size: 0.9rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#main-footer p { margin-bottom: 0.3rem; color: rgba(0, 0, 0, 0.7); }
#main-footer a { color: var(--ater-dark-grey); font-weight: 600; }
#main-footer a:hover { color: #000; }

@media (max-width: 768px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.3rem; }
    #intro-section h2 { font-size: 1.4rem; }
    .content-card { padding: 1.5rem 1.5rem; }
    .logo-img { max-height: 70px; }
    #main-header {
        position: static;
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid #eee;
    }
    #main-header .container { flex-direction: row; }
    body { padding-top: 0; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.1rem; }
    #intro-section h2 { font-size: 1.2rem; }
    .logo-img { max-height: 60px; }
    .content-card { padding: 1rem 1rem; border-radius: 15px; }
    main { padding: 30px 0; }
    .disclaimer { font-size: 0.75rem; }
}
/* --- Estilos Portada --- */

#portada-hero {
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente */
    min-height: 75vh; /* Altura mínima para ocupar buena parte de la pantalla */
    text-align: center; /* Centra el texto */
    padding: 4rem 0; /* Espaciado vertical */
    color: #fff; /* Color de texto base para la portada (ajustar si es necesario) */
}

#portada-hero .container {
    max-width: 800px; /* Ancho máximo del contenido central */
}

/* Placeholder para el elemento visual (ajustar tamaño/espacio según diseño final) */
#visual-element-placeholder {
    height: 150px; /* Altura de ejemplo */
    margin-bottom: 2.5rem;
    /* background-color: rgba(255, 255, 255, 0.1); // Fondo temporal opcional para verlo */
    /* border-radius: 10px; // Temporal opcional */
}

#portada-hero h1 {
    font-size: 3.5rem; /* Tamaño más grande para el H1 de portada */
    font-weight: 700; /* Bien bold */
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--color-headings); /* Usamos el color definido, asegurar contraste */
     /* Podríamos necesitar sombra si el fondo interfiere */
     text-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

#portada-hero h2 {
    font-size: 1.4rem; /* Tamaño para el subtítulo */
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    color: var(--ater-dark-grey); /* Color más suave pero legible */
    max-width: 650px; /* Limitar ancho del H2 */
    margin-left: auto;
    margin-right: auto;
     text-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

/* Botón de Llamada a la Acción */
.cta-button {
    display: inline-block; /* Para que respete padding y margin */
    background-color: var(--ater-accent-pink); /* Usando el rosa Aterea */
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    padding: 1rem 2.5rem; /* Botón generoso */
    border-radius: 50px; /* Píldora / Botón redondeado */
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
    background-color: #d44a7a; /* Rosa un poco más oscuro al pasar el mouse */
    transform: translateY(-3px); /* Efecto de elevación */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* --- Ajustes Responsivos Portada --- */
@media (max-width: 768px) {
    #portada-hero h1 {
        font-size: 2.8rem;
    }
    #portada-hero h2 {
        font-size: 1.2rem;
    }
    #visual-element-placeholder {
        height: 120px;
        margin-bottom: 2rem;
    }
    .cta-button {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    #portada-hero {
        min-height: 70vh;
        padding: 3rem 0;
    }
    #portada-hero h1 {
        font-size: 2.2rem;
    }
    #portada-hero h2 {
        font-size: 1.1rem;
    }
     #visual-element-placeholder {
        height: 100px;
        margin-bottom: 1.5rem;
    }
}
/* --- SVG Pulsating Circles Animation --- */

#visual-element-placeholder {
    height: 180px; /* Aumentamos un poco la altura para el glow */
    margin-bottom: 2.5rem;
    display: flex; /* Para centrar SVG si es más pequeño */
    justify-content: center;
    align-items: center;
}

#visual-element-placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 180px; /* Control max size */
    overflow: visible; /* Importante para que el glow no se corte */
}

/* Define la animación de pulso (escala y opacidad) */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.6;
    }
    70% {
        transform: scale(1.03); /* Hacemos la escala un poco más sutil */
        opacity: 0.9;
    }
    100% {
        transform: scale(0.95);
        opacity: 0.6;
    }
}

/* Aplica la animación a los círculos con variaciones */
#p-circle1, #p-circle2, #p-circle3 {
    transform-origin: center; /* Animar desde el centro del SVG */
    animation-name: pulse;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate; /* Va y viene suavemente */
}

#p-circle1 {
    animation-duration: 7s; /* Duraciones más largas para un efecto más calmado */
}

#p-circle2 {
    animation-duration: 6s;
    animation-delay: 0.7s; /* Retraso para desfasar */
}

#p-circle3 {
    animation-duration: 8s;
    animation-delay: 1.2s; /* Retraso para desfasar */
}

/* Ajustes responsivos si es necesario */
@media (max-width: 768px) {
    #visual-element-placeholder {
        height: 150px;
         max-width: 150px;
         margin-bottom: 2rem;
    }
    #visual-element-placeholder svg {
         max-width: 150px;
    }
}
@media (max-width: 480px) {
     #visual-element-placeholder {
        height: 120px;
         max-width: 120px;
         margin-bottom: 1.5rem;
    }
     #visual-element-placeholder svg {
         max-width: 120px;
    }
}
/* --- Estilos Animación Líneas Rectas --- */

#portada-hero {
    /* Necesitamos posición relativa para que funcione el absoluto de la capa */
    position: relative;
    /* Aseguramos que el fondo degradado cubra toda la sección */
    overflow: hidden;
  }
  
  #animation-layer {
    position: absolute; /* Se posiciona respecto a #portada-hero */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Muy importante: corta las líneas que se salen */
    z-index: 0; /* Lo ponemos detrás */
    pointer-events: none; /* Evita que interfiera con clics en el contenido */
  }
  
  #hero-content-container {
    position: relative; /* Para asegurar que esté sobre la capa de animación */
    z-index: 1; /* Por encima de #animation-layer */
  }
  
  /* Estilo base para las líneas que creará JavaScript */
  .animated-line {
    position: absolute; /* Posicionamiento libre dentro de #animation-layer */
    display: block;
    /* El color, tamaño y posición se darán con JS */
    background-color: #fff; /* Color temporal por defecto */
    opacity: 0.6; /* Opacidad base */
    pointer-events: none; /* No deben ser clickables */
  }