/* Theme Name: JDRONESTUDIO Tienda Theme URI: https://tienda.jdronestudio.com/gestion/ Description: Tema hijo de Storefront para la tienda de JDRONESTUDIO. Fondo blanco y rosa de marca, portada con carrusel de novedades y ofertas, rejilla de fabricantes, precios sin IVA en catalogo con el IVA sumado en el carrito, y campo de telefono obligatorio en el registro de clientes. Author: JDRONESTUDIO Author URI: https://jdronestudio.com Template: storefront Version: 1.60.0 Requires at least: 6.4 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: jdronestudio-tienda */ /* ========================================================= 1. TOKENS DE MARCA — cambia solo estos valores ========================================================= */ :root{ --jds-rosa:#DD0453; --jds-rosa-oscuro:#A30239; --jds-rosa-suave:#FDEFF3; --jds-tinta:#1D1D1B; --jds-tinta-2:#4A4844; --jds-gris:#7C7A74; --jds-linea:#EDE3E6; --jds-linea-fuerte:#DCCAD0; --jds-fondo:#FFFFFF; --jds-superficie:#FAF7F8; --jds-ok:#0F7B4F; --jds-ok-bg:#E6F4EC; --jds-aviso:#9A5B00; --jds-aviso-bg:#FBF0DF; --jds-radio:14px; --jds-sombra:0 1px 2px rgba(29,29,27,.06),0 8px 24px -12px rgba(29,29,27,.18); } /* ========================================================= 2. BASE ========================================================= */ body,button,input,select,textarea,.site-header,.widget{ font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } body{background:var(--jds-fondo);color:var(--jds-tinta);font-size:15px;line-height:1.6} h1,h2,h3,h4,h5,.site-title,.price,.button{font-family:Archivo,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.018em} h1,h2,h3{color:var(--jds-tinta);font-weight:800;text-wrap:balance} a{color:var(--jds-rosa-oscuro);text-decoration:none} a:hover{color:var(--jds-rosa)} :focus-visible{outline:2.5px solid var(--jds-rosa);outline-offset:2px} /* ========================================================= 3. CABECERA ========================================================= */ .site-header{ background:rgba(255,255,255,.9);backdrop-filter:blur(14px); border-bottom:1px solid var(--jds-linea);padding-top:14px;padding-bottom:14px; position:sticky;top:0;z-index:9999; } .admin-bar .site-header{top:32px} .site-header .site-branding img{max-height:46px;width:auto} .site-title a{color:var(--jds-tinta);font-weight:800;letter-spacing:-.03em} .site-description{color:var(--jds-gris);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600} .main-navigation ul li a{color:var(--jds-tinta-2);font-weight:600;font-size:14px;padding:8px 14px;border-radius:9px} .main-navigation ul li a:hover,.main-navigation ul li.current-menu-item>a{color:var(--jds-rosa);background:var(--jds-rosa-suave)} .site-header-cart .cart-contents{ background:var(--jds-tinta);color:#fff;border-radius:10px;padding:9px 14px;font-weight:700;font-size:13px; } .site-header-cart .cart-contents:hover{background:var(--jds-rosa);color:#fff} .site-header-cart .cart-contents .count{background:var(--jds-rosa);color:#fff;border-radius:99px;padding:1px 7px;margin-left:6px;font-size:11px} .site-header-cart .cart-contents:hover .count{background:#fff;color:var(--jds-rosa)} .site-search .widget_product_search input[type="search"]{ border-radius:10px;border:1px solid var(--jds-linea-fuerte);background:var(--jds-superficie);padding:10px 14px; } /* aviso superior */ .jds-aviso{background:var(--jds-tinta);color:#fff;font-size:12.5px;text-align:center;padding:9px 20px;letter-spacing:.01em} .jds-aviso b{color:var(--jds-rosa)} /* ========================================================= 4. BOTONES ========================================================= */ .button,button,input[type="submit"],.woocommerce #respond input#submit, .woocommerce a.button,.woocommerce button.button,.woocommerce input.button{ background:var(--jds-rosa);color:#fff;border-radius:11px;font-weight:700;font-size:14px; padding:11px 20px;border:0;text-shadow:none;box-shadow:none;transition:background .16s,transform .16s; } .button:hover,button:hover,input[type="submit"]:hover, .woocommerce a.button:hover,.woocommerce button.button:hover, .woocommerce #respond input#submit:hover,.woocommerce input.button:hover{ background:var(--jds-rosa-oscuro);color:#fff;transform:translateY(-1px); } .woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{background:var(--jds-tinta);color:#fff} .woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--jds-rosa)} .button.jds-ghost{background:transparent;color:var(--jds-tinta);border:1px solid var(--jds-linea-fuerte)} .button.jds-ghost:hover{background:transparent;border-color:var(--jds-rosa);color:var(--jds-rosa)} /* ========================================================= 5. FICHAS DE PRODUCTO EN REJILLA ========================================================= */ ul.products li.product{ background:#fff;border:1px solid var(--jds-linea);border-radius:var(--jds-radio); padding:0 0 14px;overflow:hidden;transition:.18s;position:relative; } ul.products li.product:hover{border-color:var(--jds-linea-fuerte);box-shadow:var(--jds-sombra);transform:translateY(-2px)} ul.products li.product a img{margin:0 0 12px;border-bottom:1px solid var(--jds-linea);background:var(--jds-superficie)} ul.products li.product .woocommerce-loop-product__title{ font-size:14.5px;font-weight:700;line-height:1.3;padding:0 14px;margin-bottom:6px;color:var(--jds-tinta); } ul.products li.product .price{ padding:0 14px;color:var(--jds-tinta);font-weight:800;font-size:20px;letter-spacing:-.025em; font-variant-numeric:tabular-nums;display:block; } ul.products li.product .price del{color:var(--jds-gris);font-size:13px;font-weight:500;opacity:1} ul.products li.product .price ins{background:none;color:var(--jds-rosa);text-decoration:none} ul.products li.product .button{margin:12px 14px 0;display:block;text-align:center} ul.products li.product .star-rating{margin:0 14px 8px} /* etiqueta oferta */ .woocommerce span.onsale{ background:var(--jds-rosa);color:#fff;border-radius:6px;font-family:"IBM Plex Mono",monospace; font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;min-height:0;min-width:0; line-height:1.2;top:10px;left:10px;right:auto;margin:0; } /* precio con IVA bajo el precio sin IVA */ .jds-iva{display:block;font-family:"Public Sans",sans-serif;font-size:11.5px;font-weight:500;color:var(--jds-gris);letter-spacing:0;margin-top:2px} .single-product .jds-iva{font-size:13px} /* estado de stock */ .jds-stock{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:6px;margin:0 14px 4px} .jds-stock::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor} .jds-stock.en{color:var(--jds-ok);background:var(--jds-ok-bg)} .jds-stock.pocas{color:var(--jds-aviso);background:var(--jds-aviso-bg)} .jds-stock.no{color:var(--jds-gris);background:#F0ECF1} /* ========================================================= 6. FICHA INDIVIDUAL ========================================================= */ .single-product div.product .product_title{font-size:clamp(24px,3vw,34px);font-weight:800} .single-product div.product p.price{color:var(--jds-tinta);font-size:32px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .single-product div.product p.price ins{color:var(--jds-rosa);text-decoration:none;background:none} .single-product .woocommerce-tabs ul.tabs li{border-radius:10px 10px 0 0;border-color:var(--jds-linea)} .single-product .woocommerce-tabs ul.tabs li.active{background:#fff;border-bottom-color:#fff} .woocommerce div.product form.cart .button{padding:14px 30px;font-size:15px} .woocommerce div.product .stock{color:var(--jds-ok);font-weight:600} .woocommerce div.product .out-of-stock{color:var(--jds-gris);font-weight:600} table.shop_attributes th{color:var(--jds-gris);font-weight:500} table.shop_attributes td{font-weight:600} /* ========================================================= 7. CARRITO Y CAJA ========================================================= */ .woocommerce-cart table.cart,.woocommerce-checkout .woocommerce-checkout-review-order-table{ border:1px solid var(--jds-linea);border-radius:var(--jds-radio);overflow:hidden; } .cart_totals h2,.woocommerce-checkout h3{font-size:18px;font-weight:800} .cart_totals table th{color:var(--jds-tinta-2);font-weight:600} .cart_totals .order-total td{font-family:Archivo;font-size:24px;font-weight:800;color:var(--jds-rosa);letter-spacing:-.03em} .woocommerce-info,.woocommerce-message{ border-top-color:var(--jds-rosa);background:var(--jds-rosa-suave);border-radius:10px; } .woocommerce-info::before,.woocommerce-message::before{color:var(--jds-rosa)} .woocommerce-error{border-top-color:#C62828;border-radius:10px} .shipping__list_item label{font-weight:600} .woocommerce-shipping-destination{color:var(--jds-gris);font-size:13px} .checkout .form-row input.input-text,.checkout .form-row textarea,.checkout .form-row select, .woocommerce form .form-row input.input-text{ border:1px solid var(--jds-linea-fuerte);border-radius:10px;padding:11px 13px;background:var(--jds-superficie); } /* ========================================================= 8. PORTADA — CARRUSEL ========================================================= */ .jds-hero{margin:0 0 46px} .jds-carrusel{ position:relative;border:1px solid var(--jds-linea);border-radius:20px;overflow:hidden;background:var(--jds-superficie); } .jds-pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none} .jds-pista::-webkit-scrollbar{display:none} .jds-slide{ min-width:100%;scroll-snap-align:start;display:grid;grid-template-columns:1.05fr .95fr;align-items:center; } .jds-slide .jds-txt{padding:44px 46px} .jds-eyebrow{ display:inline-flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:11px; letter-spacing:.13em;text-transform:uppercase;color:var(--jds-rosa);margin-bottom:14px; } .jds-eyebrow::before{content:"";width:22px;height:1.5px;background:var(--jds-rosa)} .jds-slide h2{font-size:clamp(26px,3.4vw,40px);margin:0 0 10px} .jds-slide p{color:var(--jds-tinta-2);max-width:44ch;margin:0 0 20px;font-size:15px} .jds-precio{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:22px} .jds-precio .jds-grande{font-family:Archivo;font-weight:800;font-size:32px;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .jds-precio small{color:var(--jds-gris);font-size:12.5px} .jds-slide .jds-img{background:var(--jds-rosa-suave);height:100%;min-height:330px;display:grid;place-items:center;padding:26px} .jds-slide .jds-img img{max-height:290px;width:auto;object-fit:contain;mix-blend-mode:multiply} .jds-puntos{position:absolute;bottom:18px;left:46px;display:flex;gap:7px;z-index:3} .jds-puntos button{width:26px;height:4px;border-radius:99px;background:var(--jds-linea-fuerte);padding:0;border:0} .jds-puntos button[aria-current="true"]{background:var(--jds-rosa);width:40px} .jds-flecha{ position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:99px; background:#fff;border:1px solid var(--jds-linea-fuerte);display:grid;place-items:center;z-index:3; box-shadow:var(--jds-sombra);padding:0;color:var(--jds-tinta);font-size:18px;line-height:1; } .jds-flecha:hover{border-color:var(--jds-rosa);color:var(--jds-rosa);background:#fff} .jds-flecha.prev{left:14px}.jds-flecha.next{right:14px} @media(max-width:860px){ .jds-slide{grid-template-columns:1fr} .jds-slide .jds-img{min-height:200px;order:-1} .jds-slide .jds-txt{padding:26px 24px 32px} .jds-puntos{left:24px;bottom:14px}.jds-flecha{display:none} } /* ========================================================= 9. PORTADA — FABRICANTES ========================================================= */ .jds-seccion{margin:0 0 46px} .jds-seccion-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px} .jds-seccion-cab h2{font-size:22px;margin:0} .jds-seccion-cab p{margin:5px 0 0;color:var(--jds-gris);font-size:13.5px} .jds-marcas{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} @media(max-width:900px){.jds-marcas{grid-template-columns:repeat(3,1fr)}} @media(max-width:520px){.jds-marcas{grid-template-columns:repeat(2,1fr)}} .jds-marca{ display:block;border:1px solid var(--jds-linea);border-radius:var(--jds-radio);background:var(--jds-superficie); padding:20px 14px;text-align:center;transition:.18s;color:var(--jds-tinta); } .jds-marca:hover{border-color:var(--jds-rosa);transform:translateY(-2px);box-shadow:var(--jds-sombra);color:var(--jds-tinta)} .jds-marca img{max-height:36px;width:auto;margin:0 auto 10px;display:block} .jds-marca strong{display:block;font-family:Archivo;font-weight:800;font-size:15px;letter-spacing:-.02em} .jds-marca span{display:block;font-size:11.5px;color:var(--jds-gris);margin-top:3px} /* ========================================================= 10. PORTADA — GARANTIAS ========================================================= */ .jds-ventajas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--jds-linea); border:1px solid var(--jds-linea);border-radius:var(--jds-radio);overflow:hidden;margin:0 0 46px} @media(max-width:820px){.jds-ventajas{grid-template-columns:repeat(2,1fr)}} .jds-ventajas>div{background:var(--jds-superficie);padding:22px 18px} .jds-ventajas h3{font-size:13.5px;font-weight:700;margin:0 0 5px} .jds-ventajas p{margin:0;font-size:12.5px;color:var(--jds-gris);line-height:1.5} /* ========================================================= 11. MI CUENTA ========================================================= */ .woocommerce-account .woocommerce-MyAccount-navigation ul{border:1px solid var(--jds-linea);border-radius:var(--jds-radio);overflow:hidden} .woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--jds-linea)} .woocommerce-account .woocommerce-MyAccount-navigation li a{padding:12px 16px;display:block;font-weight:600;color:var(--jds-tinta-2)} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--jds-rosa-suave);color:var(--jds-rosa-oscuro)} .jds-consentimiento{background:var(--jds-superficie);border:1px solid var(--jds-linea);border-radius:10px;padding:12px 14px;margin:14px 0;font-size:13px;line-height:1.5} .jds-consentimiento input{accent-color:var(--jds-rosa);margin-right:8px} /* ========================================================= 12. PIE ========================================================= */ .site-footer{background:var(--jds-superficie);color:var(--jds-tinta-2);border-top:1px solid var(--jds-linea);padding-top:38px} .site-footer a{color:var(--jds-rosa-oscuro)} .site-footer h3,.site-footer .widget-title{color:var(--jds-tinta);font-size:14px;font-weight:700} /* ========================================================= 13. PORTADA — NAVEGACION POR CATEGORIA ========================================================= */ .jds-usos{border-bottom:1px solid var(--jds-linea);background:#fff;margin:0 0 30px} .jds-usos .col-full{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;align-items:center} .jds-usos .col-full::-webkit-scrollbar{display:none} .jds-uso{ padding:13px 15px;font-size:13.5px;font-weight:600;color:var(--jds-tinta-2);white-space:nowrap; border-bottom:2.5px solid transparent;margin-bottom:-1px;text-decoration:none; } .jds-uso:hover{color:var(--jds-rosa)} .jds-uso.activo{color:var(--jds-rosa);border-bottom-color:var(--jds-rosa)} .jds-tel{margin-left:auto;padding:8px 0 8px 18px;border-left:1px solid var(--jds-linea);line-height:1.3;white-space:nowrap} .jds-tel b{display:block;font-family:Archivo;font-size:14px;font-weight:700} .jds-tel b a{color:var(--jds-tinta);text-decoration:none} .jds-tel b a:hover{color:var(--jds-rosa)} .jds-tel>span{font-size:11px;color:var(--jds-gris)} @media(max-width:1000px){.jds-tel{display:none}} /* ========================================================= 14. PORTADA — BLOQUES GRANDES DE CATEGORIA ========================================================= */ .jds-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:980px){.jds-tiles{grid-template-columns:repeat(2,1fr)}} .jds-tile{ border:1px solid var(--jds-linea);border-radius:16px;overflow:hidden;background:#fff; display:flex;flex-direction:column;transition:.18s;text-decoration:none;color:var(--jds-tinta); } .jds-tile:hover{border-color:var(--jds-rosa);transform:translateY(-3px);box-shadow:var(--jds-sombra);color:var(--jds-tinta)} .jds-tile-img{background:var(--jds-rosa-suave);height:150px;min-height:150px;max-height:150px;display:flex;align-items:center;justify-content:center;overflow:hidden} .jds-tile-img img{max-height:130px;width:auto;object-fit:contain;mix-blend-mode:multiply} .jds-tile-img .jds-ilus{width:100%;max-width:170px;height:110px;color:#B8B4AE} .jds-tile-img svg{max-height:110px} .jds-tile-txt{padding:14px 16px 16px} .jds-tile-txt b{display:block;font-family:Archivo;font-weight:800;font-size:15.5px;letter-spacing:-.02em} .jds-tile-txt>span{display:block;font-size:12px;color:var(--jds-gris);margin-top:3px} .jds-tile-txt em{ display:inline-block;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10px; letter-spacing:.09em;text-transform:uppercase;color:var(--jds-rosa);margin-top:9px; } /* ========================================================= 15. PORTADA — OFERTAS ========================================================= */ .jds-ofertas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:980px){.jds-ofertas{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.jds-ofertas{grid-template-columns:1fr}} .jds-of{ border:1px solid var(--jds-linea-fuerte);border-radius:16px;padding:16px;background:#fff; display:flex;flex-direction:column;gap:6px;transition:.18s;position:relative;text-decoration:none;color:var(--jds-tinta); } .jds-of:hover{border-color:var(--jds-rosa);box-shadow:var(--jds-sombra);transform:translateY(-2px);color:var(--jds-tinta)} .jds-of-et{ position:absolute;top:14px;left:14px;z-index:2;font-family:"IBM Plex Mono",monospace;font-size:10px; letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--jds-rosa);padding:3px 8px;border-radius:5px; } .jds-of-img{display:grid;place-items:center;height:150px;margin-bottom:4px} .jds-of-img img{max-height:150px;max-width:100%;width:auto;height:auto;object-fit:contain} .jds-of b{font-family:Archivo;font-weight:800;font-size:15px;line-height:1.25} .jds-of-pr{margin-top:auto;padding-top:8px} .jds-of-pr .price{font-family:Archivo;font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--jds-tinta)} .jds-of-pr del{color:var(--jds-gris);font-size:13px;font-weight:500;opacity:1} .jds-of-pr ins{background:none;color:var(--jds-rosa);text-decoration:none} /* ========================================================= 16. PORTADA — RAZONES + TIENDA FISICA ========================================================= */ .jds-cierre{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:stretch;margin:0 0 46px} @media(max-width:900px){.jds-cierre{grid-template-columns:1fr}} .jds-razones{ display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--jds-linea); border:1px solid var(--jds-linea);border-radius:var(--jds-radio);overflow:hidden; } .jds-razones>div{background:var(--jds-superficie);padding:22px 22px 24px} .jds-razones h3{font-family:Archivo;font-size:15.5px;font-weight:700;margin:0 0 7px;letter-spacing:-.01em} .jds-razones p{margin:0;font-size:14.5px;color:var(--jds-tinta-2);line-height:1.6;max-width:44ch} .jds-local{border:1px solid var(--jds-linea);border-radius:var(--jds-radio);background:var(--jds-rosa-suave);padding:24px} .jds-local h3{font-size:17px;font-weight:800;margin:0 0 5px} .jds-local-int{margin:0;font-size:14.5px;color:var(--jds-tinta-2);line-height:1.6} .jds-local-dir{font-size:14px;color:var(--jds-tinta-2);line-height:1.6;margin:14px 0 0} .jds-local-tel{margin:10px 0 0;font-family:Archivo;font-size:19px;font-weight:800;letter-spacing:-.02em} .jds-local-tel a{color:var(--jds-rosa-oscuro);text-decoration:none} .jds-local-hor{ font-size:12.5px;color:var(--jds-gris);border-top:1px solid var(--jds-linea-fuerte); padding-top:12px;margin:14px 0 0; } /* aviso de seccion vacia, solo para el administrador */ .jds-vacio-admin{ background:var(--jds-superficie);border:1px dashed var(--jds-rosa);border-radius:12px; padding:18px;font-size:13.5px;color:var(--jds-tinta-2);text-align:center;margin:0; } .jds-vacio-admin span{color:var(--jds-gris);font-size:12px} /* secciones de producto de Storefront, con nuestro aire */ .storefront-product-section{margin-bottom:46px} .storefront-product-section .section-title{ font-family:Archivo;font-size:22px;font-weight:800;letter-spacing:-.02em; margin-bottom:20px;text-align:left; } /* ========================================================= 17. AJUSTES FINOS ========================================================= */ .jds-seccion .products{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:1050px){.jds-seccion .products{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){.jds-seccion .products{grid-template-columns:repeat(2,1fr)}} .jds-seccion ul.products li.product{width:auto;float:none;margin:0} .jds-seccion ul.products li.product::before{display:none} /* ========================================================= 18. ALGORITMOS DE IA — PRECIO POR DURACION ========================================================= */ .jds-desde{display:block;font-family:Archivo;font-weight:800;font-size:19px;letter-spacing:-.025em;color:var(--jds-tinta)} .jds-desde b{font-weight:800} .jds-desde i{font-style:normal;font-size:13px;font-weight:600;color:var(--jds-gris)} .jds-anual{display:block;font-size:12.5px;color:var(--jds-tinta-2);margin-top:2px;font-weight:600} .jds-anual em{font-style:normal;background:var(--jds-rosa-suave);color:var(--jds-rosa-oscuro);padding:1px 6px;border-radius:5px;font-size:11.5px} .jds-duraciones{width:100%;border-collapse:collapse;margin:20px 0 8px;font-size:14px} .jds-duraciones th{ text-align:left;background:var(--jds-superficie);font-family:Archivo;font-size:11.5px;font-weight:700; letter-spacing:.04em;text-transform:uppercase;color:var(--jds-gris);padding:9px 12px;border-bottom:1px solid var(--jds-linea); } .jds-duraciones td{padding:10px 12px;border-bottom:1px solid var(--jds-linea);font-variant-numeric:tabular-nums} .jds-duraciones tr.jds-mejor td{background:var(--jds-rosa-suave);font-weight:600} .jds-etiqueta{ display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase; background:var(--jds-rosa);color:#fff;padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:middle; } .jds-nota-licencia{font-size:12px;color:var(--jds-gris);margin:0 0 18px} /* ========================================================= 19. PORTADA MAS COMPACTA ========================================================= */ .jds-seccion,.jds-hero,.jds-cierre,.storefront-product-section{margin-bottom:34px} .jds-seccion-cab{margin-bottom:14px} .jds-seccion-cab h2,.storefront-product-section .section-title{font-size:19px} /* fichas de producto mas contenidas */ .jds-seccion ul.products li.product a img, ul.products li.product a img{ height:190px;object-fit:contain;background:var(--jds-superficie);padding:10px;margin-bottom:10px; } @media(max-width:760px){ul.products li.product a img{height:150px}} ul.products li.product .woocommerce-loop-product__title{font-size:13.5px;min-height:2.6em} ul.products li.product .price{font-size:18px} ul.products li.product .button{margin-top:10px;padding:9px;font-size:13px} /* bloques de categoria mas bajos */ .jds-tile-img{height:118px;min-height:118px;max-height:118px} .jds-tile-img img{max-height:100px} .jds-tile-img .jds-ilus{height:88px;max-width:140px} .jds-tile-txt{padding:12px 14px 14px} .jds-tile-txt b{font-size:14.5px} /* carrusel menos alto */ .jds-slide .jds-img{min-height:280px;padding:20px} .jds-slide .jds-img img{max-height:240px} .jds-slide .jds-txt{padding:34px 38px} @media(max-width:860px){.jds-slide .jds-img{min-height:180px}} /* fabricantes mas discretos */ .jds-marca{padding:16px 12px} .jds-marca img{max-height:30px} .jds-marca strong{font-size:14px} /* ========================================================= 20. CORRECCIONES DE FONDO Y REJILLAS ========================================================= */ /* Storefront pinta un gris de fondo: lo forzamos a blanco. OJO: aqui NO va .col-full. Ese contenedor se repite dentro del video de portada y del pie, y forzarle el blanco tapaba el video y dejaba una banda blanca en el pie. */ html, body, .site, #page, .site-content, .content-area{ background-color:#fff !important; } .site-content{padding-top:0} /* La rejilla de categorias, blindada contra otros estilos */ .jds-tiles{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:14px !important; align-items:stretch; } @media(max-width:980px){.jds-tiles{grid-template-columns:repeat(2,minmax(0,1fr)) !important}} @media(max-width:520px){.jds-tiles{grid-template-columns:repeat(2,minmax(0,1fr)) !important}} .jds-tile{min-width:0;max-width:100%;overflow:hidden} .jds-tile-img{ height:120px !important;min-height:120px !important;max-height:120px !important; display:flex !important;align-items:center;justify-content:center;overflow:hidden; } .jds-tile-img img,.jds-tile-img svg{ max-height:96px !important;max-width:150px !important;width:auto !important;height:auto !important; } .jds-tile-img .jds-ilus{color:#C9C4C0 !important} /* La barra de categorias, por si el tema padre la aplana */ .jds-usos{ display:block !important;background:#fff !important;border-bottom:1px solid var(--jds-linea) !important; margin:0 0 26px !important;padding:0 !important; } .jds-usos .col-full{display:flex !important;flex-wrap:nowrap;overflow-x:auto;gap:2px;align-items:center;padding:0} .jds-uso{ display:inline-block !important;padding:12px 14px !important;font-size:13.5px !important;font-weight:600 !important; color:var(--jds-tinta-2) !important;text-decoration:none !important;white-space:nowrap;border-bottom:2.5px solid transparent; } .jds-uso:hover,.jds-uso.activo{color:var(--jds-rosa) !important} .jds-uso.activo{border-bottom-color:var(--jds-rosa)} /* La rejilla de fabricantes, tambien blindada */ .jds-marcas{display:grid !important;grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:12px !important} @media(max-width:900px){.jds-marcas{grid-template-columns:repeat(3,minmax(0,1fr)) !important}} @media(max-width:520px){.jds-marcas{grid-template-columns:repeat(2,minmax(0,1fr)) !important}} .jds-marca{min-width:0} /* Rejilla de productos de nuestras secciones */ .jds-seccion ul.products{ display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:16px !important; margin:0 !important;padding:0 !important;list-style:none !important; } @media(max-width:1050px){.jds-seccion ul.products{grid-template-columns:repeat(3,minmax(0,1fr)) !important}} @media(max-width:760px){.jds-seccion ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important}} .jds-seccion ul.products li.product{width:auto !important;float:none !important;margin:0 !important;min-width:0} .jds-seccion ul.products li.product::before, .jds-seccion ul.products li.product::after{display:none !important;content:none !important} /* ========================================================= 22. FICHA DE PRODUCTO A DOS COLUMNAS ========================================================= */ .single-product div.product{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:44px;align-items:start;margin-bottom:40px; } @media(max-width:900px){.single-product div.product{grid-template-columns:1fr;gap:24px}} /* columna de la foto */ .single-product div.product .woocommerce-product-gallery{ width:100% !important;float:none !important;margin:0 !important;position:sticky;top:110px; } @media(max-width:900px){.single-product div.product .woocommerce-product-gallery{position:static}} .single-product .woocommerce-product-gallery__wrapper{ border:1px solid var(--jds-linea);border-radius:18px;overflow:hidden;background:var(--jds-superficie); } .single-product .woocommerce-product-gallery__image img{width:100%;height:auto;display:block} .single-product .flex-control-thumbs{display:flex;gap:8px;margin:10px 0 0;padding:0;list-style:none} .single-product .flex-control-thumbs li{width:72px;margin:0} .single-product .flex-control-thumbs img{ border:1px solid var(--jds-linea);border-radius:9px;opacity:.6;transition:.15s;background:var(--jds-superficie); } .single-product .flex-control-thumbs img:hover, .single-product .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--jds-rosa)} /* columna de comprar */ .single-product div.product .summary{ width:100% !important;float:none !important;margin:0 !important; } .single-product div.product .product_title{font-size:clamp(24px,3vw,32px);line-height:1.12;margin-bottom:10px} .single-product div.product .woocommerce-product-details__short-description{ color:var(--jds-tinta-2);font-size:15px;line-height:1.6;margin:0 0 18px; } /* Cuando el resumen lleva la lista de lo que detecta el algoritmo, que se lea como una lista y no como un parrafo con guiones. */ .single-product div.product .woocommerce-product-details__short-description ul{ list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px; } .single-product div.product .woocommerce-product-details__short-description li{ position:relative;padding-left:18px;font-size:14.5px; } .single-product div.product .woocommerce-product-details__short-description li::before{ content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%; background:var(--jds-rosa); } .single-product div.product .woocommerce-product-details__short-description li strong{color:var(--jds-tinta)} .single-product div.product p.price, .single-product div.product .woocommerce-variation-price .price{ display:block;margin:0 0 4px;font-size:30px; } .single-product .jds-iva{font-size:13px;color:var(--jds-gris)} .single-product div.product form.cart{margin:20px 0 0} .single-product div.product form.cart .quantity{margin-right:10px} .single-product div.product form.cart .quantity input{ height:52px;border:1px solid var(--jds-linea-fuerte);border-radius:11px;width:74px;text-align:center;font-weight:600; } .single-product div.product form.cart .single_add_to_cart_button{ height:52px;border-radius:11px;font-size:15.5px;font-weight:700;padding:0 34px; } .jds-elige{ background:var(--jds-rosa-suave);border-left:3px solid var(--jds-rosa);border-radius:0 9px 9px 0; padding:10px 14px;font-size:13.5px;color:var(--jds-tinta-2);margin:0 0 12px; } .single-product .woocommerce-variation-availability{font-size:13px} /* garantias */ .jds-confianza{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--jds-linea);display:grid;gap:12px} .jds-confianza li{display:flex;flex-direction:column;gap:1px;position:relative;padding-left:22px} .jds-confianza li::before{ content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:99px; background:var(--jds-ok-bg);box-shadow:inset 0 0 0 2px var(--jds-ok); } .jds-confianza b{font-family:Archivo;font-size:13.5px;font-weight:700;color:var(--jds-tinta)} .jds-confianza span{font-size:12.5px;color:var(--jds-gris);line-height:1.45} /* lo de debajo, a todo el ancho */ .single-product .woocommerce-tabs, .single-product .related, .single-product .upsells, .single-product .jds-duraciones, .single-product .jds-nota-licencia{grid-column:1 / -1} .single-product .woocommerce-tabs{border-top:1px solid var(--jds-linea);padding-top:26px;margin-top:10px} .single-product .woocommerce-tabs .panel h2{font-size:20px} .single-product .related > h2,.single-product .upsells > h2{font-size:20px;font-weight:800;margin-bottom:18px} /* ========================================================= 24. ALGORITMOS: PRECIO EN EL CATALOGO ========================================================= */ .jds-precios{display:block} .jds-precio-dur{display:none} ul.products[data-activa="1-mes"] .jds-precio-dur[data-dur="1-mes"], ul.products[data-activa="3-meses"] .jds-precio-dur[data-dur="3-meses"], ul.products[data-activa="6-meses"] .jds-precio-dur[data-dur="6-meses"], ul.products[data-activa="12-meses"].jds-precio-dur[data-dur="12-meses"], ul.products[data-activa="12-meses"] .jds-precio-dur[data-dur="12-meses"]{display:block} ul.products:not([data-activa]) .jds-precio-dur[data-dur="1-mes"]{display:block} .single-product .jds-precio-dur[data-dur="1-mes"]{display:block} .jds-pd-cifra{ display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:21px;letter-spacing:-.025em; color:var(--jds-tinta);font-style:normal;text-decoration:none; } .jds-pd-nota{ display:block;font-size:12px;color:var(--jds-gris);margin-top:1px; font-style:normal;font-weight:400;text-decoration:none; } /* ========================================================= 25. ALGORITMOS: SELECTOR DE DURACION EN LA FICHA ========================================================= */ .jds-dur-bloque{margin:0 0 20px} .jds-dur-label{ display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--jds-gris);margin-bottom:9px; } .jds-dur-fila{ display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:stretch; } @media(max-width:640px){.jds-dur-fila{grid-template-columns:repeat(2,minmax(0,1fr))}} .jds-dur{ position:relative;display:flex !important;flex-direction:column;gap:1px;align-items:flex-start; text-align:left;border:1.5px solid var(--jds-linea-fuerte) !important;border-radius:12px; background:#fff !important;color:var(--jds-tinta) !important;padding:13px 12px 12px;cursor:pointer; transition:border-color .15s, background .15s;font-family:inherit;box-shadow:none !important; text-shadow:none;min-width:0;height:auto;line-height:1.25; } .jds-dur:hover{border-color:var(--jds-rosa) !important;background:#fff !important;transform:none} .jds-dur.activa{border-color:var(--jds-rosa) !important;background:var(--jds-rosa-suave) !important} .jds-dur-nombre{font-family:Archivo,sans-serif;font-weight:700;font-size:13px;color:var(--jds-tinta-2)} .jds-dur-precio{ font-family:Archivo,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--jds-tinta);margin-top:3px; } .jds-dur-mes{font-size:11.5px;color:var(--jds-gris)} .jds-dur-ahorro{ font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase; background:var(--jds-ok-bg);color:var(--jds-ok);padding:2px 6px;border-radius:5px;margin-top:7px; } .jds-dur-mejor{border-color:var(--jds-rosa) !important} /* ========================================================= 26. GARANTIAS DE LA FICHA ========================================================= */ .jds-confianza{ list-style:none !important;margin:24px 0 0 !important;padding:18px 0 0 !important; border-top:1px solid var(--jds-linea);display:grid;gap:13px; } .jds-confianza li{ display:block;position:relative;padding-left:24px;margin:0;list-style:none !important; } .jds-confianza li::before{ content:"";position:absolute;left:0;top:4px;width:13px;height:13px;border-radius:99px; background:var(--jds-ok-bg);box-shadow:inset 0 0 0 2px var(--jds-ok); } .jds-cf-t{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:13.5px;color:var(--jds-tinta)} .jds-cf-d{display:block;font-size:12.5px;color:var(--jds-gris);line-height:1.45;margin-top:1px} /* ========================================================= 27. CATALOGO DE ALGORITMOS: CABECERA Y SELECTOR ========================================================= */ .jds-cab-ia{margin:0 0 26px;max-width:760px} .jds-cab-eyebrow{ display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--jds-rosa);margin-bottom:8px; } .jds-cab-ia h1{font-size:clamp(26px,3.6vw,38px);font-weight:800;margin:0 0 10px} .jds-cab-ia p{color:var(--jds-tinta-2);font-size:15px;margin:0 0 18px;line-height:1.55} .jds-switch{ display:inline-flex;align-items:center;gap:3px;background:#fff;border:1px solid var(--jds-linea-fuerte); border-radius:99px;padding:5px;flex-wrap:wrap; } .jds-switch-op{ border:0 !important;background:transparent !important;border-radius:99px;padding:9px 19px; font-family:Archivo,sans-serif;font-weight:700;font-size:13.5px;color:var(--jds-tinta-2) !important; cursor:pointer;transition:.15s;box-shadow:none !important;text-shadow:none; } .jds-switch-op:hover{color:var(--jds-rosa) !important;background:transparent !important;transform:none} .jds-switch-op.activa{background:var(--jds-rosa) !important;color:#fff !important} .jds-switch-nota{padding:0 16px 0 12px;font-size:12.5px;font-weight:600;color:var(--jds-ok)} @media(max-width:640px){ .jds-switch{width:100%;justify-content:center} .jds-switch-nota{width:100%;text-align:center;padding:7px 0 2px} } /* ========================================================= 28. COMPATIBILIDAD Y DATOS DE LA AERONAVE ========================================================= */ .jds-compat{margin:0 0 18px;padding:14px 16px;background:var(--jds-superficie);border:1px solid var(--jds-linea);border-radius:12px} .jds-compat-label{ display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--jds-gris);margin-bottom:8px; } .jds-compat-lista{display:flex;flex-wrap:wrap;gap:6px} .jds-compat-chip{ display:inline-block;background:#fff;border:1px solid var(--jds-linea-fuerte);border-radius:7px; padding:4px 10px;font-size:12.5px;font-weight:600;color:var(--jds-tinta); } .jds-compat-nota{display:block;font-size:12px;color:var(--jds-gris);margin-top:9px;line-height:1.45} .jds-aeronave{ margin:0 0 18px;padding:16px;border:1.5px solid var(--jds-rosa);border-radius:13px;background:var(--jds-rosa-suave); } .jds-aeronave-titulo{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:15px;color:var(--jds-tinta)} .jds-aeronave-ayuda{margin:4px 0 13px;font-size:12.5px;color:var(--jds-tinta-2);line-height:1.45} .jds-aeronave-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:600px){.jds-aeronave-campos{grid-template-columns:1fr}} .jds-aeronave-campos label{display:flex;flex-direction:column;gap:5px} .jds-aeronave-campos label > span{font-size:12px;font-weight:600;color:var(--jds-tinta-2)} .jds-aeronave-campos label em{font-style:normal;color:var(--jds-rosa)} .jds-aeronave-campos select, .jds-aeronave-campos input{ width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--jds-linea-fuerte); background:#fff;font:inherit;font-size:14px;color:var(--jds-tinta); } .jds-aeronave-campos input{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.02em} .jds-aeronave-campos select:focus,.jds-aeronave-campos input:focus{border-color:var(--jds-rosa);outline:none} .jds-aeronave-donde{margin:11px 0 0;font-size:11.5px;color:var(--jds-gris);line-height:1.45} /* como se ve en el carrito */ .woocommerce-cart .variation,.woocommerce-checkout .variation{font-size:12.5px;color:var(--jds-gris);margin:5px 0 0} .woocommerce-cart .variation dt,.woocommerce-checkout .variation dt{font-weight:600;color:var(--jds-tinta-2)} /* ========================================================= 30. MOVIL ========================================================= */ @media(max-width:768px){ .col-full{padding-left:16px;padding-right:16px} /* cabecera compacta */ .site-header{padding-top:10px;padding-bottom:10px} .site-header .site-branding img,.site-header .custom-logo{max-height:34px} .site-search{margin-top:8px} .site-header-cart .cart-contents{padding:8px 12px;font-size:12.5px} /* aviso superior mas corto */ .jds-aviso{font-size:11px;padding:7px 14px;line-height:1.35} /* carrusel */ .jds-slide h2{font-size:23px} .jds-slide p{font-size:14px;margin-bottom:14px} .jds-precio .jds-grande{font-size:26px} .jds-slide .jds-txt{padding:22px 20px 26px} .jds-puntos{left:20px;bottom:12px} /* rejillas a dos columnas */ .jds-tiles{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important} .jds-tile-img{height:96px !important;min-height:96px !important;max-height:96px !important} .jds-tile-img img,.jds-tile-img svg{max-height:76px !important} .jds-tile-txt{padding:10px 11px 12px} .jds-tile-txt b{font-size:13px;line-height:1.25} .jds-marcas{grid-template-columns:repeat(2,minmax(0,1fr)) !important} ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important} ul.products li.product a img{height:130px} ul.products li.product .woocommerce-loop-product__title{font-size:12.5px;padding:0 10px} ul.products li.product .price{font-size:16px;padding:0 10px} .jds-pd-cifra{font-size:17px} ul.products li.product .button{margin:8px 10px 0;font-size:12px;padding:8px} /* titulos de seccion */ .jds-seccion-cab h2,.storefront-product-section .section-title{font-size:17px} .jds-seccion-cab p{font-size:12.5px} .jds-seccion,.jds-hero,.jds-cierre{margin-bottom:26px} .jds-seccion-cab{flex-direction:column;align-items:flex-start;gap:10px} /* ficha de producto */ .single-product div.product{gap:18px} .single-product div.product .product_title{font-size:22px} .single-product div.product p.price, .single-product div.product .woocommerce-variation-price .price{font-size:25px} .single-product div.product form.cart .single_add_to_cart_button{width:100%;padding:0 16px} .single-product div.product form.cart .quantity{margin-bottom:10px} .jds-dur-fila{grid-template-columns:repeat(2,minmax(0,1fr))} .jds-duraciones{font-size:13px} .jds-duraciones th,.jds-duraciones td{padding:8px 9px} /* razones */ .jds-razones{grid-template-columns:1fr} .jds-cierre{grid-template-columns:1fr} /* pie */ .jds-pie{padding:34px 0 20px} .jds-pie-legal{flex-direction:column;align-items:flex-start;gap:12px} .jds-pie-legal nav{gap:14px} } @media(max-width:420px){ ul.products{grid-template-columns:1fr !important} ul.products li.product a img{height:180px} .jds-tiles{grid-template-columns:repeat(2,minmax(0,1fr)) !important} } /* ========================================================= 31. BARRA DE COMPRA FIJA EN MOVIL ========================================================= */ .jds-barra-movil{display:none} @media(max-width:768px){ .jds-barra-movil{ display:flex;align-items:center;justify-content:space-between;gap:12px; position:fixed;left:0;right:0;bottom:0;z-index:9998;background:#fff; border-top:1px solid var(--jds-linea);padding:10px 16px calc(10px + env(safe-area-inset-bottom)); transform:translateY(110%);transition:transform .22s ease;box-shadow:0 -6px 20px rgba(29,29,27,.1); } .jds-barra-movil.visible{transform:none;aria-hidden:false} .jds-barra-precio{font-family:Archivo,sans-serif;font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--jds-tinta)} .jds-barra-precio .woocommerce-Price-amount{font-size:18px} .jds-barra-precio del,.jds-barra-precio .jds-iva,.jds-barra-precio .jds-pd-nota{display:none} .jds-barra-boton{ background:var(--jds-rosa);color:#fff;border:0;border-radius:10px;padding:12px 26px; font-family:Archivo,sans-serif;font-weight:700;font-size:14.5px;flex:none; } .single-product .site-footer{padding-bottom:70px} } /* ========================================================= 32. LA FLECHA DEL CARRUSEL YA NO PISA EL TEXTO ========================================================= */ .jds-slide .jds-txt{padding:34px 38px 34px 72px} @media(max-width:860px){.jds-slide .jds-txt{padding:22px 20px 26px}} .jds-puntos{left:72px} @media(max-width:860px){.jds-puntos{left:20px}} /* ========================================================= 34. PIE DE PAGINA EN CLARO, CON IMAGENES ========================================================= */ .site-footer{background:#fff !important;padding:0 !important;margin:0;border:0} .jds-pie{background:#fff;color:var(--jds-tinta-2);padding:0 0 26px} .jds-pie a{color:var(--jds-tinta-2);text-decoration:none} .jds-pie a:hover{color:var(--jds-rosa)} /* --- franja de categorias con foto --- */ .jds-pie-explora{background:var(--jds-superficie);border-top:1px solid var(--jds-linea);padding:34px 0 36px;margin-bottom:0} .jds-pie-explora h3{ font-family:Archivo,sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--jds-gris);margin:0 0 16px; } .jds-pie-explora-rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} @media(max-width:900px){.jds-pie-explora-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}} .jds-pie-tarjeta{ display:block;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--jds-linea); transition:.18s;min-width:0; } .jds-pie-tarjeta:hover{border-color:var(--jds-rosa);transform:translateY(-2px);box-shadow:var(--jds-sombra)} .jds-pie-tarjeta-img{display:block;height:118px;background:var(--jds-rosa-suave);overflow:hidden} .jds-pie-tarjeta-img img{width:100%;height:118px;object-fit:cover;display:block} .jds-pie-tarjeta-txt{display:block;padding:11px 13px 13px} .jds-pie-tarjeta-txt b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:13.5px;color:var(--jds-tinta)} .jds-pie-tarjeta-txt em{ display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10px; letter-spacing:.08em;text-transform:uppercase;color:var(--jds-rosa);margin-top:3px; } /* --- franja de marcas --- */ .jds-pie-marcas{border-top:1px solid var(--jds-linea);border-bottom:1px solid var(--jds-linea);padding:22px 0;background:#fff} .jds-pie-marcas .col-full{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .jds-pie-marcas-t{ font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--jds-gris);white-space:nowrap; } .jds-pie-marcas-fila{display:flex;align-items:center;gap:28px;flex-wrap:wrap;flex:1} .jds-pie-marca{ font-family:Archivo,sans-serif;font-weight:700;font-size:15px;color:var(--jds-tinta-2) !important; letter-spacing:-.01em;opacity:.55;transition:.16s; } .jds-pie-marca:hover{opacity:1;color:var(--jds-tinta) !important} .jds-pie-marca.con-img{opacity:.5} .jds-pie-marca.con-img:hover{opacity:1} .jds-pie-marca img{max-height:30px;width:auto;display:block;filter:grayscale(1);transition:.16s} .jds-pie-marca.con-img:hover img{filter:none} /* --- columnas --- */ .jds-pie-rejilla{ display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px; padding:40px 0 32px;border-bottom:1px solid var(--jds-linea); } @media(max-width:900px){.jds-pie-rejilla{grid-template-columns:1fr 1fr;gap:30px}} @media(max-width:560px){.jds-pie-rejilla{grid-template-columns:1fr;gap:26px}} .jds-pie-col h3{ font-family:Archivo,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--jds-tinta);margin:0 0 14px; } .jds-pie-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .jds-pie-col li{font-size:13.5px;line-height:1.4;color:var(--jds-tinta-2)} .jds-pie-logo{max-width:170px;height:auto;display:block;margin-bottom:16px} .jds-pie-nombre{display:block;font-family:Archivo,sans-serif;font-size:19px;font-weight:800;color:var(--jds-tinta);margin-bottom:14px} .jds-pie-claim{font-size:13.5px;line-height:1.6;color:var(--jds-gris);margin:0 0 20px;max-width:42ch} .jds-pie-contacto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .jds-pie-contacto li{font-size:13.5px;line-height:1.5;color:var(--jds-tinta-2)} .jds-pie-dato{ display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--jds-rosa);margin-bottom:2px; } /* --- pago --- */ .jds-pie-pago{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--jds-linea)} .jds-pie-pago-t{ font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--jds-gris); } .jds-pie-tarjetas{display:flex;gap:7px;flex-wrap:wrap} .jds-pie-tarjetas span{display:inline-flex} .jds-pie-3ds{font-size:11.5px;color:var(--jds-gris);margin-left:auto} @media(max-width:760px){.jds-pie-3ds{margin-left:0;width:100%}} /* --- legal --- */ .jds-pie-legal{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-top:18px;font-size:12px;color:var(--jds-gris); } .jds-pie-legal nav{display:flex;gap:18px;flex-wrap:wrap} .jds-pie-legal a{font-size:12px;color:var(--jds-gris) !important} .jds-pie-legal a:hover{color:var(--jds-rosa) !important} @media(max-width:768px){ .jds-pie-explora{padding:26px 0 28px} .jds-pie-tarjeta-img,.jds-pie-tarjeta-img img{height:96px} .jds-pie-marcas .col-full{gap:14px} .jds-pie-marcas-fila{gap:18px} .jds-pie-marca{font-size:13.5px} .jds-pie-rejilla{padding:28px 0 24px} .jds-pie-legal{flex-direction:column;align-items:flex-start;gap:12px} } /* ========================================================= 35. PANTALLAS GRANDES: QUE LA PAGINA LLENE --------------------------------------------------------- El problema no era el ancho: era que todo iba sobre el mismo blanco y los lados quedaban muertos. Se arregla con bandas de fondo que van de borde a borde, con el contenido centrado. ========================================================= */ html,body{overflow-x:hidden} /* contenedor mas ancho en monitores grandes */ @media(min-width:1400px){ .col-full{max-width:1340px} } @media(min-width:1700px){ .col-full{max-width:1480px} } /* utilidad: fondo de borde a borde sin sacar el contenido de sitio */ .jds-hero, .jds-seccion, .jds-cierre, .jds-usos{position:relative} .jds-hero::before, .jds-seccion.jds-banda::before, .jds-cierre::before{ content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw; transform:translateX(-50%);z-index:-1; } .jds-hero::before{background:var(--jds-rosa-suave)} .jds-seccion.jds-banda::before{background:var(--jds-superficie)} .jds-cierre::before{background:var(--jds-superficie)} /* el carrusel, respirando dentro de su banda rosa */ .jds-hero{padding:38px 0 42px;margin-bottom:0} .jds-carrusel{border-color:transparent;box-shadow:0 18px 50px -28px rgba(29,29,27,.35)} .jds-slide .jds-img{background:#fff} /* las secciones que llevan banda gris claro */ .jds-seccion.jds-banda{padding:40px 0 44px;margin-bottom:0} .jds-cierre{padding:44px 0 48px;margin-bottom:0} /* las que van sobre blanco, con aire */ .jds-seccion:not(.jds-banda){padding:44px 0 8px} /* mas columnas cuando hay sitio de sobra */ @media(min-width:1500px){ .jds-tiles{grid-template-columns:repeat(4,minmax(0,1fr)) !important} ul.products{grid-template-columns:repeat(5,minmax(0,1fr)) !important} .jds-marcas{grid-template-columns:repeat(6,minmax(0,1fr)) !important} .jds-pie-explora-rejilla{grid-template-columns:repeat(4,minmax(0,1fr))} } /* la barra de categorias, pegada a la cabecera y a todo el ancho */ .jds-usos{margin-top:0 !important;background:#fff !important} .jds-usos::before{ content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%); background:#fff;border-bottom:1px solid var(--jds-linea);z-index:-1; } .jds-usos{border-bottom:0 !important} /* la ficha de producto tambien respira mas */ @media(min-width:1400px){ .single-product div.product{gap:60px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} } /* ========================================================= 36. VIDEO DE PORTADA ========================================================= */ .jds-video-hero{ position:relative;left:50%;width:100vw;transform:translateX(-50%); height:clamp(360px,64vh,660px);overflow:hidden;display:flex;align-items:flex-end; background:var(--jds-tinta);margin:0 0 0; } .jds-video-fondo{position:absolute;inset:0;z-index:0} .jds-video-fondo video, .jds-video-fondo img{width:100%;height:100%;object-fit:cover;display:block} .jds-video-fondo iframe{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:100vw;height:56.25vw;min-height:100%;min-width:177.77vh;border:0;pointer-events:none; } .jds-video-hero.con-velo::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(29,29,27,.10) 0%,rgba(29,29,27,.06) 45%,rgba(29,29,27,.78) 100%); } .jds-video-texto{position:relative;z-index:2;width:100%;padding:0 0 clamp(28px,5vh,58px)} .jds-video-texto h2{ font-family:Archivo,sans-serif;font-weight:800;color:#fff;letter-spacing:-.03em; font-size:clamp(28px,4.4vw,54px);line-height:1.05;margin:0 0 10px;max-width:18ch; text-shadow:0 2px 20px rgba(0,0,0,.25); } .jds-video-texto p{ color:rgba(255,255,255,.92);font-size:clamp(14px,1.3vw,18px);line-height:1.5; margin:0 0 20px;max-width:52ch;text-shadow:0 1px 12px rgba(0,0,0,.3); } .jds-video-cta{ display:inline-block;background:var(--jds-rosa);color:#fff !important;text-decoration:none; font-family:Archivo,sans-serif;font-weight:700;font-size:15px;padding:14px 30px;border-radius:11px; transition:.16s; } .jds-video-cta:hover{background:#fff;color:var(--jds-tinta) !important;transform:translateY(-1px)} @media(max-width:768px){ .jds-video-hero{height:clamp(320px,58vh,480px)} .jds-video-texto h2{font-size:26px;max-width:none} .jds-video-texto p{font-size:14px} .jds-video-cta{width:100%;text-align:center;padding:14px 20px} } @media (prefers-reduced-motion: reduce){ .jds-video-fondo video{display:none} } /* ========================================================= 37. ZONA DE PAGO SEGURO ========================================================= */ .jds-pie-pago{align-items:center} .jds-pie-tarjetas{align-items:center} .jds-pie-tarjetas img{ height:26px;width:auto;display:block;border:1px solid var(--jds-linea);border-radius:6px; background:#fff;padding:3px 7px; } .jds-pie-3ds{ display:inline-flex;align-items:center;gap:8px; color:var(--jds-ok) !important;font-weight:600;font-size:12px; } .jds-pie-3ds svg{ width:16px;height:16px;flex:none;fill:none;stroke:var(--jds-ok); stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; } .jds-pie-pago-t{color:var(--jds-gris) !important} /* la flecha del carrusel, esta vez de verdad */ .jds-slide .jds-txt{padding:34px 38px 34px 76px !important} .jds-puntos{left:76px !important} @media(max-width:860px){ .jds-slide .jds-txt{padding:22px 20px 26px !important} .jds-puntos{left:20px !important} } /* ========================================================= 38. EL BOTON DEL VIDEO, TRANSPARENTE --------------------------------------------------------- El rosa macizo tapaba parte de la imagen. Con borde blanco y fondo transparente se lee igual de bien y deja ver el video. ========================================================= */ .jds-video-cta{ background:transparent !important; color:#fff !important; border:2px solid rgba(255,255,255,.9); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); padding:13px 32px; box-shadow:0 2px 14px rgba(0,0,0,.18); } .jds-video-cta:hover{ background:rgba(255,255,255,.16) !important; color:#fff !important; border-color:#fff; transform:translateY(-1px); } /* y el velo, mas suave: tapaba demasiado video */ .jds-video-hero.con-velo::after{ background:linear-gradient(180deg, rgba(29,29,27,.04) 0%, rgba(29,29,27,.02) 40%, rgba(29,29,27,.55) 100%) !important; } .jds-video-texto h2{text-shadow:0 2px 26px rgba(0,0,0,.55)} .jds-video-texto p{text-shadow:0 1px 18px rgba(0,0,0,.6)} /* ========================================================= 39. NADA DEBE TAPAR EL VIDEO ========================================================= */ .jds-video-hero, .jds-video-hero .col-full, .jds-video-texto, .jds-video-texto .col-full, .jds-video-fondo{background:transparent !important} .jds-video-hero{background-color:var(--jds-tinta) !important} .jds-video-fondo{background:transparent !important} /* ========================================================= 40. LOGOS DE TARJETA --------------------------------------------------------- Van dibujados en SVG dentro del propio tema, asi que no hay que subir ningun archivo y se ven nitidos en movil, en portatil y en un monitor grande. ========================================================= */ .jds-tarjeta{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:28px;flex:none; border-radius:6px;overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(29,29,27,.08); transition:transform .15s ease, box-shadow .15s ease; } .jds-tarjeta svg{width:100%;height:100%;display:block} .jds-tarjeta:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(29,29,27,.13)} /* Fila reutilizable: pie, portada y ficha de producto. */ .jds-tarjetas-fila{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap} .jds-tarjetas-fila img{ height:28px;width:auto;display:block;border-radius:6px;background:#fff; box-shadow:0 1px 2px rgba(29,29,27,.08); } /* En el pie, sobre fondo claro, un borde muy fino las separa. */ .jds-pie-tarjetas .jds-tarjeta{border:1px solid var(--jds-linea)} /* En la portada, dentro del bloque «Pago seguro». */ .jds-razones .jds-tarjetas-fila{margin-top:10px} .jds-razones .jds-tarjeta{width:38px;height:25px} /* En la ficha de producto, debajo de la lista de confianza. */ .jds-tarjetas-ficha{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin-top:14px;padding-top:14px;border-top:1px solid var(--jds-linea); } .jds-tarjetas-txt{ font-size:12px;font-weight:600;color:var(--jds-ok); display:inline-flex;align-items:center; } @media(max-width:600px){ .jds-tarjetas-ficha{gap:8px} .jds-tarjetas-txt{width:100%} .jds-tarjeta{width:38px;height:25px} } /* ========================================================= 41. FLECHAS DE PRODUCTO ANTERIOR Y SIGUIENTE --------------------------------------------------------- Storefront cuelga dos miniaturas fijas en los bordes de la pantalla. En un monitor grande se ven como dos medias fotos cortadas flotando, y con la imagen de relleno queda fatal. Fuera. ========================================================= */ .storefront-product-pagination{display:none !important} /* ========================================================= 42. AVISO DE SENSOR EN LA FICHA DEL ALGORITMO --------------------------------------------------------- Algunos algoritmos solo funcionan con camara termica. Ese aviso tiene que verse ANTES de comprar, no despues. ========================================================= */ .jds-aviso-sensor{ display:block;margin:0 0 14px;padding:13px 16px; border-left:4px solid var(--jds-rosa); border-radius:0 8px 8px 0; background:var(--jds-rosa-suave); color:var(--jds-tinta); font-size:14.5px;line-height:1.55; } .jds-aviso-sensor strong{color:var(--jds-rosa-oscuro)} /* La ficha larga del algoritmo respira mejor con estos margenes. */ .woocommerce-Tabs-panel--description h3{ margin:26px 0 10px;font-size:19px;letter-spacing:-.01em; } .woocommerce-Tabs-panel--description h3:first-of-type{margin-top:18px} .woocommerce-Tabs-panel--description ul, .woocommerce-Tabs-panel--description ol{margin:0 0 14px;padding-left:20px} .woocommerce-Tabs-panel--description li{margin-bottom:6px;line-height:1.6} .woocommerce-Tabs-panel--description p{line-height:1.7} /* ========================================================= 43. FICHA TECNICA DEL PRODUCTO --------------------------------------------------------- Datos del fabricante en una lista limpia, facil de barrer con la vista. Nada de tabla: en movil las tablas se rompen. ========================================================= */ .jds-specs{ list-style:none !important;margin:0 0 14px !important;padding:0 !important; border-top:1px solid var(--jds-linea); } .jds-specs li{ display:flex;flex-wrap:wrap;gap:6px 14px; margin:0 !important;padding:9px 2px; border-bottom:1px solid var(--jds-linea); font-size:14.5px;line-height:1.5; } .jds-specs li strong{ flex:0 0 190px;color:var(--jds-tinta-2);font-weight:600; } @media(max-width:520px){ .jds-specs li strong{flex:1 0 100%} .jds-specs li{padding:8px 2px;gap:2px} } .jds-specs-nota{ font-size:12px !important;color:var(--jds-gris);margin:-4px 0 18px !important; } /* ========================================================= 44. SELECTOR DE VERSION / PACK (estilo tienda DJI) ========================================================= */ .jds-ver-bloque{margin:0 0 22px} .jds-ver-label{ display:block;margin-bottom:10px; font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--jds-gris); } .jds-ver-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px} .jds-ver{ position:relative;display:flex;flex-direction:column;gap:3px; padding:14px 14px 12px;text-align:left;cursor:pointer; background:#fff;border:1.5px solid var(--jds-linea-fuerte);border-radius:12px; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .jds-ver:hover{border-color:var(--jds-rosa);transform:translateY(-1px)} .jds-ver.activa{ border-color:var(--jds-rosa);background:var(--jds-rosa-suave); box-shadow:0 0 0 3px rgba(221,4,83,.12); } .jds-ver-nombre{ font-weight:700;font-size:13.5px;line-height:1.3;color:var(--jds-tinta); min-height:2.6em;padding-right:8px; } .jds-ver-precio{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;color:var(--jds-tinta);letter-spacing:-.02em} .jds-ver-iva{font-size:11.5px;color:var(--jds-gris)} .jds-ver-stock{ margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.02em; display:inline-flex;align-items:center;gap:5px; } .jds-ver-stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} .jds-ver-stock.hay{color:var(--jds-ok)} .jds-ver-stock.bajo{color:#B26A00} .jds-ver-stock.no{color:var(--jds-gris)} .jds-ver-tag{ position:absolute;top:-9px;right:10px; background:var(--jds-rosa);color:#fff;border-radius:20px; font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.1em; text-transform:uppercase;padding:3px 8px; } @media(max-width:520px){ .jds-ver-fila{grid-template-columns:1fr 1fr;gap:8px} .jds-ver{padding:12px 11px 10px} .jds-ver-nombre{font-size:12.5px;min-height:3em} .jds-ver-precio{font-size:17px} } /* ========================================================= 45. PORTADAS DE CATEGORIA A SANGRE --------------------------------------------------------- Antes la foto iba encajada en el centro con un tope de 96 px de alto y 150 de ancho: en un monitor grande se veia diminuta. Ahora la foto llena el recuadro entero. Los dibujos de relleno (SVG) siguen centrados y pequenos, que si los estiraramos quedarian ridiculos. ========================================================= */ .jds-tile-img{ height:178px !important;min-height:178px !important;max-height:178px !important; padding:0 !important;position:relative; } .jds-tile-img img{ width:100% !important;height:100% !important;max-width:none !important;max-height:none !important; object-fit:cover !important;object-position:center !important; mix-blend-mode:normal !important; display:block !important; transition:transform .35s ease; } .jds-tile:hover .jds-tile-img img{transform:scale(1.045)} /* El dibujo de relleno no se estira. */ .jds-tile-img svg, .jds-tile-img .jds-ilus{ max-height:96px !important;max-width:150px !important; width:auto !important;height:auto !important;object-fit:contain !important; } @media(max-width:980px){ .jds-tile-img{height:150px !important;min-height:150px !important;max-height:150px !important} } @media(max-width:520px){ .jds-tile-img{height:118px !important;min-height:118px !important;max-height:118px !important} .jds-tile-img svg,.jds-tile-img .jds-ilus{max-height:76px !important} } /* ========================================================= 46. ENLACE A LA FICHA AMPLIADA DE JDRONESTUDIO.COM --------------------------------------------------------- Deliberadamente discreto: es un enlace de apoyo, no un boton. Si compitiera con «Anadir al carrito» perderiamos ventas, que es justo lo contrario de lo que buscamos. ========================================================= */ .jds-ficha-ampliada{ display:flex;align-items:center;gap:12px; margin:16px 0 4px;padding:12px 14px; border:1px solid var(--jds-linea-fuerte);border-radius:10px; background:#fff;color:var(--jds-tinta) !important;text-decoration:none !important; transition:border-color .15s ease, background .15s ease, transform .15s ease; } .jds-ficha-ampliada:hover{ border-color:var(--jds-rosa);background:var(--jds-rosa-suave);transform:translateY(-1px); } .jds-fa-ico{ flex:none;width:34px;height:34px;border-radius:8px; display:flex;align-items:center;justify-content:center; background:var(--jds-rosa-suave);color:var(--jds-rosa); } .jds-ficha-ampliada:hover .jds-fa-ico{background:#fff} .jds-fa-ico svg{width:19px;height:19px} .jds-fa-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .jds-fa-txt b{font-size:14px;font-weight:700;line-height:1.25} .jds-fa-txt em{font-style:normal;font-size:12px;color:var(--jds-gris);line-height:1.35} .jds-fa-flecha{margin-left:auto;color:var(--jds-rosa);font-size:18px;flex:none} @media(max-width:520px){ .jds-ficha-ampliada{padding:11px 12px;gap:10px} .jds-fa-txt b{font-size:13.5px} .jds-fa-txt em{font-size:11.5px} } /* --------------------------------------------------------- 47. ENLACES A SUBCATEGORIAS EN LA PAGINA DE CATEGORIA --------------------------------------------------------- */ .jds-subcats{display:block;margin:14px 0 26px} .jds-subcats-t{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#7C7A74;margin-bottom:8px} .jds-subcats-fila{display:flex;flex-wrap:wrap;gap:8px} .jds-subcat{ display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #EDE3E6; border-radius:999px;padding:8px 15px;font-size:14px;font-weight:600;color:#1D1D1B;text-decoration:none; transition:border-color .15s,background .15s } .jds-subcat:hover{border-color:#DD0453;background:#FDEFF3;color:#1D1D1B} .jds-subcat em{font-style:normal;font-weight:600;font-size:12px;color:#fff;background:#DD0453;border-radius:999px;padding:1px 8px} .jds-subcat-madre{background:#F7F5F3;border-color:#E5E0DC;font-weight:500} .jds-subcat-madre:hover{background:#EFECE8;border-color:#D8D2CD} @media(max-width:600px){.jds-subcat{padding:7px 12px;font-size:13.5px}} /* --------------------------------------------------------- 48. VEN A VERLO: DATOS, BOTONES DE NAVEGACION Y MAPA --------------------------------------------------------- */ .jds-local{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start} .jds-local h3{margin:0 0 6px;font-size:20px} .jds-local-int{color:#5C5A55;margin:0 0 16px;max-width:46ch} .jds-local-dir{font-style:normal;line-height:1.55;margin:0 0 14px;font-size:15px} .jds-local-dir strong{letter-spacing:.02em} .jds-local-datos{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px} .jds-local-datos li{display:flex;gap:10px;align-items:baseline;font-size:14.5px} .jds-local-datos li span{flex:none;width:74px;color:#8A8781;font-size:12px;text-transform:uppercase;letter-spacing:.05em} .jds-local-datos a{color:#DD0453;text-decoration:none;font-weight:600} .jds-local-datos a:hover{text-decoration:underline} .jds-ir{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .jds-ir-btn{ display:inline-flex;align-items:center;gap:9px;background:#DD0453;color:#fff;text-decoration:none; font-weight:700;font-size:15px;padding:13px 22px;border-radius:999px; box-shadow:0 6px 18px -8px rgba(221,4,83,.75);transition:transform .12s,box-shadow .12s } .jds-ir-btn:hover{color:#fff;transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(221,4,83,.8)} .jds-ir-otros{font-size:13px;color:#8A8781} .jds-ir-otros a{color:#1D1D1B;font-weight:600;text-decoration:none;border-bottom:1px solid #DDD6D2;margin-left:7px} .jds-ir-otros a:hover{border-color:#DD0453;color:#DD0453} .jds-mapa{position:relative;border-radius:14px;overflow:hidden;border:1px solid #EDE3E6;background:#F7F5F3;min-height:260px} .jds-mapa iframe{display:block;width:100%;height:300px;border:0} .jds-mapa-cargar{ width:100%;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; background:linear-gradient(150deg,#FDEFF3 0%,#F7F5F3 100%);border:0;cursor:pointer;color:#1D1D1B; font-family:inherit;padding:24px } .jds-mapa-cargar svg{color:#DD0453} .jds-mapa-cargar b{font-size:16px} .jds-mapa-cargar em{font-style:normal;font-size:13px;color:#7C7A74} .jds-mapa-cargar:hover{background:linear-gradient(150deg,#FCE4EC 0%,#F2EFEC 100%)} @media(max-width:820px){ .jds-local{grid-template-columns:1fr;gap:20px} .jds-mapa,.jds-mapa-cargar{min-height:200px} .jds-mapa iframe{height:240px} .jds-ir-btn{width:100%;justify-content:center;padding:15px 22px;font-size:16px} .jds-ir{gap:10px} } /* --------------------------------------------------------- 49. AREA DE CLIENTE: PANEL, MIS EQUIPOS Y DESCARGA --------------------------------------------------------- */ .jds-panel p{font-size:15px;margin:0 0 18px} .jds-panel-cajas{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .jds-panel-cajas a{ display:block;background:#fff;border:1px solid #EDE3E6;border-left:3px solid #DD0453;border-radius:10px; padding:16px 18px;text-decoration:none;color:#1D1D1B;transition:border-color .15s,transform .12s } .jds-panel-cajas a:hover{border-color:#DD0453;transform:translateY(-1px)} .jds-panel-cajas b{display:block;font-size:15.5px;margin-bottom:3px} .jds-panel-cajas span{font-size:13px;color:#7C7A74;line-height:1.45} .jds-eq-intro{font-size:14.5px;color:#5C5A55;max-width:62ch} .jds-eq-descargar{margin-bottom:22px !important} .jds-eq-h{font-size:16px;margin:26px 0 10px} table.jds-eq{width:100%;border-collapse:collapse;background:#fff;border:1px solid #EDE3E6;border-radius:10px;overflow:hidden} table.jds-eq th{ text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#7C7A74; padding:10px 14px;border-bottom:1px solid #EDE3E6;font-weight:600 } table.jds-eq td{padding:12px 14px;border-bottom:1px solid #F4EEF0;font-size:14px;vertical-align:top} table.jds-eq tr:last-child td{border-bottom:0} .jds-eq-nombre b{display:block;font-size:14.5px} .jds-eq-nombre em{font-style:normal;font-size:11.5px;color:#9b968f} .jds-eq-serie code{background:#F7F5F3;border:1px solid #EDE3E6;border-radius:5px;padding:2px 7px;font-size:12.5px} .jds-eq-vacio{color:#b9b4ae} .jds-eq-ok{color:#0F7B4F;font-weight:600} .jds-eq-fin{color:#9A5B00;font-weight:600} .jds-eq-nota{font-size:12.5px;color:#7C7A74;margin-top:12px;max-width:70ch;line-height:1.6} @media(max-width:700px){ .jds-panel-cajas{grid-template-columns:1fr} table.jds-eq,table.jds-eq tbody,table.jds-eq tr,table.jds-eq td{display:block;width:100%} table.jds-eq thead{display:none} table.jds-eq tr{border-bottom:1px solid #EDE3E6;padding:8px 0} table.jds-eq td{border:0;padding:4px 14px} } /* --------------------------------------------------------- 50. SENALES REALES DE INTERES Y VISTOS RECIENTEMENTE --------------------------------------------------------- */ .jds-senales{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px} .jds-senal{ display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600; padding:7px 13px;border-radius:999px;border:1px solid transparent;line-height:1.3 } .jds-senal svg{flex:none;opacity:.9} .jds-senal-urgente{background:#FFF6E9;border-color:#F0D9B5;color:#7A4700} .jds-senal-vistas{background:#F4F1FA;border-color:#DFD8EE;color:#4A3D77} .jds-senal-tienda{background:#EDF8F2;border-color:#C9E7D8;color:#0B5B3A} @media(max-width:600px){.jds-senal{font-size:12.5px;padding:6px 11px}} .jds-vistos{margin-top:42px;padding-top:8px;border-top:1px solid var(--jds-linea)} .jds-vistos .jds-seccion-cab h2{font-size:19px} /* --------------------------------------------------------- 51. ASISTENTE «¿QUE DRON NECESITO?» --------------------------------------------------------- */ .jds-asistente{ background:linear-gradient(165deg,#FDEFF3 0%,#FBF7F5 62%); border:1px solid #EDE3E6;border-radius:16px;padding:34px 32px;margin:40px 0 } .jds-as-cab h2{margin:0 0 6px;font-size:26px;letter-spacing:-.02em} .jds-as-cab p{margin:0 0 26px;color:#5C5A55;font-size:15px;max-width:58ch} .jds-as-num{ display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:#DD0453;background:#fff;border:1px solid #F3D3DE;border-radius:999px;padding:4px 11px;margin-bottom:10px } .jds-as-paso{margin-bottom:26px} .jds-as-paso h3{margin:0 0 4px;font-size:19px;letter-spacing:-.01em} .jds-as-ayuda{margin:0 0 14px;font-size:13.5px;color:#7C7A74;max-width:64ch;line-height:1.55} .jds-as-paso h3+.jds-as-ops{margin-top:14px} .jds-as-ops{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .jds-as-ops-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .jds-as-ops button{ text-align:left;background:#fff;border:1px solid #EDE3E6;border-radius:11px;padding:15px 17px;cursor:pointer; font-family:inherit;font-size:15px;font-weight:600;color:#1D1D1B;line-height:1.35; transition:border-color .14s,transform .12s,box-shadow .14s } .jds-as-ops button em{display:block;font-style:normal;font-weight:400;font-size:12.5px;color:#7C7A74;margin-top:4px} .jds-as-ops button:hover{border-color:#DD0453;transform:translateY(-1px);box-shadow:0 6px 16px -10px rgba(221,4,83,.6)} .jds-as-ops button.elegido{border-color:#DD0453;background:#DD0453;color:#fff;box-shadow:0 6px 18px -10px rgba(221,4,83,.9)} .jds-as-ops button.elegido em{color:rgba(255,255,255,.8)} .jds-as-resultado{border-top:1px solid #EDE3E6;padding-top:24px;margin-top:8px} .jds-as-resultado h3{margin:0 0 4px;font-size:21px} .jds-as-sub{margin:0 0 18px;color:#7C7A74;font-size:14px} .jds-as-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .jds-as-card{ position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #EDE3E6;border-radius:12px; padding:18px;text-decoration:none;color:#1D1D1B;transition:border-color .14s,transform .12s } .jds-as-card:hover{border-color:#DD0453;transform:translateY(-2px);color:#1D1D1B} .jds-as-card:first-child{border-color:#DD0453;box-shadow:0 10px 26px -18px rgba(221,4,83,.9)} .jds-as-tag{ position:absolute;top:-10px;left:16px;background:#DD0453;color:#fff;font-size:11px;font-weight:700; letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px } .jds-as-img{display:block;height:110px;margin:6px 0 12px;display:flex;align-items:center;justify-content:center} .jds-as-img img{max-height:110px;width:auto;object-fit:contain} .jds-as-card b{font-size:16px;line-height:1.25;margin-bottom:5px} .jds-as-precio{font-size:14px;color:#DD0453;font-weight:700;margin-bottom:9px} .jds-as-precio del{color:#b9b4ae;font-weight:400} .jds-as-razon{font-size:13.5px;color:#5C5A55;line-height:1.55} .jds-as-pie{border-top:1px solid #EDE3E6;margin-top:24px;padding-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px} .jds-as-pie p{margin:0;flex:1 1 260px;font-size:14px;color:#5C5A55} .jds-as-tel{ background:#1D1D1B;color:#fff;text-decoration:none;font-weight:700;font-size:14.5px; padding:12px 22px;border-radius:999px } .jds-as-tel:hover{color:#fff;background:#000} .jds-as-otra{ background:none;border:0;color:#7C7A74;font-family:inherit;font-size:13.5px;cursor:pointer; text-decoration:underline;padding:6px } .jds-as-otra:hover{color:#DD0453} @media(max-width:900px){.jds-as-ops{grid-template-columns:repeat(2,1fr)}.jds-as-cards{grid-template-columns:1fr}} @media(max-width:560px){ .jds-asistente{padding:24px 18px;border-radius:13px} .jds-as-cab h2{font-size:22px} .jds-as-ops{grid-template-columns:1fr} .jds-as-tel{width:100%;text-align:center} } /* --------------------------------------------------------- 52. JDRON — EL AYUDANTE FLOTANTE --------------------------------------------------------- */ .jds-bot{position:fixed;right:20px;bottom:20px;z-index:9998;font-family:inherit} .jds-bot-abrir{ display:flex;align-items:center;gap:11px;background:#DD0453;color:#fff;border:0;cursor:pointer; border-radius:999px;padding:13px 20px 13px 16px;box-shadow:0 10px 28px -10px rgba(221,4,83,.85); font-family:inherit;font-size:14.5px;font-weight:700;transition:transform .15s,box-shadow .15s } .jds-bot-abrir:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(221,4,83,.95)} .jds-bot-dron .jds-h{transform-origin:15px 14px;animation:jds-helice 2.4s ease-in-out infinite} .jds-bot-dron .jds-h2{animation-delay:.4s} @keyframes jds-helice{0%,100%{opacity:1}50%{opacity:.35}} .jds-bot-abrir:hover .jds-bot-dron{animation:jds-flota 1.6s ease-in-out infinite} @keyframes jds-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} @media(max-width:520px){.jds-bot-globo{display:none}.jds-bot-abrir{padding:14px}} /* Esto faltaba: sin ello el panel se abria solo al entrar en la web, porque «display:flex» le ganaba al atributo hidden del navegador. */ .jds-bot-panel[hidden]{display:none !important} .jds-bot-panel{ position:absolute;right:0;bottom:64px;width:418px;max-width:calc(100vw - 32px); background:#fff;border:1px solid #EDE3E6;border-radius:16px;overflow:hidden; box-shadow:0 24px 60px -22px rgba(0,0,0,.42);display:flex;flex-direction:column;max-height:min(80vh,700px) } .jds-bot-cab{display:flex;align-items:center;gap:11px;padding:14px 16px;background:#1D1D1B;color:#fff} .jds-bot-avatar{color:#DD0453;background:#fff;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex:none} .jds-bot-cab b{display:block;font-size:15px;line-height:1.2} .jds-bot-cab em{font-style:normal;font-size:12px;opacity:.7} .jds-bot-cerrar{margin-left:auto;background:none;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;opacity:.7;padding:0 4px} .jds-bot-cerrar:hover{opacity:1} .jds-bot-hilo{padding:17px 17px 6px;overflow-y:auto;flex:1;background:#FBF9F8;min-height:250px;font-size:14.5px} .jds-m{margin-bottom:10px;display:flex} .jds-m-txt{ display:block;max-width:88%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.55; background:#fff;border:1px solid #EDE3E6;color:#1D1D1B } .jds-m-bot .jds-m-txt{border-bottom-left-radius:4px} .jds-m-yo{justify-content:flex-end} .jds-m-yo .jds-m-txt{background:#DD0453;color:#fff;border-color:#DD0453;border-bottom-right-radius:4px} .jds-m-txt ul,.jds-m-txt ol{margin:9px 0 0;padding-left:19px} .jds-m-txt li{margin-bottom:6px} .jds-m-txt p{margin:0 0 9px} .jds-m-txt p:last-child{margin-bottom:0} .jds-m-txt b{font-weight:700} .jds-m-pie{display:block;margin-top:11px;padding-top:9px;border-top:1px dashed #E6DFDB;font-size:12.5px;color:#7C7A74;line-height:1.5} .jds-m-esp .jds-m-txt{display:flex;gap:4px;padding:14px} .jds-m-esp i{width:6px;height:6px;border-radius:50%;background:#C9C3BD;animation:jds-pt 1.1s infinite} .jds-m-esp i:nth-child(2){animation-delay:.15s} .jds-m-esp i:nth-child(3){animation-delay:.3s} @keyframes jds-pt{0%,60%,100%{opacity:.3}30%{opacity:1}} .jds-m-ops{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px 0} .jds-m-ops button{ background:#fff;border:1px solid #DD0453;color:#DD0453;border-radius:999px;padding:8px 14px; font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .13s,color .13s } .jds-m-ops button:hover{background:#DD0453;color:#fff} .jds-m-prod{display:grid;gap:8px;margin-top:11px} .jds-m-prod a{display:flex;align-items:center;gap:10px;text-decoration:none;color:#1D1D1B;background:#FBF9F8;border:1px solid #EDE3E6;border-radius:10px;padding:8px} .jds-m-prod a:hover{border-color:#DD0453} .jds-m-prod img{width:44px;height:44px;object-fit:contain;flex:none} .jds-m-prod b{display:block;font-size:13.5px;line-height:1.3} .jds-m-prod em{font-style:normal;font-size:12.5px;color:#DD0453;font-weight:700} .jds-m-cta{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap} .jds-m-cta a{background:#1D1D1B;color:#fff;text-decoration:none;border-radius:999px;padding:9px 15px;font-size:13px;font-weight:600} .jds-m-cta a:hover{color:#fff;background:#000} .jds-bot-pie{border-top:1px solid #EDE3E6;padding:12px 14px;background:#fff} .jds-bot-form{display:flex;gap:8px} .jds-bot-input{ flex:1;border:1px solid #E6DFDB;border-radius:999px;padding:10px 15px;font-family:inherit;font-size:14px; background:#FBF9F8;color:#1D1D1B } .jds-bot-input:focus{outline:2px solid #DD0453;outline-offset:1px;background:#fff} .jds-bot-form button{ flex:none;width:40px;height:40px;border-radius:50%;border:0;background:#DD0453;color:#fff; font-size:18px;cursor:pointer;line-height:1 } .jds-bot-form button:hover{background:#B80345} .jds-bot-aviso{margin:9px 0 0;font-size:11.5px;color:#8A8781;line-height:1.5} .jds-bot-aviso a{color:#DD0453;font-weight:700;text-decoration:none} @media(max-width:520px){ .jds-bot{right:14px;bottom:14px} .jds-bot-panel{bottom:60px;max-height:76vh} } .jds-m-cta a.jds-wa{background:#25D366;color:#fff} .jds-m-cta a.jds-wa:hover{background:#1EBE5A;color:#fff} /* ---- JDron: minimizar y ocupar menos ---- */ .jds-bot-min{ margin-left:auto;background:none;border:0;color:#fff;font-size:26px;line-height:.6;cursor:pointer; opacity:.7;padding:0 6px;font-family:inherit } .jds-bot-min:hover{opacity:1} .jds-bot-cerrar{margin-left:0} .jds-bot.minimizado .jds-bot-hilo, .jds-bot.minimizado .jds-bot-pie{display:none} .jds-bot.minimizado .jds-bot-panel{max-height:none;width:300px} .jds-bot.minimizado .jds-bot-min{transform:rotate(180deg)} .jds-bot.minimizado .jds-bot-cab{cursor:pointer} /* El globito se retira solo: es un saludo, no un cartel */ .jds-bot-globo{ max-width:220px;overflow:hidden;white-space:nowrap; transition:max-width .35s ease,opacity .25s ease,margin .35s ease } .jds-bot-callado .jds-bot-globo{max-width:0;opacity:0;margin-left:-11px} /* Un poco menos alto, que no tape media pantalla */ .jds-bot-panel{max-height:min(80vh,700px)} .jds-bot-hilo{min-height:250px} @media(max-height:700px){.jds-bot-panel{max-height:72vh}} /* ---- JDron con la mascota de la casa ---- */ .jds-bot-abrir.con-foto{ background:#fff;padding:6px 20px 6px 8px;border:2px solid #DD0453; color:#1D1D1B;box-shadow:0 12px 30px -12px rgba(0,0,0,.45) } .jds-bot-abrir.con-foto:hover{box-shadow:0 16px 34px -12px rgba(221,4,83,.6)} .jds-bot-mascota{ width:52px;height:auto;display:block;flex:none; filter:drop-shadow(0 3px 5px rgba(0,40,120,.22)); animation:jds-flota 3s ease-in-out infinite } .jds-bot-abrir.con-foto .jds-bot-globo{color:#1D1D1B;font-weight:700} .jds-bot-avatar.con-foto{background:#fff;padding:2px} .jds-bot-avatar.con-foto img{width:34px;height:auto;display:block} @media(max-width:520px){ .jds-bot-abrir.con-foto{padding:5px} .jds-bot-mascota{width:46px} } /* ========================================================= 53. EL BOT SIEMPRE ARRANCA CERRADO Y SE ABRE EN GRANDE ========================================================= */ /* En el movil no tiene sentido una ventanita: se abre como una hoja que sube desde abajo y ocupa lo que necesita. */ @media(max-width:600px){ .jds-bot-panel{ position:fixed;left:0;right:0;bottom:0;width:auto;max-width:none; border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0; max-height:86vh;box-shadow:0 -18px 50px -18px rgba(0,0,0,.5) } .jds-bot-hilo{min-height:0;max-height:none} .jds-bot-pie{padding-bottom:calc(12px + env(safe-area-inset-bottom))} .jds-bot.minimizado .jds-bot-panel{width:auto} } /* En la ficha de producto hay barra de compra fija abajo: subimos el boton para que no se tapen entre ellos. */ @media(max-width:768px){ .single-product .jds-bot{bottom:76px} } /* ========================================================= 54. CABECERA DE MOVIL: LOGO A LA IZQUIERDA, PULGAR A LA DERECHA ========================================================= */ .jds-mh{display:none} @media(max-width:768px){ .site-header .col-full{position:relative;padding-right:186px} .site-header{padding-top:8px;padding-bottom:8px;transition:padding .18s ease} .site-header.jds-encogida{padding-top:4px;padding-bottom:4px} .site-header.jds-encogida .site-branding img, .site-header.jds-encogida .custom-logo{max-height:28px} .site-header .site-branding{margin:0;width:auto;float:none} .site-header .site-branding img,.site-header .custom-logo{max-height:36px;transition:max-height .18s ease} /* Fuera lo que Storefront pone por su cuenta: lo sustituimos nosotros. */ .site-header .menu-toggle, .site-header .site-search, .site-header .storefront-primary-navigation, .site-header .main-navigation, .site-header .handheld-navigation, .site-header .site-header-cart, .site-header .secondary-navigation{display:none !important} .jds-mh{ display:flex;align-items:center;gap:2px; position:absolute;right:12px;top:50%;transform:translateY(-50%) } .jds-mh-b{ display:flex;align-items:center;justify-content:center; width:44px;height:44px;border:0;background:none;color:var(--jds-tinta); cursor:pointer;border-radius:12px;position:relative;text-decoration:none;padding:0 } .jds-mh-b:active{background:var(--jds-rosa-suave);color:var(--jds-rosa)} .jds-mh-cesta{color:var(--jds-tinta)} .jds-mh-n{ position:absolute;top:5px;right:4px;min-width:17px;height:17px;line-height:17px; background:var(--jds-rosa);color:#fff;border-radius:99px;font-size:10.5px; font-weight:800;text-align:center;padding:0 4px;box-shadow:0 0 0 2px #fff } .jds-mh-n.vacio{display:none} .jds-mh-menu{flex-direction:column;gap:4px} .jds-mh-raya{display:block;width:20px;height:2.2px;background:var(--jds-tinta);border-radius:2px} /* Buscador desplegable */ .jds-mbusca{ position:fixed;left:0;right:0;top:0;z-index:10000;background:#fff; border-bottom:1px solid var(--jds-linea);padding:10px 14px; box-shadow:0 10px 24px -14px rgba(0,0,0,.4) } .admin-bar .jds-mbusca{top:46px} .jds-mbusca form{display:flex;gap:8px} .jds-mbusca input[type="search"]{ flex:1;min-width:0;border:1px solid var(--jds-linea-fuerte);border-radius:11px; padding:12px 14px;font-size:16px;background:var(--jds-superficie) } .jds-mbusca button{ border:0;background:var(--jds-rosa);color:#fff;font-weight:800; border-radius:11px;padding:0 18px;font-size:14px;cursor:pointer } /* Cajon del menu */ .jds-mcaj{position:fixed;inset:0;z-index:10001} .jds-mcaj-fondo{position:absolute;inset:0;background:rgba(29,29,27,.55);backdrop-filter:blur(2px)} .jds-mcaj-panel{ position:absolute;right:0;top:0;bottom:0;width:min(340px,88vw);background:#fff; display:flex;flex-direction:column;overflow-y:auto; box-shadow:-20px 0 50px -20px rgba(0,0,0,.5); animation:jds-mcaj-entra .2s ease } @keyframes jds-mcaj-entra{from{transform:translateX(100%)}to{transform:none}} .jds-mcaj-cab{ display:flex;align-items:center;justify-content:space-between; padding:16px 18px;background:var(--jds-tinta);color:#fff;position:sticky;top:0;z-index:2 } .jds-mcaj-cab b{font-family:Archivo,sans-serif;font-size:16px;letter-spacing:-.01em} .jds-mcaj-x{background:none;border:0;color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:0 4px} .jds-mcaj-todo{ display:block;margin:14px 16px 6px;padding:13px 16px;border-radius:12px; background:var(--jds-rosa);color:#fff;font-weight:800;text-align:center; text-decoration:none;font-size:14.5px } .jds-mcaj-panel ul{list-style:none;margin:6px 0 0;padding:0} .jds-mcaj-panel li a{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:15px 18px;border-bottom:1px solid var(--jds-linea); color:var(--jds-tinta);text-decoration:none;font-weight:600;font-size:15px;min-height:44px } .jds-mcaj-panel li a:active{background:var(--jds-rosa-suave);color:var(--jds-rosa)} .jds-mcaj-panel li a em{ font-style:normal;font-size:11.5px;font-weight:800;color:var(--jds-gris); background:var(--jds-superficie);border-radius:99px;padding:3px 9px;flex:none } .jds-mcaj-pie{padding:18px;display:flex;flex-direction:column;gap:11px;margin-top:auto;background:var(--jds-superficie)} .jds-mcaj-pie a{text-decoration:none;font-weight:700;font-size:14.5px;min-height:24px} .jds-mcaj-cuenta{color:var(--jds-tinta)} .jds-mcaj-wa{color:#128C7E} .jds-mcaj-tel{color:var(--jds-rosa);font-size:17px !important;font-family:Archivo,sans-serif} .jds-mcaj-hor,.jds-mcaj-sitio{font-size:12px;color:var(--jds-gris);line-height:1.45} body.jds-sin-scroll{overflow:hidden} /* Nada de zoom accidental: 16 px minimo en todo lo que se escribe. */ input[type="text"],input[type="search"],input[type="email"],input[type="tel"], input[type="number"],input[type="password"],select,textarea{font-size:16px} /* Que se pueda pulsar sin fallar. */ .woocommerce .button,.woocommerce a.button,.woocommerce button.button, .jds-uso,.jds-subcat{min-height:44px;display:inline-flex;align-items:center;justify-content:center} /* La fila de categorias, deslizable con el dedo y sin barra fea. */ .jds-usos .col-full{ display:flex;gap:8px;overflow-x:auto;padding-top:8px;padding-bottom:8px; scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity } .jds-usos .col-full::-webkit-scrollbar{display:none} .jds-usos .jds-uso{flex:none;scroll-snap-align:start} .jds-usos .jds-tel{display:none} } /* ========================================================= 55. EN EL MOVIL, JDRON TIENE QUE VERSE --------------------------------------------------------- En el telefono el globito «¿Te echo una mano?» se oculta, asi que solo quedaba la mascota sobre una pastilla blanca con un filo rosa muy fino: encima de una pagina blanca, pasaba desapercibida. Ahora es un boton redondo de verdad, con aro rosa grueso y sombra, y late unas cuantas veces al entrar para que el ojo lo encuentre. ========================================================= */ @media(max-width:600px){ .jds-bot{z-index:10002;right:14px;bottom:14px} .jds-bot-abrir, .jds-bot-abrir.con-foto{ width:64px;height:64px;padding:0;border-radius:50%; justify-content:center;background:#fff;border:3px solid #DD0453; box-shadow:0 10px 26px -8px rgba(29,29,27,.45), 0 0 0 6px rgba(221,4,83,.10) } .jds-bot-mascota{width:44px;margin:0} .jds-bot-dron{width:30px;height:30px} /* Un latido corto al entrar: tres veces y para. */ .jds-bot-abrir::after{ content:"";position:absolute;inset:-3px;border-radius:50%; border:3px solid #DD0453;opacity:0;pointer-events:none; animation:jds-latido 1.9s ease-out 3 } @keyframes jds-latido{ 0%{transform:scale(1);opacity:.65} 70%{transform:scale(1.55);opacity:0} 100%{transform:scale(1.55);opacity:0} } .jds-bot-callado .jds-bot-abrir::after{animation:none} .jds-bot-panel{z-index:10003} } @media(prefers-reduced-motion:reduce){ .jds-bot-abrir::after{animation:none !important} .jds-bot-mascota{animation:none !important} } /* ========================================================= 56. JDRON, CON VIDA EN EL MOVIL --------------------------------------------------------- Es tu mascota, la que subiste tu. En el telefono no hay burbuja de texto que acompañe, asi que la vida la tiene que poner ella: flota, se inclina a un lado y a otro como si estuviera pilotando, y cada pocos segundos hace un quiebro. Entre quiebro y quiebro descansa, para que no canse al que esta leyendo. ========================================================= */ @media(max-width:600px){ .jds-bot-abrir.con-foto{overflow:visible} .jds-bot-mascota{ animation:jds-mascota-viva 7s ease-in-out infinite; transform-origin:50% 62%; filter:drop-shadow(0 4px 6px rgba(0,40,120,.28)) } @keyframes jds-mascota-viva{ 0% {transform:translateY(0) rotate(0deg) scale(1)} 8% {transform:translateY(-4px) rotate(-7deg) scale(1.04)} 16% {transform:translateY(-1px) rotate(0deg) scale(1)} 24% {transform:translateY(-4px) rotate(7deg) scale(1.04)} 32% {transform:translateY(0) rotate(0deg) scale(1)} /* y ahora a flotar tranquilo hasta el proximo quiebro */ 50% {transform:translateY(-3px) rotate(-2deg) scale(1)} 70% {transform:translateY(0) rotate(2deg) scale(1)} 88% {transform:translateY(-2px) rotate(0deg) scale(1)} 100% {transform:translateY(0) rotate(0deg) scale(1)} } /* La sombra del suelo respira con ella: es lo que da la sensacion de que esta volando y no pegada al cristal. */ .jds-bot-abrir.con-foto::before{ content:"";position:absolute;left:50%;bottom:5px;width:26px;height:6px; transform:translateX(-50%);border-radius:50%; background:rgba(29,29,27,.20);filter:blur(2.5px); animation:jds-sombra-viva 7s ease-in-out infinite;pointer-events:none } @keyframes jds-sombra-viva{ 0%,32%,100%{transform:translateX(-50%) scaleX(1);opacity:.30} 8%,24% {transform:translateX(-50%) scaleX(.72);opacity:.16} 50%,88% {transform:translateX(-50%) scaleX(.86);opacity:.22} } /* Al tocarlo, acusa el golpe: se hunde un poco. */ .jds-bot-abrir:active .jds-bot-mascota{animation:none;transform:translateY(2px) scale(.94)} } /* Quien tenga el movil en modo «menos movimiento», que no vea nada de esto. */ @media(prefers-reduced-motion:reduce){ .jds-bot-mascota, .jds-bot-abrir.con-foto::before, .jds-bot-abrir::after{animation:none !important} } /* ========================================================= 57. MOTORES EN MARCHA, Y CADA COSA EN SU SITIO --------------------------------------------------------- Dos cosas: 1) JDron enciende motores: arranca con una sacudida, sube un palmo y desde ahi las helices no paran de girar. 2) Estaba pegado abajo del todo, tapando el carrito de la barra de Storefront. Ahora se sube por encima de ella. ========================================================= */ @media(max-width:600px){ /* ---- Sitio: por encima de la barra de abajo ---- */ .jds-barra-abajo .jds-bot{bottom:calc(74px + env(safe-area-inset-bottom))} /* En la ficha de producto manda la barra de compra. */ .single-product .jds-bot{bottom:calc(74px + env(safe-area-inset-bottom))} /* La barra de Storefront ya lleva cuenta, buscador y carrito, asi que arriba dejamos solo el menu: ni repetimos botones ni apretujamos el logo. */ .jds-barra-abajo .jds-mh-buscar, .jds-barra-abajo .jds-mh-cesta, .jds-barra-abajo .jds-mh > a[aria-label="Mi cuenta"]{display:none} .jds-barra-abajo .site-header .col-full{padding-right:64px} /* Y esa barra, decente: fondo blanco, iconos oscuros y el numerito del carrito en rosa. */ .storefront-handheld-footer-bar{ background:#fff;border-top:1px solid var(--jds-linea); box-shadow:0 -6px 20px rgba(29,29,27,.08) } .storefront-handheld-footer-bar ul li a{ color:var(--jds-tinta);font-weight:600;font-size:11px; letter-spacing:.01em;padding:.6em 0 } .storefront-handheld-footer-bar ul li>a:before{font-size:22px;line-height:1.3} .storefront-handheld-footer-bar ul li.cart .count{ background:var(--jds-rosa);color:#fff;border:0;font-weight:800; box-shadow:0 0 0 2px #fff } .storefront-handheld-footer-bar ul li.search .site-search{ background:#fff;border-top:1px solid var(--jds-linea);padding:14px 16px } /* ---- Motores ---- */ .jds-bot-abrir.con-foto{position:relative;overflow:visible} /* Arranque: sacudida corta y despegue. Luego, a volar. */ .jds-bot-mascota{ animation:jds-arranque 1.3s cubic-bezier(.36,.07,.19,.97) 1, jds-mascota-viva 7s ease-in-out infinite 1.3s } @keyframes jds-arranque{ 0% {transform:translate(0,3px) rotate(0deg) scale(.96)} 8% {transform:translate(-1px,3px) rotate(-1.5deg) scale(.96)} 16% {transform:translate(1px,3px) rotate(1.5deg) scale(.96)} 24% {transform:translate(-1px,2px) rotate(-1.5deg) scale(.97)} 32% {transform:translate(1px,2px) rotate(1.5deg) scale(.97)} 40% {transform:translate(-1px,1px) rotate(-1deg) scale(.98)} 52% {transform:translate(0,-1px) rotate(0deg) scale(1)} 72% {transform:translate(0,-6px) rotate(0deg) scale(1.05)} 100% {transform:translate(0,0) rotate(0deg) scale(1)} } /* Las helices de los dos rotores exteriores. Los sitios estan medidos sobre el PNG: rotor izquierdo al 16 % del ancho, derecho al 85 %, ambos al 30 % de la altura. */ .jds-helice-i,.jds-helice-d{ position:absolute;top:24px;width:15px;height:15px;border-radius:50%; pointer-events:none;opacity:0; background:conic-gradient( from 0deg, rgba(40,55,80,0) 0deg, rgba(40,55,80,.42) 26deg, rgba(40,55,80,0) 62deg, rgba(40,55,80,0) 180deg, rgba(40,55,80,.42)206deg, rgba(40,55,80,0) 242deg, rgba(40,55,80,0) 360deg); animation:jds-encender .5s ease-out 1.05s forwards, jds-girar .26s linear infinite 1.05s } .jds-helice-i{left:10px} .jds-helice-d{right:10px} @keyframes jds-girar{to{transform:rotate(360deg)}} @keyframes jds-encender{from{opacity:0}to{opacity:1}} .jds-bot-abrir:active .jds-helice-i, .jds-bot-abrir:active .jds-helice-d{animation-duration:.5s,.14s} } /* Quien tenga el movil en «menos movimiento», que no vea nada girar. */ @media(prefers-reduced-motion:reduce){ .jds-helice-i,.jds-helice-d{animation:none !important;opacity:0 !important} .jds-bot-mascota{animation:none !important} } /* ========================================================= 58. PESTAÑAS DE CATEGORÍA --------------------------------------------------------- «Los equipos» primero y los accesorios en su pestaña. En ROV submarinos había 34 productos de golpe y los cuatro modelos se perdían entre treinta accesorios. ========================================================= */ .jds-pestanas{ display:flex;flex-wrap:wrap;gap:6px; border-bottom:2px solid var(--jds-linea); margin:22px 0 26px;padding:0 } .jds-pestana{ display:inline-flex;align-items:center;gap:8px; padding:11px 18px;margin-bottom:-2px; border:2px solid transparent;border-bottom:0; border-radius:11px 11px 0 0; color:var(--jds-tinta-2);text-decoration:none; font-weight:700;font-size:14.5px;line-height:1; transition:background .14s,color .14s } .jds-pestana:hover{background:var(--jds-rosa-suave);color:var(--jds-rosa)} .jds-pestana em{ font-style:normal;font-size:11.5px;font-weight:800; background:var(--jds-superficie);color:var(--jds-gris); border-radius:99px;padding:3px 9px } .jds-pestana.activa{ background:#fff;color:var(--jds-tinta); border-color:var(--jds-linea); box-shadow:0 -2px 0 var(--jds-rosa) inset,0 -4px 0 #fff } .jds-pestana.activa em{background:var(--jds-rosa);color:#fff} @media(max-width:768px){ .jds-pestanas{ flex-wrap:nowrap;overflow-x:auto;gap:4px; scrollbar-width:none;-webkit-overflow-scrolling:touch } .jds-pestanas::-webkit-scrollbar{display:none} .jds-pestana{flex:none;padding:11px 14px;font-size:13.5px;min-height:44px} } /* ========================================================= 59. FINALIZAR COMPRA --------------------------------------------------------- La dirección guardada salía como una tarjetita gris con un «Editar» de ocho píxeles. Ahora es una caja con nombre y un botón que se ve, y cada campo delicado lleva su frase. ========================================================= */ .wc-block-checkout__form .wc-block-components-address-card{ background:var(--jds-superficie); border:1px solid var(--jds-linea); border-radius:12px; padding:16px 18px; position:relative } .wc-block-components-address-card address{font-style:normal;line-height:1.55} .wc-block-components-address-card__address-section{color:var(--jds-tinta-2)} .jds-editar-dir, .wc-block-components-address-card__edit{ position:absolute;top:12px;right:12px; background:#fff !important; border:2px solid var(--jds-rosa) !important; color:var(--jds-rosa) !important; border-radius:9px; padding:8px 14px !important; font-weight:800 !important; font-size:13px !important; text-decoration:none !important; line-height:1 !important; cursor:pointer; min-height:38px; display:inline-flex;align-items:center } .jds-editar-dir:hover, .wc-block-components-address-card__edit:hover{ background:var(--jds-rosa) !important;color:#fff !important } .jds-ayuda{ display:block;margin:6px 2px 0; font-size:12.5px;line-height:1.45;color:var(--jds-gris) } /* Los títulos de cada paso, con más aire y jerarquía. */ .wc-block-checkout__form .wc-block-components-checkout-step__title{ font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.01em } .wc-block-checkout__form .wc-block-components-checkout-step{margin-bottom:26px} @media(max-width:768px){ .jds-editar-dir, .wc-block-components-address-card__edit{ position:static;margin-top:12px;width:100%;justify-content:center;min-height:44px } .wc-block-checkout__form .wc-block-components-address-card{padding:14px} } /* ========================================================= 60. EL CARRITO DE LA CABECERA, LEGIBLE --------------------------------------------------------- Estaba todo en una línea y del mismo tamaño, y al pasar el ratón el importe se quedaba en rosa oscuro sobre rosa: no se leía nada. Ahora: cesta con el número encima, importe grande, y el «IVA incl.» en pequeño debajo. ========================================================= */ .site-header-cart{margin:0;padding:0;list-style:none} .jds-cesta{ display:inline-flex;align-items:center;gap:12px; background:var(--jds-tinta);color:#fff !important; border-radius:14px;padding:9px 18px 9px 14px; text-decoration:none;line-height:1;min-height:48px; border:2px solid var(--jds-tinta); transition:background .16s,border-color .16s,transform .16s,box-shadow .16s } .jds-cesta:hover,.jds-cesta:focus-visible{ background:var(--jds-rosa);border-color:var(--jds-rosa); transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(221,4,83,.9) } /* La cesta y su contador */ .jds-cesta-ico{position:relative;display:flex;align-items:center;color:#fff;flex:none} .jds-cesta-n{ position:absolute;top:-7px;right:-9px; min-width:19px;height:19px;line-height:19px;padding:0 5px; background:var(--jds-rosa);color:#fff; border-radius:99px;font-size:11px;font-weight:800;text-align:center; box-shadow:0 0 0 2px var(--jds-tinta); transition:background .16s,box-shadow .16s } .jds-cesta:hover .jds-cesta-n{background:#fff;color:var(--jds-rosa);box-shadow:0 0 0 2px var(--jds-rosa)} /* El importe y la letra pequeña */ .jds-cesta-txt{display:flex;flex-direction:column;gap:3px;align-items:flex-start} .jds-cesta-txt b{ font-family:Archivo,sans-serif;font-weight:800; font-size:16px;letter-spacing:-.02em;color:#fff } .jds-cesta-txt b .woocommerce-Price-amount, .jds-cesta-txt b bdi, .jds-cesta-txt b .woocommerce-Price-currencySymbol{color:#fff !important;font-size:inherit} .jds-cesta-txt em{ font-style:normal;font-size:10.5px;font-weight:600; letter-spacing:.06em;text-transform:uppercase; color:rgba(255,255,255,.62) } .jds-cesta:hover .jds-cesta-txt em{color:rgba(255,255,255,.85)} /* Carrito vacío: más discreto, que no compita con nada */ .jds-cesta.vacia{background:transparent;border-color:var(--jds-linea-fuerte);color:var(--jds-tinta) !important} .jds-cesta.vacia .jds-cesta-ico{color:var(--jds-tinta)} .jds-cesta.vacia .jds-cesta-txt b{color:var(--jds-tinta);font-size:14px} .jds-cesta.vacia .jds-cesta-txt em{color:var(--jds-gris)} .jds-cesta.vacia:hover{background:var(--jds-rosa);border-color:var(--jds-rosa);color:#fff !important} .jds-cesta.vacia:hover .jds-cesta-ico, .jds-cesta.vacia:hover .jds-cesta-txt b, .jds-cesta.vacia:hover .jds-cesta-txt em{color:#fff} /* El mini-carrito que cuelga debajo */ .site-header-cart .widget_shopping_cart{border-radius:14px;border:1px solid var(--jds-linea);box-shadow:0 22px 50px -24px rgba(0,0,0,.4)} @media(max-width:768px){ .site-header-cart{display:none !important} } /* ========================================================= 61. LAS TARJETAS EN EL PASO DE PAGO --------------------------------------------------------- Ahí el cliente no busca quién le cobra: busca si acepta SU tarjeta. Nuestro logo en ese sitio no responde a nada. ========================================================= */ .jds-tarjetas-pago{ display:inline-flex;align-items:center;gap:6px; margin-left:12px;vertical-align:middle;flex-wrap:wrap } .jds-tarjetas-pago .jds-tarjeta{display:inline-flex;line-height:0} .jds-tarjetas-pago svg{height:24px;width:auto;display:block} .jds-tarjetas-pago img{height:24px;width:auto;display:block} @media(max-width:520px){ .jds-tarjetas-pago{margin-left:0;margin-top:8px;width:100%;gap:5px} .jds-tarjetas-pago svg,.jds-tarjetas-pago img{height:21px} } /* ========================================================= 62. AVISOS: «PRODUCTO AÑADIDO AL CARRITO» --------------------------------------------------------- Estaba ilegible, y era culpa mía: le puse fondo rosa claro pero Storefront escribe ese texto en BLANCO, porque cuenta con un fondo de color. Blanco sobre rosa pálido = nada. Se rehace entero: tarjeta blanca, franja rosa a la izquierda, texto oscuro y el botón bien separado. ========================================================= */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info{ display:flex;align-items:center;flex-wrap:wrap;gap:14px; background:#fff !important; color:var(--jds-tinta) !important; border:1px solid var(--jds-linea) !important; border-left:5px solid var(--jds-rosa) !important; border-top-width:1px !important; border-radius:12px !important; padding:16px 20px !important; margin:0 0 24px !important; font-size:15px;line-height:1.45; box-shadow:0 8px 24px -18px rgba(29,29,27,.5) } .woocommerce-message *, .woocommerce-info *, .woocommerce-error *{color:var(--jds-tinta)} /* El icono que pone Storefront delante */ .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{ position:static !important; color:var(--jds-rosa) !important; font-size:20px;line-height:1;flex:none;margin:0 2px 0 0 } .woocommerce-error{border-left-color:#C62828 !important} .woocommerce-error::before{color:#C62828 !important} /* El botón «Ver carrito», a la derecha y separado */ .woocommerce-message .button, .woocommerce-info .button{ margin-left:auto !important;flex:none; background:var(--jds-rosa) !important;color:#fff !important; border-radius:10px !important;padding:11px 20px !important; font-weight:800 !important;text-decoration:none !important; min-height:44px;display:inline-flex;align-items:center } .woocommerce-message .button:hover, .woocommerce-info .button:hover{background:var(--jds-tinta) !important;color:#fff !important} @media(max-width:600px){ .woocommerce-message,.woocommerce-info,.woocommerce-error{ padding:14px 16px !important;font-size:14px;gap:10px } .woocommerce-message .button,.woocommerce-info .button{ margin-left:0 !important;width:100%;justify-content:center } } /* --- Y de paso: que el carrito de la cabecera apile bien --- */ .site-header-cart .jds-cesta .jds-cesta-txt{flex-direction:column !important;align-items:flex-start !important} .site-header-cart .jds-cesta .jds-cesta-txt b{display:block;white-space:nowrap} .site-header-cart .jds-cesta .jds-cesta-txt em{display:block;white-space:nowrap} /* Formación exenta de IVA: se dice, no se repite el importe. */ .jds-exento{color:#127A4B !important;font-weight:700} /* ========================================================= 63. MI CUENTA, REHECHA --------------------------------------------------------- El escritorio de WooCommerce es un párrafo con seis enlaces subrayados seguidos. Un cliente que acaba de gastarse 3.000 € merece una portada de cuenta, no un panel de 2012. ========================================================= */ /* ---- El menú lateral ---- */ .woocommerce-account .woocommerce-MyAccount-navigation ul{ border:1px solid var(--jds-linea);border-radius:14px; overflow:hidden;background:#fff;padding:6px } .woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:0;margin:0} .woocommerce-account .woocommerce-MyAccount-navigation li a{ display:flex;align-items:center;gap:10px; padding:12px 14px;border-radius:10px; font-weight:600;font-size:14.5px;color:var(--jds-tinta-2); text-decoration:none;transition:background .14s,color .14s } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ background:var(--jds-superficie);color:var(--jds-tinta) } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--jds-rosa);color:#fff; box-shadow:0 8px 20px -12px rgba(221,4,83,.9) } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after{content:none} /* ---- Cabecera de la cuenta ---- */ .jds-cuenta-cab{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; padding:20px 22px;margin:0 0 18px; background:var(--jds-tinta);border-radius:16px;color:#fff } .jds-cuenta-avatar{ width:52px;height:52px;border-radius:50%;flex:none; background:var(--jds-rosa);color:#fff; display:flex;align-items:center;justify-content:center; font-family:Archivo,sans-serif;font-weight:800;font-size:22px } .jds-cuenta-quien{min-width:0} .jds-cuenta-quien h2{ margin:0;color:#fff;font-size:21px;letter-spacing:-.02em; font-family:Archivo,sans-serif;font-weight:800;line-height:1.15 } .jds-cuenta-quien p{margin:3px 0 0;font-size:13.5px;color:rgba(255,255,255,.66)} .jds-cuenta-salir{ margin-left:auto;flex:none; border:1.5px solid rgba(255,255,255,.32);border-radius:10px; padding:10px 16px;color:#fff !important;text-decoration:none; font-size:13.5px;font-weight:700;min-height:42px; display:inline-flex;align-items:center } .jds-cuenta-salir:hover{background:#fff;color:var(--jds-tinta) !important;border-color:#fff} /* ---- Las cifras ---- */ .jds-cuenta-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 18px} .jds-cuenta-cifras>*{ background:var(--jds-superficie);border:1px solid var(--jds-linea); border-radius:13px;padding:15px 16px;text-decoration:none;display:block } .jds-cuenta-cifras a:hover{border-color:var(--jds-rosa);background:#fff} .jds-cuenta-cifras b{ display:block;font-family:Archivo,sans-serif;font-weight:800; font-size:27px;line-height:1;letter-spacing:-.03em;color:var(--jds-tinta) } .jds-cuenta-cifras a:hover b{color:var(--jds-rosa)} .jds-cuenta-cifras span{ display:block;margin-top:5px;font-size:11.5px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;color:var(--jds-gris) } /* ---- Las cuatro tarjetas ---- */ .jds-cuenta-cajas{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 18px} .jds-cc{ display:block;background:#fff;text-decoration:none; border:1px solid var(--jds-linea);border-radius:14px;padding:20px; transition:border-color .16s,transform .16s,box-shadow .16s } .jds-cc:hover{ border-color:var(--jds-rosa);transform:translateY(-2px); box-shadow:0 16px 34px -24px rgba(29,29,27,.6) } .jds-cc-ico{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:11px;margin-bottom:13px; background:var(--jds-rosa-suave);color:var(--jds-rosa) } .jds-cc:hover .jds-cc-ico{background:var(--jds-rosa);color:#fff} .jds-cc b{ display:block;font-family:Archivo,sans-serif;font-weight:800; font-size:16.5px;letter-spacing:-.01em;color:var(--jds-tinta);margin-bottom:5px } .jds-cc-txt{display:block;font-size:13.5px;line-height:1.5;color:var(--jds-gris)} .jds-cc-mas{ display:block;margin-top:12px;font-size:13.5px; font-weight:800;color:var(--jds-rosa) } .jds-cc-tienda{background:var(--jds-superficie)} /* ---- La franja de ayuda ---- */ .jds-cuenta-ayuda{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; border:1px solid var(--jds-linea);border-left:5px solid var(--jds-rosa); border-radius:14px;padding:18px 20px;background:#fff } .jds-cuenta-ayuda b{display:block;font-size:15.5px;margin-bottom:4px;color:var(--jds-tinta)} .jds-cuenta-ayuda span{display:block;font-size:13.5px;line-height:1.5;color:var(--jds-gris);max-width:62ch} .jds-cuenta-ayuda-btns{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap} .jds-btn-wa,.jds-btn-tel{ display:inline-flex;align-items:center;min-height:44px; padding:0 18px;border-radius:10px;font-weight:800;font-size:14px; text-decoration:none } .jds-btn-wa{background:#128C7E;color:#fff !important} .jds-btn-wa:hover{background:#0f7266} .jds-btn-tel{background:var(--jds-tinta);color:#fff !important;font-family:Archivo,sans-serif} .jds-btn-tel:hover{background:var(--jds-rosa)} @media(max-width:900px){ .jds-cuenta-cajas{grid-template-columns:1fr} } @media(max-width:600px){ .jds-cuenta-cab{padding:16px;gap:12px} .jds-cuenta-quien h2{font-size:18px} .jds-cuenta-salir{margin-left:0;width:100%;justify-content:center} .jds-cuenta-cifras{grid-template-columns:repeat(3,1fr);gap:8px} .jds-cuenta-cifras>*{padding:12px 10px;text-align:center} .jds-cuenta-cifras b{font-size:22px} .jds-cuenta-cifras span{font-size:10px;letter-spacing:.04em} .jds-cuenta-ayuda-btns{margin-left:0;width:100%} .jds-btn-wa,.jds-btn-tel{flex:1;justify-content:center} } /* ========================================================= 64. EL CARRITO DE LA CABECERA — ARREGLO Y MINI-CARRITO --------------------------------------------------------- Se veía roto: el icono encima del texto, la caja estirada a lo ancho y una cestita suelta abajo a la derecha. Esa cestita la pone Storefront con un ::after propio y había que quitarla. Y ya que estamos: al pasar el ratón se ve QUÉ hay dentro. ========================================================= */ /* Fuera los iconos que pinta Storefront por su cuenta. */ .site-header-cart .cart-contents::before, .site-header-cart .cart-contents::after{content:none !important;display:none !important} .site-header-cart{display:flex;justify-content:flex-end;position:relative} .site-header-cart li{list-style:none;margin:0;padding:0;width:auto} .site-header-cart .jds-cesta{ display:inline-flex !important; flex-direction:row !important; align-items:center !important; width:auto !important;float:none !important; white-space:nowrap } .site-header-cart .jds-cesta .jds-cesta-ico{margin:0 !important} /* Carrito vacío: compacto de verdad, no una caja estirada. */ .jds-cesta.vacia{padding:9px 16px 9px 13px} .jds-cesta.vacia .jds-cesta-txt b{font-size:14px;margin:0} .jds-cesta.vacia .jds-cesta-txt em{font-size:10px} /* --------------------------------------------------------- EL MINI-CARRITO: qué llevas dentro, sin salir de la página --------------------------------------------------------- */ .site-header-cart .widget_shopping_cart{ position:absolute;top:calc(100% + 10px);right:0;z-index:9999; width:340px;max-width:92vw; background:#fff;border:1px solid var(--jds-linea);border-radius:14px; box-shadow:0 26px 56px -26px rgba(29,29,27,.55); padding:14px; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s,transform .16s,visibility .16s } .site-header-cart:hover .widget_shopping_cart, .site-header-cart:focus-within .widget_shopping_cart{ opacity:1;visibility:visible;transform:none } .site-header-cart .widget_shopping_cart .cart_list{ margin:0;padding:0;list-style:none;max-height:320px;overflow-y:auto } .site-header-cart .widget_shopping_cart .cart_list li{ display:flex;align-items:center;gap:11px; padding:11px 4px;border-bottom:1px solid var(--jds-linea); margin:0;position:relative } .site-header-cart .widget_shopping_cart .cart_list li:last-child{border-bottom:0} .site-header-cart .widget_shopping_cart .cart_list li img{ width:48px;height:48px;object-fit:contain;flex:none;order:-1; background:var(--jds-superficie);border:1px solid var(--jds-linea);border-radius:8px; margin:0 !important;float:none !important } .site-header-cart .widget_shopping_cart .cart_list li a:not(.remove){ display:block;font-weight:700;font-size:13.5px;line-height:1.3; color:var(--jds-tinta);text-decoration:none;padding:0 } .site-header-cart .widget_shopping_cart .cart_list li a:not(.remove):hover{color:var(--jds-rosa)} .site-header-cart .widget_shopping_cart .quantity{ display:block;font-size:12.5px;color:var(--jds-gris);margin-top:3px } .site-header-cart .widget_shopping_cart .cart_list li .remove{ margin-left:auto;order:9;flex:none; width:26px;height:26px;line-height:24px;text-align:center; border-radius:50%;background:var(--jds-superficie); color:var(--jds-gris) !important;font-size:16px;text-decoration:none } .site-header-cart .widget_shopping_cart .cart_list li .remove:hover{ background:#C62828;color:#fff !important } .site-header-cart .widget_shopping_cart .total{ display:flex;justify-content:space-between;align-items:baseline; border-top:1px solid var(--jds-linea);border-bottom:0; margin:12px 0 0;padding:13px 4px 11px;font-size:13.5px } .site-header-cart .widget_shopping_cart .total strong{font-weight:600;color:var(--jds-gris)} .site-header-cart .widget_shopping_cart .total .amount{ font-family:Archivo,sans-serif;font-weight:800;font-size:20px; letter-spacing:-.02em;color:var(--jds-tinta) } .site-header-cart .widget_shopping_cart .buttons{ display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 0 } .site-header-cart .widget_shopping_cart .buttons .button{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;border-radius:10px;font-weight:800;font-size:13.5px; background:var(--jds-superficie) !important;color:var(--jds-tinta) !important; border:1px solid var(--jds-linea-fuerte) !important;margin:0 } .site-header-cart .widget_shopping_cart .buttons .checkout{ background:var(--jds-rosa) !important;color:#fff !important;border-color:var(--jds-rosa) !important } .site-header-cart .widget_shopping_cart .buttons .checkout:hover{background:var(--jds-tinta) !important;border-color:var(--jds-tinta) !important} /* Carrito vacío: un mensaje decente en vez de una línea suelta. */ .site-header-cart .widget_shopping_cart .empty{ margin:0;padding:22px 10px;text-align:center; font-size:14px;color:var(--jds-gris) } /* ========================================================= 65. AÑADIR IA AL COMPRAR UN DRON ========================================================= */ .jds-ia-extra{ margin:18px 0;padding:16px 18px; border:1px solid var(--jds-linea);border-left:5px solid var(--jds-rosa); border-radius:12px;background:var(--jds-superficie) } .jds-ia-extra b{ display:block;font-family:Archivo,sans-serif;font-weight:800; font-size:15.5px;color:var(--jds-tinta);margin-bottom:6px } .jds-ia-extra p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--jds-gris)} .jds-ia-extra select{ width:100%;max-width:520px; border:1px solid var(--jds-linea-fuerte);border-radius:10px; padding:12px 14px;font-size:14.5px;background:#fff; color:var(--jds-tinta);min-height:46px } .jds-ia-extra select:focus{outline:2px solid var(--jds-rosa);outline-offset:1px} .jds-ia-nota{ display:block;margin-top:9px;font-size:12.5px; line-height:1.45;color:var(--jds-gris) } @media(max-width:600px){ .jds-ia-extra{padding:14px} .jds-ia-extra select{font-size:16px} } /* ========================================================= 66. OFERTAS: ENLACE EN EL MENU Y PAGINA COMPLETA ========================================================= */ .jds-uso-oferta{color:var(--jds-rosa);font-weight:800} /* El punto rosa de «Ofertas» va en el de dentro: el ::before del propio enlace lo usa ahora la pastilla del raton (seccion 70). */ .jds-uso-oferta > span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--jds-rosa);margin-right:6px;vertical-align:1px;transition:transform .18s ease} .jds-vertodo{ flex:0 0 auto;font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:13.5px; color:var(--jds-rosa);text-decoration:none;border:1.5px solid var(--jds-rosa); border-radius:999px;padding:7px 14px;white-space:nowrap;transition:.15s } .jds-vertodo:hover{background:var(--jds-rosa);color:#fff} .jds-ofertas-todas{padding-top:0} .jds-of-cuenta{margin:0 0 16px;color:var(--jds-gris);font-size:13.5px} .jds-ofertas-rejilla{grid-template-columns:repeat(4,1fr)} @media(max-width:980px){.jds-ofertas-rejilla{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.jds-ofertas-rejilla{grid-template-columns:1fr}} /* ========================================================= 67. FILTROS DE LA PAGINA DE OFERTAS Con catorce packs (cuatro equipos x tres algoritmos) la rejilla sola abruma. Dos filas de fichas: por equipo y por algoritmo. Filtra en el sitio, sin recargar. ========================================================= */ .jds-filtros{display:grid;gap:10px;margin:0 0 18px} .jds-filtro-grupo{display:flex;flex-wrap:wrap;align-items:center;gap:7px} .jds-filtro-tit{ font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--jds-gris);margin-right:4px;min-width:74px } .jds-chip{ appearance:none;cursor:pointer;font-family:"Public Sans",sans-serif;font-size:13.5px; font-weight:600;color:var(--jds-tinta);background:#fff;border:1.5px solid var(--jds-linea-fuerte); border-radius:999px;padding:7px 13px;line-height:1;transition:.14s } .jds-chip i{font-style:normal;color:var(--jds-gris);font-weight:500;margin-left:3px;font-size:12px} .jds-chip:hover{border-color:var(--jds-rosa);color:var(--jds-rosa)} .jds-chip.activo{background:var(--jds-rosa);border-color:var(--jds-rosa);color:#fff} .jds-chip.activo i{color:rgba(255,255,255,.75)} .jds-of[hidden]{display:none !important} .jds-of-vacio{margin:18px 0 0;color:var(--jds-gris);font-size:14.5px} @media(max-width:640px){ .jds-filtro-grupo{gap:6px} .jds-filtro-tit{min-width:100%;margin:0 0 2px} .jds-chip{font-size:12.5px;padding:6px 11px} } /* En la pagina de ofertas las tarjetas viven dentro del contenido de la pagina, y ahi WordPress subraya todos los enlaces. Fuera. */ .jds-ofertas-todas .jds-of, .jds-ofertas-todas .jds-of *{text-decoration:none !important;border-bottom:0 !important} .jds-ofertas-todas .jds-of del, .jds-ofertas-todas .jds-of del *{text-decoration:line-through !important} .jds-ofertas-todas .jds-of:hover b{color:var(--jds-rosa)} /* ========================================================= 68. EL MOVIL, COMO SE MERECE --------------------------------------------------------- El telefono es donde mas gente entra, y ahi la tienda se veia estrecha y con un hueco blanco enorme debajo de la barra de categorias. Tres arreglos: 1) ANCHO. Storefront deja 21 px de margen a cada lado y encima nosotros poniamos 16 px de relleno: 37 px por banda, casi 75 px de los 375 que tiene un movil normal tirados a la basura. Bajamos a 14 px limpios y las fotos y los precios ganan casi 50 px de ancho. 2) EL HUECO. Storefront le mete 4,23 em de relleno arriba al contenido de la portada, y la barra de categorias llevaba otros 26 px de margen abajo. Juntos dejaban un palmo de blanco antes del video. Fuera los dos: el video arranca pegado a la barra. 3) LA BARRA DE CATEGORIAS. Son diez secciones y en el movil solo caben tres, asi que parecia cortada. Se desliza con el dedo (ya lo hacia), pero ahora se ve: un degradado a la derecha avisa de que hay mas. Y de paso: la barra de abajo de Storefront pintaba las tres pastillas en rosa chicle, y el pie quedaba tapado por ella. Arreglado. ========================================================= */ @media(max-width:768px){ /* ---- 1. Ancho ---- */ .col-full{ margin-left:0 !important;margin-right:0 !important; padding-left:14px !important;padding-right:14px !important; max-width:none !important; } /* ---- 2. El hueco de la portada ---- */ .page-template-template-homepage:not(.has-post-thumbnail) .site-main{padding-top:0 !important} .jds-usos{margin:0 !important} /* En el resto de paginas si queremos un poco de aire antes de las migas de pan, pero 14 px, no 76. */ body:not(.home) .site-content{padding-top:14px} /* ---- 3. La barra de categorias ---- */ .jds-usos .col-full{padding-left:14px !important;padding-right:34px !important} .jds-usos::after{ content:"";position:absolute;top:0;right:0;bottom:0;width:40px; background:linear-gradient(to right,rgba(255,255,255,0),#fff 78%); pointer-events:none;z-index:3; } .jds-uso{padding:12px 11px !important;font-size:13px !important} /* El aviso de arriba, en una linea de menos peso. */ .jds-aviso{font-size:10.5px;padding:5px 12px;line-height:1.35} /* La barra de abajo de Storefront pinta cada pastilla del color de marca; en rosa chicle quedaba de feria. Blanca. */ .storefront-handheld-footer-bar ul li{background-color:#fff !important} .storefront-handheld-footer-bar ul li a{background:none !important} /* Esa misma barra tapaba el ultimo renglon del pie y del cajon del menu. Les damos sitio por debajo. */ .jds-barra-abajo .site-footer{padding-bottom:calc(62px + env(safe-area-inset-bottom))} .jds-barra-abajo .jds-mcaj-pie{padding-bottom:calc(62px + env(safe-area-inset-bottom))} } /* ========================================================= 69. TABLETS (Y EL HUECO DE LA PORTADA, EN TODAS LAS PANTALLAS) --------------------------------------------------------- Un iPad de 12 pulgadas son 1024 px de ancho de pie y 1366 tumbado. Ahi no entra la cabecera de movil, asi que se ve la de ordenador, y salian tres cosas feas: 1) El mismo palmo de blanco entre la barra de categorias y el video que arreglamos en el movil. Ese relleno lo pone Storefront en la portada y no lo queremos en ninguna pantalla: la portada empieza con un video a sangre y tiene que ir pegado a la barra. 2) La barra de categorias se cortaba: son diez secciones y a 1024 px solo entran ocho. En una tablet hay sitio de sobra hacia abajo, asi que en vez de esconderlas se parten en dos filas y se ven las diez. 3) La cabecera ocupaba 152 px con dos filas casi vacias. Apretandola un poco se recuperan 25 px de pantalla. Y por debajo de 900 px estrechamos los margenes laterales, igual que en el movil, que Storefront deja 42 px por banda. ========================================================= */ /* --- 1. El hueco, en cualquier pantalla --- */ .home .jds-usos{margin-bottom:0 !important} .page-template-template-homepage:not(.has-post-thumbnail) .site-main{padding-top:0 !important} @media(min-width:769px) and (max-width:1199px){ /* --- 3. Cabecera mas compacta --- */ .site-header{padding-top:12px !important;padding-bottom:0 !important} .storefront-primary-navigation .main-navigation ul.nav-menu > li > a{ padding-top:13px !important;padding-bottom:13px !important; } } /* --- 2. Las diez categorias, en dos filas --- El contenido va topado a 1064 px hasta que la pantalla llega a 1400, asi que por debajo de ahi las diez secciones no entran de una fila y la ultima salia cortada por la mitad (justo lo que se veia en tu portatil: «Robo...»). Se parten en dos filas. */ @media(min-width:769px) and (max-width:1399px){ .jds-usos .col-full{flex-wrap:wrap !important;overflow:visible !important;padding-bottom:2px} .jds-uso{padding:11px 12px !important} } /* Tablet pequena de pie: los 42 px de margen de Storefront a cada lado se comen media foto. */ @media(min-width:769px) and (max-width:900px){ .col-full{ margin-left:0 !important;margin-right:0 !important; padding-left:22px !important;padding-right:22px !important; max-width:none !important; } } /* ========================================================= 70. LA BARRA DE CATEGORIAS, CON VIDA AL PASAR EL RATON --------------------------------------------------------- Antes el unico aviso de que aquello se podia pulsar era que la letra se ponia rosa. Poco, para lo que es: el menu por el que entra a comprar casi todo el mundo. Ahora, al pasar por encima, cada entrada hace tres cosas a la vez: se enciende una pastilla rosa palo por detras, sube un pixel y le crece un subrayado rosa de izquierda a derecha. Al pulsar se hunde un poco, que se note el clic. En «Ofertas», ademas, late el punto. El subrayado del que estas viendo (.activo) sale ya crecido, asi que es el mismo lenguaje: raton y pagina actual se entienden igual. Todo va dentro de @media(hover:hover) menos lo del .activo: en un movil no hay raton, y si no se pone esta guarda el dedo deja las pastillas encendidas al volver atras. ========================================================= */ .jds-usos .jds-uso{ position:relative;z-index:1; display:inline-flex !important;align-items:center; border-bottom:0 !important;margin-bottom:0 !important; border-radius:11px; transition:color .18s ease, transform .18s ease; -webkit-tap-highlight-color:transparent; } /* La pastilla de detras. */ .jds-usos .jds-uso::before{ content:"";position:absolute;inset:3px 2px; width:auto;height:auto;margin:0; border-radius:11px;background:var(--jds-rosa-suave); opacity:0;transform:scale(.86);z-index:-1; transition:opacity .18s ease, transform .2s cubic-bezier(.2,.9,.3,1.35); } /* El subrayado, que crece de izquierda a derecha. */ .jds-usos .jds-uso::after{ content:"";position:absolute;left:11px;right:11px;bottom:2px; height:2.5px;border-radius:2px;background:var(--jds-rosa); transform:scaleX(0);transform-origin:left center; transition:transform .22s cubic-bezier(.2,.9,.3,1); } /* La pagina en la que estas: subrayado puesto, sin pastilla. */ .jds-usos .jds-uso.activo{color:var(--jds-rosa) !important} .jds-usos .jds-uso.activo::after{transform:scaleX(1)} @media(hover:hover){ .jds-usos .jds-uso:hover, .jds-usos .jds-uso:focus-visible{color:var(--jds-rosa) !important;transform:translateY(-1px)} .jds-usos .jds-uso:hover::before, .jds-usos .jds-uso:focus-visible::before{opacity:1;transform:none} .jds-usos .jds-uso:hover::after, .jds-usos .jds-uso:focus-visible::after{transform:scaleX(1)} .jds-usos .jds-uso:active{transform:translateY(0) scale(.97)} /* El punto de Ofertas late mientras tienes el raton encima. */ .jds-uso-oferta:hover > span::before{animation:jds-punto-late 1.1s ease-in-out infinite} @keyframes jds-punto-late{ 0%,100%{transform:scale(1)} 50% {transform:scale(1.55)} } } /* Teclado: el foco tiene que verse, no solo el raton. */ .jds-usos .jds-uso:focus-visible{outline:2px solid var(--jds-rosa);outline-offset:-2px} @media(prefers-reduced-motion:reduce){ .jds-usos .jds-uso, .jds-usos .jds-uso::before, .jds-usos .jds-uso::after{transition:none !important} .jds-uso-oferta:hover > span::before{animation:none !important} } /* ========================================================= 71. FILTRO «¿PARA QUE EQUIPO?» EN LOS ACCESORIOS --------------------------------------------------------- Reutiliza .jds-chip, que ya se usa en la pagina de Ofertas: un boton solo cambia de sitio, no de idioma visual. ========================================================= */ .jds-eqf{ display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px; margin:0 0 22px;padding:14px 16px; background:var(--jds-superficie);border:1px solid var(--jds-linea);border-radius:14px; } .jds-eqf-tit{ font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--jds-gris);flex:none; } .jds-eqf-fila{display:flex;flex-wrap:wrap;gap:8px;min-width:0} .jds-eqf .jds-chip{background:#fff} .jds-eqf .jds-chip.activo{background:var(--jds-rosa);border-color:var(--jds-rosa);color:#fff} .jds-eqf .jds-chip i{ font-style:normal;color:var(--jds-gris);font-weight:500;margin-left:5px;font-size:12px; } .jds-eqf .jds-chip.activo i{color:rgba(255,255,255,.75)} .jds-eqf-vacio{ flex:1 0 100%;margin:4px 0 0;color:var(--jds-gris);font-size:14px; } ul.products li.product[hidden]{display:none !important} @media(max-width:640px){ .jds-eqf{padding:12px 13px;gap:7px 10px} .jds-eqf-tit{flex:1 0 100%} } /* ========================================================= 72. LA REJILLA DE PRODUCTOS, DE VERDAD EN REJILLA --------------------------------------------------------- Storefront monta el listado con «float» y le pone un salto de linea forzado (clear) a la primera ficha de cada fila. Mientras estan todas visibles cuela, pero en cuanto el filtro «¿Para que equipo?» esconde alguna, los saltos se quedan donde estaban y la rejilla sale con agujeros: una fila de dos, otra de tres, huecos en medio. En las secciones de la portada esto ya estaba resuelto con una rejilla CSS; aqui lo llevamos a todos los listados, que es donde de verdad hace falta. ========================================================= */ ul.products{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:14px !important; margin-left:0 !important;margin-right:0 !important; } ul.products li.product{ float:none !important;clear:none !important; width:auto !important;margin:0 !important; } /* El «clearfix» de Storefront (::before y ::after) deja de ser un truco invisible y pasa a ser una casilla mas de la rejilla: salia un hueco vacio en la primera posicion. Fuera. */ ul.products::before, ul.products::after{content:none !important;display:none !important} @media(min-width:1500px){ul.products{grid-template-columns:repeat(5,minmax(0,1fr)) !important}} @media(max-width:1050px){ul.products{grid-template-columns:repeat(3,minmax(0,1fr)) !important}} @media(max-width:760px){ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}} /* ========================================================= 73. LA VENTA DE IA: TIRA ARRIBA, ESCAPARATE ABAJO --------------------------------------------------------- El desplegable no vendia y las cajitas de texto tampoco: la columna de compra mide cuatrocientos y pico pixeles, y ahi dentro seis renglones por algoritmo se leen como un prospecto. Asi que la venta se parte en dos. Al lado del boton de comprar solo queda una tira que dice que algoritmo llevas. Y debajo de la ficha, a todo el ancho, el escaparate: la FOTO de la caja de cada algoritmo, la rebaja en euros y el precio. Tres cosas por cajita, no seis. La foto vende, el numero convence. ========================================================= */ /* ---------- La tira, dentro del formulario ---------- */ .jds-ia-campo{ position:absolute !important;width:1px;height:1px; margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; } .jds-iatira-caja{ display:flex;align-items:center;gap:12px; margin:16px 0;padding:12px 14px; border:1.5px dashed var(--jds-linea-fuerte);border-radius:12px; background:var(--jds-superficie); transition:border-color .2s ease, background .2s ease; } .jds-iatira.puesta .jds-iatira-caja{ border-style:solid;border-color:var(--jds-rosa);background:var(--jds-rosa-suave); } .jds-iatira-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .jds-iatira-txt em{ font-style:normal;font-family:"IBM Plex Mono",monospace; font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--jds-gris); } .jds-iatira.puesta .jds-iatira-txt em{color:var(--jds-rosa)} .jds-iatira-txt b{font-size:14px;font-weight:700;line-height:1.3;color:var(--jds-tinta)} .jds-iatira-ir{ flex:none;padding:9px 16px;border-radius:99px; background:var(--jds-rosa);color:#fff !important;text-decoration:none !important; font-size:13px;font-weight:800;white-space:nowrap; } .jds-iatira-ir:hover{background:var(--jds-rosa-oscuro);color:#fff !important} /* ---------- El escaparate, a todo el ancho ---------- */ .jds-iasec{ position:relative;margin:44px 0 0;padding:44px 0 46px; background:var(--jds-superficie); } /* La ficha de producto es una rejilla de dos columnas y este bloque cuelga de ella: sin esto se metia en la columna de la derecha, con la mitad de ancho, que es justo lo que queriamos evitar. */ .single-product div.product .jds-iasec{grid-column:1 / -1 !important;width:100% !important} .jds-iasec::before{ content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw; transform:translateX(-50%);background:var(--jds-superficie);z-index:-1; } .jds-iasec-cab{max-width:640px;margin:0 0 26px} .jds-iasec-sello{ display:inline-block;margin-bottom:11px;padding:5px 12px;border-radius:99px; background:var(--jds-rosa);color:#fff; font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase; } .jds-iasec-cab h2{ font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.025em; font-size:clamp(24px,3vw,34px);line-height:1.12;margin:0 0 10px; } .jds-iasec-cab p{margin:0;font-size:15px;line-height:1.55;color:var(--jds-tinta-2)} .jds-iasec-rejilla{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px; } @media(max-width:1300px){.jds-iasec-rejilla{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:1000px){.jds-iasec-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:700px){.jds-iasec-rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}} .jds-iat{ display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden; background:#fff;border:1.5px solid var(--jds-linea);border-radius:14px; font:inherit;color:var(--jds-tinta);text-align:left;cursor:pointer; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; } /* Storefront pinta TODOS los