@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(/fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(/fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(/fonts/barlowcondensed-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(/fonts/barlowcondensed-800.woff2) format("woff2")}

:root{
  --indigo:#283891;   /* azul del logo */
  --lima:#8DC63F;     /* verde del logo */
  --tinta:#161C3D;    /* texto */
  --arrozal:#EFF6E4;  /* fondo de secciones */
  --linea:#D9DDEB;
  --wa:#25D366;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--tinta);font:400 1.0625rem/1.6 Barlow,system-ui,sans-serif}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--indigo)}
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
.oscuro :focus-visible{outline-color:var(--lima)}

h1,h2,h3{font-family:"Barlow Condensed",Barlow,sans-serif;color:var(--indigo);line-height:1.04;margin:0 0 .6em;text-wrap:balance}
h1{font-weight:800;font-size:clamp(2.6rem,7vw,4.4rem)}
h2{font-weight:800;font-size:clamp(2rem,4.6vw,3rem)}
h3{font-weight:700;font-size:1.5rem;line-height:1.15}
p{margin:0 0 1em}

.wrap{max-width:72rem;margin-inline:auto;padding-inline:1rem}
.prosa>*{max-width:42rem}  /* columna de lectura cómoda, alineada a la izquierda con el título (no centrada) */
.prosa>.botones{max-width:none}
.prosa h2{margin-top:1.6em;font-size:clamp(1.75rem,4vw,2.4rem)}
.prosa ul,.prosa ol{padding-left:1.25rem}
.prosa li{margin-bottom:.4em}
.sec{padding-block:clamp(3rem,8vw,5.5rem)}
.arrozal{background:var(--arrozal)}
.intro{font-size:1.2rem;max-width:40rem}
.saltar{position:absolute;left:-999px}
.saltar:focus{left:1rem;top:1rem;z-index:20;background:#fff;padding:.5rem 1rem}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.7rem 1.3rem;border-radius:.5rem;font:500 1.0625rem/1.2 Barlow,sans-serif;text-decoration:none}
.btn svg{width:1.3em;height:1.3em;flex:none}
.btn-wa{background:var(--lima);color:var(--tinta)}
.btn-wa:hover{background:#7DB533}
.btn-sec{border:2px solid var(--indigo);color:var(--indigo)}
.btn-sec:hover{background:var(--arrozal)}
.oscuro .btn-sec{border-color:#fff;color:#fff}
.oscuro .btn-sec:hover{background:rgba(255,255,255,.1)}
.botones{display:flex;flex-wrap:wrap;gap:.75rem}

/* Cabecera */
.top-in{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1rem;padding-block:.75rem}
.marca img{height:clamp(2.2rem,11vw,2.6rem);width:auto}  /* en celulares angostos el logo se achica para que «Menú» quepa al lado */
.top-wa{display:none;min-height:2.6rem;padding:.45rem .9rem;font-size:1rem}
.top{position:relative}
.menu{display:none;flex-wrap:wrap;margin-left:auto}
.menu a{flex:none;padding:.6rem .55rem;color:var(--tinta);text-decoration:none;font-weight:500;border-bottom:3px solid transparent}
.menu a:hover{color:var(--indigo)}
.menu a[aria-current]{color:var(--indigo);border-bottom-color:var(--lima)}
/* En celular el menú va dentro de un botón «Menú» y se abre como lista debajo de la cabecera */
.menu-cel{margin-left:auto}
.menu-cel summary{list-style:none;display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:.4rem .9rem;border:2px solid var(--indigo);border-radius:.5rem;color:var(--indigo);font-weight:500;cursor:pointer}
.menu-cel summary::-webkit-details-marker{display:none}
.menu-cel summary svg{width:1.3rem;height:1.3rem}
.menu-cel .cerrar,.menu-cel[open] .abrir{display:none}
.menu-cel[open] .cerrar{display:inline}
.menu-cel nav{position:absolute;inset:100% 0 auto;z-index:25;background:#fff;border-block:1px solid var(--linea);box-shadow:0 12px 20px rgba(22,28,61,.12);padding-block:.4rem}
.menu-cel nav a{display:block;padding:.8rem 1rem;border-left:4px solid transparent;color:var(--tinta);font-size:1.125rem;font-weight:500;text-decoration:none}
.menu-cel nav a[aria-current]{border-left-color:var(--lima);background:var(--arrozal);color:var(--indigo)}
@media (min-width:62rem){
  .top-in{column-gap:1.5rem}
  .menu{display:flex}
  .menu-cel{display:none}
  .top-wa{display:inline-flex}
}

/* Portada: foto, y encima el video si lo hay (la foto se ve mientras carga) */
.hero{display:grid;background:var(--arrozal)}
.hero-foto{position:relative;aspect-ratio:1275/855;overflow:hidden}
.hero-foto img,.hero-foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.hero-foto video{display:none}}
.hero-txt{padding:2rem 1rem 3rem}
.hero-txt p{font-size:1.2rem;max-width:34rem}
@media (min-width:62rem){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:36rem}
  .hero-foto{order:2;aspect-ratio:auto}
  .hero-txt{align-self:center;padding:4rem 3rem 4rem max(1.5rem,calc((100vw - 72rem)/2 + 1rem))}
}

.franja{background:var(--indigo);color:#fff;padding-block:1.6rem}
.franja p{margin:0;font:700 clamp(1.45rem,3.4vw,2.2rem)/1.15 "Barlow Condensed",sans-serif;max-width:52rem}

/* Servicios en portada */
.tres{display:grid;gap:2rem;padding:0;margin:0 0 2rem;list-style:none}
.tres li{border-top:4px solid var(--lima);padding-top:1rem}
@media (min-width:48rem){.tres{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Mochila contra dron */
.compara{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.4}
.compara th,.compara td{padding:.7rem .45rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea)}
@media (min-width:48rem){.compara{font-size:1rem}.compara th,.compara td{padding:.85rem .75rem}}
.compara thead th{font:700 1.3rem "Barlow Condensed",sans-serif;border-bottom:2px solid var(--indigo)}
.compara thead th:last-child{background:var(--indigo);color:#fff}
.compara tbody th{font-weight:500;width:22%}
.compara td:last-child{font-weight:500;color:var(--indigo);background:#F5F7FC}

/* Pasos: es una secuencia real */
.pasos{list-style:none;padding:0;margin:0;display:grid;gap:1.75rem;counter-reset:paso}
.pasos li{counter-increment:paso}
.pasos li::before{content:counter(paso);display:block;font:800 3rem/1 "Barlow Condensed",sans-serif;color:var(--indigo);border-bottom:4px solid var(--lima);width:fit-content;margin-bottom:.5rem}
.pasos h3{margin-bottom:.3em}
@media (min-width:48rem){.pasos{grid-template-columns:repeat(4,minmax(0,1fr))}}

.chips{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.6rem}
.chips a{display:block;padding:.55rem 1.1rem;border:1.5px solid var(--indigo);border-radius:999px;text-decoration:none;font-weight:500}
.chips a:hover{background:#fff}

.ig{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;border-block:1px solid var(--linea);padding-block:2rem}
.ig h2{margin:0 0 .2em}
.ig p{margin:0}

/* Preguntas */
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{display:flex;justify-content:space-between;gap:1rem;padding-block:1rem;cursor:pointer;font-weight:500;font-size:1.125rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:700 1.6rem/1 "Barlow Condensed",sans-serif;color:var(--indigo)}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding-bottom:1rem;max-width:42rem}

/* Cierre y pie */
.cierre{background:var(--indigo);color:#fff}
.cierre h2{color:#fff}
.cierre p{font-size:1.2rem;max-width:36rem}
.pie{background:var(--tinta);color:#C9CEE4;padding-block:3rem 5.5rem;font-size:.97rem}
.pie a{color:#fff}
.pie-in{display:grid;gap:2rem;margin-bottom:2rem}
.pie img{height:2.4rem;width:auto;margin-bottom:1rem}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin-bottom:.35rem}
.pie h2{color:#fff;font-size:1.25rem;margin-bottom:.6rem}
@media (min-width:48rem){.pie-in{grid-template-columns:2fr 1fr 1fr}}

/* Páginas internas */
.cabeza{background:var(--arrozal);padding-block:clamp(2.5rem,7vw,4.5rem)}
.cabeza p{font-size:1.2rem;max-width:40rem;margin:0}
.miga{font-size:.95rem;margin-bottom:1rem}
.lista-guias{list-style:none;padding:0;margin:0}
.lista-guias li{border-top:4px solid var(--lima);padding-block:1.25rem 1.5rem}
.lista-guias h2{font-size:1.75rem;margin-bottom:.3em}
.lista-guias h2 a{text-decoration:none}
.lista-guias h2 a:hover{text-decoration:underline}
.nota{border-left:4px solid var(--lima);padding:.75rem 1rem;background:var(--arrozal)}

.ig+.faq{margin-top:3.5rem}
/* WhatsApp siempre a mano: en celular, barra fija abajo; en computadora, burbuja */
body{padding-bottom:4.75rem}
.accion{position:fixed;inset:auto 0 0;z-index:30;display:grid;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--linea);box-shadow:0 -4px 14px rgba(22,28,61,.1)}
.wa-flot{display:none;color:#fff;position:fixed;right:1rem;bottom:1rem;z-index:30;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--wa);place-items:center;box-shadow:0 4px 14px rgba(22,28,61,.3)}
.wa-flot svg{width:2rem;height:2rem}
@media (min-width:62rem){body{padding-bottom:0}.accion{display:none}.wa-flot{display:grid}}