*{ margin: 0; padding: 0; list-style: none; text-decoration: none; border: none; outline: none; box-sizing: border-box; }
body{ overflow-x: hidden; font-size: 10px; background-color: #f7f9fc; }

/* FUENTES */
@font-face { font-family: oswald; src: url('../Oswald.ttf'); }
@font-face { font-family: anton; src: url('../Anton-Regular.ttf'); }
@font-face { font-family: exo; src: url('../exodemi-bold.otf'); }
@font-face { font-family: exo-light; src: url('../exolight.otf'); }

/* BARRA SUPERIOR */
.conteiner-arriba{ width: 100%; padding: 5px 0; background: #000D58; border-bottom: 2px solid #000; text-align: center; }
.caja1-ul{ display: flex; justify-content: center; align-items: center; gap: 20px; }
.caja1-li{ font-size: 1.5em; }
.caja1-li i { color: #F7FF4D; margin-right: 5px; }
.caja1-a{ color: #fff; font-family: sans-serif; font-size: 1em; transition: 0.3s; }
.caja1-a:hover{ color: #F7FF4D; }

/* NAV */
.conteiner{ position: relative; width: 100%; padding: 10px 20px; background: #000D58; display: flex; justify-content: space-between; align-items: center; z-index: 3;}
.logo{ width: 15%; max-width: 250px; }
.conteiner-nav{ flex-grow: 1; text-align: right; }
.links { display: inline-block; }
.conteiner-li{ font-family: oswald; display: inline-block; margin: 0 10px; }
.conteiner-a{ color: #fff; font-size: 1.8em; padding: 8px 15px; border-radius: 5px; transition: all 0.3s ease; }
.conteiner-a:hover { background-color: #F7FF4D; color: #000; }
.toggle{ border: 2px solid #fff; color: #fff; position: absolute; top: 15px; right: 20px; font-size: 30px; padding: 5px 10px; border-radius: 5px; cursor: pointer; display: none; }

/* HERO SECCIÓN */
.section-descripcion{ display: flex; flex-wrap: wrap; background: #fff; margin-bottom: 40px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.div-img-descripcion{ position: relative; width: 45%; min-height: 50vh; overflow: hidden; }
.img{ width: 100%; height: 100%; object-fit: cover; }
.div-texto-descripcion{ width: 55%; padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.h1{ font-size: 4em; font-family: exo; color: #000D58; margin-bottom: 20px; line-height: 1.1; }
.p{ font-family: exo-light; font-size: 1.8em; line-height: 1.6; color: #444; margin-bottom: 30px; }

/* BOTONES DE CARRUSEL */
.botones{ font-size: 24px; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); text-align: center; position: absolute; color: #000; top: 50%; transform: translateY(-50%); cursor: pointer; transition: 0.3s; z-index: 2;}
.botones:hover{ background-color: #F7FF4D; transform: translateY(-50%) scale(1.1); }
.atras{ left: 10px; } .adelante{ right: 10px; }

/* BTN HERO GREEN (CTA) */
.btn-hero-green { align-self: flex-start; background: #25D366; color: white; padding: 15px 30px; font-size: 2em; font-family: oswald; border-radius: 50px; box-shadow: 0 5px 15px rgba(37,211,102,0.4); transition: 0.3s; }
.btn-hero-green:hover { background: #1ebe5d; transform: translateY(-3px); color: white; }

/* TÍTULOS DE SECCIÓN */
.h2-div{ text-align: center; padding: 40px 20px 20px; }
.h2-solo{ font-family: exo; font-size: 3.5em; color: #000D58; text-transform: uppercase;}
.subtitulo-seccion { font-size: 1.8em; font-family: exo-light; color: #555; margin-top: 10px; }
.bg-light { background-color: #fff; padding-bottom: 40px;}

/* GRIDS DE PRODUCTOS */
.conteiner-grid-trimble{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; max-width: 1400px; margin: 0 auto; padding: 20px; }
.grid-trimble{ background-color: #fff; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); overflow: hidden; display: flex; flex-direction: column; border-top: 5px solid #000D58; transition: transform 0.3s ease; }
.grid-trimble:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }

/* CONTENIDO DE TARJETAS (AUMENTADO TAMAÑO 30%) */
.div-h3{ background: #f0f4f8; padding: 15px; text-align: center; }
.h3-grid{ font-family: exo; font-size: 2.7em; color: #000D58; } /* Aumentado de 2.2 a 2.8 */
.card-content { display: flex; flex: 1; padding: 20px; gap: 15px;}
.div-foto{ flex: 1; display: flex; align-items: center; justify-content: center; }
.img-producto{ max-width: 100%; max-height: 180px; object-fit: contain; }
.div-descripcion{ flex: 1; text-align: left; }
.div-descripcion h4{ font-family: exo; font-size: 1.8em; color: #000D58; margin-top: 10px; } /* Aumentado de 1.4 a 1.8 */
.div-descripcion .p-descripcion{ font-family: exo-light; font-size: 1.4em; line-height: 1.4; color: #555; } /* Aumentado de 1.3 a 1.8 */

/* FOOTER TARJETA (Logo y Botón) */
.card-footer { padding: 15px 20px; background: #fafafa; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; }
.img-trimble-logo { height: 25px; object-fit: contain; }
.btn-card-action { background: #000D58; color: #fff; font-family: oswald; font-size: 1.5em; padding: 8px 20px; border-radius: 5px; transition: 0.3s; }
.btn-card-action:hover { background: #F7FF4D; color: #000; }

/* DRON SECCIÓN */
.grid-dron-especial { grid-template-columns: 1fr 1.5fr 1fr; align-items: stretch; }
.info-card { background: #fff; padding: 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.h3-dron { font-family: exo; font-size: 2.8em; color: #000D58; margin-bottom: 20px; border-bottom: 2px solid #F7FF4D; display: inline-block; padding-bottom: 5px; } /* Aumentado de 2.2 a 2.8 */
.lista-dron li { font-family: exo-light; font-size: 1.9em; line-height: 1.6; margin-bottom: 15px; color: #444;} /* Aumentado de 1.5 a 1.9 */
.grid-dron-fotos { position: relative; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
.imgdron { width: 100%; height: 100%; object-fit: cover; }
.div-btn-card { margin-top: 30px; text-align: center; }

/* =========================================
   FOOTER
   ========================================= */
.conteiner-footer { display: flex; width: 100%; min-height: 60vh; background: #0E3655; margin-top: 40px; padding-top: 30px; padding-bottom: 30px; box-sizing: border-box; }
.footer-div-info { width: 25%; border-right: 2px solid #000; text-align: center; padding: 0 20px; }
.footer-div-formulario { width: 45%; border-right: 2px solid #000; text-align: center; padding: 0 20px; }
.footer-div-extra { width: 30%; text-align: center; padding: 0 20px; }
.h4-redirecciones, .h4-formulario, .footer-contacto { color: #fff; font-size: 3em; font-family: exo, sans-serif; margin-bottom: 25px; }
.ul-redirecciones { text-align: left; display: inline-block; }
.li-redirecciones { margin-top: 15px; }
.iconos-redirecciones { color: #F7FF4D; margin-right: 8px; font-size: 1.2em; }
.a-redirecciones { color: #fff; font-family: exo-light, sans-serif; font-size: 1.8em; }
.a-redirecciones:hover { color: #F7FF4D; }
.label { display: block; color: #fff; font-size: 2.2em; font-family: exo-light, sans-serif; margin-top: 15px; margin-bottom: 5px; }
.input { width: 70%; height: 35px; padding: 5px 10px; border: 2px solid #EBF21F; font-family: exo-light, sans-serif; font-size: 1.5em; margin: 0 auto; display: block; border-radius: 0; }
textarea.input { height: 80px; resize: none; }
.div-boton-enviar { width: 70%; margin: 0 auto; text-align: right; margin-top: 5px; }
.boton-enviar { background: #fff; color: #000; border: 2px solid #000; border-radius: 8px; font-size: 1.8em; font-family: exo, sans-serif; padding: 5px 25px; cursor: pointer; transition: 0.3s; }
.boton-enviar:hover { background: #F7FF4D; }
.div-ul-footer { text-align: left; display: inline-block; }
.li-footer { font-size: 1.6em; margin-bottom: 20px; display: flex; align-items: flex-start; }
.iconos-contactos { color: #F7FF4D; margin-right: 10px; margin-top: 4px; font-size: 1.2em; }
.los-p-contacto { color: #fff; font-family: exo-light, sans-serif; line-height: 1.4; }
.los-a-contacto { color: #fff; font-family: exo-light, sans-serif; transition: 0.3s; }
.los-a-contacto:hover { color: #F7FF4D; }

/* WHATSAPP FLOTANTE */
.div-whatsapp{ position: fixed; width: 60px; height: 60px; z-index: 100; right: 20px; bottom: 20px; transition: 0.3s; }
.img-whatsapp{ width: 100%; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); animation: pulse 2s infinite; }
.div-whatsapp:hover{ transform: scale(1.1); }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* RESPONSIVO */
@media only screen and (max-width: 900px) {
    body { font-size: 8px; }
    .section-descripcion { flex-direction: column; }
    .div-img-descripcion, .div-texto-descripcion { width: 100%; }
    .grid-dron-especial { grid-template-columns: 1fr; }
    .grid-dron-fotos { height: 300px; }
    .card-content { flex-direction: column; text-align: center; }
    .div-descripcion { text-align: center; }
    
    .logo { width: 50%; max-width: 200px; margin-bottom: 10px;}
    .toggle { display: block; top: 20px; right: 20px; }
    .links { position: absolute; flex-direction: column; background: #000D58; width: 100%; top: -400px; left: 0; transition: 0.5s; z-index: 2; }
    .links.active { top: 100%; }
    .conteiner-li { display: block; margin: 15px 0; text-align: center; }
    
    .conteiner-footer { flex-direction: column; }
    .footer-div-info, .footer-div-formulario, .footer-div-extra { width: 100%; border-right: none; border-bottom: 2px solid #000; padding: 30px 20px; }
    .footer-div-extra { border-bottom: none; }
    .input, .div-boton-enviar { width: 90%; }
}