/* styles.css */
html {
  box-sizing: border-box;
  scroll-padding-top: calc(var(--header-logo-height) + (2 * var(--header-padding-vertical))); /* Ajuste para el header fijo */
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

:root {
  --color-primary: #BAFF39; /* amarillo-verde */
  --color-secondary: #6E6E6E; /* gris tenue */
  --color-background: #FFFFFF; /* blanco */
  --color-text: #222; /* Texto principal más oscuro */
  --color-text-light: #444; /* Texto secundario más oscuro */
  --font-primary: 'Lato', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --hero-top-bg: #EA4501; /* Color de inicio del degradado actualizado */
  --header-text-color: #222; /* Color para texto y logos en header (negro) */
  --header-logo-height: 120px;
  --header-padding-vertical: 0.8rem;
}

body {
  font-family: var(--font-primary);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background: var(--color-background); /* Fondo blanco base */
  color: var(--color-text);
  scroll-behavior: smooth;
}

header {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  padding: var(--header-padding-vertical) 2rem;
  background-color: var(--hero-top-bg); /* Header con fondo naranja */
  box-shadow: none; /* Sin sombra para un look flotante */
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%; /* Ajustado para ocupar el ancho completo */
  box-sizing: border-box; /* Para que el padding se incluya en el ancho total */
  transition: all 0.5s ease; /* Transición más suave */
}



.logo {
  height: var(--header-logo-height); /* Logo más grande como solicitado */
  filter: brightness(0) invert(1); /* Logo en blanco */
  transition: height 0.3s ease, filter 0.3s ease;
}

.nav-left {
  flex: 1; /* Ocupa espacio disponible, empujando el logo al centro */
  display: flex;
  justify-content: flex-start; /* Alinea los items a la izquierda */
}

.logo-link { /* Contenedor del logo para centrarlo */
  flex-shrink: 0; /* Evita que el logo se encoja */
}

.nav-right {
  flex: 1; /* Ocupa espacio disponible, empujando el logo al centro */
  display: flex;
  justify-content: flex-end; /* Alinea los items a la derecha */
}

.nav-left ul, .nav-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.nav-left li {
  margin-right: 20px; /* Espacio entre elementos de nav-left */
}
.nav-left li:last-child {
  margin-right: 0;
}

.nav-right li {
  margin-left: 25px; /* Espacio entre elementos de nav-right */
}
.nav-right li:first-child {
  margin-left: 0;
}


.nav-left a, .nav-right a {
  text-decoration: none;
  color: var(--color-background); /* Texto del header en blanco para contraste con fondo naranja */
  font-weight: bold;
  padding: 0.5rem 0;
  transition: color 0.3s ease;
}

.nav-left a:hover, .nav-right a:hover,
.nav-right a:focus, .nav-left a:focus {
  color: var(--color-primary); 
}

.nav-toggle {
  display: none; 
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-background); /* Icono de hamburguesa en blanco */
}
.nav-toggle:hover {
  color: var(--color-primary);
}

.divider {
  border: 0;
  height: 1px;
  background-color: #e0e0e0; /* Un gris más claro para el divisor */
  margin: 0;
}

main {
  /* No se necesita padding-top si el header es sticky y bien manejado */
}

.section {
  padding: 40px 20px; /* Padding ajustado para contenido centrado */
  text-align: center;
  opacity: 0; /* Inicialmente invisible para efecto fade */
  transform: translateY(20px); /* Ligero desplazamiento para efecto */
  transition: opacity 1s ease, transform 1s ease; /* Transición más lenta y suave */
  width: 100%;
  box-sizing: border-box;
  min-height: 100vh; /* Ajustar al tamaño de la pantalla */
  display: flex;
  flex-direction: column; /* Para que h2 y .container se apilen verticalmente */
  align-items: center; /* Centrar horizontalmente */
  justify-content: center; /* Centrar verticalmente */
  position: relative; /* Para asegurar el contexto de apilamiento */
  z-index: 1; /* Para asegurar que las secciones estén sobre elementos de fondo como partículas globales */
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}



/* BLOQUE 1: HERO / PORTADA */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0;
  background-color: rgba(234, 69, 1, 0.85); /* Fondo naranja semi-transparente para la primera sección */
  color: white;
}

#tsparticles {
  position: fixed; /* Para que cubra toda la página */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1; /* Detrás de todo el contenido */
  pointer-events: none; /* Para que no interfieran con la interacción */
}

.hero-container-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  margin: 0 auto;
  z-index: 2; /* Asegura que el contenido esté por encima del fondo */
}

.hero-content {
  flex: 1.2; 
  text-align: left; 
}




.hero-brand-name { /* Ya estaba definido, aseguramos color blanco */
  font-family: var(--font-secondary);
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--color-text); /* Texto PauPulse en negro */
  margin: 0 0 10px 0;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero-content .hero-tagline {
  font-size: 1.9rem;
  font-family: var(--font-secondary);
  font-weight: 300; 
  color: var(--color-text); /* Tagline en negro */
  line-height: 1.4;
  margin: 0; /* Asegura que se alinee bien debajo de .hero-brand-name */
}

.hero-form {
  background: rgba(255, 255, 255, 0.95); /* Fondo del formulario semi-transparente */
  padding: 35px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  flex: 1; /* Ocupa el espacio disponible, controlado por max-width */
  width: 100%; /* Asegura que use el ancho disponible hasta max-width */
  min-width: 300px; /* Ajuste ligero de min-width */
  max-width: 450px; /* Tamaño base ligeramente mayor */
  text-align: left;
}
.hero-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.hero-form legend {
  font-size: 1.7rem;
  font-weight: bold;
  margin-bottom: 25px;
  text-align: center;
  color: var(--color-secondary);
}
.hero-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: normal;
  color: var(--color-text-light);
}
.hero-form input[type="text"],
.hero-form input[type="email"] {
  width: calc(100% - 22px);
  padding: 12px 10px;
  margin-top: 5px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px; /* Bordes más suaves */
  font-size: 1rem;
  background-color: #fdfdfd;
}
.hero-form input[type="text"]:focus,
.hero-form input[type="email"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(186, 255, 57, 0.3); /* Sombra al enfocar */
}

.hero-form button[type="submit"],
.survey button[type="submit"] { /* Estilo común para botones de envío */
  background-image: linear-gradient(to right, var(--color-primary) 0%, #a8e020 100%); /* Degradado sutil */
  color: var(--color-text); /* Texto oscuro para contraste con amarillo-verde */
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  width: 100%;
  margin-top: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.hero-form button[type="submit"]:hover,
.survey button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(186, 255, 57, 0.4);
}


/* BLOQUE 2: QUIÉNES SOMOS */
#about .container {
  text-align: center;
}
#about p {
  font-size: 1.1rem;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
  color: var(--color-text-light); /* Usará el nuevo --color-text-light más oscuro */
}

/* BLOQUE 3: SERVICIOS */
#services {
  background-color: rgba(255, 255, 255, 0.85); /* Blanco semi-transparente, igual que .section:nth-child(even) */
  color: var(--color-text);
}

#services .container {
  text-align: center;
}

#services h2 {
  color: var(--color-secondary); /* Título en color secundario (gris) */
  margin-bottom: 50px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Grid responsivo */
  gap: 30px; /* Espacio entre tarjetas */
  margin-top: 30px;
}

.service-item {
  background-color: var(--color-background); /* Fondo blanco para las tarjetas */
  padding: 30px 25px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Alinea el botón abajo */
  min-height: 320px; /* Altura mínima para consistencia */
}

.service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.service-item i {
  font-size: 2.8rem; /* Iconos más grandes */
  color: var(--hero-top-bg); /* Iconos en color naranja del header */
  margin-bottom: 20px;
}

.service-item h3 {
  font-family: var(--font-secondary);
  font-size: 1.5rem; /* Tamaño de título de servicio */
  color: var(--color-text);
  margin-bottom: 15px;
  min-height: 2.4em; /* Espacio para dos líneas de título */
}

.service-item p {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 25px;
  flex-grow: 1; /* Permite que el párrafo ocupe espacio disponible */
}

.btn-service-contact {
  background-color: var(--color-primary);
  color: var(--color-text);
  padding: 12px 25px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
  align-self: center; /* Centra el botón si el texto no empuja */
  margin-top: auto; /* Asegura que el botón esté al final */
}

.btn-service-contact:hover {
  background-color: #a8e030; /* Tono más oscuro de --color-primary */
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Ajustes para la sección de servicios en modo oscuro si se implementara */
/* body.dark-mode #services .service-item { background-color: var(--color-secondary); } */
/* body.dark-mode #services .service-item h3, body.dark-mode #services .service-item p { color: var(--color-background); } */


/* BLOQUE 4: PORTFOLIO */
#portfolio .splide__slide iframe {
  width: 100%;
  min-height: 450px;
  border: none;
  border-radius: 8px;
}
#portfolio .splide__arrow {
  background: rgba(0,0,0,0.4); /* Flechas un poco más claras */
  color: white;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
#portfolio .splide__arrow:hover {
  background: rgba(0,0,0,0.6);
  opacity: 1;
}
#portfolio .splide__arrow svg {
  fill: white; /* Asegura que el SVG de la flecha sea blanco */
}
#portfolio .splide__pagination__page {
  background: rgba(110, 110, 110, 0.4); /* Paginación con gris tenue */
  transition: background-color 0.3s ease, transform 0.3s ease;
  width: 10px; /* Ajuste de tamaño */
  height: 10px;
}
#portfolio .splide__pagination__page.is-active {
  background: var(--color-primary);
  transform: scale(1.3);
}


/* BLOQUE 5: TESTIMONIOS & FAQ */
.testimonial-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin: 30px auto 60px;
  max-width: 1400px;
  padding: 0 20px;
}
.testimonial-bubble {
  background: #ffffff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  text-align: left;
  position: relative;
  border-left: 5px solid var(--color-primary);
  transition: all 0.3s ease;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.testimonial-bubble:before {
    content: "";
    position: absolute;
    bottom: -10px; /* Ajustar si es necesario */
    left: 20px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #f8f8f8 transparent;
    display: block;
    width: 0;
}
.testimonial-img {
  width: 65px; /* Ligeramente más grande */
  height: 65px;
  border-radius: 50%;
  margin-right: 18px;
  float: left;
  border: 3px solid var(--color-background); /* Borde para destacar la imagen */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.testimonial-bubble p {
  margin-left: 83px; /* Ajustar según tamaño de imagen */
  font-style: italic;
  color: var(--color-text-light);
  margin-bottom: 10px; /* Espacio antes de la cita */
}
.testimonial-bubble cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-weight: bold;
  text-align: right;
  color: var(--color-secondary);
  clear: both;
}

.separator {
  height: 1px;
  background-color: #ddd;
  margin: 55px auto;
  width: 70%;
}

.faq-bubble {
  background: var(--color-background);
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.07);
  text-align: left;
  max-width: 750px;
  margin: 0 auto;
}
.faq-bubble details {
  margin-bottom: 0;
  border-bottom: 1px solid #eee;
}
.faq-bubble details:last-child {
  border-bottom: none;
}
.faq-bubble summary {
  font-weight: bold;
  cursor: pointer;
  padding: 18px 22px; /* Más padding */
  outline: none;
  list-style: none;
  position: relative;
  color: var(--color-secondary);
  transition: background-color 0.2s ease;
}
.faq-bubble summary:hover {
  background-color: #f9f9f9;
}
.faq-bubble summary::-webkit-details-marker {
  display: none;
}
.faq-bubble summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  font-size: 1.6rem;
  transition: transform 0.2s ease-in-out;
  color: var(--color-primary);
}
.faq-bubble details[open] summary {
  background-color: #f5f5f5; /* Fondo cuando está abierto */
}
.faq-bubble details[open] summary::after {
  transform: rotate(45deg);
}
.faq-bubble p {
  margin-top: 0;
  padding: 5px 22px 18px 22px;
  color: var(--color-text-light);
  line-height: 1.7;
}

/* BLOQUE 6: CONTACTO */
#contact {
  background-color: rgba(234, 69, 1, 0.85); /* Naranja semi-transparente para la sección de contacto */
  color: white; /* Texto blanco para contraste */
}

#contact .small-note {
  color: var(--color-background); /* Texto blanco para contraste en fondo naranja */
}

#contact .survey {
  background: rgba(255, 255, 255, 0.1); /* Fondo del formulario ligeramente transparente sobre naranja */
  border: 1px solid rgba(255, 255, 255, 0.3);
}

#contact .survey legend {
    color: var(--color-secondary); /* Texto oscuro para contraste en fondo claro del formulario */
}

#contact .survey input[type="text"],
#contact .survey input[type="email"],
#contact .survey textarea {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-text);
}

#contact .survey input[type="text"]::placeholder,
#contact .survey input[type="email"]::placeholder,
#contact .survey textarea::placeholder {
  color: var(--color-text-light);
}
#contact .container {
  max-width: 700px; /* Max width for the content area within contact section */
  margin-left: auto; /* Center the container */
  margin-right: auto; /* Center the container */
  text-align: center;
}

/* Ensure general text within #contact (not form elements) is visible */
#contact p {
  color: rgba(255, 255, 255, 0.95); /* Slightly more opaque white for better readability */
  margin-bottom: 15px; /* Standard spacing */
}

#contact .container > *:not(.survey):not(h2):not(p) {
  color: white; /* Fallback for other direct children like divs or spans if any */
}
#contact .survey {
  background: #fdfdfd; /* Un blanco ligeramente menos puro */
  padding: 35px 45px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  text-align: left;
  margin-top: 25px;
}
.survey label {
  display: block;
  margin-bottom: 8px;
  font-weight: normal;
  color: var(--color-text-light);
}
.survey input[type="text"],
.survey input[type="email"],
.survey textarea {
  width: calc(100% - 22px);
  padding: 12px 10px;
  margin-top: 5px; /* Coincide con hero-form */
  margin-bottom: 15px; /* Coincide con hero-form */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  background-color: #fdfdfd; /* Coincide con hero-form */
}
.survey input[type="text"]:focus,
.survey input[type="email"]:focus,
.survey textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(186, 255, 57, 0.3);
}
/* El estilo del botón de submit ya está definido arriba con .hero-form button[type="submit"] */

.small-note {
  font-size: 0.9rem;
  color: var(--color-text-light);
  text-align: center;
  margin-top: 20px;
}



/* FOOTER */
footer {
  text-align: center;
  padding: 40px 20px;
  background-color: var(--color-secondary); /* Gris tenue para el footer */
  color: #f0f0f0; 
  margin-top: 60px;
}


footer p {
  margin: 0;
  font-size: 0.9rem;
}
footer a {
  color: var(--color-primary); 
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

/* Placeholder for new background animation for sections 2+ */
.section.media-themed-background {
  /* Styles for the new media-themed background animation will go here. */
  /* This might involve pseudo-elements, multiple backgrounds, or be controlled by JavaScript. */
  /* Example: background-image: url('path/to/media-elements-pattern.svg'); */
  /* This class should be added via JavaScript to .section elements from the second one onwards. */
  position: relative; /* Ensure z-indexing works if needed for the animation layer */
}

/* FIN ESTILOS AL HACER SCROLL */

/* Media Queries para Responsividad */
@media (max-width: 992px) { /* Ajuste para tablets */
  :root {
    --header-logo-height: 100px;
  }
  .hero-container-flex {
    flex-direction: column-reverse; /* Formulario arriba en tablets y móviles */
    gap: 30px;
    text-align: center;
  }
  .hero-content {
    text-align: center; /* Centrar logo y tagline */
    flex: 1;
  }
  .hero-form {
    flex: 1;
    width: 100%;
    max-width: 500px; /* Limitar ancho del formulario en modo columna */
  }
  
  /* Ajustes para secciones en tablets */
  .section {
    padding: 60px 15px;
  }
  
  /* Ajuste para el logo en tablets */
  /* La altura del logo ahora se controla mediante la variable --header-logo-height */
}

@media (max-width: 768px) {
  :root {
    --header-logo-height: 80px;
  }
  header {
    padding: 0.8rem 1rem; /* Padding remains */
    width: 100%; /* Ensures full width, box-sizing handles padding */
  }
  .nav-left {
    flex: 0 1 auto; /* Ajuste para móvil con flex */
  }
  .nav-toggle {
    display: block;
  }
  /* La altura del logo ahora se controla mediante la variable --header-logo-height */
  .nav-left ul {
    background-color: rgba(26, 26, 26, 0.9); /* Fondo oscuro semi-transparente para el menú desplegable */
    backdrop-filter: blur(5px); /* Efecto blur para el menú desplegable */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    padding: 1rem 0;
    display: none; /* Oculto por defecto, se mostrará con JavaScript */
  }
  .nav-left.active ul {
    display: flex; /* Se muestra cuando tiene la clase active */
  }
  .nav-left li {
    margin: 0;
    width: 100%;
  }
  .nav-left a {
    color: var(--color-background); /* Texto blanco en menú desplegable */
    display: block;
    padding: 0.8rem 1.5rem;
  }
  .nav-left a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Ligero cambio de fondo al pasar el mouse */
    color: var(--color-primary);
  }

  .hero-brand-name {
    font-size: 3rem; /* Reducir tamaño de fuente para PauPulse en móviles */
  }
  .hero-tagline {
    font-size: 1.5rem; /* Reducir tamaño de fuente para el tagline en móviles */
  }
  .section {
    padding: 40px 10px; /* Menos padding en móviles, consistente */
    min-height: auto; /* Permitir que las secciones sean más cortas en móviles */
  }

  .hero-form,
  #contact .survey {
    padding: 25px 20px; /* Padding reducido para móviles */
    width: 100%; /* Asegurar que el formulario ocupe el ancho */
    max-width: 100%; /* Permitir que ocupe todo el ancho disponible */
    box-sizing: border-box;
  }
  .section h2 {
    font-size: 2rem; /* Tamaño de título de sección reducido */
    margin-bottom: 25px;
  }
  .grid-3 {
    grid-template-columns: 1fr; /* Asegurar una sola columna */
  }

  /* Servicios en móviles */
  .services-grid {
    grid-template-columns: 1fr; /* Una columna para servicios */
    gap: 20px;
  }
  .service-item {
    padding: 20px 15px;
    min-height: auto; /* Altura automática para contenido variable */
  }
  .service-item i {
    font-size: 2.2rem; /* Iconos más pequeños */
    margin-bottom: 15px;
  }
  .service-item h3 {
    font-size: 1.3rem; /* Título de servicio más pequeño */
    min-height: auto;
  }
  .service-item p {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
  .btn-service-contact {
    padding: 10px 20px;
    font-size: 0.85rem;
  }

  /* Testimonios en móviles */
  .testimonial-list {
    grid-template-columns: 1fr; /* Una columna para testimonios */
    gap: 25px;
    padding: 0 10px;
  }
  .testimonial-bubble {
    padding: 20px;
    min-height: auto;
  }
  .testimonial-img {
    width: 50px;
    height: 50px;
    margin-right: 12px;
    float: none; /* Evitar float en móviles, mejor centrar o alinear arriba */
    margin-bottom: 10px; /* Espacio si se coloca arriba */
    display: block; /* Para centrar con margin auto si es necesario */
    margin-left: auto;
    margin-right: auto;
  }
  .testimonial-bubble p {
    margin-left: 0; /* Sin margen si la imagen no está flotando */
    text-align: center; /* Centrar texto del testimonio */
    font-size: 0.9rem;
  }
  .testimonial-bubble cite {
    text-align: center; /* Centrar cita */
    font-size: 0.85rem;
  }

  /* FAQ en móviles */
  .faq-bubble summary {
    padding: 15px 18px;
    font-size: 1rem;
  }
  .faq-bubble summary::after {
    font-size: 1.4rem;
    right: 18px;
  }
  .faq-bubble p {
    padding: 5px 18px 15px 18px;
    font-size: 0.9rem;
  }

  /* Contacto en móviles */
  #contact .container {
    padding: 0 10px; /* Ajustar padding del contenedor de contacto */
  }
  #contact .survey legend {
    font-size: 1.5rem; /* Leyenda del formulario más pequeña */
    margin-bottom: 20px;
  }
  #contact .survey input[type="text"],
  #contact .survey input[type="email"],
  #contact .survey textarea {
    padding: 10px 8px;
    font-size: 0.95rem;
    width: calc(100% - 18px); /* Ajustar ancho para padding */
  }
  #contact .survey button[type="submit"] {
    padding: 10px 15px;
    font-size: 1rem;
  }
  /* Ocultar elementos no esenciales en la sección de contacto en móviles si es necesario */
  #contact .container > p:not(.small-note) { /* Ocultar párrafos descriptivos, excepto la nota pequeña */
    /* display: none; */ /* Descomentar si se desea ocultar */
  }

  #portfolio .splide__slide iframe {
    min-height: 250px; /* Reducir altura del iframe en móviles */
  }
  #portfolio .splide__arrow {
    display: none; /* Ocultar flechas en móviles, la paginación es suficiente */
  }
  #portfolio .splide__pagination {
    bottom: 0.5em; /* Acercar paginación al slider */
  }

  footer {
    padding: 30px 15px;
    margin-top: 40px;
  }
  footer p {
    font-size: 0.85rem;
  }
}

/* Ajustes adicionales para pantallas muy pequeñas (opcional) */
@media (max-width: 480px) {
  .hero-brand-name {
    font-size: 2.5rem;
  }
  .hero-tagline {
    font-size: 1.3rem;
  }
  .hero-form legend,
  #contact .survey legend {
    font-size: 1.3rem;
  }
  .section h2 {
    font-size: 1.8rem;
  }
  .service-item h3 {
    font-size: 1.2rem;
  }
  .testimonial-bubble p,
  .faq-bubble p {
    font-size: 0.85rem;
  }
}