/*
Theme Name: LAP.ccc
Theme URI: https://lapccc.com
Description: Tema hijo de Astra con el sistema de diseño de marca de LAP.ccc. Solo aporta diseño: no modifica productos, pedidos, pasarelas de pago ni ningún ajuste de WooCommerce. Para deshacer el rediseño basta con volver a activar Astra.
Author: LAP.ccc
Template: astra
Version: 1.0.0
Text Domain: lapccc
*/

/* ==========================================================================
   ÍNDICE
   1.  Tokens de marca
   2.  Base y tipografía
   3.  Botones
   4.  Cabecera
   5.  Pie de página
   6.  WooCommerce · catálogo
   7.  WooCommerce · ficha de producto
   8.  WooCommerce · carrito y pago  (solo cosmético)
   9.  Formularios
   10. Componentes de página (.lap-*)
   11. Responsive
   ========================================================================== */


/* ==========================================================================
   1. TOKENS DE MARCA
   Los cinco colores del manual, más los tonos derivados que hacen falta
   para estados (hover, bordes, superficies).
   ========================================================================== */
:root{
  --lap-neutral:#DCD7C9;
  --lap-neutral-alta:#EDEAE3;
  --lap-neutral-baja:#C9C3B3;
  --lap-grey:#7C7C7B;
  --lap-slate:#4A5561;
  --lap-slate-alta:#5E6B78;
  --lap-accent:#A33C15;
  --lap-accent-alta:#C24A1B;
  --lap-dark:#1E1A17;
  --lap-blanco:#FFFFFF;

  --lap-sans:'Arimo',Helvetica,Arial,sans-serif;
  --lap-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;

  /* Escala tipográfica fluida */
  --lap-t-xs:.72rem;
  --lap-t-sm:.85rem;
  --lap-t-base:1rem;
  --lap-t-lg:clamp(1.1rem,1.6vw,1.3rem);
  --lap-t-xl:clamp(1.4rem,2.4vw,1.9rem);
  --lap-t-2xl:clamp(1.8rem,3.6vw,3rem);
  --lap-t-3xl:clamp(2.3rem,7vw,5.6rem);

  --lap-pad:clamp(20px,5vw,72px);
  --lap-ancho:1360px;
  --lap-trans:.28s cubic-bezier(.4,0,.2,1);
}


/* ==========================================================================
   2. BASE Y TIPOGRAFÍA
   El manual pide Arimo en mayúsculas para titulares y Cormorant Garamond
   para lo editorial. El sitio lo tenía al revés; aquí se corrige.
   ========================================================================== */
body{
  font-family:var(--lap-sans);
  color:var(--lap-dark);
  -webkit-font-smoothing:antialiased;
  /* Solo clip: hidden en body rompe position:sticky en la cabecera. */
  overflow-x:clip;
}

h1,h2,h3,h4,h5,h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title,
.woocommerce-products-header__title{
  font-family:var(--lap-sans);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--lap-dark);
}
h1,h2,h3{text-transform:uppercase;line-height:1.02;}
h4,h5,h6{letter-spacing:.04em;}

/* Rótulo pequeño en versalita: el tono "dorsal de carrera" de la marca */
.lap-eyebrow{
  font-family:var(--lap-sans);
  font-weight:600;
  font-size:var(--lap-t-xs);
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 1.1rem;
}

/* Texto editorial en serif, reservado a citas y entradillas */
.lap-serif,.lap-lead{
  font-family:var(--lap-serif);
  font-weight:300;
  font-style:italic;
}

a{color:var(--lap-dark);transition:color var(--lap-trans);}
a:hover{color:var(--lap-accent);}

/* Motivo de líneas tomado de la "P" del logotipo */
.lap-stripes{
  height:10px;width:120px;
  background:repeating-linear-gradient(to bottom,currentColor 0 1.5px,transparent 1.5px 4px);
  opacity:.65;
}

.lap-wrap{max-width:var(--lap-ancho);margin:0 auto;padding:0 var(--lap-pad);}

/* Secciones a sangre completa.
   En las páginas de marca se anula directamente el ancho del contenedor de
   Astra en lugar de compensarlo con cálculos de 100vw: así no depende de la
   anchura de la barra de desplazamiento ni de los márgenes del tema. */
/* Se usa !important a propósito y sólo aquí. Astra calcula el ancho del
   contenedor desde varias reglas generadas dinámicamente y con la misma
   especificidad que estas; forzarlas es la única forma fiable de que las
   secciones lleguen de borde a borde. El alcance está limitado a
   .lap-diseno, así que la tienda y el checkout no se ven afectados.
   OJO: no se toca el .ast-container de la cabecera, que debe seguir
   centrado y con su ancho normal. */
.lap-diseno .site-content > .ast-container,
.lap-diseno #primary,
.lap-diseno #main.site-main,
.lap-diseno .ast-article-single,
.lap-diseno .entry-content{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
/* Astra limita el ancho de CADA hijo directo del contenido con
   `.entry-content[data-ast-blocks-layout] > *`. Esa era la regla que
   dejaba el hero encajonado. Aquí se anula con más especificidad. */
.lap-diseno .entry-content[data-ast-blocks-layout] > *,
.lap-diseno .entry-content > *,
.lap-diseno .entry-content > .lap-full{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.lap-diseno .lap-full{width:100% !important;max-width:none !important;margin-left:0 !important;}

/* Fuera de esas páginas (tienda, ficha, carrito) se mantiene el ancho
   heredado del parche de CSS antiguo. */
@media (min-width:922px){
  body:not(.lap-diseno) .ast-container{max-width:1297px;}
}

/* El plugin de productos relacionados imprime su propio título, que se
   duplica con el de la ficha. También venía del parche antiguo. */
h2.wrps_related_products_area_title{display:none;}


/* ==========================================================================
   3. BOTONES
   Un solo sistema para los botones del tema y los de WooCommerce, para que
   "Añadir al carrito" y "Ver colección" no parezcan de dos sitios distintos.
   ========================================================================== */
.lap-btn,
.ast-button,
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  font-family:var(--lap-sans);
  font-weight:700;
  font-size:var(--lap-t-sm);
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:0;
  border:1.5px solid var(--lap-dark);
  background:var(--lap-dark);
  color:var(--lap-neutral);
  padding:1em 2em;
  line-height:1.2;
  transition:background var(--lap-trans),color var(--lap-trans),border-color var(--lap-trans);
}
.ast-button:hover,.button:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--lap-accent);
  border-color:var(--lap-accent);
  color:var(--lap-blanco);
}

/* Acciones principales de compra en el color de acento */
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order,
.woocommerce .checkout-button{
  background:var(--lap-accent);
  border-color:var(--lap-accent);
  color:var(--lap-blanco);
}
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover{
  background:var(--lap-dark);
  border-color:var(--lap-dark);
  color:var(--lap-neutral);
}

.lap-btn{display:inline-flex;align-items:center;gap:.6em;text-decoration:none;}
.lap-btn-accent{background:var(--lap-accent);color:#fff;border-color:var(--lap-accent);}
.lap-btn-accent:hover{background:transparent;color:#fff;border-color:#fff;}
.lap-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.lap-btn-ghost:hover{background:#fff;color:var(--lap-dark);border-color:#fff;}
.lap-btn-dark{background:var(--lap-dark);color:var(--lap-neutral);border-color:var(--lap-dark);}
.lap-btn-dark:hover{background:transparent;color:var(--lap-dark);border-color:var(--lap-dark);}
.lap-btn-linea{
  background:transparent;border:0;border-bottom:1.5px solid var(--lap-dark);
  color:var(--lap-dark);padding:.3em 0;letter-spacing:.16em;
}
.lap-btn-linea:hover{color:var(--lap-accent);border-color:var(--lap-accent);background:transparent;}


/* ==========================================================================
   4. CABECERA
   La portada lleva cabecera transparente sobre la foto; el resto del sitio
   la lleva sólida en negro de marca. Antes esto se parcheaba con reglas
   sueltas y colores a mano en el plugin de CSS.
   ========================================================================== */
.ast-primary-header-bar,
.ast-main-header-wrap .main-header-bar{
  /* El fondo lo define la seccion 16 (cabecera fija y translucida). */
  border-bottom:1px solid rgba(220,215,201,.14);
}
.lap-portada .ast-theme-transparent-header .ast-primary-header-bar{
  background-color:transparent;
  border-bottom-color:rgba(255,255,255,.16);
}

/* El menú tiene 7 entradas y comparte fila con el logo. Con mucho
   espaciado entre letras no cabe y se parte en dos líneas, así que aquí
   el tracking es corto a propósito. */
.main-header-menu .menu-link,
.ast-header-account-wrap,
.ast-header-search .astra-search-icon,
.ast-site-header-cart a.cart-container{
  font-family:var(--lap-sans);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--lap-neutral);
  white-space:nowrap;
}
.ast-desktop .main-header-menu > .menu-item > .menu-link{
  padding-left:.85em;
  padding-right:.85em;
}
/* Que la fila del menú no se envuelva nunca en escritorio. */
.ast-desktop .main-header-menu{flex-wrap:nowrap;}
.ast-desktop .main-header-menu > .menu-item{flex:0 0 auto;}
@media (min-width:922px) and (max-width:1200px){
  .main-header-menu .menu-link{font-size:.72rem;letter-spacing:.02em;}
  .ast-desktop .main-header-menu > .menu-item > .menu-link{padding-left:.6em;padding-right:.6em;}
}
.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link{color:var(--lap-accent-alta);}

/* Submenús: el aspecto lo define la sección 17. Aquí sólo se neutraliza
   el fondo que Astra impone cuando la cabecera es transparente. */
.ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-link{
  background:transparent;
  color:var(--lap-dark);
}

/* Contador del carrito con el color de acento */
.ast-site-header-cart .ast-cart-menu-wrap .count,
.ast-cart-menu-wrap .astra-cart-svg-wrap + .count{
  background:var(--lap-accent);
  color:#fff;
  border-color:var(--lap-accent);
}

/* Menú móvil */
.ast-mobile-popup-drawer .main-header-menu .menu-link{
  color:var(--lap-dark);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.ast-mobile-popup-drawer .ast-mobile-popup-inner{background:var(--lap-neutral-alta);}


/* ==========================================================================
   5. PIE DE PÁGINA
   ========================================================================== */
.site-footer,
.site-primary-footer-wrap{
  background-color:var(--lap-dark);
  color:var(--lap-neutral);
}
.site-footer .widget-title,
.site-footer h2,.site-footer h3,.site-footer h4{
  font-family:var(--lap-sans);
  font-weight:700;
  font-size:var(--lap-t-xs);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--lap-blanco);
  margin-bottom:1.1rem;
}
.site-footer a,
.site-footer .menu-link{
  color:rgba(220,215,201,.74);
  font-size:var(--lap-t-sm);
  letter-spacing:.03em;
  text-transform:none;
  transition:color var(--lap-trans);
}
.site-footer a:hover,.site-footer .menu-link:hover{color:var(--lap-accent-alta);}
.site-footer .menu li{margin-bottom:.5rem;list-style:none;}
.site-footer .wp-block-image img{max-width:150px;height:auto;}
.ast-small-footer,
.site-below-footer-wrap{
  background-color:var(--lap-dark);
  border-top:1px solid rgba(220,215,201,.14);
  color:rgba(220,215,201,.55);
  font-size:var(--lap-t-xs);
  letter-spacing:.06em;
}


/* ==========================================================================
   6. WOOCOMMERCE · CATÁLOGO
   Fichas de producto sobrias: foto grande, título en sans, precio marcado.
   ========================================================================== */
.woocommerce-products-header{padding-top:clamp(28px,5vw,64px);}
.woocommerce-products-header__title.page-title{
  font-family:var(--lap-sans);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.02em;
  font-size:var(--lap-t-2xl);
  color:var(--lap-dark);
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select{
  font-family:var(--lap-sans);
  font-size:var(--lap-t-sm);
  color:var(--lap-grey);
}

.woocommerce ul.products li.product{
  background:transparent;
  border:0;
  transition:transform var(--lap-trans);
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img{
  border-radius:0;
  background:var(--lap-neutral-alta);
  transition:opacity var(--lap-trans);
}
.woocommerce ul.products li.product:hover .woocommerce-LoopProduct-link img{opacity:.9;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--lap-sans);
  font-weight:600;
  font-size:var(--lap-t-sm);
  line-height:1.4;
  letter-spacing:0;
  text-transform:none;
  color:var(--lap-dark);
  margin:.9rem 0 .35rem;
}
.woocommerce ul.products li.product .price{
  font-family:var(--lap-sans);
  font-weight:700;
  font-size:var(--lap-t-sm);
  color:var(--lap-dark);
}
.woocommerce ul.products li.product .price del{color:var(--lap-grey);font-weight:400;opacity:.8;}
.woocommerce ul.products li.product .price ins{color:var(--lap-accent);text-decoration:none;}

/* Etiqueta de oferta: rectángulo de acento, sin círculo */
.woocommerce span.onsale{
  background:var(--lap-accent);
  color:#fff;
  border-radius:0;
  font-family:var(--lap-sans);
  font-weight:700;
  font-size:var(--lap-t-xs);
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.45em .9em;
  min-width:0;min-height:0;line-height:1.2;
}
.ast-shop-product-out-of-stock{
  background:var(--lap-slate);
  color:#fff;
  font-family:var(--lap-sans);
  font-size:var(--lap-t-xs);
  letter-spacing:.12em;
  text-transform:uppercase;
  border-radius:0;
}

/* Paginación */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  font-family:var(--lap-sans);
  font-weight:600;
  border-radius:0;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--lap-accent);
  color:#fff;
}


/* ==========================================================================
   7. WOOCOMMERCE · FICHA DE PRODUCTO
   ========================================================================== */
.woocommerce div.product .product_title{
  font-family:var(--lap-sans);
  font-weight:700;
  text-transform:uppercase;
  font-size:var(--lap-t-xl);
  letter-spacing:-.015em;
  line-height:1.08;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--lap-sans);
  font-weight:700;
  font-size:var(--lap-t-lg);
  color:var(--lap-dark);
}
.woocommerce div.product p.price ins{color:var(--lap-accent);text-decoration:none;}
.woocommerce div.product .woocommerce-product-details__short-description{
  font-family:var(--lap-sans);
  font-size:var(--lap-t-base);
  line-height:1.75;
  color:var(--lap-slate);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  border-radius:0;
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--lap-sans);
  font-weight:700;
  font-size:var(--lap-t-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lap-grey);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--lap-accent);}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--lap-dark);}

/* Selector de variaciones (talla / color) */
.woocommerce div.product form.cart .variations label{
  font-family:var(--lap-sans);
  font-weight:700;
  font-size:var(--lap-t-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lap-dark);
}
.woocommerce div.product form.cart .variations select{
  border:1.5px solid var(--lap-dark);
  border-radius:0;
  font-family:var(--lap-sans);
  padding:.75em 1em;
}


/* ==========================================================================
   8. WOOCOMMERCE · CARRITO Y PAGO
   AVISO: aquí solo se cambian tipografía, color, borde y espaciado.
   No se oculta ni se reordena ningún campo, ni se toca nada de la pasarela
   de pago. Todo el funcionamiento sigue siendo el de WooCommerce.
   ========================================================================== */
.woocommerce table.shop_table{
  border-radius:0;
  border-color:var(--lap-neutral-baja);
}
.woocommerce table.shop_table th{
  font-family:var(--lap-sans);
  font-weight:700;
  font-size:var(--lap-t-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lap-dark);
}
.woocommerce table.shop_table td{font-family:var(--lap-sans);}
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading{
  font-family:var(--lap-sans);
  font-weight:700;
  font-size:var(--lap-t-lg);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.woocommerce-checkout .woocommerce-checkout-review-order{
  background:var(--lap-neutral-alta);
  padding:clamp(20px,3vw,34px);
}
.woocommerce-info,
.woocommerce-message{
  border-top-color:var(--lap-accent);
  background:var(--lap-neutral-alta);
  font-family:var(--lap-sans);
}
.woocommerce-info::before,
.woocommerce-message::before{color:var(--lap-accent);}
.woocommerce-error{border-top-color:var(--lap-accent);font-family:var(--lap-sans);}

/* Pasos y avisos de la pasarela: solo tipografía */
.woocommerce-checkout #payment{background:transparent;border-radius:0;}
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom:1px solid var(--lap-neutral-baja);
  font-family:var(--lap-sans);
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--lap-neutral-alta);
  border-radius:0;
  font-family:var(--lap-sans);
  font-size:var(--lap-t-sm);
}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--lap-neutral-alta);}


/* ==========================================================================
   9. FORMULARIOS
   ========================================================================== */
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],
input[type="password"],input[type="search"],textarea,select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single{
  font-family:var(--lap-sans);
  border:1.5px solid var(--lap-neutral-baja);
  border-radius:0;
  background:var(--lap-blanco);
  color:var(--lap-dark);
  padding:.85em 1em;
  transition:border-color var(--lap-trans);
}
input:focus,textarea:focus,select:focus,
.woocommerce form .form-row input.input-text:focus{
  border-color:var(--lap-accent);
  outline:2px solid rgba(163,60,21,.18);
  outline-offset:0;
}
.woocommerce form .form-row label,
label{
  font-family:var(--lap-sans);
  font-weight:600;
  font-size:var(--lap-t-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lap-slate);
}


/* ==========================================================================
   10. COMPONENTES DE PÁGINA
   Bloques reutilizables para portada, About y Contact. Viven aquí y no
   dentro del contenido, así una misma clase sirve en todas las páginas.
   ========================================================================== */

/* --- Hero --- */
.lap-hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;
  background:var(--lap-dark);overflow:hidden;}
.lap-hero--medio{min-height:min(62vh,560px);}
.lap-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.lap-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(30,26,23,.72) 0%,rgba(30,26,23,.18) 32%,
             rgba(30,26,23,.55) 68%,rgba(30,26,23,.88) 100%);}
/* La portada lleva una foto nocturna, oscura ya de por si. El degradado
   general estaba calibrado para una foto diurna y aqui apagaba los neones
   y las estelas de luz, que son lo que da caracter a la imagen. Se aligera
   arriba y en el centro, y solo se refuerza abajo, donde apoya el texto. */
.lap-portada .lap-hero::after{
  background:linear-gradient(to bottom,rgba(30,26,23,.52) 0%,rgba(30,26,23,.06) 30%,
             rgba(30,26,23,.30) 60%,rgba(30,26,23,.80) 100%);}
.lap-hero__in{position:relative;z-index:2;width:100%;
  padding-top:clamp(120px,18vh,200px);padding-bottom:clamp(46px,8vh,96px);color:#fff;}
.lap-hero__in .lap-eyebrow{color:var(--lap-neutral);opacity:.9;}
.lap-hero h1{color:#fff;font-size:var(--lap-t-3xl);line-height:.94;
  letter-spacing:-.028em;margin:0 0 1.4rem;max-width:15ch;}
.lap-hero--medio h1{font-size:var(--lap-t-2xl);}
.lap-hero__lead{font-family:var(--lap-serif);font-style:italic;font-weight:300;
  color:var(--lap-neutral);font-size:clamp(1.1rem,2.1vw,1.7rem);line-height:1.4;
  margin:0 0 2.4rem;max-width:34ch;}
.lap-hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;}
.lap-hero .lap-stripes{color:var(--lap-neutral);margin-bottom:1.6rem;}

/* --- Cabecera de sección --- */
.lap-sec__head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px);}
.lap-sec__head .lap-eyebrow{color:var(--lap-accent);}
.lap-h2{font-size:var(--lap-t-2xl);margin:0;}
.lap-sec__link{font-weight:700;font-size:var(--lap-t-xs);letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;border-bottom:1.5px solid var(--lap-dark);
  padding-bottom:.3em;white-space:nowrap;}
.lap-sec__link:hover{color:var(--lap-accent);border-color:var(--lap-accent);}

/* --- Franja de marcas --- */
.lap-brands{background:var(--lap-neutral);padding:clamp(34px,5vw,54px) 0;}
.lap-brands__head{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.8rem;}
.lap-brands__head .lap-eyebrow{margin:0;color:var(--lap-slate);white-space:nowrap;}
.lap-brands__rule{flex:1;height:1px;background:rgba(74,85,97,.28);}
.lap-brands__grid{display:grid;gap:clamp(18px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));align-items:center;}
.lap-brands__grid img{width:100%;height:44px;object-fit:contain;
  filter:grayscale(1) contrast(.35) brightness(.45);opacity:.85;
  transition:filter var(--lap-trans),opacity var(--lap-trans);}
.lap-brands__grid a:hover img{filter:none;opacity:1;}

/* --- Puertas (dos o tres columnas con imagen) --- */
.lap-doors{display:grid;grid-template-columns:1fr 1fr;}
.lap-doors--3{grid-template-columns:repeat(3,1fr);}
.lap-door{position:relative;display:block;text-decoration:none;overflow:hidden;
  aspect-ratio:4/5;background:var(--lap-grey);}
.lap-door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.16,.8,.3,1);}
.lap-door:hover img{transform:scale(1.05);}
.lap-door::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(30,26,23,.78) 0%,rgba(30,26,23,.12) 55%,transparent 100%);}
.lap-door__txt{position:absolute;z-index:2;left:0;bottom:0;width:100%;
  padding:clamp(22px,3.4vw,54px);color:#fff;}
.lap-door__txt h3{color:#fff;font-size:clamp(1.5rem,3.4vw,2.9rem);margin:0 0 .5rem;}
.lap-door__txt p{font-family:var(--lap-serif);font-style:italic;
  font-size:clamp(.95rem,1.4vw,1.15rem);color:var(--lap-neutral);margin:0 0 1rem;}
.lap-door__link{font-weight:700;font-size:var(--lap-t-xs);letter-spacing:.18em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:.55em;
  border-bottom:1.5px solid var(--lap-accent);padding-bottom:.3em;color:#fff;}

/* --- Sección clara / oscura genérica --- */
.lap-sec{padding:clamp(56px,8vw,110px) 0;}
.lap-sec--blanco{background:var(--lap-blanco);}
.lap-sec--neutral{background:var(--lap-neutral);}
.lap-sec--dark{background:var(--lap-dark);color:var(--lap-neutral);}
.lap-sec--dark h1,.lap-sec--dark h2,.lap-sec--dark h3,.lap-sec--dark h4{color:#fff;}
.lap-sec--slate{background:var(--lap-slate);color:#fff;}
.lap-sec--slate h1,.lap-sec--slate h2,.lap-sec--slate h3{color:#fff;}

/* --- Franja editorial (imagen + texto) --- */
.lap-edit{background:var(--lap-slate);color:#fff;display:grid;
  grid-template-columns:1fr 1fr;align-items:stretch;}
.lap-edit--invertida .lap-edit__img{order:2;}
.lap-edit__img{position:relative;min-height:420px;}
.lap-edit__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lap-edit__txt{padding:clamp(40px,6vw,96px);display:flex;flex-direction:column;justify-content:center;}
.lap-edit__txt .lap-eyebrow{color:var(--lap-neutral);opacity:.85;}
.lap-edit__txt blockquote{margin:0 0 1.8rem;font-family:var(--lap-serif);font-weight:300;
  font-size:clamp(1.35rem,2.6vw,2.15rem);line-height:1.32;color:#fff;border:0;padding:0;}
.lap-edit__txt p{font-size:var(--lap-t-base);line-height:1.75;
  color:rgba(255,255,255,.82);margin:0 0 2rem;max-width:46ch;}
.lap-edit .lap-stripes{color:var(--lap-neutral);margin-bottom:1.5rem;}
.lap-edit .lap-btn-ghost{align-self:flex-start;}

/* --- Rejilla de categorías --- */
.lap-cats__grid{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  background:rgba(74,85,97,.22);}
.lap-cat{background:var(--lap-neutral);padding:clamp(26px,3vw,42px);text-decoration:none;
  display:flex;flex-direction:column;justify-content:space-between;min-height:180px;
  transition:background var(--lap-trans);}
.lap-cat h4{font-size:clamp(1.05rem,1.8vw,1.4rem);letter-spacing:-.01em;
  margin:0;text-transform:uppercase;color:var(--lap-dark);}
.lap-cat span{font-family:var(--lap-serif);font-style:italic;color:var(--lap-slate);font-size:1rem;}
.lap-cat .lap-arrow{font-weight:700;font-size:1.4rem;color:var(--lap-accent);margin-top:1.6rem;line-height:1;}
.lap-cat:hover{background:var(--lap-dark);}
.lap-cat:hover h4{color:#fff;}
.lap-cat:hover span{color:var(--lap-neutral);}

/* --- Columnas de servicio / valor --- */
.lap-serv__grid{display:grid;gap:clamp(30px,4vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.lap-serv__item .lap-stripes{color:var(--lap-accent);margin-bottom:1.3rem;}
.lap-serv__item h4{font-size:var(--lap-t-base);letter-spacing:.06em;
  margin:0 0 .8rem;text-transform:uppercase;}
.lap-serv__item p{font-size:.94rem;line-height:1.7;margin:0;}
.lap-sec--dark .lap-serv__item p{color:rgba(220,215,201,.72);}
.lap-sec--blanco .lap-serv__item p,
.lap-sec--neutral .lap-serv__item p{color:var(--lap-slate);}

/* --- Cierre centrado --- */
.lap-end{text-align:center;}
.lap-end .lap-eyebrow{color:var(--lap-accent);}
.lap-end h2{font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1;
  margin:0 auto 1.2rem;max-width:18ch;}
.lap-end p{font-family:var(--lap-serif);font-style:italic;
  font-size:clamp(1.05rem,1.9vw,1.4rem);color:var(--lap-slate);
  margin:0 auto 2.4rem;max-width:44ch;}
.lap-end__cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;}
.lap-end .lap-stripes{margin:0 auto 1.6rem;color:var(--lap-slate);}

/* --- Texto largo (About, legales) --- */
.lap-prosa{max-width:68ch;}
.lap-prosa p{font-size:1.02rem;line-height:1.8;color:var(--lap-slate);margin:0 0 1.3rem;}
.lap-prosa h3{font-size:var(--lap-t-lg);margin:2.4rem 0 1rem;}

/* --- Datos / cifras --- */
.lap-datos{display:grid;gap:clamp(24px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.lap-dato strong{display:block;font-family:var(--lap-sans);font-weight:700;
  font-size:clamp(2rem,4vw,3.2rem);line-height:1;letter-spacing:-.03em;color:var(--lap-accent);}
.lap-dato span{display:block;margin-top:.6rem;font-size:var(--lap-t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--lap-slate);}


/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .lap-doors,.lap-doors--3{grid-template-columns:1fr;}
  .lap-door{aspect-ratio:3/4;}
  .lap-edit{grid-template-columns:1fr;}
  .lap-edit--invertida .lap-edit__img{order:0;}
  .lap-edit__img{min-height:340px;}
}
@media (max-width:600px){
  .lap-hero{min-height:88vh;}
  .lap-hero h1{max-width:12ch;}
  .lap-brands__grid{grid-template-columns:repeat(3,1fr);}
  .lap-hero__cta .lap-btn,.lap-end__cta .lap-btn{flex:1 1 100%;justify-content:center;}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:.8rem;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
  .lap-door:hover img{transform:none;}
}


/* ==========================================================================
   12. ANCHO COMPLETO — CORRECCIÓN DEFINITIVA
   Astra limita el ancho con DOS reglas, no una:
     .entry-content[data-ast-blocks-layout] > *      { max-width:1200px; margin:auto }
     .entry-content[data-ast-blocks-layout] > * > *  { max-width:1200px; margin:auto }
   La segunda alcanza a los NIETOS, o sea a la propia <img> del hero y a las
   columnas de las secciones. Por eso la foto seguía encajonada aunque la
   sección ya fuese a sangre. Aquí se anulan las dos.
   Se exceptúa .lap-wrap, que sí debe seguir centrada y con ancho máximo:
   es la que mantiene el texto legible dentro de las secciones anchas.
   ========================================================================== */
.lap-diseno .entry-content > *,
.lap-diseno .entry-content > * > *:not(.lap-wrap){
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.lap-diseno .entry-content > .lap-full{
  width:100% !important;
}
/* La caja interior recupera su ancho máximo y su centrado. */
.lap-diseno .lap-wrap{
  max-width:var(--lap-ancho) !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* La imagen del hero debe cubrir toda la sección, sin límite de ancho. */
.lap-diseno .lap-hero__img,
.lap-diseno .lap-edit__img img,
.lap-diseno .lap-door img{
  max-width:none !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  object-fit:cover;
}


/* ==========================================================================
   13. CARRUSEL INFINITO DE MARCAS
   Los archivos de logotipo tienen proporciones y márgenes internos muy
   distintos: el dibujo real ocupa desde el 100 % del lienzo (asics) hasta
   el 7 % (Koumori, un rótulo de 327x27 dentro de un cuadrado de 400x400).
   Por eso no basta con una altura común: cada logo lleva un factor --k
   calculado a partir de la proporción medida de su dibujo, de forma que
   todos acaben con la misma altura óptica (~24px).
   ========================================================================== */
.lap-marquee{
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.lap-marquee__track{
  display:flex;
  width:max-content;
  animation:lap-marquee-scroll 45s linear infinite;
}
.lap-marquee__set{display:flex;flex:0 0 auto;}

/* Cada hueco mide lo mismo, así el ritmo de la fila es regular
   aunque los logotipos sean de proporciones dispares. */
.lap-marquee__logo{
  flex:0 0 auto;
  width:170px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.lap-marquee__logo img{
  width:auto;
  max-width:none;
  /* La altura sale de la medida real del dibujo dentro del archivo. */
  height:calc(60px * var(--k,1));
  object-fit:contain;
  filter:grayscale(1) contrast(.35) brightness(.45);
  opacity:.85;
  transition:filter var(--lap-trans),opacity var(--lap-trans);
}
.lap-marquee__logo:hover img{filter:none;opacity:1;}

@keyframes lap-marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
/* Al pasar el ratón se detiene para poder leer y pinchar. */
.lap-marquee:hover .lap-marquee__track{animation-play-state:paused;}

@media (prefers-reduced-motion:reduce){
  .lap-marquee__track{animation:none;}
  .lap-marquee{overflow-x:auto;}
}
@media (max-width:600px){
  .lap-marquee__logo{width:130px;height:52px;}
  .lap-marquee__logo img{height:calc(52px * var(--k,1));}
  .lap-marquee__track{animation-duration:32s;}
}


/* ==========================================================================
   14. PIE DE PÁGINA — MEJORAS
   El pie tenía cuatro columnas sin títulos, los enlaces en inglés y la
   barra inferior en blanco, que cortaba el bloque oscuro en seco.
   ========================================================================== */

/* --- Columna de marca --- */
.lap-pie-marca .lap-pie-logo{
  width:170px;height:auto;display:block;margin:0 0 1.4rem;
}
.lap-pie-tagline{
  font-family:var(--lap-sans);
  font-size:.9rem;
  line-height:1.7;
  color:rgba(220,215,201,.62);
  margin:0;
  max-width:32ch;
}

/* --- Columna de datos de la tienda --- */
.lap-pie-datos p{
  font-family:var(--lap-sans);
  font-size:.88rem;
  line-height:1.65;
  color:rgba(220,215,201,.72);
  margin:0 0 .95rem;
}
.lap-pie-datos strong{color:var(--lap-neutral);font-weight:600;}
.lap-pie-datos a{color:rgba(220,215,201,.72);text-decoration:none;}
.lap-pie-datos a:hover{color:var(--lap-accent-alta);}

/* El mapa quedaba flotando sin marco sobre el fondo oscuro. */
.site-footer .uagb-google-map__wrap,
.site-footer iframe{
  border-radius:0;
  border:1px solid rgba(220,215,201,.16);
  filter:grayscale(.25);
  max-width:100%;
}

/* --- Ritmo general de las columnas --- */
.site-primary-footer-wrap{
  padding-top:clamp(48px,6vw,78px);
  padding-bottom:clamp(40px,5vw,64px);
}
.site-footer .footer-widget-area{margin-bottom:0;}
.site-footer .widget-title{
  padding-bottom:.9rem;
  border-bottom:1px solid rgba(220,215,201,.16);
}
.site-footer .menu li{margin-bottom:.62rem;}
.site-footer .menu li:last-child{margin-bottom:0;}
/* Los enlaces legales venían en mayúsculas y se partían en dos líneas. */
.site-footer .menu-politicas-container .menu-link,
.site-footer .menu li .menu-link{
  text-transform:none;
  letter-spacing:.01em;
  line-height:1.5;
  display:inline-block;
}

/* --- Barra inferior --- */
.site-below-footer-wrap,
.ast-small-footer{
  border-top:1px solid rgba(220,215,201,.14);
  padding-top:1.4rem;
  padding-bottom:1.4rem;
}
.site-below-footer-wrap .ast-builder-html-element,
.ast-small-footer .ast-footer-copyright{
  font-family:var(--lap-sans);
  font-size:.8rem;
  letter-spacing:.04em;
  color:rgba(220,215,201,.55);
}
/* Iconos sociales: del gris de marca al acento al pasar por encima. */
.site-below-footer-wrap .ast-builder-social-element,
.site-footer .ast-builder-social-element{
  color:rgba(220,215,201,.6);
  transition:color var(--lap-trans),transform var(--lap-trans);
}
.site-below-footer-wrap .ast-builder-social-element:hover,
.site-footer .ast-builder-social-element:hover{
  color:var(--lap-accent-alta);
  transform:translateY(-2px);
}
/* Logos de pago: sobre fondo oscuro iban en su color original y gritaban
   más que la marca. Se atenúan y recuperan color al pasar el ratón. */
.site-below-footer-wrap img,
.ast-small-footer img{
  filter:grayscale(1) brightness(1.7) contrast(.5);
  opacity:.62;
  transition:filter var(--lap-trans),opacity var(--lap-trans);
}
.site-below-footer-wrap img:hover,
.ast-small-footer img:hover{filter:none;opacity:1;}

/* Botón de volver arriba, en el acento de marca. */
#ast-scroll-top{
  background:var(--lap-accent);
  color:#fff;
  border-radius:0;
}
#ast-scroll-top:hover{background:var(--lap-dark);}

@media (max-width:768px){
  .lap-pie-marca .lap-pie-logo{width:140px;}
  .site-footer .widget-title{margin-top:1.6rem;}
  .lap-pie-tagline{max-width:none;}
}


/* ==========================================================================
   15. PIE — AJUSTES DE AIRE E ICONOS
   ========================================================================== */

/* --- Iconos sociales ---
   Los SVG que imprime Astra NO llevan atributo fill, así que heredaban el
   negro por defecto del navegador y quedaban invisibles sobre el pie oscuro.
   Darles `color` no servía de nada: hay que pintar el propio `fill`. */
.site-footer .ast-builder-social-element svg,
.site-below-footer-wrap .ast-builder-social-element svg,
.site-footer .ahfb-svg-iconset svg,
.site-below-footer-wrap .ahfb-svg-iconset svg{
  fill:rgba(220,215,201,.62);
  width:19px;
  height:19px;
  transition:fill var(--lap-trans),transform var(--lap-trans);
}
.site-footer .ast-builder-social-element:hover svg,
.site-below-footer-wrap .ast-builder-social-element:hover svg{
  fill:var(--lap-accent-alta);
}
.site-below-footer-wrap .ast-builder-social-element{padding:0 .55em;}

/* --- Menos hueco muerto ---
   Sobraba aire bajo las columnas: se recorta el relleno del bloque y se
   quitan los márgenes que arrastran los widgets al final. */
.site-primary-footer-wrap[data-section="section-primary-footer-builder"]{
  padding-top:clamp(38px,4vw,56px);
  padding-bottom:clamp(24px,2.6vw,34px);
}
.site-footer .footer-widget-area:last-child,
.site-footer .widget:last-child,
.site-footer .footer-widget-area-inner > *:last-child{margin-bottom:0;}
.lap-pie-datos p:last-of-type{margin-bottom:1.1rem;}

/* Todos los títulos de columna al mismo tamaño: antes convivían dos. */
.site-footer .widget-title,
.site-footer .wp-block-heading,
.site-footer .lap-pie-titulo{
  font-size:.74rem;
  line-height:1.3;
  margin-bottom:1.05rem;
}

/* El mapa medía 206px y estiraba su columna muy por debajo del resto,
   que era de donde salía el hueco grande. */
.site-footer .uagb-google-map__wrap,
.site-footer .uagb-google-map__iframe,
.site-footer embed.uagb-google-map__iframe{
  height:168px;
  width:100%;
  display:block;
}

/* Barra inferior algo más compacta. */
.site-below-footer-wrap[data-section="section-below-footer-builder"]{
  min-height:0;
  padding-top:1.1rem;
  padding-bottom:1.1rem;
}


/* ==========================================================================
   16. CABECERA FIJA Y TRANSLÚCIDA
   Astra Pro (que trae cabecera pegajosa de serie) no está instalado, así
   que se resuelve aquí. Se usa position:sticky y no fixed: sticky mantiene
   la cabecera dentro del flujo, así el contenido no da un salto al cargar
   ni hace falta compensar con relleno.
   ========================================================================== */
/* IMPORTANTE: el sticky va en el <header> (#masthead), NO en
   .ast-main-header-wrap. Un elemento sticky solo se desplaza dentro de la
   caja de su padre, y .ast-main-header-wrap tiene exactamente la misma
   altura que #masthead: recorrido cero, o sea que no se quedaba fija.
   #masthead sí cuelga de #page, que abarca toda la página. */
#masthead.site-header,
header#masthead{
  position:sticky;
  top:0;
  z-index:99;
}
/* Con la barra de administración de WordPress visible hay que bajarla. */
body.admin-bar #masthead{top:32px;}
@media (max-width:782px){
  body.admin-bar #masthead{top:46px;}
}

/* Fondo translúcido con desenfoque del contenido que pasa por detrás. */
/* Un único aspecto para la cabecera, esté arriba del todo o desplazada.
   Antes la portada arrancaba casi transparente (30 %) y, con la foto clara
   detrás, el desenfoque la volvía gris lavada en lugar de oscura. */
.ast-primary-header-bar,
.ast-main-header-wrap .main-header-bar{
  background-color:rgba(30,26,23,.86);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
          backdrop-filter:blur(16px) saturate(150%);
  transition:box-shadow .32s ease,border-color .32s ease;
}

/* Al desplazarse solo se añade la sombra, para que se despegue del
   contenido. El color no cambia: así no hay saltos de tono al hacer scroll. */
body.lap-scrolled .ast-primary-header-bar,
body.lap-scrolled .ast-main-header-wrap .main-header-bar{
  box-shadow:0 10px 34px rgba(0,0,0,.30);
  border-bottom-color:rgba(220,215,201,.10);
}

/* Sin soporte de desenfoque se compensa con más opacidad. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .ast-primary-header-bar,
  .ast-main-header-wrap .main-header-bar{
    background-color:rgba(30,26,23,.96);
  }
}

/* El menú desplegable y el de móvil deben quedar por encima. */
.ast-desktop .main-header-menu .sub-menu{z-index:10;}
.ast-mobile-popup-drawer{z-index:11;}


/* ==========================================================================
   17. SUBMENÚS
   Eran paneles muy anchos, planos y sin respuesta al pasar el ratón.
   ========================================================================== */
.ast-desktop .main-header-menu .sub-menu{
  min-width:238px;
  padding:.45rem 0;
  background:var(--lap-neutral-alta);
  border:0;
  border-top:2px solid var(--lap-accent);   /* remate de marca */
  border-radius:0;
  box-shadow:0 22px 48px rgba(30,26,23,.26);
  /* Aparición suave en lugar de un salto seco. */
  transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.ast-desktop .main-header-menu .menu-item:hover > .sub-menu,
.ast-desktop .main-header-menu .menu-item:focus-within > .sub-menu{
  transform:translateY(0);
}

/* Los enlaces del desplegable: más compactos y con jerarquía. */
.ast-desktop .main-header-menu .sub-menu .menu-link{
  padding:.62rem 1.15rem;
  font-size:.86rem;
  font-weight:500;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--lap-dark);
  border-left:2px solid transparent;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,padding-left .18s ease;
}
.ast-desktop .main-header-menu .sub-menu .menu-link:hover,
.ast-desktop .main-header-menu .sub-menu .menu-link:focus{
  background:rgba(163,60,21,.07);
  color:var(--lap-accent);
  border-left-color:var(--lap-accent);
  padding-left:1.35rem;                     /* leve empuje al pasar */
}
/* Marca la categoría en la que estás. */
.ast-desktop .main-header-menu .sub-menu .current-menu-item > .menu-link{
  color:var(--lap-accent);
  border-left-color:var(--lap-accent);
  font-weight:600;
}

/* Línea finísima entre entradas, salvo la última. */
.ast-desktop .main-header-menu .sub-menu > li + li{
  border-top:1px solid rgba(74,85,97,.10);
}

/* Los submenús de segundo nivel se separan un pelo del panel padre. */
.ast-desktop .main-header-menu .sub-menu .sub-menu{
  margin-left:2px;
  border-top-width:2px;
}

/* La flecha de los apartados con hijos gira al abrirse. */
.ast-desktop .main-header-menu .sub-menu .ast-header-navigation-arrow svg{
  transition:transform .2s ease;
}
.ast-desktop .main-header-menu .sub-menu .menu-item:hover > .menu-link .ast-header-navigation-arrow svg{
  transform:translateX(3px);
}


/* El color al pasar el raton lo pisaba Astra ------------------------------
   Con la cabecera transparente activa, Astra pinta de blanco TODO enlace de
   menu en hover, submenus incluidos:

     .ast-theme-transparent-header .ast-builder-menu .main-header-menu
      .menu-item:hover > .menu-link { color: var(--ast-global-color-5) }

   En la barra oscura el blanco esta bien, pero dentro del panel crema del
   submenu el texto se volvia ilegible. Esa regla suma cinco clases y ganaba
   a la mia, que solo tenia cuatro. Se repite aqui acotada al submenu y con
   una clase mas para recuperar la mano. Afecta tambien a .focus y a la
   categoria actual, que Astra tine con la misma regla.

   Todo dentro de la consulta de escritorio: en movil el menu vive en el
   cajon lateral, sobre fondo oscuro, y alli el texto claro es el correcto. */
@media (min-width:922px){

  .ast-theme-transparent-header .ast-builder-menu .main-header-menu .sub-menu .menu-item > .menu-link,
  .ast-theme-transparent-header .main-header-menu .sub-menu .menu-item > .menu-link{
    color:var(--lap-dark);
  }

  .ast-theme-transparent-header .ast-builder-menu .main-header-menu .sub-menu .menu-item:hover > .menu-link,
  .ast-theme-transparent-header .ast-builder-menu .main-header-menu .sub-menu .menu-item:focus > .menu-link,
  .ast-theme-transparent-header .ast-builder-menu .main-header-menu .sub-menu .menu-item.focus > .menu-link,
  .ast-theme-transparent-header .ast-builder-menu .main-header-menu .sub-menu .menu-item:hover > .ast-menu-toggle,
  .ast-theme-transparent-header .ast-builder-menu .main-header-menu .sub-menu .current-menu-item > .menu-link,
  .ast-theme-transparent-header .ast-builder-menu .main-header-menu .sub-menu .current-menu-ancestor > .menu-link{
    color:var(--lap-accent);
  }

}


/* ==========================================================================
   18. CARRITO DE LA CABECERA
   ========================================================================== */
.ast-site-header-cart .cart-container{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.4rem .2rem;
  transition:color .2s ease;
}
.ast-woo-header-cart-total{
  font-family:var(--lap-sans);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.04em;
  color:rgba(220,215,201,.72);
  transition:color .2s ease;
}
.ast-site-header-cart .cart-container:hover .ast-woo-header-cart-total{
  color:var(--lap-neutral);
}
.ast-site-header-cart .ast-icon.icon-cart svg,
.ast-site-header-cart #ast-cart-svg{
  fill:var(--lap-neutral);
  transition:fill .2s ease,transform .2s ease;
}
.ast-site-header-cart .cart-container:hover #ast-cart-svg{
  fill:var(--lap-accent-alta);
  transform:translateY(-1px);
}

/* Contador: en el acento de marca y sin el globo gris de Astra.
   Cuando está a cero no aporta nada, así que se oculta. */
.ast-site-header-cart i.astra-icon:after{
  background:var(--lap-accent);
  color:#fff;
  font-family:var(--lap-sans);
  font-weight:700;
  font-size:.62rem;
  letter-spacing:0;
  border:0;
  border-radius:999px;
  min-width:17px;
  height:17px;
  line-height:17px;
  text-align:center;
}
.ast-site-header-cart i.astra-icon[data-cart-total="0"]:after{display:none;}

/* Quita el recuadro que Astra dibuja alrededor del carrito. */
.ast-site-header-cart.ast-menu-cart-with-border .ast-cart-menu-wrap,
.ast-site-header-cart.ast-menu-cart-outline .ast-cart-menu-wrap{
  border:0;
  padding:0;
}

/* --- Panel desplegable del carrito ---------------------------------------
   El desplegable de Astra NO es .ast-site-header-cart-data: ese div es un
   simple envoltorio que va en el flujo normal de la cabecera y siempre mide
   cero. El panel de verdad es .widget_shopping_cart, que Astra coloca en
   position:absolute bajo el icono y muestra al pasar el raton.

   Dar fondo y relleno al envoltorio era el origen del cuadrado suelto: no
   era una copia del carrito, era el envoltorio hinchado dentro de la barra.
   Y el panel real quedaba invisible porque su fondo lo pone Astra con
   var(--ast-global-color-primary), que en esta paleta no resuelve a nada.
   ------------------------------------------------------------------------ */

/* El envoltorio no se decora nunca: solo transporta el panel. */
.ast-site-header-cart-data{
  background:none;
  border:0;
  box-shadow:none;
  padding:0;
}

/* El panel, ahora si, con los colores de marca. */
.ast-site-header-cart .widget_shopping_cart,
.woocommerce .ast-site-header-cart .widget_shopping_cart{
  width:340px;
  background:var(--lap-neutral-alta);
  border:0;
  border-top:2px solid var(--lap-accent);
  border-radius:0;
  box-shadow:0 22px 48px rgba(30,26,23,.28);
  color:var(--lap-dark);
  font-family:var(--lap-sans);
  font-size:.88rem;
}

/* La flechita: Astra la dibuja blanca y con doble borde. Una sola, en el
   color del acento, para que continue la linea superior del panel. */
.ast-site-header-cart .widget_shopping_cart:before,
.woocommerce .ast-site-header-cart .widget_shopping_cart:before{
  display:none;
}
.ast-site-header-cart .widget_shopping_cart:after,
.woocommerce .ast-site-header-cart .widget_shopping_cart:after{
  border-bottom-color:var(--lap-accent);
  border-width:7px;
  right:14px;
  margin-left:-7px;
}

/* Con el carrito vacio y aun sin respuesta de WooCommerce el panel llegaria
   sin contenido: mejor no mostrarlo que ensenar una caja hueca. */
.ast-site-header-cart .widget_shopping_cart:has(.widget_shopping_cart_content:empty){
  display:none;
}

/* Lista de productos. */
.ast-site-header-cart .widget_shopping_cart .product_list_widget{
  padding:.35rem 1.25rem;
  max-height:52vh;
}
.ast-site-header-cart .widget_shopping_cart .product_list_widget li{
  padding:.9em 2em .9em 4.6em;
  border-bottom:1px solid rgba(74,85,97,.14);
  min-height:4.4em;
}
.ast-site-header-cart .widget_shopping_cart .product_list_widget li img{
  max-width:3.6em;
  border-radius:2px;
}
.ast-site-header-cart .widget_shopping_cart .cart_list a:not(.remove){
  font-weight:600;
  font-size:.86rem;
  line-height:1.35;
  color:var(--lap-dark);
}
.ast-site-header-cart .widget_shopping_cart .cart_list a:not(.remove):hover{
  color:var(--lap-accent);
}
.ast-site-header-cart .widget_shopping_cart .quantity{
  font-size:.78rem;
  color:var(--lap-grey);
}
.ast-site-header-cart .widget_shopping_cart .cart_list a.remove{
  color:var(--lap-grey);
  border:0;
  font-size:1.05rem;
  line-height:1;
}
.ast-site-header-cart .widget_shopping_cart .cart_list a.remove:hover{
  color:var(--lap-accent);
  background:none;
}

/* Subtotal. */
.ast-site-header-cart .widget_shopping_cart p.total,
.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total{
  padding:.85rem 1.25rem;
  margin:0;
  font-size:.9rem;
  border-top:1px solid rgba(74,85,97,.18);
  border-bottom:0;
  text-align:left;
}
.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total strong{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.7rem;
  font-weight:700;
  color:var(--lap-slate);
  align-self:center;
}
.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total .amount{
  font-weight:700;
  color:var(--lap-dark);
}

/* Los dos botones, con la jerarquia correcta: "ver carrito" secundario y
   "finalizar compra" en el acento de marca. */
.ast-site-header-cart .widget_shopping_cart p.buttons,
.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons{
  display:flex;
  gap:.5rem;
  padding:0 1.25rem 1.25rem;
  margin:0;
}
.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button,
.ast-site-header-cart .widget_shopping_cart .buttons a.button{
  flex:1 1 0;
  width:auto;
  margin:0;
  padding:.9em .6em;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-align:center;
  border-radius:0;
  border:1px solid var(--lap-dark);
  background:transparent;
  color:var(--lap-dark);
  transition:background var(--lap-trans),color var(--lap-trans);
}
.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:hover,
.ast-site-header-cart .widget_shopping_cart .buttons a.button:hover{
  background:var(--lap-dark);
  color:var(--lap-neutral);
}
.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.checkout,
.ast-site-header-cart .widget_shopping_cart .buttons a.button.checkout{
  background:var(--lap-accent);
  border-color:var(--lap-accent);
  color:#fff;
}
.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.checkout:hover,
.ast-site-header-cart .widget_shopping_cart .buttons a.button.checkout:hover{
  background:var(--lap-accent-alta);
  border-color:var(--lap-accent-alta);
  color:#fff;
}

/* Astra viste el boton secundario con sus propios colores, y su regla suma
   seis clases:

     .ast-site-header-cart .widget_shopping_cart .buttons
      .button:not(.checkout):hover { border-color:#4d565b; color:#4d565b }

   Ganaba a la mia, que sumaba cinco, asi que al pasar el raton el texto se
   quedaba en gris pizarra sobre mi fondo oscuro: ilegible. Se repite aqui
   con el mismo :not(.checkout) para recuperar la mano. */
.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout),
.ast-site-header-cart .widget_shopping_cart .buttons a.button:not(.checkout){
  background-color:transparent;
  border-style:solid;
  border-width:1px;
  border-color:var(--lap-dark);
  color:var(--lap-dark);
}
.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout):hover,
.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout):focus,
.ast-site-header-cart .widget_shopping_cart .buttons a.button:not(.checkout):hover,
.ast-site-header-cart .widget_shopping_cart .buttons a.button:not(.checkout):focus{
  background-color:var(--lap-dark);
  border-color:var(--lap-dark);
  color:var(--lap-neutral);
}

/* Carrito vacio: Astra oculta el mensaje y deja el panel hueco. Mejor
   decirlo con palabras. */
.ast-site-header-cart .widget_shopping_cart .widget_shopping_cart_content > .woocommerce-mini-cart__empty-message,
.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message{
  display:block;
  margin:0;
  padding:1.4rem 1.25rem;
  text-align:center;
  font-size:.82rem;
  color:var(--lap-grey);
}

/* El panel de la cabecera de escritorio no debe salir en movil: alli Astra
   abre su propio cajon lateral. */
.ast-header-break-point .ast-site-header-cart .widget_shopping_cart{
  display:none;
}