Landing Page Builder | Magvilldigital

GRID SYSTEM

HTML Editor

<div class="container-fluid">

  <div class="container">

      <!-- Logo y Menu --> 
      <div class="container-fluid px-0">

        <nav class="navbar navbar-expand-lg navbar-dark fixed-top" style="backdrop-filter: blur(5px);">

            <div class="container-fluid px-3 px-md-5">
              <!-- Contenedor del logo y nombre -->
              <div class="d-flex align-items-center">

                  <a class="navbar-brand bg-transparent shadow-none p-0 me-0 me-md-2" href="#">

                    <!-- Logo --> 
                    <img src="https://cms.digitaliza.top/views/assets/files/68156a8a6327154.png" class="img-fluid" style="max-height:120px; width: auto;"  alt="Logo Salta La Rana">

                  </a>

                  <a class="navbar-brand bg-transparent shadow-none crafty-girls-regular text-slr d-none d-sm-block" style="font-size: clamp(2rem, 5vw, 3.125rem);" /* entre 32px y 50px */
                    href="#">Salta La Rana</a>
              </div>

              <!-- Botón hamburguesa -->
              <button class="navbar-toggler shadow-none border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

                <!-- Icono Menu hamburguesa --> 
                <span class="navbar-toggler-icon"></span> 

              </button>

              <!-- Menú colapsable -->
              <div class="collapse navbar-collapse text-menu" id="navbarCollapse">

                <ul class="navbar-nav ms-auto crafty-girls-regular">

                  <li class="nav-item">

                    <a class="nav-link py-2 py-lg-1 px-3"  href="#quiensoy" style="font-size:clamp(1rem, 2vw, 1.5rem);" >Nosotros</a>

                  </li>

                  <li class="nav-item">

                    <a class="nav-link py-2 py-lg-1 px-3" href="#servicios" style="font-size:clamp(1rem, 2vw, 1.5rem);" >Servicios</a>

                  </li>

                 

                  <li class="nav-item">

                    <a class="nav-link -slr py-2 py-lg-1 px-3" href="#contacto" style="font-size:clamp(1rem, 2vw, 1.5rem);"  >Contacto</a>

                  </li>

                </ul>

              </div>

            </div>

        </nav>

      </div>    
      <!-- Fin - Logo y Menu --> 


      <!-- SEPARADOR INFALIBLE a8e0b1-->
      <div class="contenedor-ultra-ancho">

        <svg class="svg-onda" viewBox="0 0 1200 100" preserveAspectRatio="none">

            <!-- Primero la curva -->
            <path fill="#a8e0b1" d="M0,0 L0,80 C300,120 900,0 1200,60 L1200,0 Z" />  

        </svg>

      </div>

      <!-- Seccion1: Descubre la Magia del Fieltro Artesanal -->
      <div class="bg-section-full position-relative" style="background-image: url('https://cms.digitaliza.top/views/assets/files/681564beb645810.jpg'); min-height: 100vh; background-size: cover; background-position: center; min-height: 100vh;  background-size: cover; background-position: center; background-attachment: fixed;">

          <!-- Overlay semitransparente -->
          <div class="overlay position-absolute top-0 start-0 w-100 h-100" style="background-color: rgba(0,0,0,0.2);">
            
          </div>

          <div class="container position-relative z-index-1 py-5">
              <!-- Título principal -->
              <div class="text-center px-2 px-lg-0 nanum-pen-script-regular">

                <h2 class="display-4 pt-3 pt-lg-5 pb-3 mx-auto d-inline-block" style="font-size: clamp(5rem, 5vw, 5.5rem); text-shadow: 4px 4px 8px rgba(0,0,0,0.8); color:white; background-color: rgba(0, 0, 0, 0.5); padding: 0.5rem 1.5rem; border-radius: 1rem;">
                Descubre la Magia del Fieltro
                </h2>

              </div>

              <!-- Primera fila de características -->
              <div class="row justify-content-center g-4 g-lg-5 pt-4 pt-lg-5 px-2 px-lg-0">

                  <!-- Elemento 1 -->
                  <div class="col-12 col-md-10 col-lg-6 d-flex align-items-start">

                    
                    <div class="p-3 p-lg-4 rounded shadow-sm text-white flex-grow-1 crafty-girls-regular" style="background-color: rgba(0,0,0,0.5); backdrop-filter: blur(12px); text-shadow: 1px 1px 2px rgba(0,0,0,0.7);">
                      <h3 class="h2 mb-3" style="font-size: clamp(1.5rem, 3vw, 2.5rem);"><i class="bi bi-star-fill"></i> Diseños Únicos</h3>
                      <p class="mb-0" style="font-size: clamp(1rem, 2vw, 2rem);">Creación de piezas irrepetibles que reflejan la personalidad y estilo de la marca.</p>
                    </div>

                  </div>

                  <!-- Elemento 2 -->
                  <div class="col-12 col-md-10 col-lg-6 d-flex align-items-start">
                   
                   
                    <div class="p-3 p-lg-4 rounded shadow-sm text-white flex-grow-1 crafty-girls-regular " style="background-color: rgba(0,0,0,0.5); backdrop-filter: blur(12px); text-shadow: 1px 1px 2px rgba(0,0,0,0.7);">
                      <h3 class="h2 mb-3" style="font-size: clamp(1.5rem, 3vw, 2.5rem);"><i class="bi bi-eye-fill"></i> Alta Calidad</h3>
                      <p class="mb-0" style="font-size: clamp(1rem, 2vw, 2rem);">Fieltro suave y duradero para creaciones que perduran en el tiempo.</p>
                    </div>

                  </div>  

              </div>

              <!-- Segunda fila de características -->
              <div class="row justify-content-center g-4 g-lg-5 pt-4 px-2 px-lg-0">

                  <!-- Elemento 3 -->
                  <div class="col-12 col-md-10 col-lg-6 d-flex align-items-start">
                   
                    <div class="p-3 p-lg-4 rounded shadow-sm text-white flex-grow-1 crafty-girls-regular " style="background-color: rgba(0,0,0,0.5); backdrop-filter: blur(12px); text-shadow: 1px 1px 2px rgba(0,0,0,0.7);">
                      <h3 class="h2 mb-3" style="font-size: clamp(1.5rem, 3vw, 2.5rem);"><i class="bi bi-heart-fill"></i> Atención al Detalle</h3>
                      <p class="mb-0" style="font-size: clamp(1rem, 2vw, 2rem);">Cada puntada es cuidadosamente colocada para un acabado impecable.</p>
                    </div>

                  </div>         

                  <!-- Espacio para posible cuarto elemento -->
                  <div class="col-12 col-md-10 col-lg-6 d-flex align-items-start">
                  <!-- Puedes añadir otro elemento aquí si lo necesitas -->
                  </div>

              </div>

          </div>      

      </div>
      <!-- Fin - Descubre la Magia del Fieltro Artesanal -->

  </div>
  
   <!-- SEPARADOR INFALIBLE a8e0b1-->
      <div class="contenedor-ultra-ancho">

        <svg class="svg-onda" viewBox="0 0 1200 100" preserveAspectRatio="none">

            <!-- Primero la curva -->
            <path fill="#a8e0b1" d="M0,0 L0,80 C300,120 900,0 1200,60 L1200,0 Z" />  

        </svg>

      </div> 

  <!-- Familia de Creaciones --> 
  <div class="container px-3 px-lg-5">

    <div class="text-center">

      <p class="display-3 pt-5">Familia de Creaciones</p>

    </div> 

    <div class="row g-4 g-lg-5 align-items-center">

        <!-- Columna de texto (optimizada para móviles) -->
        <div class="col-12 col-lg-4 order-2 order-lg-1">

          <div class="text-start text-lg-start pt-0 pt-lg-3">

            <h2 class="fw-bold" style="font-size: clamp(1.5rem, 4vw, 2rem); color: #333;">
              Salta La Rana: Arte en Fieltro que cobra Vida
            </h2>

          </div>

          <div class="text-start text-lg-start pt-3 pt-lg-4">

            <p class="lead" style="font-size:clamp(1rem, 3vw, 1.1rem);">Descubre creaciones únicas en fieltro, hechas a mano con pasión y dedicación.</p>

          </div>

          <div class="text-center text-lg-start pt-4 pt-lg-5 pb-3 pb-lg-5">

            <button onclick="window.open('https://www.instagram.com/salta.la.rana', '_blank')" type="button" class="btn btn-secondary btn-custom border-0 btn-lg nanum-pen-script-regular" style="font-size:clamp(1.25rem, 4vw, 1.75rem); padding: 0.5rem 1.5rem; border: none;">Haz tu pedido</button>

          </div>

        </div>

        <!-- Columna del carrusel (mejorado para touch) -->
        <div class="col-12 col-lg-8 order-1 order-lg-2">

          <div class="carousel-wrapper rounded-4 shadow-lg overflow-hidden">

              <!-- Carousel -->
              <div id="familiaCreacionesCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-touch="true">

                  <!-- Indicadores mejorados -->
                  <div class="carousel-indicators">

                    <button type="button" data-bs-target="#familiaCreacionesCarousel" data-bs-slide-to="0" class="active" aria-current="true"  aria-label="Slide 1">

                    </button>

                    <button type="button" data-bs-target="#familiaCreacionesCarousel" data-bs-slide-to="1" aria-label="Slide 2">

                    </button>

                    <button type="button" data-bs-target="#familiaCreacionesCarousel" data-bs-slide-to="2" aria-label="Slide 3">

                    </button>

                  </div>

                  <!-- The slideshow/carousel --><!-- Slides optimizados -->
                  <div class="carousel-inner ratio ratio-16x9">

                  <!-- Slide 1 -->
                  <div class="carousel-item active">

                    <img src="https://cms.digitaliza.top/views/assets/files/681564be2c9ae10.jpg" alt="Arreglos de fieltro artesanales" class="d-block w-100 object-fit-cover" loading="lazy">

                    <div class="carousel-caption"> 

                      <h5>Arreglos</h5>

                    

                    </div>
                    
                    <!-- Versión móvil de la caption -->
                    <div class="carousel-caption-mobile d-md-none">
                      <h5>Arreglos</h5>
                      <p>Sumérgete en un mundo de texturas y colores.</p>
                    </div>

                  </div>

                  <!-- Slide 2 -->
                  <div class="carousel-item">

                    <img src="https://cms.digitaliza.top/views/assets/files/681564be4aece10.jpg" alt="Stickers de fieltro personalizados" class="d-block w-100 object-fit-cover" loading="lazy">

                    <div class="carousel-caption">

                      <h5>Stickers</h5>

                    
                    </div>

                    <div class="carousel-caption-mobile d-md-none">
                      <h5>Stickers</h5>
                      <p>Elaborados a mano con materiales de alta calidad.</p>
                    </div>

                  </div>

                  <!-- Slide 3 -->
                  <div class="carousel-item">

                    <img src="https://cms.digitaliza.top/views/assets/files/681564bdec5af9.jpg" alt="Adornos navideños de fieltro" class="d-block w-100 object-fit-cover" loading="lazy">

                    <div class="carousel-caption">

                      <h5>Adornos</h5>

                    
                    </div>

                    <div class="carousel-caption-mobile d-md-none">
                      <h5>Adornos</h5>
                      <p>Déjate inspirar por la magia del fieltro artesanal.</p>
                    </div>

                  </div>

              </div>

              <!-- Controles accesibles --><!-- Left and right controls/icons -->
              <button class="carousel-control-prev" type="button" data-bs-target="#familiaCreacionesCarousel" data-bs-slide="prev">

                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>

              </button>

              <button class="carousel-control-next" type="button" data-bs-target="#familiaCreacionesCarousel" data-bs-slide="next">

                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>

              </button>

          </div>

        </div>

    </div>       

  </div>
  <!-- Fin - Familia de Creaciones --> 

    

  <!-- Lo que dicen nuestros clientes -->
  
  <!-- Fin - Lo que dicen nuestros clientes -->

 <!-- SEPARADOR INFALIBLE a8e0b1-->
     <div class="contenedor-ultra-ancho">

       	<svg class="svg-onda" viewBox="0 0 1440 150" preserveAspectRatio="none">

    			<path fill="#a8ddb5" d="M0,80 C360,0 1080,200 1440,90 L1440,150 L0,150 Z" />
    			
  			</svg>

      </div>
    
  <!-- Sobre Salta La Rana -->
  <section id="quiensoy" class="py-5" style="background-color: #a8e0b1; width: 100vw; margin: 0; padding: 0; overflow-x: hidden; margin-left: calc(-50vw + 50%); ">
  <div class="container">
    
    <!-- TÍTULO CENTRADO -->
    <div class="row">
      <div class="col-12 text-center">
        <h2 class="display-4 fw-bold mb-5" style="font-size: clamp(30px, 6vw, 50px);">Sobre Salta La Rana</h2>
      </div>
    </div>

    <!-- CONTENIDO EN DOS COLUMNAS RESPONSIVAS -->
    <div class="row align-items-center g-5">
      
      <!-- IMAGEN -->
      <div class="col-12 col-lg-6 text-center">
        <img src="https://cms.digitaliza.top/views/assets/files/681564be47be210.jpg"
             alt="salta la rana"
             class="img-fluid rounded-4 "
             style="width: clamp(100px, 100vw, 700px); height: auto; object-fit: contain; box-shadow: 8px 2px 20px rgba(0,0,0,0.11);">
        
      </div>

      <!-- TEXTO -->
      <div class="col-12 col-lg-6 text-center text-lg-start">
        <h3 class="mb-4" style="font-size: clamp(22px, 5vw, 32px);">Primer Salto</h3>

        <p style="font-size: clamp(16px, 3.5vw, 18px);" class="mb-3">
          Hola, soy Milagro. Empecé Salta La Rana para dar vida a personajes tiernos en fieltro.
        </p>
        <p style="font-size: clamp(16px, 3.5vw, 18px);" class="mb-3">
          Cada pieza es única y hecha con mucho cariño.
        </p>
        <p style="font-size: clamp(16px, 3.5vw, 18px);" class="mb-4">
          Inspirado en la alegría y creatividad, mis accesorios buscan arrancarte una sonrisa y llenar tu día de color.
        </p>

        <!-- BOTÓN -->
        <button onclick="window.open('https://www.instagram.com/salta.la.rana', '_blank')"
                type="button"
                class="btn btn-secondary btn-custom border-0 btn-lg nanum-pen-script-regular"
                style="font-size: clamp(20px, 6vw, 31px); padding: 10px 30px;">
          Haz tu pedido
        </button>
      </div>

    </div>
  </div>
</section>

  <!-- Fin - Sobre Salta La Rana -->

    <!-- SEPARADOR INFALIBLE a8e0b1-->
      <div class="contenedor-ultra-ancho">

        <svg class="svg-onda" viewBox="0 0 1200 100" preserveAspectRatio="none">

            <!-- Primero la curva -->
            <path fill="#a8e0b1" d="M0,0 L0,80 C300,120 900,0 1200,60 L1200,0 Z" />  

        </svg>

      </div>

  <!-- Productos Populares -->
  <section id="servicios" class="container scroll-offset" >

   <div >
     
    <div class="text-center">

      <p class="display-3 pt-5 pt-lg-5">Magia en cada detalle</p>

    </div>

    <div class="row g-4 justify-content-center">

      <div class="col-12 col-sm-6 col-lg-3"> <!-- Cambiado a col-sm-6 para 2 columnas en tablet -->
        
        <div class="card text-center mx-auto h-100" style="max-width:95%; box-shadow:10px 10px 10px #3333" >

          <img class="card-img-top imagen-redondeada mx-auto mt-3 mb-lg-3" src="https://cms.digitaliza.top/views/assets/files/681632f775c613.jpg" alt="llavero" style="max-height: 230px; width: auto; object-fit: contain;">

          <div class="card-body d-flex flex-column ">

            <h4 class="card-title">Llaveritos </h4>

            <h6 class="flex-grow-1"> 
              <p class="card-text mt-1 mb-3 mb-lg-5 ">Cada uno está bordado a mano, utilizando telas suaves y colores cálidos que evocan la magia de la temporada. </p>
            </h6> 

            <a target="_blank" href="https://www.instagram.com/salta.la.rana" class="btn btn-custom border-0 nanum-pen-script-regular " style="font-size:clamp(18px, 3vw, 25px) !important; padding: 6px 15px;">Haz tu pedido</a> 

          </div>

        </div>

      </div>

      <div class="col-12 col-sm-6 col-lg-3">

        <div class="card text-center mx-auto h-100" style="max-width:95%; box-shadow:10px 10px 10px #3333"> 

          <img class="card-img-top imagen-redondeada mx-auto mt-3 mb-lg-3" src="https://cms.digitaliza.top/views/assets/files/681632f763c383.jpg" alt="muñeca" style="max-height: 230px; width: auto; object-fit: contain;" >

          <div class="card-body d-flex flex-column">

            <h4 class="card-title">Segundo hogar</h4>

            <h6 class="flex-grow-1"> 
              <p class="card-text mt-1 mb-3 mb-lg-5 ">Funcionalidad con un diseño dulce y colorido. ¡Un regalo perfecto para esas heroínas que inspiran a los más pequeños! </p>
            </h6> 

            <a target="_blank" href="https://www.instagram.com/salta.la.rana" class="btn btn-custom border-0 nanum-pen-script-regular" style="font-size:clamp(18px, 3vw, 25px) !important; padding: 6px 15px;">Haz tu pedido</a>

          </div>

        </div>

      </div>

      <div class="col-12 col-sm-6 col-lg-3">

        <div class="card text-center mx-auto h-100" style="max-width:95%; box-shadow:10px 10px 10px #3333">

          <img class="card-img-top imagen-redondeada mx-auto mt-3 mb-lg-3" src="https://cms.digitaliza.top/views/assets/files/681564c0087bb12.png" alt="arreglo" style="max-height: 230px; width: auto; object-fit: contain;">

          <div class="card-body d-flex flex-column">

            <h4 class="card-title">Arreglos floridos</h4>

            <h6 class="flex-grow-1"> 
              <p class="card-text mt-1 mb-3 mb-lg-5">Creando piezas únicas para decorar eventos, regalar en ocasiones especiales o alegrar cualquier espacio. </p>
            </h6>              

            <a target="_blank" href="https://www.instagram.com/salta.la.rana" class="btn btn-custom border-0 nanum-pen-script-regular" style="font-size:clamp(18px, 3vw, 25px) !important; padding: 6px 15px;">Haz tu pedido</a>

          </div>

        </div>

      </div>

      <div class="col-12 col-sm-6 col-lg-3">

        <div class="card text-center mx-auto h-100" style="max-width:95%; box-shadow:10px 10px 10px #3333" >

          <img class="card-img-top imagen-redondeada mx-auto mt-3 mb-lg-3" src="https://cms.digitaliza.top/views/assets/files/68163380cd09120.jpg" alt="pascua" style="max-height: 230px; width: auto; object-fit: contain;">

          <div class="card-body d-flex flex-column">

            <h4 class="card-title">Festividad</h4>

            <h6 class="flex-grow-1"> 
              <p class="card-text mt-1 mb-3 mb-lg-5">Ideal para decorar tu hogar o regalar a seres queridos. ¡Cada pieza está hecha para transmitir  magia única! 
              </p>
            </h6> 

            <a target="_blank" href="https://www.instagram.com/salta.la.rana" class="btn btn-custom border-0 nanum-pen-script-regular" style="font-size: clamp(18px, 3vw, 25px) !important; padding: 6px 15px;">Haz tu pedido</a>

          </div>

        </div>

      </div>

    </div>
     
     </div>

  </section>
  <!-- Fin - Productos Populares -->

     <!-- SEPARADOR INFALIBLE a8e0b1-->
      <div>

       <svg viewBox="0 0 1440 150" xmlns="http://www.w3.org/2000/svg"
       style="top: 0; left: 0; width: 100%; height: 80px;">
    		<path fill="#F7EFE5" d="M0,80 C360,0 1080,200 1440,90 L1440,150 L0,150 Z" />
  		</svg> 

      </div>
    
    <!-- SEPARADOR INFALIBLE a8e0b1-->
      <div class="contenedor-ultra-ancho">

        <svg class="svg-onda" viewBox="0 0 1200 100" preserveAspectRatio="none">

            <!-- Primero la curva -->
            <path fill="#a8e0b1" d="M0,0 L0,80 C300,120 900,0 1200,60 L1200,0 Z" />  

        </svg>

      </div>

  <!-- Contactarme -->
  <section id="contacto" class="container scroll-offset">

    <div class="text-center">

      <p class="display-3 pt-5">Escríbeme un mensaje saltarín</p>

    </div>

    <div class="container-fluid">

      <div id="mensaje-enviado" class="alert alert-success alert-dismissible fade show text-center d-none" role="alert">
        ¡Mensaje enviado con éxito! 
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>

      <form id="formContacto" method="POST">   

        <div class="form-floating mt-3 mb-3 gochi-hand-regular">
          <input type="text" class="form-control" id="name" placeholder="Enter name" name="name" required>
          <label for="name">Nombres </label>
        </div>

        <div class="form-floating mb-3 mt-3">
          <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" required>
          <label for="email">Correo Electrónico</label>
        </div>

        <div class="mb-3 mt-3">
          <textarea class="form-control" rows="5" id="comments" placeholder="Comentarios" name="comments" required></textarea>
        </div>

        <button type="submit" class="btn btn-secondary mt-3 w-100 py-3 btn-custom border-0 btn-lg nanum-pen-script-regular" style="font-size:31px !important">
          Envia el mensaje saltarín 
        </button>

      </form>

    </div>

  </section>
  <!-- Fin - Contactarme -->


  <!-- Footer y RRSS -->
  <div class="container">

    <div class="row">

      <div class="col-12 col-lg-12">

        <div class="text-center">

          <footer class="py-4 text-muted">

            <div class="social-icons d-flex justify-content-center align-items-center mb-3">
             
              <a href="https://www.instagram.com/salta.la.rana" target="_blank" class="mx-3">
                <h4><i class="fab fa-instagram text-danger"></i></h4>
              </a>

              <a href="https://www.facebook.com/salta.larana.9" target="_blank" class="mx-3">
                <h4><i class="fab fa-facebook text-primary"></i></h4>
              </a>

              

            </div>

            <h6>

              <p>&copy; 2025 Salta La Rana. Todos los derechos reservados.</p>

            </h6>

          </footer>

        </div>

      </div>

    </div>

  </div>
  <!-- Fin - Footer y RRSS -->
 
  <button id="btn-volver-arriba" class="bnt rounded-circle shadow border-0" 
        aria-label="Volver al menú"
        style="background-color: #a8e0b1; position: fixed;
               bottom: 30px; 
               right: 30px; 
               width: 50px; 
               height: 50px;
               display: none;               
               z-index: 99; ">
    <i class="bi bi-chevron-up" style="font-size: 1.5rem;"></i>
  </button>
 


</div>

CSS Editor

body {
  font-family: "Crafty Girls", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: #F7EFE5;
  transition: background-color 0.3s ease-in-out;
  
}


/* Tipografia */

.liu-jian-mao-cao-regular {
  font-family: "Liu Jian Mao Cao", cursive;
  font-weight: 400;
  font-style: normal;
}

.crafty-girls-regular {
  font-family: "Crafty Girls", cursive;
  font-weight: 400;
  font-style: normal;
}

.gloria-hallelujah-regular {
  font-family: "Gloria Hallelujah", cursive;
  font-weight: 400;
  font-style: normal;
}

.nanum-pen-script-regular {
  font-family: "Nanum Pen Script", cursive;
  font-weight: 400;
  font-style: normal;
}

.bad-script-regular {
  font-family: "Bad Script", cursive;
  font-weight: 400;
  font-style: normal;
}

/* Fin Tipografia */

.btn-color {
	background:#315855;	/* color para letras de botones*/
  	color:white;
}

.btn-custom {
  background-color: #F3D1DC;
  color: #C75BA0;
  border: none;
} 

.btn-custom:hover {
  background-color: #CDB4DB;
  color: white;
}

.rounded {
 	border-radius:12px !important; /* esquinas del boton redondeadas*/
}

.carousel-caption {
  background-color: rgba(0, 0, 0, 0.5); /* Fondo negro con opacidad */
  padding: 1rem;
  border-radius: 10px;
  color: #ffffff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
  height: auto;
  overflow: visible; /* Esto es una capa adicional*/
}

a.text-slr {
    color: #ffff !important;
    text-decoration: none; /* opcional, para quitar el subrayado */
}

a.text-menu {
    color: #212529 !important;
    text-decoration: none; /* opcional, para quitar el subrayado */
}

.texto-con-fondo {
  background-color: rgba(0, 0, 0, 0.5); /* Negro con 50% de opacidad */
  height: auto;
  overflow: visible;  /* Esto es una capa adicional*/
  
}
/* Color de fondo del encabezado a8e0b1*/
.navbar {
  background-color: #a8e0b1;
}
.navbar-toggler-icon {
  filter: invert(1); /* cambia blanco a negro - menu hamburguesa*/
}

/* opacando el color de fondo de una imagen*/
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.contenido {
  position: relative;
  z-index: 2;
  color: white;
}
/* fin - opacando el color de fondo de una imagen*/

/* Seccion1: Imagen primera seccion de la pagina*/
.bg-section-full {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;  
  background-position: top center; 
  background-size: cover;
  background-attachment:fixed; 
  padding-top: 100px;
  padding-bottom: 169px;
}

.imagen-redondeada {
  border-radius: 20px;
  object-fit: cover;
  max-width: 450px;
  box-shadow: 25px 20px 20px #3333;
}

.imagen-redondeada-parcial{
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

/* RESET PARA EL CONTENEDOR (elimina márgenes/paddings heredados) */
 /* RESET CRÍTICO */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  background: #F7EFE5; /* Color de fondo de tu web */
  scroll-behavior: smooth;
}

body{
padding-top: 86px;
}

/* CONTENEDOR PRINCIPAL (para diagnóstico) */
.contenedor-ultra-ancho {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: 130px;
  display: flex;
  justify-content: center;
  overflow: visible;
}

.svg-onda {
  width: 100%;
  height: 100%;
  display: block;
}



/* Redes Sociales */
.social-icons a {       
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;   
    margin: 5 10px;
    text-decoration: none;
  }

.social-icons a:hover {  
    transform: scale(1.4); /* Se agranda */  
  }

/* Desvanecimiento para el msg del formulario de contacto*/
.fade-out {
  opacity: 0;
  transition: opacity 1s ease-out;
}

@media (max-width: 767px) {
  #testimonios .row.g-4 {
    gap: 2rem !important; /* Aumenta el espacio entre cards solo en móvil */
  }
}

/* Ajusta el tamaño de la imagen en móvil */
@media (max-width: 767px) {
  #quiensoy img {
    max-height: 300px; /* Evita que la imagen sea demasiado alta */
    object-fit: cover; /* Mantiene la proporción */
  }
}

/* Para el carousel*/
 /* Estilos personalizados para mejorar la responsividad */
.carousel-wrapper {
    max-width: 100%;
    margin: 0 auto;
}
  
@media (max-width: 767.98px) {
  .carousel-caption-mobile {
      display: block !important;
      position: relative;
      background: rgba(0,0,0,0.7);
      color: white;
      padding: 10px;
      margin-top: -5px;
  }
  .carousel-caption-mobile h5 {
      font-size: 1rem;
  }
  .carousel-caption-mobile p {
      font-size: 0.8rem;
      margin-bottom: 0;
  }
}

/* 120+86px*/
.scroll-offset {
  scroll-margin-top: 206px;
}

/* Para el separador*/
section:first-of-type {
            padding-top: 50px; /* Espacio adicional después del separador */
}

#btn-volver-arriba {
    transition: all 0.3s ease;
}
#btn-volver-arriba:hover {
    background-color: #7eaa85 !important; /* Tonos más oscuros al pasar el mouse */
    transform: translateY(-3px);
}

JS Editor

/* Para el menu */
    // Cierra el menú móvil al hacer clic en un enlace
  document.addEventListener('DOMContentLoaded', () => {
  const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
  const navbarCollapse = document.querySelector('.navbar-collapse');
  
  navLinks.forEach(link => {
    link.addEventListener('click', () => {
      const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse) || new bootstrap.Collapse(navbarCollapse);
      bsCollapse.hide();
    });
  });
});


/* Para msg del formulario de contacto*/
document.getElementById("formContacto").addEventListener("submit", function(e) {
  e.preventDefault();

  const form = e.target;
  const formData = new FormData(form);

  fetch("/views/pages/code/enviar.php", {
    method: "POST",
    body: formData
  })
  .then(response => response.text())
  .then(data => {
    const mensaje = document.getElementById("mensaje-enviado");
    if (mensaje) {
      // Mostrar mensaje
      mensaje.classList.remove("d-none");
      form.reset();

      // Ocultar mensaje después de 5 segundos
     setTimeout(() => {
  mensaje.classList.add("fade-out"); // empieza a desvanecerse

  // Luego de la transición (1s), se oculta del DOM visualmente
  setTimeout(() => {
    mensaje.classList.add("d-none");
    mensaje.classList.remove("fade-out"); // limpia clases
  }, 1000);
}, 5000);
    }
  })
  .catch(error => {
    alert("Error al enviar el mensaje. Inténtalo nuevamente.");
    console.error("Error:", error);
  });
});

document.addEventListener('DOMContentLoaded', () => {
    const btnVolver = document.getElementById('btn-volver-arriba');

    // Muestra/Oculta el botón al hacer scroll
    window.addEventListener('scroll', () => {
        if (window.scrollY > 300) { // Aparece después de 300px de scroll
            btnVolver.style.display = 'flex';
            btnVolver.style.alignItems = 'center';
            btnVolver.style.justifyContent = 'center';
        } else {
            btnVolver.style.display = 'none';
        }
    });

    // Smooth scroll al hacer clic
    btnVolver.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
        
        // Opcional: Abre el menú si está en móvil (Bootstrap 5)
        const navbarCollapse = document.querySelector('.navbar-collapse');
        const bsCollapse = new bootstrap.Collapse(navbarCollapse, {
            toggle: true
        });
    });
});

HTML Editor

CSS Editor

JS Editor

Gestión de Landing