/*==================================================
GREENCMS WEB
==================================================*/
    
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
     :root {
        --primary: #2E7D32;
        --secondary: #43A047;
        --dark: #1F2937;
        --light: #F8F9FA;
        --gray: #6c757d;
        --radius: 14px;
        --shadow: 0 15px 40px rgba(0, 0, 0, 0.10);
        --transition: 0.35s;
        --navbar-height: 80px;
    }
    /* Base */
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html {
        scroll-behavior: smooth;
    }
    
    body {
        font-family: 'Poppins', sans-serif;
        font-size: 15px;
        color: #444;
        background: #fff;
        overflow-x: hidden;
    }
    
    img {
        max-width: 100%;
    }
    
    a {
        text-decoration: none;
        transition: var(--transition);
    }
    
    ul {
        list-style: none;
    }
    
    section {
        padding: 90px 0;
    }
    /*==========================================
  TITULOS
==========================================*/
    
    .section-title {
        font-size: 38px;
        font-weight: 700;
        color: var(--primary);
    }
    
    .section-subtitle {
        max-width: 700px;
        margin: auto;
        color: #777;
        margin-bottom: 60px;
    }
    /*==========================================
  BOTONES
==========================================*/
    
    .btn {
        border-radius: 50px;
        padding: 12px 28px;
        font-weight: 600;
        transition: var(--transition);
    }
    
    .btn-primary {
        background: var(--primary);
        border: 0;
    }
    
    .btn-primary:hover {
        background: var(--secondary);
        transform: translateY(-3px);
    }
    
    .btn-outline-primary {
        border: 2px solid var(--primary);
        color: var(--primary);
    }
    
    .btn-outline-primary:hover {
        background: var(--primary);
        color: #fff;
    }
    /*==========================================
  CARDS
==========================================*/
    
    .card {
        border: none;
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: var(--transition);
    }
    
    .card:hover {
        transform: translateY(-6px);
    }
    
    .card img {
        object-fit: cover;
    }
    /*==========================================
  ICONOS
==========================================*/
    
    .icon-circle {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        background: rgba(46, 125, 50, 0.12);
        color: var(--primary);
        font-size: 30px;
    }
    /*==========================================
  NAVBAR
==========================================*/
    
    .navbar {
        transition: 0.4s;
    }
    
    .navbar.scrolled {
        background: #fff;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);
    }
    
    .navbar-brand img {
        max-width: 100%;
    }
    
    .nav-link {
        color: #333;
        font-weight: 500;
        margin-left: 18px;
    }
    
    .nav-link:hover {
        color: var(--primary);
    }
    /*=====================================
PROMOCION HERO
=====================================*/
    /*==========================================
NAVBAR NUEVO
==========================================*/
    
    .navbar-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 30px;
    }
    
    .logo {
        height: 70px;
    }
    /*=========================================
BARRA PROMOCIONAL
=========================================*/
    /* .top-promo {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 36px;
        background: #8BCF18;
        color: #fff;
        z-index: 1060;
        overflow: hidden;
        border-bottom: 1px solid rgba(255, 255, 255, .25);
        box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
    }
    
    .promo-track {
        height: 36px;
        display: flex;
        align-items: center;
        gap: 25px;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
        animation: promoMove 28s linear infinite;
    }
    
    
    
    .promo-track strong {
        font-weight: 800;
    }*/
    /*==================================
BARRA SUPERIOR PROMOCIONAL
==================================*/
    
    .top-promo {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 40px;
        background: #8BCF18;
        color: #fff;
        z-index: 1060;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, .20);
        box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
    }
    
    .promo-track {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        font-weight: 600;
        text-align: center;
        width: 100%;
    }
    
    .promo-track i {
        font-size: 16px;
    }
    
    .promo-track strong {
        font-weight: 700;
    }
    
    @keyframes promoMove {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(-100%);
        }
    }
    /*=============================
BOTONES
=============================*/
    
    .navbar-actions {
        display: flex;
        align-items: center;
        gap: 18px;
    }
    /*====================================================
=            HERO GREEN APPLE PREMIUM
====================================================*/
    
    .hero {
        position: relative;
        min-height: 100vh;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 35%, rgba(255, 255, 255, 0.45) 60%, rgba(255, 255, 255, 0.10) 85%, rgba(255, 255, 255, 0) 100%);
    }
    
    .hero .container {
        position: relative;
        z-index: 5;
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .hero-wrapper {
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 90px;
        padding-bottom: 60px;
    }
    /*=========================================
LOGO
=========================================*/
    
    .hero-logo {
        margin-bottom: 20px;
    }
    
    .hero-logo img {
        height: 90px;
        width: auto;
    }
    /*=========================================
ETIQUETA SUPERIOR
=========================================*/
    
    .hero-tag {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 45px;
    }
    
    .hero-tag span {
        width: 80px;
        height: 2px;
        background: #7cc600;
    }
    
    .hero-tag small {
        color: #6ea600;
        font-weight: 700;
        font-size: 23px;
        letter-spacing: 1px;
    }
    /*=========================================
TITULOS
=========================================*/
    
    .hero-title {
        align-items: center;
        margin: 0;
        font-size: clamp(72px, 4vw, 72px);
        line-height: .92;
        font-weight: 900;
        color: #15202B;
    }
    
    .hero-frase {
        align-items: center;
        margin-top: 5px;
        margin-bottom: 30px;
        font-size: clamp(72px, 4vw, 72px);
        line-height: .92;
        font-weight: 900;
        color: #8BCF18;
    }
    /*=========================================
DESCRIPCION
=========================================*/
    
    .hero-texto {
        max-width: 620px;
        font-size: 18px;
        line-height: 1.8;
        color: #646262;
        text-align: center;
        margin-bottom: 30px;
    }
    /*=========================================
CATEGORIAS
=========================================*/
    
    .hero-categorias {
        display: grid;
        grid-template-columns: repeat(4, auto);
        justify-content: center;
        gap: 18px 40px;
        margin-bottom: 45px;
    }

    .hero-categorias span {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        white-space: nowrap;
        font-size: 15px;
        color: #1f1f1f;
    }
    
    .hero-categorias i {
        color: #8BCF18;
        font-size: 24px;
        width: 30px;
        text-align: center;
    }
    /*=========================================
BOTONES
=========================================*/
    
    .hero-buttons {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 10px;
    }
    
    .btn-reservar {
        width: 330px;
        height: 58px;
        border-radius: 10px;
        background: #7cc600;
        color: #fff;
        border: none;
        font-size: 28px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
    }
    
    .btn-reservar:hover {
        background: #5da500;
        color: #fff;
    }
    
    .btn-servicios {
        width: 330px;
        height: 58px;
        border-radius: 10px;
        border: 2px solid #1d2733;
        background: #fff;
        color: #1d2733;
        font-size: 28px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
    }
    
    .btn-servicios:hover {
        background: #1d2733;
        color: #fff;
    }
    
    .btn-servicios i {
        margin-left: 15px;
    }
    /*=========================================
ANIMACION
=========================================*/
    
    .hero-wrapper {
        animation: heroFade .8s ease;
    }
    
    @keyframes heroFade {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /*==========================================
  SERVICIOS
==========================================*/
    
    .beneficio-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 35%, rgba(255, 255, 255, 0.45) 60%, rgba(255, 255, 255, 0.10) 85%, rgba(255, 255, 255, 0) 100%);
    }
    
    .servicio-card {
        text-align: center;
        padding: 40px 25px;
    }
    
    .servicio-card img {
        height: 200px;
        width: 100%;
    }
    
    .servicio-card i {
        font-size: 42px;
        color: var(--primary);
        margin-bottom: 20px;
    }
    /* (Sección extra que duplicaba .servicio-card; se unificó) */
    
    .servicio-card {
        transition: 0.3s;
        border-radius: 12px;
        overflow: hidden;
    }
    
    .servicio-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
    }
    
    .servicio-card img {
        height: 230px;
        object-fit: cover;
    }
    
    .servicio-card .card-body {
        padding: 30px 25px;
    }
    
    .servicio-card h4 {
        margin: 15px 0;
        font-weight: 600;
    }
    
    .servicio-card p {
        color: #6c757d;
        line-height: 1.6;
    }
    /*==========================================
  BENEFICIOS
==========================================*/
    
    .beneficio {
        text-align: center;
        padding: 30px;
    }
    
    .beneficio i {
        font-size: 45px;
        color: var(--primary);
        margin-bottom: 15px;
    }
    /*==========================================
  PROCESO
==========================================*/
    
    .proceso {
        text-align: center;
        position: relative;
    }
    
    .proceso .numero {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    
    .proceso-item {
        background: #fff;
        border-radius: 12px;
        padding: 30px 20px;
        height: 100%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transition: 0.3s;
        position: relative;
    }
    
    .proceso-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    }
    
    .proceso-numero {
        width: 70px;
        height: 70px;
        margin: auto;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .proceso-item h5 {
        margin-top: 10px;
        font-weight: 600;
    }
    
    .proceso-item p {
        font-size: 15px;
        line-height: 1.6;
    }
    /*==========================================
  TESTIMONIOS
==========================================*/
    
    .testimonio {
        text-align: center;
        padding: 35px;
    }
    
    .testimonio img {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 15px;
    }
    
    .estrellas {
        color: #ffc107;
    }
    /*==========================================
  GALERIA
==========================================*/
    
    .galeria img {
        border-radius: 10px;
        transition: 0.4s;
    }
    
    .galeria img:hover {
        transform: scale(1.05);
    }
    /* Galería extra (sin duplicar selectores incompatibles) */
    
    .galeria-item {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
    }
    
    .galeria-item img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        transition: 0.4s;
    }
    
    .galeria-item:hover img {
        transform: scale(1.08);
    }
    
    .galeria-info {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.70);
        color: #fff;
        padding: 20px;
        transform: translateY(100%);
        transition: 0.35s;
    }
    
    .galeria-item:hover .galeria-info {
        transform: translateY(0);
    }
    
    .galeria-info h5 {
        margin-bottom: 8px;
        font-weight: 600;
    }
    
    .galeria-info p {
        margin: 0;
        font-size: 14px;
    }
    /*==========================================
  CONTACTO
==========================================*/
    
    .contacto {
        background: #f8f9fa;
    }
    
    .contacto .info {
        padding: 20px;
    }
    
    .contacto .info i {
        color: var(--primary);
        margin-right: 10px;
    }
    /*==============================
CONTACTO (sección extra)
==============================*/
    
    .contacto-section {
        background: #f8fafb;
    }
    
    .contacto-badge {
        display: inline-block;
        background: #eaf8d6;
        color: #79b400;
        font-weight: 700;
        padding: 8px 18px;
        border-radius: 30px;
        margin-bottom: 20px;
    }
    
    .contacto-titulo {
        font-size: 48px;
        font-weight: 700;
        color: #16253c;
        margin-bottom: 20px;
    }
    
    .contacto-texto {
        font-size: 19px;
        color: #6b7280;
        line-height: 1.8;
        margin-bottom: 40px;
    }
    
    .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
    }
    
    .icono {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #8bcf18;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        margin-right: 18px;
    }
    
    .contacto-card {
        background: #fff;
        padding: 40px;
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    }
    
    .contacto-card h3 {
        font-weight: 700;
        margin-bottom: 30px;
    }
    
    .contacto-card .form-control {
        height: 55px;
        border-radius: 12px;
        border: 1px solid #ddd;
        box-shadow: none;
    }
    
    .contacto-card textarea.form-control {
        height: 160px;
        resize: none;
    }
    
    .contacto-card .form-control:focus {
        border-color: #8bcf18;
        box-shadow: 0 0 0 0.2rem rgba(139, 207, 24, 0.18);
    }
    
    .btn-enviar {
        width: 100%;
        border: none;
        border-radius: 50px;
        background: #8bcf18;
        color: #111;
        font-size: 18px;
        font-weight: 700;
        padding: 16px;
        transition: 0.3s;
        box-shadow: 0 15px 30px rgba(139, 207, 24, 0.30);
    }
    
    .btn-enviar:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 35px rgba(139, 207, 24, 0.40);
    }
    /*==========================================
  FOOTER
==========================================*/
    
    footer {
        background: #1F2937;
        color: #fff;
        padding: 60px 0 20px;
    }
    
    footer a {
        color: #ddd;
    }
    
    footer a:hover {
        color: #fff;
    }
    
    .social a {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.08);
        margin-right: 8px;
    }
    /*==================================
  NAVBAR (extra)
==================================*/
    
    #hero {
        min-height: 100vh;
        padding-top: calc(var(--navbar-height) + 40px);
    }
    
    .navbar-custom {
        position: absolute;
        top: 36px;
        left: 0;
        width: 100%;
        background: transparent;
        box-shadow: none;
        transition: 0.3s;
    }
    
    .navbar-custom.scrolled {
        position: fixed;
        background: #fff;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    }
    /*==================================
  LOGO
==================================*/
    
    .logo {
        height: 140px;
        width: auto;
        transition: 0.3s;
        top: auto;
        /* corregido: faltaba ; */
    }

    .navbar-custom.scrolled .logo {
        height: 90px;
    }
    /*==================================
  BOTON WHATSAPP (extra)
==================================*/
    
    .btn-presupuesto {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        height: 52px;
        padding: 0 30px;
        border-radius: 50px;
        background: #8bcf18;
        color: #111;
        font-size: 18px;
        font-weight: 700;
        text-decoration: none;
        transition: 0.3s;
        box-shadow: 0 12px 28px rgba(139, 207, 24, 0.30);
    }
    
    .btn-presupuesto:hover {
        color: #111;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 15px 35px rgba(139, 207, 24, 0.45);
    }
    
    .btn-presupuesto i {
        font-size: 30px;
    }
    
    .whatsapp,
    .btn-whatsapp {
        position: fixed;
        right: 25px;
        bottom: 25px;
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background: #25D366;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        z-index: 9999;
        transition: .3s;
    }

    .btn-whatsapp:hover {
        color: #fff;
        transform: scale(1.08);
    }
    /*==================================
  BOTON MENU
==================================*/
    
    .btn-menu {
        margin-left: 20px;
        border: none;
        background: transparent;
        outline: none !important;
        box-shadow: none !important;
        color: #333;
        cursor: pointer;
        padding: 0;
    }
    
    .btn-menu i {
        font-size: 42px;
    }
    /*==================================
  OVERLAY
==================================*/
    
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
        z-index: 1098;
    }
    
    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    /*==================================
  MENU LATERAL
==================================*/
    
    .menu-lateral {
        position: fixed;
        top: 0;
        right: -320px;
        width: 300px;
        height: 100vh;
        background: #fff;
        z-index: 1099;
        transition: 0.35s;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    
    .menu-lateral.active {
        right: 0;
    }
    /*==================================
  CABECERA MENU
==================================*/
    
    .menu-header {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 25px;
        border-bottom: 1px solid #ececec;
    }
    
    .menu-header h4 {
        margin: 0;
        font-size: 22px;
        font-weight: 700;
    }
    
    .btn-cerrar {
        background: none;
        border: none;
        font-size: 28px;
        color: #444;
    }
    /*==================================
  LINKS
==================================*/
    
    .menu-links {
        display: flex;
        flex-direction: column;
        padding: 15px 0;
    }
    
    .menu-links a {
        display: block;
        width: 100%;
        padding: 16px 30px;
        color: #333;
        text-decoration: none;
        font-size: 18px;
        font-weight: 600;
        border-bottom: 1px solid #f2f2f2;
        transition: 0.25s;
    }
    
    .menu-links a:hover {
        background: #f8f8f8;
        color: #8bcf18;
        padding-left: 40px;
    }
    /*==========================================
TESTIMONIOS
==========================================*/
    
    #testimonios {
        background: #f7f7f7;
    }
    
    .testimonial-card {
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        transition: .35s;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    }
    
    .testimonial-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
    }
    
    .testimonial-img {
        overflow: hidden;
        height: 320px;
    }
    
    .testimonial-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .45s;
    }
    
    .testimonial-card:hover img {
        transform: scale(1.12);
    }
    
    .testimonial-stars {
        text-align: center;
        padding: 15px;
    }
    
    .testimonial-stars i {
        color: #FFC107;
        font-size: 20px;
        margin: 0 2px;
    }
    
    .testimonial-card {
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
        transition: .35s;
    }
    
    .testimonial-card:hover {
        transform: translateY(-8px);
    }
    
    .testimonial-card img {
        width: 100%;
        height: 420px;
        object-fit: cover;
        transition: .4s;
    }
    
    .testimonial-card:hover img {
        transform: scale(1.08);
    }
    
    .testimonial-stars {
        text-align: center;
        padding: 15px;
        color: #FFC107;
        font-size: 20px;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: #8BCF18;
        border-radius: 50%;
        padding: 20px;
    }
    
    .carousel-item {
        text-align: center;
    }
    
    .before-img {
        max-width: 850px;
        width: 50%;
        border-radius: 18px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, .15);
    }
    
    .before-img:hover {
        transform: scale(1.02);
    }
    
    #carouselAntesDespues {
        max-width: 1000px;
        margin: auto;
        background: #fff;
        border-radius: 25px;
        padding: 30px;
        box-shadow: 0 10px 35px rgba(0, 0, 0, .08);
    }
    
    #carouselAntesDespues h3 {
        font-weight: 700;
        margin-bottom: 20px;
    }
    
    #carouselAntesDespues p {
        font-size: 18px;
        color: #666;
        line-height: 1.8;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: #8BCF18;
        border-radius: 50%;
        width: 45px;
        height: 45px;
    }
    
    .carousel-indicators li {
        background: #8BCF18;
    }
    
    .carousel-indicators {
        bottom: -45px;
    }
    
    #modalAntes .modal-content {
        border-radius: 20px;
        overflow: hidden;
    }
    
    #modalAntes .modal-header {
        border: none;
    }
    
    #modalAntes .modal-body {
        background: #f8f9fa;
    }
    
    #modalAntes img {
        width: auto;
        max-width: 100%;
        max-height: 85vh;
        object-fit: contain;
    }
    
    .gift-preview {
        background: #fff;
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        min-height: 700px;
    }
    
    .gift-monto {
        margin-top: 20px;
        font-size: 34px;
        font-weight: bold;
        padding: 15px;
        color: #fff;
        border-radius: 10px;
        background: #8BCF18;
    }
    
    #previewImagen {
        max-height: 250px;
        object-fit: contain;
    }
    
    .gift-preview {
        position: relative;
        width: 100%;
        text-align: center;
    }
    
    .gift-template {
        width: 100%;
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, .18);
    }
    
    .gift-info {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .gift-para {
        position: absolute;
        top: 42%;
        left: 12%;
        width: 35%;
        text-align: left;
        color: #333;
    }
    
    .gift-de {
        position: absolute;
        top: 42%;
        right: 12%;
        width: 35%;
        text-align: right;
        color: #333;
    }
    
    .gift-mensaje {
        position: absolute;
        top: 60%;
        left: 12%;
        right: 12%;
        text-align: center;
        font-size: 18px;
        color: #444;
        font-style: italic;
    }
    
    .gift-monto {
        position: absolute;
        bottom: 13%;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 36px;
        font-weight: bold;
        color: #5c4630;
    }
    
    .gift-vigencia {
        position: absolute;
        bottom: 5%;
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: #444;
    }