/* Drone FPV Shop · rediseño v2 (inc/v2.php): portada a pantalla completa, secciones claras y oscuras a todo el ancho,
   títulos grandes, tarjetas nuevas, menú con fotos y ficha tipo marca. Va después de dfs.css y moderno.css. */
:root{--r:10px;--rl:18px;--sec:clamp(64px,8vw,112px);--side:max(16px,calc((100vw - 1240px)/2 + 16px))}
body.dfs{font-size:16px}
.mega em,.drawer em,.brands em,.mega .brandgrid em{font-style:normal}

/* Botones en píldora */
.btn,.dfs .single_add_to_cart_button,.dfs .checkout-button,.dfs #place_order{border-radius:999px!important}
.btn{padding:14px 26px}
.btn-red{box-shadow:0 12px 26px -12px rgba(226,35,26,.7)}
.btn-red:hover{transform:translateY(-1px)}

/* Cabecera con efecto cristal */
.site-hd{background:rgba(15,18,21,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}

/* Menú grande con fotos de producto */
.mega{border-radius:0 0 var(--rl) var(--rl);overflow:hidden}
.mega .wrap{padding-block:30px 34px;gap:32px}
.mega h4{color:var(--red);font-size:12px}
.mega li a,.mega li span{font-size:15px}
.mega li a.th{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:5px 8px}
.mega li a.th img{width:44px;height:44px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;transition:transform .25s,border-color .25s}
.mega li a.th:hover img{transform:scale(1.08);border-color:var(--red)}
.mega .col li a:not(.th){padding-left:64px}
.mega .feat{border-radius:var(--rl);min-height:280px;padding:22px}
.mega .feat b{font-size:28px;text-transform:uppercase;line-height:1}
.mega .feat img{transition:transform .6s}
.mega .feat:hover img{transform:scale(1.05)}
.mega .brandgrid a{border-radius:12px}

/* ---------- Portada: vídeo FPV a pantalla completa ---------- */
.dfs .site-main.home{max-width:none;width:100%;padding:0}
.home .hero{background-image:none;min-height:max(560px,min(940px,calc(100svh - 136px)));display:flex;flex-direction:column;justify-content:flex-end}
.home .hero::before{display:none}
.home .hero .camwrap{inset:0;aspect-ratio:auto;z-index:0}
.home .hero .fpvcam{border-radius:0;border:0;box-shadow:none;background-image:url(../img/hero-fpv-h.webp)}
.home .hero .fpvcam.on video{opacity:1}
/* Oscurece a la izquierda (texto) y abajo (barra de ventajas), con líneas de pantalla muy suaves */
.home .hero .fpvcam::after{background:linear-gradient(90deg,rgba(15,18,21,.88) 0%,rgba(15,18,21,.5) 40%,rgba(15,18,21,0) 68%),linear-gradient(0deg,rgba(15,18,21,.95) 0%,rgba(15,18,21,0) 42%),linear-gradient(180deg,rgba(15,18,21,.45) 0%,rgba(15,18,21,0) 18%),repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px)}
.home .hero .fpvcam-rec{top:22px;left:auto;right:var(--side)}
/* El visor ocupa solo la parte derecha, donde se ve el vídeo, para no taparse con el titular */
.home .hero .camwrap .osd{inset:64px var(--side) 150px auto;width:min(36vw,500px);font-size:13px;opacity:.9}
.home .hero .camwrap .osd .cross{width:64px;height:64px}
.home .hero .fpvcam-cap{left:auto;right:var(--side);bottom:108px;text-align:right;color:rgba(236,239,241,.75)}
.home .hero .hwrap{grid-template-columns:minmax(0,1fr);padding-block:72px 56px;width:100%}
.home .hero .hwrap>div{max-width:860px}
.home .hero .htitle{font-size:clamp(54px,8vw,132px);line-height:.88;letter-spacing:-.01em;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.home .hero .htitle em{-webkit-text-stroke:2px #fff}
.home .hero .hsub{font-size:clamp(17px,1.35vw,20px);color:#D3D9DD;max-width:50ch;margin:24px 0 34px}
.home .hero .btn{padding:16px 30px;font-size:16px}
.home .hero .btn-ghost{background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:rgba(255,255,255,.35)}
.home .hero .trust{width:100%;background:rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.14)}
.home .hero .trust>div{background:rgba(15,18,21,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media (max-width:1100px){
  .home .hero{min-height:max(520px,calc(88svh - 100px))}
  .home .hero .fpvcam{background-image:url(../img/hero-fpv.webp)}
  .home .hero .fpvcam.on video{opacity:.8}
  .home .hero .fpvcam::after{background:linear-gradient(0deg,rgba(15,18,21,.96) 8%,rgba(15,18,21,.55) 45%,rgba(15,18,21,.35) 100%),repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px)}
  .home .hero .hwrap{padding-block:120px 40px}
  .home .hero .fpvcam-rec{top:16px;bottom:auto;right:16px}
  .home .hero .htitle{font-size:clamp(48px,12.5vw,96px)}
}

/* Cinta de marcas */
.marq{background:var(--red);color:#fff;overflow:hidden;position:relative}
.marq-t{display:flex;width:max-content;animation:dfsmarq 45s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
.marq-r{display:flex;align-items:center;gap:30px;padding:18px 15px;flex:none}
.marq a{font:700 clamp(18px,2vw,26px)/1 var(--f-display);text-transform:uppercase;letter-spacing:.04em;color:#fff!important;white-space:nowrap;transition:color .15s}
.marq a:hover{color:var(--carbon)!important}
.marq i{font-style:normal;opacity:.55;font-size:13px}
@keyframes dfsmarq{to{transform:translateX(-50%)}}

/* ---------- Secciones: ritmo de fondos a todo el ancho y títulos grandes ---------- */
.home .blk{padding-block:calc(var(--sec) * .55)}
.home .vuelo,.home .sec-cats,.home .sec-sale,.home .sec-brands{padding-block:var(--sec)}
.home .vuelo,.home .sec-brands{border-image:conic-gradient(var(--carbon) 0 0) fill 0//0 100vw;color:var(--on-dark)}
.home .sec-cats,.home .sec-sale{border-image:conic-gradient(#fff 0 0) fill 0//0 100vw}
.shead{align-items:flex-end;margin-bottom:clamp(24px,3vw,44px)}
.shead h2{font-size:clamp(36px,5.4vw,74px);line-height:.92;text-transform:uppercase;letter-spacing:-.005em;max-width:20ch}
.shead .eyebrow,.home .vuelo .shead .eyebrow{display:flex;align-items:center;gap:12px;color:var(--red);margin-bottom:14px}
.shead .eyebrow::before{content:"";width:30px;height:2px;background:currentColor;flex:none}
.more{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);border-radius:999px;padding:11px 20px;color:var(--ink)!important;transition:background-color .15s,color .15s}
.more:hover{background:var(--ink);color:#fff!important;text-decoration:none}
.home .sec-brands .more,.home .vuelo .more{border-color:rgba(255,255,255,.4);color:var(--on-dark)!important}

/* «¿Qué quieres hacer con tu dron?» en tarjetas grandes */
@media (min-width:1101px){
  .vgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .vtile{aspect-ratio:16/11}
}
.vtile{border-radius:var(--rl)}
.vtxt{left:20px;right:20px;bottom:18px;gap:6px}
.vtxt b{font-size:clamp(20px,1.9vw,28px);text-transform:uppercase;line-height:1}
.vtxt span{font-size:14px}
.vtag{top:16px;left:16px;font-size:12px;padding:4px 9px}
.varr{top:14px;right:18px;font-size:20px}
.vtile::before{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.08);border-radius:inherit;z-index:1;transition:border-color .3s;pointer-events:none}
.vtile:hover::before{border-color:var(--red)}
@media (max-width:720px){.vtile{flex-basis:74%;aspect-ratio:4/5}}

/* Configurador */
.cfg{border-radius:var(--rl);padding:clamp(28px,4.4vw,64px)}
.cfg h2{font-size:clamp(40px,5.6vw,80px);line-height:.92}
.cfg-media{border-radius:14px}

/* Categorías */
.cat{border-radius:var(--rl);padding:20px}
.cat h3{font-size:clamp(20px,2vw,28px);text-transform:uppercase;line-height:1}
.cat span{font-size:12.5px;margin-top:8px}
@media (min-width:1101px){
  .catgrid{grid-auto-rows:250px;gap:16px}
  .catgrid .cat:nth-child(1) h3{font-size:46px}
}

/* Banda de soporte */
.band{margin-top:0}
.band .wrap{padding-block:clamp(80px,10vw,150px)}
.band h2{font-size:clamp(38px,5.4vw,76px);line-height:.92;text-transform:uppercase;max-width:14ch}
.band p{font-size:18px}

/* Envíos y marcas */
.shiptable{gap:16px}
.shiptable>div{border-radius:var(--rl);padding:24px 26px}
.shiptable b{font-size:24px}
.home .sec-brands .brands a{background:var(--carbon-2);border-color:var(--carbon-line);color:var(--on-dark);border-radius:12px;font-size:18px;padding:14px 20px}
.home .sec-brands .brands a:hover{border-color:var(--red);color:#fff}
.home .sec-brands .brands small{color:var(--on-dark-2)}
.seo{padding-block:calc(var(--sec) * .6) 0}

/* ---------- Tarjetas de producto ---------- */
.dfs ul.products{gap:clamp(12px,1.6vw,22px)}
.dfs ul.products li.product.pc{border-color:#E3E6E2;border-radius:var(--rl);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .2s}
.dfs ul.products li.product.pc:hover{transform:translateY(-4px);border-color:#CDD2CD;box-shadow:0 26px 50px -30px rgba(15,18,21,.5)}
/* Fondo gris claro y la foto en modo multiplicar: el blanco de las fotos de producto se funde con la tarjeta */
.dfs .pc .im{padding:22px;border-radius:var(--rl) var(--rl) 0 0;overflow:hidden;background:#F1F2EF}
.dfs .pc .im img{transition:transform .55s cubic-bezier(.2,.7,.2,1);mix-blend-mode:multiply}
.dfs .pc:hover .im img{transform:scale(1.05)}
.dfs .pc .im .alt{position:absolute;inset:0;width:100%!important;height:100%!important;padding:22px;box-sizing:border-box;object-fit:contain;background:none;mix-blend-mode:multiply;opacity:0;transition:opacity .25s,transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none;z-index:1}
.dfs .pc .im.has-alt:hover .alt.ready{opacity:1}
/* La segunda foto también se multiplica: la primera se oculta debajo para que no se mezclen */
.dfs .pc .im.has-alt:hover:has(.alt.ready)>img:not(.alt){opacity:0}
.dfs .pc .bd{border-top:0;padding:16px 18px 18px}
.pc .brand{color:var(--red)}
.dfs .pc h3{font:600 16px/1.3 var(--f-body)!important}
.dfs .pc .price{font-size:23px!important}
.dfs .pc .add{width:44px;height:44px;border-radius:50%}
.tag{border-radius:999px;top:14px;left:14px;padding:5px 10px}
.badge-fit{border-radius:999px}
@media (max-width:720px){
  .dfs .pc .im{padding:12px}
  .dfs .pc .im .alt{padding:12px}
  .dfs .pc .bd{padding:12px}
  .dfs .pc h3{font-size:14px!important}
  .dfs .pc .price{font-size:18px!important}
  .dfs .pc .add{width:38px;height:38px}
}

/* ---------- Tienda y categorías ---------- */
/* La cabecera oscura de la tienda va a todo el ancho (el tema padre limitaba el contenido a 1140 px); lo de dentro sigue en .wrap */
.dfs .site-main.dfs-woo:not(.wrap){max-width:none;width:100%}
.chead .wrap{padding-block:clamp(36px,5vw,72px)}
.chead h1{font-size:clamp(40px,6.2vw,92px);text-transform:uppercase;line-height:.92;letter-spacing:-.005em}
.chead .cimg{border-radius:var(--rl)}
.chip{padding:8px 16px}
.filters{border-radius:var(--rl)}

/* ---------- Ficha tipo marca ---------- */
.dfs .dfs-pd-top{padding-block:28px 52px;border-image:conic-gradient(#fff 0 0) fill 0//0 100vw}
@media (min-width:861px){.dfs .dfs-pd-top{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px clamp(32px,4.5vw,72px)}}
.dfs .woocommerce-product-gallery__wrapper{border:0;border-radius:var(--rl);background:#fff}
.dfs .woocommerce-product-gallery .flex-viewport{border-radius:var(--rl)}
.dfs .woocommerce-product-gallery .flex-control-thumbs img{border-radius:10px}
.pbrand{display:flex;align-items:center;gap:12px;font-size:13px}
.pbrand::before{content:"";width:30px;height:2px;background:var(--red)}
.dfs .product_title{font-size:clamp(30px,3.3vw,50px)!important;line-height:1.02!important;letter-spacing:-.01em}
.dfs .summary .price{font-size:clamp(36px,3.3vw,50px)!important;letter-spacing:-.01em}
.dfs form.cart .single_add_to_cart_button{min-height:58px;font-size:17px!important}
.dfs .quantity input.qty{height:58px;border-radius:999px}
.keyspecs{border-radius:var(--rl);background:var(--paper)}
.keyspecs::before{border-top-left-radius:var(--rl)}
.keyspecs::after{border-bottom-right-radius:var(--rl)}
.keyspecs dd{font-size:21px}
/* La explicación de cada dato sale encima del bloque y a su ancho: anclada al dato, la de la última columna
   quedaba fuera de la pantalla en móvil (aunque oculta) y la página se podía desplazar de lado */
.keyspecs dt{position:static}
.keyspecs dt [role=tooltip]{left:12px;right:12px;width:auto;bottom:calc(100% + 8px)}
.compat{border-radius:var(--rl)}
/* «Completa tu compra»: una fila por extra (casilla, foto, nombre, precio) en vez de tarjetas grandes en 2 columnas.
   !important porque un CSS antiguo en línea (del plugin) fuerza la rejilla de tarjetas a partir de 768 px. */
.dfs .woobt-inner{padding:4px 6px!important;margin:0!important;border-radius:var(--rl)!important;box-shadow:none!important;background:#fff!important}
.dfs .woobt-products.woobt-products-layout-compact{display:block!important;overflow:visible!important}
.dfs .woobt-products-layout-compact .woobt-product{display:grid!important;grid-template-columns:22px 56px minmax(0,1fr) auto;align-items:center;column-gap:12px;width:100%!important;max-width:none!important;margin:0!important;padding:10px 10px!important;border:0!important;border-radius:12px!important;background:none!important;box-shadow:none!important;text-align:left!important;cursor:pointer;transition:background-color .15s}
/* La fila del propio producto la oculta el plugin (woobt-hide-this); la rejilla de arriba la volvía a mostrar */
.dfs .woobt-products-layout-compact .woobt-product.woobt-hide-this{display:none!important}
.dfs .woobt-products-layout-compact .woobt-product+.woobt-product-together{margin-top:2px!important}
.dfs .woobt-wrap,.dfs .woobt-inner{max-width:100%;box-sizing:border-box}
.dfs .woobt-products-layout-compact .woobt-product:hover{background:var(--paper)!important}
.dfs .woobt-products-layout-compact .woobt-product:has(input:checked){background:rgba(226,35,26,.06)!important;box-shadow:none!important}
.dfs .woobt-products-layout-compact .woobt-product-together::before{display:none!important}
.dfs .woobt-products-layout-compact .woobt-choose{position:static!important;margin:0!important;padding:0!important;display:grid;place-items:center;width:22px;height:22px}
.dfs .woobt-products-layout-compact .woobt-choose label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dfs .woobt-products-layout-compact .woobt-thumb{width:56px!important;margin:0!important;padding:0!important}
.dfs .woobt-products-layout-compact .woobt-thumb .woobt-img{display:block;border-radius:10px!important;border:1px solid var(--line)!important;background:#fff!important;padding:3px}
.dfs .woobt-products-layout-compact .woobt-thumb img{width:48px!important;height:48px!important;aspect-ratio:1!important;object-fit:contain;border:0!important}
.dfs .woobt-products-layout-compact .woobt-title{margin:0!important;padding:0!important;text-align:left!important}
.dfs .woobt-title-inner,.dfs .woobt-title-inner a{font:600 14.5px/1.3 var(--f-body)!important}
.dfs .woobt-title-inner a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dfs .woobt-products-layout-compact .woobt-qty-num{display:none!important}
.dfs .woobt-products-layout-compact .woobt-price{margin:0!important;padding:0!important;text-align:right!important}
.dfs .woobt-price .woobt-price-ori,.dfs .woobt-price .woobt-price-new{font:700 16px var(--f-display)!important;white-space:nowrap}
.dfs .woobt-summary{margin:0!important;padding:10px 10px 6px!important;border-top:1px dashed var(--line)!important}
.dfs .woobt-summary:not(:has(.woobt-total:not(:empty))){display:none!important}
.dfs .woobt-total.woobt-text .woocommerce-Price-amount{color:var(--ink)!important}
.perks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;background:none}
.perks>div,.perks>div+div{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:14px 16px;font-size:13.5px}
.dfs .woocommerce-tabs{margin-top:clamp(40px,5vw,72px);border:0;background:none}
.dfs .woocommerce-tabs ul.tabs{border-bottom:2px solid var(--line);padding:0!important}
.dfs .woocommerce-tabs ul.tabs li a{font:700 clamp(16px,1.5vw,20px) var(--f-display)!important;text-transform:uppercase;letter-spacing:.02em;padding:16px 18px 14px!important;border-bottom-width:3px;margin-bottom:-2px}
.dfs .woocommerce-Tabs-panel{background:#fff;border-radius:0 0 var(--rl) var(--rl);padding:clamp(20px,3vw,40px)!important;font-size:16.5px}
.dfs .related>h2,.dfs .upsells>h2,.dfs .cross-sells>h2{font-size:clamp(32px,4vw,58px);text-transform:uppercase;line-height:.95;margin-bottom:24px}
@media (max-width:860px){
  .dfs .dfs-pd-top{padding-block:16px 32px}
  .perks{grid-template-columns:1fr}
}

/* ---------- Pie con la marca en grande ---------- */
.site-ft::before{content:"DRONE FPV SHOP";display:block;overflow:hidden;white-space:nowrap;text-align:center;font:700 clamp(46px,10.4vw,190px)/.82 var(--f-display);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);padding-top:clamp(36px,5vw,72px);user-select:none}