/* Portada dronblogs — extraida del diseno. La barra vive en nav.css. */
    html, body { margin: 0; padding: 0; background: #0E0E0E; }
    body { font-family: Inter, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
    * { box-sizing: border-box; }
    a { color: #EDEEF6; }
    a:hover { color: #FFFFFF; }
    a:focus-visible { outline: 2px solid #EDEEF6; outline-offset: 4px; }

    @keyframes db-entra-texto {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes db-entra-capa {
      from { opacity: 0; transform: translateY(52px) scale(0.975); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes db-pulso {
      0%, 100% { transform: scaleY(0.3); transform-origin: top; opacity: 0.45; }
      50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
    }

    /* ---------- autor y metodo ---------- */
    .db-metodo { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 48ch; }
    .db-metodo li { position: relative; padding-left: 20px; font-size: 0.94rem; line-height: 1.6; color: #9C9C9C; }
    .db-metodo li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 8px; height: 1px; background: #6E6E6E; }
    .db-metodo b { font-weight: 600; color: #D8D9E0; }

    .db-ficha { display: grid; grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 34px);
      align-items: center; padding: clamp(18px, 2vw, 26px); border-radius: 16px;
      background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09); }
    .db-retrato { overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 5; background: #191919; }
    .db-retrato img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .db-nombre { margin: 0; font-family: 'Libre Bodoni', Georgia, serif; font-weight: 600; font-style: italic;
      font-size: 1.6rem; line-height: 1; color: #E6E8EC; }
    .db-rol { margin: 9px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #8A8A8A; }
    .db-bio { margin: 16px 0 0; font-size: 0.94rem; line-height: 1.62; color: #A6A6A6; }
    .db-ficha .db-link { margin-top: 20px; }

    /* ---------- silos ---------- */
    /* el panel no tiene borde: su fondo nace transparente y cuaja en negro,
       asi que la portada se disuelve dentro de el en vez de cortarse */
    .db-panel { position: relative; z-index: 3; margin-top: -78vh; padding-top: 20vh;
      background: linear-gradient(180deg, rgba(14,14,14,0) 0%, rgba(14,14,14,0.28) 6vh, rgba(14,14,14,0.78) 13vh, #0E0E0E 19vh); }
    /* bruma: solo pintura, sin backdrop-filter. desenfocar en vivo un fondo animado
       obliga a rasterizar la banda en cada frame y el scroll se atasca justo aqui */
    .db-velo { position: absolute; top: 0; left: 0; right: 0; height: 26vh; pointer-events: none;
      background: linear-gradient(180deg,
        rgba(170,170,170,0)    0%,
        rgba(170,170,170,0.05) 12%,
        rgba(150,150,150,0.09) 30%,
        rgba(90,90,90,0.06)    56%,
        rgba(40,40,40,0.02)    80%,
        rgba(14,14,14,0)      100%); }
    .db-panel > .db-sec:first-of-type { border-top: none; padding-top: 0; }
    .db-sec { position: relative; padding: clamp(78px, 10vh, 132px) clamp(24px, 5vw, 64px); border-top: 1px solid rgba(255,255,255,0.075); }
    .db-wrap { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(38px, 5vw, 88px); align-items: start; }
    .db-sec--inv .db-col-txt  { grid-column: 2; grid-row: 1; }
    .db-sec--inv .db-col-silo { grid-column: 1; grid-row: 1; }
    .db-col-txt { position: sticky; top: 13vh; }

    .db-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: #8A8A8A; }
    .db-eyebrow i { display: block; flex: 0 0 26px; width: 26px; height: 1px; background: #5A5A5A; }
    .db-h2 { margin: 0; font-family: 'Libre Bodoni', Georgia, serif; font-weight: 600; font-style: italic; text-transform: uppercase; font-size: clamp(1.85rem, 2.9vw, 2.85rem); line-height: 1.06; letter-spacing: -0.01em; color: #E6E8EC; }
    .db-p { margin: 22px 0 0; max-width: 46ch; font-size: 1rem; line-height: 1.66; color: #A6A6A6; }
    .db-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; padding-bottom: 5px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: #EDEEF6; text-decoration: none; border-bottom: 1px solid rgba(237,238,246,0.28); transition: border-color 220ms ease; }
    .db-link:hover { border-bottom-color: #EDEEF6; }
    .db-link svg { transition: transform 260ms cubic-bezier(0.16,0.84,0.3,1); }
    .db-link:hover svg { transform: translateX(3px); }

    .db-col-silo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px clamp(16px, 1.8vw, 24px); }
    .db-card { position: relative; display: block; text-decoration: none; }
    .db-card--ancho { grid-column: 1 / -1; }
    .db-shot { display: block; overflow: hidden; border-radius: 10px; background: #191919; border: 1px solid rgba(255,255,255,0.09); aspect-ratio: 4 / 3; }
    .db-card--ancho .db-shot { aspect-ratio: 16 / 7; }
    .db-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.16,0.84,0.3,1), filter 400ms ease; filter: saturate(0.92) contrast(1.02); }
    .db-card:hover .db-shot img { transform: scale(1.045); filter: saturate(1) contrast(1.02); }
    .db-badge { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 100px; background: rgba(14,14,14,0.72); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.16); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #EDEEF6; }
    .db-t { display: block; margin-top: 12px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.005em; line-height: 1.35; color: #C9CAD2; transition: color 200ms ease; }
    .db-card:hover .db-t { color: #FFFFFF; }
    .db-card--pillar .db-t { font-size: 15px; color: #E6E8EC; }

    .db-pie { padding: 46px clamp(24px, 5vw, 64px) 58px; border-top: 1px solid rgba(255,255,255,0.075); }
    .db-pie-in { max-width: 1240px; margin: 0 auto; display: grid; gap: 18px; justify-items: center; text-align: center; }
    .db-afiliado { margin: 0; max-width: 64ch; font-size: 12px; line-height: 1.6; color: #7E7E7E; }
    .db-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
    .db-legal a, .db-legal-js { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; }
    .db-legal a { color: #C9CAD2; }
    .db-legal a:hover { color: #FFFFFF; }
    .db-legal-js { color: #8A8A8A; }
    .db-copy { margin: 0; font-size: 11.5px; letter-spacing: 0.03em; color: #6E6E6E; }

    .db-rev { opacity: 0; transform: translateY(26px); transition: opacity 800ms cubic-bezier(0.16,0.84,0.3,1), transform 800ms cubic-bezier(0.16,0.84,0.3,1); }
    .db-rev.db-visto { opacity: 1; transform: none; }
    .db-col-silo.db-rev { transition-delay: 90ms; }

    /* el menu de escritorio se convierte en panel a pantalla completa */
    /* alto real de pantalla tambien fuera de movil: en navegadores con barra
       retractil 100vh se sale, y la portada pega un salto al hacer scroll */
    @supports (height: 100svh) {
      #db-escena { height: 250svh !important; }
      #db-fija   { height: 100svh !important; }
    }
    /* la barra de admin de WP empuja el documento 32px (46px en tablet) y
       descuadra el sticky de la portada. Solo lo ve quien esta logueado. */
    body.admin-bar .db-nav { top: 32px; }
    body.admin-bar #db-fija { top: 32px !important; height: calc(100svh - 32px) !important; }
    @media (max-width: 760px) {
      /* el panel sube antes y arranca con menos aire: en movil el hueco entre
         el despegue y los silos se hacia largo */
      .db-panel { margin-top: -74vh; padding-top: 13vh; }
      .db-velo { height: 22vh; }
      /* alto real de pantalla: con la barra del navegador, 100vh se sale.
         menos recorrido = la animacion se completa antes y el silo llega antes */
      #db-escena { height: 205svh !important; }
      #db-fija { height: 100svh !important; }

      /* la portada se ordena en columna: titular, banda de drones, texto y CTA.
         el hueco es elastico: cede altura antes que dejar que algo se recorte */
      #db-texto { top: 0 !important; left: 20px !important; width: calc(100% - 40px) !important; height: 100%; padding: 3vh 0 4vh; }
      #db-texto > .db-entra-texto { display: flex; flex-direction: column; height: 100%; }
      #db-texto > .db-entra-texto > * { flex: 0 0 auto; }
      #db-titulo { font-size: 2.05rem !important; }
      #db-hueco { display: block !important; flex: 0 1 28vh !important; min-height: 16vh; }
      #db-parrafo { margin-top: 30px !important; font-size: 0.90rem !important; line-height: 1.52 !important; }
      #db-fpv   { left: 1vw   !important; top: 23% !important; width: 44vw !important; }
      #db-vtol  { left: 48vw  !important; top: 22% !important; width: 50vw !important; }
      #db-mavic { left: 15vw  !important; top: 29% !important; width: 68vw !important; }

      .db-wrap { grid-template-columns: minmax(0, 1fr); gap: 34px; }
      /* en móvil manda el orden del DOM: primero el texto, después el silo */
      .db-sec--inv .db-col-txt, .db-sec--inv .db-col-silo { grid-column: auto; grid-row: auto; }
      .db-col-txt { position: static; }
      .db-col-silo { gap: 22px 14px; }
      .db-p { font-size: 0.95rem; }
      .db-ficha { grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; }
      .db-retrato { width: 132px; aspect-ratio: 1 / 1; }
      .db-metodo { margin-top: 24px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .db-entra-texto, .db-entra-capa, .db-pista i { animation: none !important; opacity: 1 !important; transform: none !important; }
      .db-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

/* Astra sigue cargando su hoja aunque esta plantilla no use su marcado:
   lo que importa del diseno se fija con la clase del body por delante. */
body.db-landing { background: #0E0E0E !important; color: #A6A6A6;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif; }
body.db-landing a { color: #EDEEF6; }
body.db-landing img { max-width: 100%; height: auto; }

/* Astra baja la raiz a 91.2%, asi que todos los rem del diseno salian un 8.8%
   mas pequenos que en el lienzo y el titular rompia en otro numero de lineas.
   La portada recupera su escala; el resto del sitio se queda como estaba. */
html.db-landing-root { font-size: 100%; }

/* las capas del heroe aparecen y desaparecen: sin esto el navegador reancla
   el scroll a mitad de animacion y da un salto al subir */
#db-escena, #db-fija { overflow-anchor: none; }