Tul xxx Tul

Viewing: index.htmlv2

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eMprendo • Cotización Producción de Reels La Rueda</title>
<link rel="icon" href="https://emprendo.com.co/assets/img/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
:root{
    --primary:#ff3900;
    --blue1:#0086FF;
    --blue2:#00c6ff;
    --gray1:#2d2d2d;
    --gray2:#54595F;
    --gray3:#6D6866;
    --gray4:#7A7A7A;
    --white:#ffffff;
    --bg:#f5f8fc;
    --card:#ffffff;
    --border:#e7edf5;
    --text:#1f2937;
    --muted:#6b7280;
    --shadow:0 10px 30px rgba(0,0,0,.05);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    font-family:'Inter',sans-serif;
    background:radial-gradient(circle at top left, rgba(0,198,255,.08), transparent 25%),
    radial-gradient(circle at top right, rgba(255,57,0,.08), transparent 25%),#f7fafc;
    color:var(--text);
    overflow-x:hidden;
}
.container{width:min(1320px,92%);margin:auto;}
section{padding:100px 0;}
img{max-width:100%;}
a{text-decoration:none;}
.topbar{position:fixed;top:0;left:0;width:100%;z-index:999;background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.05);}
.nav{height:86px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:18px;}
.brand img{height:42px;}
.brand-line{width:1px;height:34px;background:#d7dee8;}
.client-logo{height:42px !important;}
.nav-menu{display:flex;align-items:center;gap:32px;}
.nav-link{color:var(--gray2);font-size:15px;font-weight:600;transition:.3s;position:relative;}
.nav-link:hover{color:var(--primary);}
.nav-link::after{content:'';position:absolute;bottom:-8px;left:0;width:0;height:3px;
    background:linear-gradient(90deg,var(--primary),var(--blue2));border-radius:3px;transition:.3s;}
.nav-link:hover::after{width:100%;}
.hero{position:relative;overflow:hidden;padding-top:180px;padding-bottom:120px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center;}
.badge{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);
    padding:12px 18px;border-radius:999px;color:var(--blue1);font-size:14px;font-weight:700;
    margin-bottom:28px;box-shadow:var(--shadow);}
.badge span{width:8px;height:8px;border-radius:50%;background:var(--primary);}
h1{font-size:clamp(50px,7vw,90px);line-height:.95;font-weight:900;letter-spacing:-4px;
    margin-bottom:30px;color:var(--gray1);}
.gradient{background:linear-gradient(90deg,var(--primary),var(--blue2));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero p{font-size:19px;line-height:1.9;color:var(--muted);max-width:800px;}
.hero-actions{display:flex;gap:16px;margin-top:42px;flex-wrap:wrap;}
.btn{padding:18px 30px;border-radius:16px;font-weight:700;transition:.35s;
    display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;}
.btn-primary{background:linear-gradient(90deg,var(--primary),#ff6a00);color:#fff;
    box-shadow:0 10px 30px rgba(255,57,0,.18);}
.btn-primary:hover{transform:translateY(-4px);}
.btn-secondary{background:#fff;border:1px solid var(--border);color:var(--gray1);}
.mockups{position:relative;height:760px;}
.phone{position:absolute;width:320px;border-radius:40px;overflow:hidden;background:#111;
    border:12px solid #111;box-shadow:0 20px 50px rgba(0,0,0,.12);}
.phone img{width:100%;display:block;}
.phone.one{left:0;top:80px;transform:rotate(-7deg);}
.phone.two{right:0;top:0;transform:rotate(8deg);}
.section-header{margin-bottom:55px;}
.section-header h2{font-size:clamp(36px,5vw,68px);line-height:1.05;letter-spacing:-2px;
    margin-bottom:20px;color:var(--gray1);}
.section-header p{color:var(--muted);line-height:1.9;max-width:960px;font-size:17px;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:30px;}
.video-reel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 50px;}
.video-reel-card{background:#fff;border-radius:24px;border:1px solid var(--border);box-shadow:var(--shadow);
    overflow:hidden;transition:.3s;}
.video-reel-card:hover{transform:translateY(-4px);box-shadow:0 15px 40px rgba(0,0,0,.1);}
.video-reel-media{position:relative;width:100%;aspect-ratio:9/16;display:block;border:0;padding:0;
    background:#111;overflow:hidden;cursor:pointer;font:inherit;text-align:left;}
.video-reel-media video{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;}
.video-reel-media::after{content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.58));pointer-events:none;}
.video-play-badge{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;display:flex;align-items:center;
    justify-content:center;gap:10px;padding:13px 16px;border-radius:14px;background:rgba(255,255,255,.92);
    color:var(--gray1);font-size:14px;font-weight:800;}
.video-play-icon{width:28px;height:28px;border-radius:50%;background:var(--primary);position:relative;flex-shrink:0;}
.video-play-icon::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-35%,-50%);
    border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid #fff;}
.video-reel-copy{padding:22px;}
.video-reel-copy h3{font-size:22px;font-weight:900;color:var(--gray1);margin-bottom:8px;}
.video-reel-copy p{font-size:14px;line-height:1.7;color:var(--muted);margin:0;}
.reel-section{margin-bottom:80px;padding-bottom:60px;border-bottom:2px solid var(--border);}
.reel-section:last-child{border-bottom:none;}
.reel-title{font-size:42px;font-weight:900;color:var(--gray1);margin-bottom:12px;letter-spacing:-2px;}
.reel-concepto{font-size:18px;color:var(--muted);margin-bottom:40px;}
.reel-collapsible{margin-bottom:22px;padding:0;border:1px solid var(--border);border-radius:24px;
    background:#fff;box-shadow:var(--shadow);overflow:hidden;}
.reel-collapsible:last-child{border-bottom:1px solid var(--border);}
.reel-collapsible-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 32px;}
.reel-collapsible .reel-title{font-size:32px;margin:0;letter-spacing:0;}
.reel-toggle{border:0;border-radius:14px;background:var(--gray1);color:#fff;padding:13px 20px;
    font-size:15px;font-weight:800;cursor:pointer;transition:.3s;white-space:nowrap;}
.reel-toggle:hover{background:var(--primary);transform:translateY(-2px);}
.reel-collapsible.is-open .reel-toggle{background:var(--primary);}
.reel-collapsible-body{padding:0 32px 32px;}
.reel-collapsible-body[hidden]{display:none;}
.reel-collapsible .reel-plano:last-child{margin-bottom:0;}
.reel-plano{display:grid;grid-template-columns:400px 1fr;gap:40px;margin-bottom:40px;
    background:#fff;border-radius:24px;padding:30px;border:1px solid var(--border);box-shadow:var(--shadow);transition:.3s;}
.reel-plano:hover{transform:translateY(-4px);box-shadow:0 15px 40px rgba(0,0,0,.1);}
.plano-imagen{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;transition:.3s;}
.plano-imagen img{width:100%;display:block;transition:.3s;}
.plano-imagen:hover img{transform:scale(1.05);}
.zoom-icon{position:absolute;top:12px;right:12px;width:40px;height:40px;background:rgba(0,0,0,.7);
    color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;
    opacity:0;transition:.3s;}
.plano-imagen:hover .zoom-icon{opacity:1;}
.plano-info h4{font-size:24px;font-weight:700;color:var(--gray1);margin-bottom:24px;}
.plano-info .info-item{margin-bottom:20px;}
.plano-info .info-item strong{display:block;font-size:15px;font-weight:700;color:var(--blue1);margin-bottom:8px;}
.plano-info .info-item p{font-size:15px;line-height:1.8;color:var(--gray2);margin:0;}
.modal-imagen{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);
    backdrop-filter:blur(10px);z-index:10000;align-items:center;justify-content:center;animation:fadeIn .3s;}
.modal-imagen.active{display:flex;}
.modal-imagen-content{max-width:90%;max-height:90%;position:relative;animation:slideUp .4s;}
.modal-imagen-content img{max-width:100%;max-height:90vh;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.modal-imagen-close{position:absolute;top:-50px;right:0;width:45px;height:45px;border-radius:50%;
    background:rgba(255,255,255,.2);border:none;font-size:28px;cursor:pointer;transition:.3s;
    display:flex;align-items:center;justify-content:center;color:#fff;}
.modal-imagen-close:hover{background:var(--primary);transform:rotate(90deg);}
.modal-imagen-title{position:absolute;bottom:-50px;left:0;right:0;text-align:center;color:#fff;
    font-size:18px;font-weight:600;}
.modal-video{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.94);
    backdrop-filter:blur(10px);z-index:10001;align-items:center;justify-content:center;animation:fadeIn .3s;padding:70px 24px;}
.modal-video.active{display:flex;}
.modal-video-content{width:min(96vw,1180px);height:min(86vh,860px);position:relative;animation:slideUp .4s;}
.modal-video-content video{width:100%;height:100%;display:block;object-fit:contain;background:#000;border-radius:16px;
    box-shadow:0 30px 80px rgba(0,0,0,.55);}
.modal-video-title{position:absolute;left:0;right:0;bottom:-42px;text-align:center;color:#fff;
    font-size:18px;font-weight:700;}
.card{position:relative;background:var(--card);border-radius:30px;padding:42px;
    border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden;transition:.35s;}
.card:hover{transform:translateY(-6px);}
.card::before{content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(255,57,0,.04),transparent 25%);pointer-events:none;}
.card-number{position:absolute;top:10px;right:24px;font-size:90px;font-weight:900;color:rgba(0,0,0,.04);}
.card h3{font-size:34px;margin-bottom:18px;color:var(--gray1);}
.card p{color:var(--muted);line-height:1.9;}
.list{margin-top:30px;display:flex;flex-direction:column;gap:16px;}
.list-item{display:flex;gap:14px;align-items:flex-start;color:var(--gray2);}
.bullet{min-width:28px;height:28px;border-radius:50%;background:rgba(0,134,255,.1);
    color:var(--blue1);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.price{margin-top:36px;padding-top:24px;border-top:1px solid #eef2f7;}
.price small{display:block;margin-bottom:10px;color:var(--gray4);}
.price strong{display:block;font-size:44px;background:linear-gradient(90deg,var(--primary),#ff7b00);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.total{margin-top:24px;padding:22px;background:#f8fbff;border-radius:20px;border:1px solid #edf3fa;}
.total span{display:block;color:var(--gray4);margin-bottom:10px;line-height:1.8;}
.total strong{font-size:32px;color:var(--gray1);}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:35px;}
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-bottom:60px;}
.info-card{background:#fff;border-radius:24px;padding:35px;border:1px solid var(--border);box-shadow:var(--shadow);transition:.3s;}
.info-card:hover{transform:translateY(-4px);box-shadow:0 15px 40px rgba(0,0,0,.1);}
.info-card-icon{font-size:48px;margin-bottom:20px;}
.info-card h3{font-size:26px;font-weight:700;color:var(--gray1);margin-bottom:16px;}
.info-card p{font-size:15px;line-height:1.8;color:var(--gray2);}
.info-list{list-style:none;padding:0;margin:0;}
.info-list li{font-size:15px;line-height:2;color:var(--gray2);padding-left:0;}
.terminos-section{background:linear-gradient(135deg,rgba(255,57,0,.03),rgba(0,198,255,.03));
    border-radius:24px;padding:50px;border:1px solid var(--border);}
.terminos-title{font-size:36px;font-weight:900;color:var(--gray1);margin-bottom:35px;text-align:center;letter-spacing:-1px;}
.terminos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
.termino-item{background:#fff;border-radius:16px;padding:24px;border:1px solid var(--border);}
.termino-item strong{display:block;font-size:16px;font-weight:700;color:var(--gray1);margin-bottom:10px;}
.termino-item p{font-size:14px;line-height:1.7;color:var(--gray2);margin:0;}
.gallery-item{border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);transition:.3s;}
.gallery-item:hover{transform:translateY(-4px);box-shadow:0 15px 40px rgba(0,0,0,.1);}
.gallery-item img{width:100%;display:block;}
.gallery-caption{padding:20px;background:#fff;}
.gallery-caption h4{font-size:18px;margin-bottom:8px;color:var(--gray1);}
.gallery-caption p{font-size:14px;color:var(--muted);line-height:1.6;}
.cta{text-align:center;padding-bottom:140px;}
.cta h2{font-size:clamp(42px,6vw,82px);line-height:1;margin-bottom:30px;letter-spacing:-3px;color:var(--gray1);}
.cta p{max-width:950px;margin:auto;line-height:1.9;color:var(--muted);font-size:18px;}
.footer{padding:50px 0;border-top:1px solid rgba(0,0,0,.06);background:#fff;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.footer img{height:34px;}
.footer span{color:var(--gray4);}
.calculator{margin-top:35px;padding:28px;background:#f8fbff;border-radius:24px;border:1px solid #edf3fa;}
.calculator label{display:block;margin-bottom:10px;font-weight:700;color:var(--gray2);}
.calc-options{display:flex;flex-direction:column;gap:16px;margin-bottom:24px;}
.calc-option{display:flex;align-items:center;gap:12px;padding:16px;background:#fff;border-radius:12px;
    border:2px solid #e8eef5;cursor:pointer;transition:.3s;}
.calc-option:hover{border-color:var(--blue1);}
.calc-option input[type="checkbox"]{width:20px;height:20px;cursor:pointer;}
.calc-option-label{flex:1;}
.calc-option-label strong{display:block;font-size:16px;color:var(--gray1);margin-bottom:4px;}
.calc-option-label span{font-size:14px;color:var(--muted);}
.calc-option-price{font-size:18px;font-weight:700;color:var(--blue1);}
.calc-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #e8eef5;}
.btn-cotizar{background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-size:18px;
    padding:22px 40px;box-shadow:0 15px 35px rgba(16,185,129,.25);margin-top:20px;border:none;cursor:pointer;
    border-radius:16px;font-weight:700;transition:.35s;display:inline-flex;align-items:center;gap:10px;}
.btn-cotizar:hover{transform:translateY(-4px);box-shadow:0 20px 45px rgba(16,185,129,.35);}
.btn-cuenta-cobro{background:#fff;color:var(--gray1);border:1px solid var(--border);font-size:18px;
    padding:20px 34px;border-radius:16px;font-weight:800;display:inline-flex;align-items:center;gap:10px;
    box-shadow:var(--shadow);text-decoration:none;transition:.35s;}
.btn-cuenta-cobro:hover{transform:translateY(-4px);border-color:var(--primary);color:var(--primary);
    box-shadow:0 15px 40px rgba(0,0,0,.1);}
.cotizacion-info{background:linear-gradient(135deg,#fff,#f8fbff);border-radius:24px;padding:40px;
    border:1px solid var(--border);margin-bottom:35px;box-shadow:var(--shadow);}
.info-header{display:flex;align-items:center;gap:24px;padding-bottom:30px;border-bottom:2px solid var(--border);margin-bottom:30px;}
.info-logo{flex-shrink:0;}
.info-header-text h4{font-size:24px;font-weight:900;color:var(--gray1);margin-bottom:6px;letter-spacing:-1px;}
.info-header-text p{font-size:16px;color:var(--muted);margin:0;}
.info-grid-enhanced{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.info-col{display:flex;flex-direction:column;gap:20px;}
.info-col-full{grid-column:1 / -1;}
.info-item-enhanced{display:flex;flex-direction:column;gap:6px;padding:16px;background:#fff;border-radius:12px;
    border:1px solid #edf3fa;}
.info-label{font-size:12px;font-weight:700;color:var(--blue1);text-transform:uppercase;letter-spacing:0.5px;}
.info-value{font-size:16px;font-weight:600;color:var(--gray1);}
.contacto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;}
.contacto-card{background:#fff;border-radius:24px;padding:35px;text-align:center;border:1px solid var(--border);
    box-shadow:var(--shadow);transition:.3s;}
.contacto-card:hover{transform:translateY(-6px);box-shadow:0 15px 40px rgba(0,0,0,.1);}
.contacto-icon{font-size:48px;margin-bottom:16px;}
.contacto-card h4{font-size:20px;font-weight:700;color:var(--gray1);margin-bottom:12px;}
.contacto-card p{font-size:15px;line-height:1.8;color:var(--gray2);margin:0;}
.contacto-card a{color:var(--blue1);text-decoration:none;font-weight:600;transition:.3s;}
.contacto-card a:hover{color:var(--primary);}
.tabla-cotizacion{background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);}
.cotizacion-table{width:100%;border-collapse:collapse;}
.cotizacion-table thead{background:linear-gradient(135deg,var(--primary),#ff6a00);}
.cotizacion-table thead th{color:#fff;padding:18px 20px;text-align:left;font-size:15px;font-weight:700;}
.cotizacion-table tbody tr{border-bottom:1px solid #eef2f7;transition:.3s;}
.cotizacion-table tbody tr:hover{background:#f8fbff;}
.cotizacion-table tbody td{padding:20px;color:var(--gray2);font-size:15px;line-height:1.6;}
.cotizacion-table tbody td:nth-child(3),.cotizacion-table tbody td:nth-child(4),.cotizacion-table tbody td:nth-child(5){text-align:center;}
.cotizacion-table thead th:nth-child(3),.cotizacion-table thead th:nth-child(4),.cotizacion-table thead th:nth-child(5){text-align:center;}
.cotizacion-table tbody td strong{color:var(--gray1);font-weight:700;}
.total-pagar{background:linear-gradient(135deg,rgba(255,57,0,.05),rgba(0,198,255,.05));
    padding:30px 40px;display:flex;justify-content:space-between;align-items:center;border-top:3px solid var(--primary);}
.total-label{font-size:24px;font-weight:900;color:var(--gray1);letter-spacing:-1px;}
.total-amount{font-size:42px;font-weight:900;background:linear-gradient(90deg,var(--primary),var(--blue2));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-2px;}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);
    backdrop-filter:blur(8px);z-index:9999;align-items:center;justify-content:center;animation:fadeIn .3s;}
.modal.active{display:flex;}
.modal-content{background:#fff;border-radius:32px;padding:50px;max-width:600px;width:90%;
    box-shadow:0 30px 80px rgba(0,0,0,.2);animation:slideUp .4s;position:relative;}
.modal-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;
    background:#f5f5f5;border:none;font-size:24px;cursor:pointer;transition:.3s;}
.modal-close:hover{background:#ff3900;color:#fff;transform:rotate(90deg);}
.modal-icon{width:80px;height:80px;margin:0 auto 24px;border-radius:50%;display:flex;
    align-items:center;justify-content:center;font-size:40px;
    background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(5,150,105,.1));color:#10b981;}
.modal h3{font-size:32px;margin-bottom:16px;text-align:center;color:var(--gray1);}
.modal p{color:var(--muted);line-height:1.8;text-align:center;margin-bottom:12px;}
.modal-price{font-size:42px;font-weight:900;text-align:center;margin:24px 0;
    background:linear-gradient(90deg,var(--primary),var(--blue2));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.form-group{margin-bottom:20px;text-align:left;}
.form-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--gray2);}
.form-group input,.form-group textarea{width:100%;padding:12px 16px;border-radius:12px;
    border:1px solid #dce5ef;font-size:15px;font-family:'Inter',sans-serif;}
.form-group textarea{min-height:100px;resize:vertical;}
.modal-actions{display:flex;gap:16px;margin-top:32px;}
.modal-actions button{flex:1;padding:18px;border-radius:16px;font-weight:700;font-size:16px;
    cursor:pointer;transition:.3s;border:none;}
.btn-confirm{background:linear-gradient(135deg,#10b981,#059669);color:#fff;
    box-shadow:0 10px 25px rgba(16,185,129,.25);}
.btn-confirm:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(16,185,129,.35);}
.btn-cancel{background:#f5f5f5;color:var(--gray2);}
.btn-cancel:hover{background:#e5e5e5;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideUp{from{transform:translateY(50px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@media(max-width:980px){
    .hero-grid{grid-template-columns:1fr;}
    .mockups{height:660px;margin-top:40px;}
    .phone{width:240px;}
    section{padding:80px 0;}
    .nav-menu{display:none;}
    .gallery{grid-template-columns:1fr;}
    .info-grid{grid-template-columns:1fr;}
    .info-grid-enhanced{grid-template-columns:1fr;}
    .video-reel-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto 45px;}
    .video-reel-media{aspect-ratio:9/16;}
    .reel-collapsible-header{flex-direction:column;align-items:flex-start;padding:24px;}
    .reel-collapsible .reel-title{font-size:28px;}
    .reel-toggle{width:100%;}
    .reel-collapsible-body{padding:0 20px 24px;}
    .modal-video{padding:64px 14px;}
    .modal-video-content{width:94vw;height:auto;}
    .modal-video-content video{max-height:82vh;}
    .info-header{flex-direction:column;text-align:center;}
    .tabla-cotizacion{overflow-x:auto;}
    .cotizacion-table{min-width:700px;}
    .total-pagar{flex-direction:column;gap:15px;text-align:center;}
    .reel-plano{grid-template-columns:1fr;gap:24px;}
    .plano-imagen{max-width:100%;}
    .reel-title{font-size:32px;}
    .info-cards{grid-template-columns:1fr;}
    .terminos-grid{grid-template-columns:1fr;}
    .terminos-section{padding:30px 20px;}
    .contacto-grid{grid-template-columns:1fr;}
}
</style>
</head>
<body>

<header class="topbar">
<div class="container nav">
<div class="brand">
<a href="https://emprendo.com.co/" target="_blank">
<img src="https://emprendo.com.co/assets/img/imagotipo.webp" alt="eMprendo">
</a>
<div class="brand-line"></div>
<img class="client-logo" src="https://emprendo.com.co/20260507-0001/logo.png" alt="La Rueda">
</div>
<nav class="nav-menu">
<a href="#reels" class="nav-link">Reels</a>
<a href="#paquetes" class="nav-link">Cotización</a>
<a href="#alcance" class="nav-link">Alcance</a>
<a href="#terminos" class="nav-link">Términos</a>
<a href="#contacto" class="nav-link">Contacto</a>
</nav>
</div>
</header>

<section class="hero">
<div class="container hero-grid">
<div>
<div class="badge">
<span></span>
PROPUESTA COMERCIAL
</div>
<h1>
Producción de 3 Reels Promocionales para
<span class="gradient">La Rueda</span>
</h1>
<p>
Propuesta para la producción de 3 videos/reels promocionales orientados a la campaña del Mundial,
destacando las promociones en llantas Continental y General Tire con un enfoque dinámico y comercial
que impulse la conversión y el engagement en redes sociales.
</p>
<div class="hero-actions">
<a href="#paquetes" class="btn btn-primary">
Ver Cotización
</a>
<a href="#alcance" class="btn btn-secondary">
Ver Alcance
</a>
</div>
</div>
<div class="mockups">
<div class="phone one">
<img src="Promo Mundial/Plano 01.png" alt="Reel Promo Mundial">
</div>
<div class="phone two">
<img src="Rueda Mundial/A.png" alt="Reel Rueda Mundial">
</div>
</div>
</div>
</section>

<section id="reels">
<div class="container">
<div class="section-header">
<div class="badge">
<span></span>
CONTENIDO DE LOS REELS
</div>
<h2>
3 Videos Promocionales Estratégicos
</h2>
<p>
Cada reel está diseñado con un objetivo específico: captar atención, comunicar beneficios
y generar acción inmediata. Abre los videos en pantalla completa y despliega los planos para revisar cada idea.
</p>
</div>

<div class="video-reel-grid" aria-label="Videos de los reels">
<article class="video-reel-card">
<button type="button" class="video-reel-media" onclick="abrirVideoModal('https://emprendo.com.co/larueda/campa%C3%B1amundial/reel1.mp4', 'Reel 1 — Promo Mundial')" aria-label="Abrir Reel 1 — Promo Mundial en pantalla completa">
<video src="https://emprendo.com.co/larueda/campa%C3%B1amundial/reel1.mp4" muted playsinline preload="metadata"></video>
<span class="video-play-badge"><span class="video-play-icon" aria-hidden="true"></span>Ver en pantalla completa</span>
</button>
<div class="video-reel-copy">
<h3>Reel 1 — Promo Mundial</h3>
<p>Video promocional principal de la campaña Mundial.</p>
</div>
</article>

<article class="video-reel-card">
<button type="button" class="video-reel-media" onclick="abrirVideoModal('https://emprendo.com.co/larueda/campa%C3%B1amundial/reel2.mp4', 'Reel 2 — Rueda Mundial')" aria-label="Abrir Reel 2 — Rueda Mundial en pantalla completa">
<video src="https://emprendo.com.co/larueda/campa%C3%B1amundial/reel2.mp4" muted playsinline preload="metadata"></video>
<span class="video-play-badge"><span class="video-play-icon" aria-hidden="true"></span>Ver en pantalla completa</span>
</button>
<div class="video-reel-copy">
<h3>Reel 2 — Rueda Mundial</h3>
<p>Video de concepto mundialista con La Rueda como protagonista.</p>
</div>
</article>

<article class="video-reel-card">
<button type="button" class="video-reel-media" onclick="abrirVideoModal('https://emprendo.com.co/larueda/campa%C3%B1amundial/reel3.mp4', 'Reel 3 — Video Página Web')" aria-label="Abrir Reel 3 — Video Página Web en pantalla completa">
<video src="https://emprendo.com.co/larueda/campa%C3%B1amundial/reel3.mp4" muted playsinline preload="metadata"></video>
<span class="video-play-badge"><span class="video-play-icon" aria-hidden="true"></span>Ver en pantalla completa</span>
</button>
<div class="video-reel-copy">
<h3>Reel 3 — Video Página Web</h3>
<p>Video pensado para acompañar la experiencia de la página web.</p>
</div>
</article>
</div>

<!-- REEL 1 -->
<div class="reel-section reel-collapsible" id="planos-reel-1">
<div class="reel-collapsible-header">
<h3 class="reel-title">Reel 1 — Promo Mundial</h3>
<button type="button" class="reel-toggle" aria-expanded="false" onclick="toggleReelPlanos(this)">Ver planos</button>
</div>
<div class="reel-collapsible-body" hidden>
<p class="reel-concepto"><strong>Concepto:</strong> "Hola, promo para la hinchada"</p>

<!-- Plano 01 -->
<div class="reel-plano">
<div class="plano-imagen" onclick="abrirImagenModal('Promo Mundial/Plano 01.png', 'Plano 01')">
<img src="Promo Mundial/Plano 01.png" alt="Plano 01">
<div class="zoom-icon">🔍</div>
</div>
<div class="plano-info">
<h4>Plano 01</h4>
<div class="info-item">
<strong>📺 Visual:</strong>
<p>Valeria con buzo de Colombia, maletín al hombro y balón en las manos. Fondo: Sede La Rueda</p>
</div>
<div class="info-item">
<strong>📝 Texto en pantalla:</strong>
<p>"Hola, Promo para la Hinchada"</p>
</div>
<div class="info-item">
<strong>🎤 VO Valeria:</strong>
<p>"La Sele disfruta con esta Promo Mundial."</p>
</div>
</div>
</div>

<!-- Planos 02, 03 y 04 -->
<div class="reel-plano">
<div class="plano-imagen" onclick="abrirImagenModal('Promo Mundial/Plano 02, 03 y 04.png', 'Planos 02, 03 y 04')">
<img src="Promo Mundial/Plano 02, 03 y 04.png" alt="Planos 02-04">
<div class="zoom-icon">🔍</div>
</div>
<div class="plano-info">
<h4>Planos 02, 03 y 04</h4>
<div class="info-item">
<strong>📺 Visual:</strong>
<p>Corte a distintas versiones de la promoción Continental y General Tire, Valeria señalando el balón y el maletín como regalos</p>
</div>
<div class="info-item">
<strong>📝 Texto en pantalla:</strong>
<p>"Compra x 4 llantas y recibe descuento inmediato + premio mundialista"</p>
</div>
<div class="info-item">
<strong>🎤 VO Valeria:</strong>
<p>"Llevándote cuatro llantas Continental o General Tire, recibes un descuento inmediato y además premios mundialistas."</p>
</div>
</div>
</div>

<!-- Plano 05 -->
<div class="reel-plano">
<div class="plano-imagen" onclick="abrirImagenModal('Promo Mundial/Plano 05.png', 'Plano 05')">
<img src="Promo Mundial/Plano 05.png" alt="Plano 05">
<div class="zoom-icon">🔍</div>
</div>
<div class="plano-info">
<h4>Plano 05</h4>
<div class="info-item">
<strong>📺 Visual:</strong>
<p>Valeria al centro, sosteniendo el balón, maletín visible al hombro</p>
</div>
<div class="info-item">
<strong>📝 Texto en pantalla:</strong>
<p>"x2 llantas = 10% dcto"</p>
</div>
<div class="info-item">
<strong>🎤 VO Valeria:</strong>
<p>"Y si compras dos, tienes 10% de descuento."</p>
</div>
</div>
</div>

<!-- Plano 06 -->
<div class="reel-plano">
<div class="plano-imagen" onclick="abrirImagenModal('Promo Mundial/Plano 06.png', 'Plano 06')">
<img src="Promo Mundial/Plano 06.png" alt="Plano 06">
<div class="zoom-icon">🔍</div>
</div>
<div class="plano-info">
<h4>Plano 06</h4>
<div class="info-item">
<strong>📺 Visual:</strong>
<p>Valeria mira a cámara y levanta el móvil</p>
</div>
<div class="info-item">
<strong>📝 Texto en pantalla:</strong>
<p>"Escríbenos por WhatsApp y aprovecha la Promo Mundial"</p>
</div>
<div class="info-item">
<strong>🎤 VO Valeria:</strong>
<p>"Escríbenos por WhatsApp y te ayudamos a elegir la llanta ideal."</p>
</div>
</div>
</div>
</div>
</div>

<!-- REEL 2 -->
<div class="reel-section reel-collapsible" id="planos-reel-2">
<div class="reel-collapsible-header">
<h3 class="reel-title">Reel 2 — Rueda Mundial</h3>
<button type="button" class="reel-toggle" aria-expanded="false" onclick="toggleReelPlanos(this)">Ver planos</button>
</div>
<div class="reel-collapsible-body" hidden>
<p class="reel-concepto"><strong>Concepto:</strong> "Tu carro también juega con la Sele"</p>

<!-- Imagen A -->
<div class="reel-plano">
<div class="plano-imagen" onclick="abrirImagenModal('Rueda Mundial/A.png', 'Imagen A')">
<img src="Rueda Mundial/A.png" alt="Imagen A">
<div class="zoom-icon">🔍</div>
</div>
<div class="plano-info">
<h4>Imagen A</h4>
<div class="info-item">
<strong>📺 Visual:</strong>
<p>Pelota continental rueda en calle conocida de Bogotá y pasa frente a una llanta, el pie de Valeria en primer plano detiene la pelota y la levanta con el pie, balón en manos, maletín al hombro</p>
</div>
<div class="info-item">
<strong>📝 Texto en pantalla:</strong>
<p>"La promo mundialista ya llegó"</p>
</div>
<div class="info-item">
<strong>🎤 VO Valeria:</strong>
<p>"Tu carro también juega con la Sele."</p>
</div>
</div>
</div>

<!-- Imagen B -->
<div class="reel-plano">
<div class="plano-imagen" onclick="abrirImagenModal('Rueda Mundial/B.png', 'Imagen B')">
<img src="Rueda Mundial/B.png" alt="Imagen B">
<div class="zoom-icon">🔍</div>
</div>
<div class="plano-info">
<h4>Imagen B</h4>
<div class="info-item">
<strong>📺 Visual:</strong>
<p>Valeria aparece frente a tres carros que representan las tres versiones de la promoción, aparecen las marcas de las llantas: Continental / General Tire y la especificación de los premios</p>
</div>
<div class="info-item">
<strong>📝 Texto en pantalla:</strong>
<p>Especificación de la Promoción en cada caso</p>
</div>
<div class="info-item">
<strong>🎤 VO Valeria:</strong>
<p>"Con la compra de un set de cuatro llantas Continental o General Tire, te llevas descuento inmediato y premios mundialistas según el rin de tu auto."</p>
</div>
</div>
</div>

<!-- Imagen C -->
<div class="reel-plano">
<div class="plano-imagen" onclick="abrirImagenModal('Rueda Mundial/C.png', 'Imagen C')">
<img src="Rueda Mundial/C.png" alt="Imagen C">
<div class="zoom-icon">🔍</div>
</div>
<div class="plano-info">
<h4>Imagen C</h4>
<div class="info-item">
<strong>📺 Visual:</strong>
<p>Valeria cambia el balón de mano, manteniendo el maletín visible. Close-up a WhatsApp</p>
</div>
<div class="info-item">
<strong>📝 Texto en pantalla:</strong>
<p>"Set x2 = 10% dcto" / "Promo válida hasta el 18 de julio"</p>
</div>
<div class="info-item">
<strong>🎤 VO Valeria:</strong>
<p>"Si llevas dos llantas, aprovechas 10% de descuento. Escríbenos por WhatsApp y celebra con la Sele."</p>
</div>
</div>
</div>
</div>
</div>

<!-- REEL 3 -->
<div class="reel-section reel-collapsible" id="planos-reel-3">
<div class="reel-collapsible-header">
<h3 class="reel-title">Reel 3 — Video Página Web</h3>
<button type="button" class="reel-toggle" aria-expanded="false" onclick="toggleReelPlanos(this)">Ver planos</button>
</div>
<div class="reel-collapsible-body" hidden>
<p class="reel-concepto"><strong>Concepto:</strong> "Promo Mundial en La Rueda" • <strong>Duración:</strong> 18 segundos</p>

<!-- Plano 01 -->
<div class="reel-plano">
<div class="plano-imagen" onclick="abrirImagenModal('Video Página Web/Plano 1.png', 'Plano 01 - Hook')">
<img src="Video Página Web/Plano 1.png" alt="Plano 1">
<div class="zoom-icon">🔍</div>
</div>
<div class="plano-info">
<h4>Plano 01 — Hook / Apertura</h4>
<div class="info-item">
<strong>📺 Visual:</strong>
<p>Valeria en tienda La Rueda, con look de selección, balón en mano y maletín visible. Fondo premium con llantas y branding</p>
</div>
<div class="info-item">
<strong>📝 Texto en pantalla:</strong>
<p>"LLEGÓ LA PROMO MUNDIAL EN LA RUEDA"</p>
</div>
<div class="info-item">
<strong>🎤 VO Valeria:</strong>
<p>"Llegó la promo Mundial en La Rueda..."</p>
</div>
</div>
</div>

<!-- Plano 02 -->
<div class="reel-plano">
<div class="plano-imagen" onclick="abrirImagenModal('Video Página Web/Plano 2.png', 'Plano 02 - Beneficio')">
<img src="Video Página Web/Plano 2.png" alt="Plano 2">
<div class="zoom-icon">🔍</div>
</div>
<div class="plano-info">
<h4>Plano 02 — Beneficio Principal</h4>
<div class="info-item">
<strong>📺 Visual:</strong>
<p>Corte a llantas Continental y General Tire, con energía visual de promo y movimiento</p>
</div>
<div class="info-item">
<strong>📝 Texto en pantalla:</strong>
<p>"DESCUENTO INMEDIATO EN TU COMPRA"</p>
</div>
<div class="info-item">
<strong>🎤 VO Valeria:</strong>
<p>"...lleva tu descuento inmediato..."</p>
</div>
</div>
</div>

<!-- Plano 03 -->
<div class="reel-plano">
<div class="plano-imagen" onclick="abrirImagenModal('Video Página Web/Plano 2.png', 'Plano 03 - Premio')">
<img src="Video Página Web/Plano 2.png" alt="Plano 3">
<div class="zoom-icon">🔍</div>
</div>
<div class="plano-info">
<h4>Plano 03 — Premio Mundialista</h4>
<div class="info-item">
<strong>📺 Visual:</strong>
<p>Aparecen los premios: balón MundialConti y maletín deportivo Continental</p>
</div>
<div class="info-item">
<strong>📝 Texto en pantalla:</strong>
<p>"+ PREMIOS MUNDIALISTAS SEGÚN TU RIN"</p>
</div>
<div class="info-item">
<strong>🎤 VO Valeria:</strong>
<p>"...y premios mundialistas."</p>
</div>
</div>
</div>

<!-- Plano 04 -->
<div class="reel-plano">
<div class="plano-imagen" onclick="abrirImagenModal('Video Página Web/Plano 2.png', 'Plano 04 - Condición 1')">
<img src="Video Página Web/Plano 2.png" alt="Plano 4">
<div class="zoom-icon">🔍</div>
</div>
<div class="plano-info">
<h4>Plano 04 — Condición 1</h4>
<div class="info-item">
<strong>📺 Visual:</strong>
<p>Set x4 llantas rin 14" o 15" con maletín Continental como premio principal</p>
</div>
<div class="info-item">
<strong>📝 Texto en pantalla:</strong>
<p>"SET X4 RIN 14" O 15" RECIBE: MALETA DEPORTIVA CONTINENTAL"</p>
</div>
<div class="info-item">
<strong>🎤 VO Valeria:</strong>
<p>"Con la compra de set x4 llantas rin 14 o 15, recibes maleta deportiva Continental."</p>
</div>
</div>
</div>

<!-- Plano 05 -->
<div class="reel-plano">
<div class="plano-imagen" onclick="abrirImagenModal('Video Página Web/Plano 2.png', 'Plano 05 - Condiciones 2 y 3')">
<img src="Video Página Web/Plano 2.png" alt="Plano 5">
<div class="zoom-icon">🔍</div>
</div>
<div class="plano-info">
<h4>Plano 05 — Condiciones 2 y 3</h4>
<div class="info-item">
<strong>📺 Visual:</strong>
<p>Set x4 llantas rin 16" o 17" con balón MundialConti; luego set x4 rin 18" o superior con maletín + balón</p>
</div>
<div class="info-item">
<strong>📝 Texto en pantalla:</strong>
<p>"SET X4 RIN 16" O 17" RECIBE: BALÓN MUNDIALCONTI" / "SET X4 RIN 18" O SUPERIOR RECIBE: MALETA + BALÓN"</p>
</div>
<div class="info-item">
<strong>🎤 VO Valeria:</strong>
<p>"Si compras rin 16 o 17, recibes balón MundialConti. Y si compras rin 18 o superior, recibes maleta deportiva Continental más balón MundialConti."</p>
</div>
</div>
</div>

<!-- Plano 06 -->
<div class="reel-plano">
<div class="plano-imagen" onclick="abrirImagenModal('Video Página Web/Plano 2.png', 'Plano 06 - CTA')">
<img src="Video Página Web/Plano 2.png" alt="Plano 6">
<div class="zoom-icon">🔍</div>
</div>
<div class="plano-info">
<h4>Plano 06 — Cierre / CTA</h4>
<div class="info-item">
<strong>📺 Visual:</strong>
<p>Valeria mira a cámara, sostiene el balón y señala WhatsApp</p>
</div>
<div class="info-item">
<strong>📝 Texto en pantalla:</strong>
<p>"DA CLICK AL WHATSAPP APARTA TU CUPO"</p>
</div>
<div class="info-item">
<strong>🎤 VO Valeria:</strong>
<p>"Da click al WhatsApp y aparta tu cupo para esta Promo Mundial."</p>
</div>
</div>
</div>
</div>
</div>

</div>
</section>

<section id="paquetes" style="background:#fff;">
<div class="container">
<div class="section-header">
<div class="badge">
<span></span>
COTIZACIÓN DETALLADA
</div>
<h2>
Desglose completo de la producción
</h2>
<p>
Cotización profesional para la producción de 3 reels promocionales,
incluyendo pre-producción, post-producción, edición y gestión de campañas publicitarias.
</p>
</div>

<div class="cotizacion-info">
<div class="info-header">
<div class="info-logo">
<img src="https://emprendo.com.co/assets/img/imagotipo.webp" alt="La Rueda" style="height:50px;">
</div>
<div class="info-header-text">
<h4>Cotización</h4>
<p>Producción de 3 Reels Publicitarios · Agente Virtual Valeria</p>
</div>
</div>
<div class="info-grid-enhanced">
<div class="info-col">
<div class="info-item-enhanced">
<span class="info-label">Cliente</span>
<span class="info-value">La Rueda</span>
</div>
<div class="info-item-enhanced">
<span class="info-label">Atención a</span>
<span class="info-value">Don Juan Agustín</span>
</div>
</div>
<div class="info-col">
<div class="info-item-enhanced">
<span class="info-label">Cargo</span>
<span class="info-value">Gerente General</span>
</div>
<div class="info-item-enhanced">
<span class="info-label">Entrega estimada</span>
<span class="info-value">3 días</span>
</div>
</div>
<div class="info-col-full">
<div class="info-item-enhanced">
<span class="info-label">Proyecto</span>
<span class="info-value">Producción de 3 Reels Publicitarios - Agente Virtual Valeria</span>
</div>
</div>
</div>
</div>

<div class="tabla-cotizacion">
<table class="cotizacion-table">
<thead>
<tr>
<th>Concepto</th>
<th>Detalle</th>
<th>Horas</th>
<th>Valor Hora</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Pre-Producción</strong></td>
<td>Corrección de guiones, investigación, pruebas</td>
<td>3</td>
<td>$60.000</td>
<td><strong>$180.000</strong></td>
</tr>
<tr>
<td><strong>Post-producción motion graphics</strong></td>
<td>Creación y diseño de planos, interfaces de usuarios, textos y logos</td>
<td>6</td>
<td>$90.000</td>
<td><strong>$540.000</strong></td>
</tr>
<tr>
<td><strong>Post-producción IA & VFX</strong></td>
<td>Generación de voces IA & Musicalización</td>
<td>3</td>
<td>$70.000</td>
<td><strong>$210.000</strong></td>
</tr>
<tr>
<td><strong>Post-producción IA & VFX</strong></td>
<td>Creación de escenas IA</td>
<td>8</td>
<td>$60.000</td>
<td><strong>$480.000</strong></td>
</tr>
<tr>
<td><strong>Edición y Montaje</strong></td>
<td>3 Reels &lt;20s</td>
<td>3</td>
<td>$70.000</td>
<td><strong>$210.000</strong></td>
</tr>
<tr>
<td><strong>Gestión de ADs</strong></td>
<td>Creación de campaña (conjunto de anuncios)</td>
<td>1</td>
<td>$100.000</td>
<td><strong>$100.000</strong></td>
</tr>
</tbody>
</table>

<div class="total-pagar">
<div class="total-label">TOTAL A PAGAR:</div>
<div class="total-amount">$1.720.000</div>
</div>
</div>

<div class="hero-actions" style="justify-content:center; margin-top:35px;">
<a class="btn-cuenta-cobro" href="https://emprendo.com.co/larueda/campa%C3%B1amundial/20260522-0001%20Cuenta%20de%20Cobro%20La%20Rueda.pdf" target="_blank" rel="noopener" download>
Cuenta de cobro
</a>
</div>

<div class="hero-actions" style="justify-content:center; margin-top:50px;">
<button class="btn btn-cotizar" onclick="abrirModalCotizacion()">
Solicitar Propuesta
</button>
<a href="mailto:contacto@emprendo.com.co" class="btn btn-secondary">
Más Información
</a>
</div>
</div>
</section>

<section id="alcance" style="background:#fff;">
<div class="container">
<div class="section-header">
<div class="badge">
<span></span>
ALCANCE Y ENTREGABLES
</div>
<h2>
Detalles de la propuesta
</h2>
<p>
Información completa sobre el alcance del proyecto, entregables, derechos de uso,
siguientes pasos y términos y condiciones.
</p>
</div>

<div class="info-cards">
<!-- Alcance -->
<div class="info-card">
<div class="info-card-icon">📋</div>
<h3>Alcance</h3>
<p>
Incluye <strong>3 guiones/copy finales</strong> para cada reel, producción completa de los videos 
(visual + audio con voz de Valeria), edición profesional y entrega de los <strong>3 reels en formato 
vertical optimizado</strong> para redes sociales (9:16) y web.
</p>
<p style="margin-top:16px;">
<strong>Duración aproximada:</strong> 16-19 segundos por reel.
</p>
</div>

<!-- Entrega -->
<div class="info-card">
<div class="info-card-icon">📦</div>
<h3>Entrega</h3>
<p>
Entrega de los <strong>3 reels finales optimizados</strong> para publicación en Instagram, TikTok, 
Facebook, landing page y WhatsApp Business (formato vertical MP4).
</p>
<p style="margin-top:16px;">
Incluye validación de reproducción, legibilidad de textos, consistencia del mensaje y calidad de audio.
</p>
</div>

<!-- Derechos de Uso -->
<div class="info-card">
<div class="info-card-icon">⚖️</div>
<h3>Derechos de Uso</h3>
<p>
Se incluye <strong>derecho de uso ilimitado</strong> de los 3 reels para piezas digitales de la compañía 
(redes sociales, landing page, campañas publicitarias digitales y canales propios), conforme a los 
entregables definidos.
</p>
<p style="margin-top:16px;">
<strong>No incluye:</strong> Uso para terceros o reventa.
</p>
</div>

<!-- Siguientes Pasos -->
<div class="info-card">
<div class="info-card-icon">🚀</div>
<h3>Siguientes Pasos</h3>
<ul class="info-list">
<li>✓ Validar los 3 guiones/copy definitivos</li>
<li>✓ Definir el estilo visual y tono de cada reel</li>
<li>✓ Aprobar referencias visuales</li>
<li>✓ Coordinar sesión de grabación/captura de material (si aplica)</li>
<li>✓ Confirmar estrategia de publicación en cada canal</li>
</ul>
</div>
</div>

<!-- Términos y Condiciones -->
<div class="terminos-section" id="terminos">
<h3 class="terminos-title">Términos y Condiciones</h3>
<div class="terminos-grid">
<div class="termino-item">
<strong>📄 Oferta Comercial</strong>
<p>Esta cotización es una oferta comercial y no constituye factura de venta. Los valores están expresados en pesos colombianos (COP).</p>
</div>
<div class="termino-item">
<strong>📅 Vigencia</strong>
<p>La vigencia de la cotización es de 15 días calendario, salvo que se indique lo contrario por escrito.</p>
</div>
<div class="termino-item">
<strong>🎬 Inicio del Servicio</strong>
<p>El inicio del proyecto estará sujeto a la aceptación expresa por parte del cliente y, de ser aplicable, al pago del anticipo acordado.</p>
</div>
<div class="termino-item">
<strong>📐 Alcance</strong>
<p>El proyecto se ejecutará de acuerdo con los ítems descritos. Cualquier cambio de alcance será cotizado por separado.</p>
</div>
<div class="termino-item">
<strong>💳 Formas de Pago</strong>
<p>Se definirán en la orden de servicio/contrato. En caso de mora, podrán generarse suspensión de correcciones o entrega del servicio hasta normalizar pagos.</p>
</div>
<div class="termino-item">
<strong>©️ Propiedad Intelectual</strong>
<p>Los entregables serán del cliente una vez se encuentre pagada la totalidad del servicio, salvo que se pacte lo contrario por escrito.</p>
</div>
<div class="termino-item">
<strong>🛡️ Garantía/Soporte</strong>
<p>Aplica únicamente sobre los entregables descritos y por el término acordado. No cubre modificaciones de terceros ni uso indebido.</p>
</div>
<div class="termino-item">
<strong>🔒 Tratamiento de Datos</strong>
<p>El cliente autoriza el tratamiento de sus datos conforme a la Ley 1581 de 2012 y normas concordantes, para fines contractuales y administrativos.</p>
</div>
</div>
</div>

</div>
</section>

<section id="contacto" style="background:#fff;">
<div class="container">
<div class="section-header">
<div class="badge">
<span></span>
INFORMACIÓN DE CONTACTO
</div>
<h2>
¿Listo para comenzar?
</h2>
<p>
Nuestro equipo está disponible para resolver cualquier duda y acompañarte
en todo el proceso de producción de tus reels.
</p>
</div>

<div class="contacto-grid">
<div class="contacto-card">
<div class="contacto-icon">📍</div>
<h4>Dirección</h4>
<p>Carrera 51a # 169A - 60 Norte<br>Bogotá, Colombia</p>
</div>
<div class="contacto-card">
<div class="contacto-icon">📧</div>
<h4>Email</h4>
<p><a href="mailto:nevin@emprendo.com.co">nevin@emprendo.com.co</a></p>
</div>
<div class="contacto-card">
<div class="contacto-icon">📱</div>
<h4>Teléfono</h4>
<p><a href="tel:+573028424064">(57) 302 842 40 64</a></p>
</div>
<div class="contacto-card">
<div class="contacto-icon">🌐</div>
<h4>Sitio Web</h4>
<p><a href="https://emprendo.com.co" target="_blank">https://emprendo.com.co</a></p>
</div>
</div>
</div>
</section>

<section class="cta">
<div class="container">
<div class="badge">
<span></span>
¿LISTO PARA COMENZAR?
</div>
<h2>
Impulsa tu campaña del Mundial con contenido profesional
</h2>
<p>
Los reels son el formato con mayor engagement en redes sociales.
Aprovecha esta oportunidad para conectar con tu audiencia de manera efectiva
y convertir la pasión por el fútbol en ventas reales para La Rueda.
<br><br>
Selecciona tu paquete y recibe una cotización personalizada en minutos.
</p>
<div class="hero-actions" style="justify-content:center; margin-top:50px;">
<a href="#paquetes" class="btn btn-primary">
Ver Cotización Completa
</a>
<a href="mailto:contacto@emprendo.com.co" class="btn btn-secondary">
Más Información
</a>
</div>
</div>
</section>

<footer class="footer">
<div class="container footer-inner">
<span>
Propuesta comercial desarrollada por eMprendo
</span>
<a href="https://emprendo.com.co/" target="_blank">
<img src="https://emprendo.com.co/assets/img/imagotipo.webp" alt="eMprendo">
</a>
</div>
</footer>

<!-- MODAL DE COTIZACIÓN -->
<div id="modalCotizacion" class="modal">
<div class="modal-content">
<button class="modal-close" onclick="cerrarModal()">×</button>
<div class="modal-icon">📋</div>
<h3>Solicitar Cotización</h3>
<p>
Completa tus datos y te enviaremos la cotización detallada
de los reels seleccionados.
</p>
<div class="modal-price" id="modalPrecio">$0 COP</div>
<p id="modalDetalle" style="font-size:14px;margin-bottom:24px;"></p>

<form id="formCotizacion" onsubmit="enviarCotizacion(event)">
<div class="form-group">
<label>Nombre completo *</label>
<input type="text" id="nombre" required placeholder="Tu nombre">
</div>
<div class="form-group">
<label>Email *</label>
<input type="email" id="email" required placeholder="tu@email.com">
</div>
<div class="form-group">
<label>Teléfono *</label>
<input type="tel" id="telefono" required placeholder="+57 300 123 4567">
</div>
<div class="form-group">
<label>Empresa</label>
<input type="text" id="empresa" placeholder="La Rueda">
</div>
<div class="form-group">
<label>Comentarios adicionales</label>
<textarea id="comentarios" placeholder="Cuéntanos más sobre tu proyecto..."></textarea>
</div>

<div class="modal-actions">
<button type="button" class="btn-cancel" onclick="cerrarModal()">Cancelar</button>
<button type="submit" class="btn-confirm">Enviar Solicitud</button>
</div>
</form>
</div>
</div>

<!-- MODAL DE CONFIRMACIÓN -->
<div id="modalConfirmacion" class="modal">
<div class="modal-content">
<button class="modal-close" onclick="cerrarModalConfirmacion()">×</button>
<div class="modal-icon">✓</div>
<h3>¡Solicitud Enviada!</h3>
<p>
Hemos recibido tu solicitud de cotización.
Nuestro equipo se pondrá en contacto contigo en las próximas 24 horas.
</p>
<p style="margin-top:20px;font-size:14px;">
Revisa tu email (incluyendo spam) para más detalles.
</p>
<div class="modal-actions">
<button class="btn-confirm" onclick="cerrarModalConfirmacion()" style="width:100%;">
Entendido
</button>
</div>
</div>
</div>

<!-- MODAL DE IMAGEN -->
<div id="modalImagen" class="modal-imagen">
<div class="modal-imagen-content">
<button class="modal-imagen-close" onclick="cerrarImagenModal()">×</button>
<img id="modalImagenSrc" src="" alt="">
<div class="modal-imagen-title" id="modalImagenTitle"></div>
</div>
</div>

<!-- MODAL DE VIDEO -->
<div id="modalVideo" class="modal-video">
<div class="modal-video-content">
<button class="modal-imagen-close" onclick="cerrarVideoModal()" aria-label="Cerrar video">×</button>
<video id="modalVideoSrc" src="" controls playsinline></video>
<div class="modal-video-title" id="modalVideoTitle"></div>
</div>
</div>

<script>
// Desplegar y ocultar los planos de cada reel
function toggleReelPlanos(button) {
    const reelSection = button.closest('.reel-collapsible');
    const detailBody = reelSection.querySelector('.reel-collapsible-body');
    const isOpen = reelSection.classList.toggle('is-open');
    
    detailBody.hidden = !isOpen;
    button.setAttribute('aria-expanded', isOpen.toString());
    button.textContent = isOpen ? 'Ocultar planos' : 'Ver planos';
}

// Abrir modal de video
function abrirVideoModal(src, title) {
    const modal = document.getElementById('modalVideo');
    const video = document.getElementById('modalVideoSrc');
    
    document.getElementById('modalVideoTitle').textContent = title;
    video.src = src;
    video.load();
    modal.classList.add('active');
    document.body.style.overflow = 'hidden';
    
    video.play().catch(() => {});
}

// Cerrar modal de video
function cerrarVideoModal() {
    const modal = document.getElementById('modalVideo');
    const video = document.getElementById('modalVideoSrc');
    
    video.pause();
    video.removeAttribute('src');
    video.load();
    modal.classList.remove('active');
    document.body.style.overflow = 'auto';
}

// Abrir modal de imagen
function abrirImagenModal(src, title) {
    document.getElementById('modalImagenSrc').src = src;
    document.getElementById('modalImagenTitle').textContent = title;
    document.getElementById('modalImagen').classList.add('active');
    document.body.style.overflow = 'hidden';
}

// Cerrar modal de imagen
function cerrarImagenModal() {
    document.getElementById('modalImagen').classList.remove('active');
    document.body.style.overflow = 'auto';
}

// Abrir modal de cotización
function abrirModalCotizacion() {
    document.getElementById('modalPrecio').textContent = '$1.720.000 COP';
    document.getElementById('modalDetalle').textContent = 'Producción completa de 3 reels promocionales para La Rueda';
    document.getElementById('modalCotizacion').classList.add('active');
    document.body.style.overflow = 'hidden';
}

// Cerrar modal
function cerrarModal() {
    document.getElementById('modalCotizacion').classList.remove('active');
    document.body.style.overflow = 'auto';
}

// Cerrar modal de confirmación
function cerrarModalConfirmacion() {
    document.getElementById('modalConfirmacion').classList.remove('active');
    document.body.style.overflow = 'auto';
    
    // Resetear formulario
    document.getElementById('formCotizacion').reset();
}

// Enviar cotización
function enviarCotizacion(event) {
    event.preventDefault();
    
    const nombre = document.getElementById('nombre').value;
    const email = document.getElementById('email').value;
    const telefono = document.getElementById('telefono').value;
    const empresa = document.getElementById('empresa').value;
    const comentarios = document.getElementById('comentarios').value;
    
    const formData = {
        nombre: nombre,
        email: email,
        telefono: telefono,
        empresa: empresa || 'No especificada',
        comentarios: comentarios || 'Sin comentarios',
        reels: 'Producción completa de 3 reels promocionales',
        total: '$1.720.000 COP',
        fecha: new Date().toLocaleString('es-CO')
    };
    
    // Enviar a PHP backend
    fetch('notificar.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        console.log('Respuesta del servidor:', data);
        cerrarModal();
        setTimeout(() => {
            document.getElementById('modalConfirmacion').classList.add('active');
        }, 300);
    })
    .catch(error => {
        console.error('Error:', error);
        cerrarModal();
        setTimeout(() => {
            document.getElementById('modalConfirmacion').classList.add('active');
        }, 300);
    });
}

// Cerrar modales al hacer clic fuera
window.onclick = function(event) {
    const modalCotizacion = document.getElementById('modalCotizacion');
    const modalConfirmacion = document.getElementById('modalConfirmacion');
    const modalImagen = document.getElementById('modalImagen');
    const modalVideo = document.getElementById('modalVideo');
    
    if (event.target === modalCotizacion) {
        cerrarModal();
    }
    if (event.target === modalConfirmacion) {
        cerrarModalConfirmacion();
    }
    if (event.target === modalImagen) {
        cerrarImagenModal();
    }
    if (event.target === modalVideo) {
        cerrarVideoModal();
    }
}

// Cerrar modales de imagen y video con tecla ESC
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        const modalImagen = document.getElementById('modalImagen');
        const modalVideo = document.getElementById('modalVideo');
        
        if (modalImagen.classList.contains('active')) {
            cerrarImagenModal();
        }
        if (modalVideo.classList.contains('active')) {
            cerrarVideoModal();
        }
    }
});
</script>

</body>
</html>
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64