/*
Theme Name: Delirio Nacional
Template: generatepress
Version: 1.0.0
Text Domain: delirio-nacional
*/

/* =========================================================
   Variables
   ========================================================= */
:root{
  --dn-orange: #E04823;
  --dn-black:  #111;
  --dn-white:  #fff;

  --dn-card-bg: rgba(255,255,255,0.45);
  --dn-card-bd: rgba(0,0,0,0.14);
  --dn-card-sh: 0 10px 28px rgba(0,0,0,0.08);
}

/* =========================================================
   Fondo general (papel tile) para TODA la web
   ========================================================= */
body{
  background-image: url("https://delirionacional.es/wp-content/uploads/2025/06/paper-bg-tile-512.webp");
  background-repeat: repeat;
  background-size: 512px 512px;
}

/* Evitar que contenedores del tema tapen el fondo */
#page,
.site,
.site-content,
.content-area,
.inside-article{
  background: transparent !important;
}

/* =========================================================
   HEADER — Compacto + colores (GeneratePress)
   ========================================================= */

/* Quita aire excesivo del header */
.site-header .inside-header{
  padding-top: 26px;
  padding-bottom: 6px;
}

/* Reduce el hueco entre logo y menú */
.site-header .site-logo,
.site-header .site-branding{
  margin-bottom: 10px;
}

/* Control del tamaño del logo */
.site-header .site-logo img{
  max-height: 120px;
  width: auto;
}

/* Menú: menos alto */
.main-navigation{
  padding-top: 6px;
  padding-bottom: 10px;
}

/* Links: negro + acento */
.main-navigation .main-nav ul li a{
  color: #111;
  text-decoration: none;
  letter-spacing: 0.5px;
}

.main-navigation .main-nav ul li a:hover{
  color: var(--dn-orange);
}

.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a{
  color: var(--dn-orange);
}

/* Mobile: compactar */
@media (max-width: 768px){
  .site-header .inside-header{
    padding-top: 18px;
    padding-bottom: 6px;
  }
  .site-header .site-logo img{
    max-height: 90px;
  }
}

/* =========================================================
   HEADER — Iconos (Carrito + Mi cuenta) alineados y consistentes
   ========================================================= */

/* Caja base común (solo items de barra GP) */
.main-navigation .menu-bar-item > a{
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Mi cuenta: fuerza flex sí o sí (tu clase + estructura) */
.main-navigation .menu-bar-item.dn-menu-account > a,
.main-navigation .menu-bar-item.dn-menu-account .dn-menu-account__link{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 60px !important;
  padding: 0 20px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
}

/* SVG Mi cuenta */
.main-navigation .menu-bar-item.dn-menu-account svg{
  width: 26px;
  height: 26px;
  display: block;
  line-height: 0;
  fill: #111;
}

.main-navigation .menu-bar-item.dn-menu-account > a:hover svg{
  fill: var(--dn-orange);
}

/* =========================================================
   HEADER — Carrito: icono + burbuja contador (sin subtotal)
   ========================================================= */

/* Quita iconos/pseudo-elementos fantasma del tema */
.menu-bar-item a.cart-contents::before,
.menu-bar-item a.cart-contents::after,
a.cart-contents::before,
a.cart-contents::after{
  content: none !important;
  display: none !important;
}

/* Si quedase texto de precio/subtotal, fuera */
a.cart-contents .amount,
a.cart-contents .woocommerce-Price-amount,
a.cart-contents .woocommerce-Price-currencySymbol{
  display: none !important;
}

/* Asegura que el <a> se comporta bien en el header */
a.cart-contents.dn-cart-contents{
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  text-decoration: none;
}

/* Wrapper relativo para burbuja */
a.cart-contents.dn-cart-contents .dn-cart__wrap{
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* SVG */
a.cart-contents.dn-cart-contents .dn-cart__icon{
  width: 26px;
  height: 26px;
  fill: #111;
  display: block;
}

/* Burbuja */
a.cart-contents.dn-cart-contents .dn-cart__count{
  position: absolute;
  top: -6px;
  right: -10px;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  border-radius: 999px;
  background: var(--dn-orange);
  color: #fff;

  font-size: 12px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;

  display: inline-block;
}

a.cart-contents.dn-cart-contents:hover .dn-cart__icon{
  fill: var(--dn-orange);
}

/* =========================================================
   Barra de avisos (arriba del header)
   ========================================================= */
.dn-noticebar{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--dn-orange);
  color: #111;
}

.dn-noticebar__inner{
  padding: 8px 40px;
  box-sizing: border-box;
}

.dn-noticebar__track{
  position: relative;
  min-height: 18px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.dn-noticebar__item{
  display: none;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .25s ease, transform .25s ease;
}

.dn-noticebar__item.is-active{
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.dn-noticebar a{
  color: #111;
  text-decoration: underline;
}

@media (max-width: 768px){
  .dn-noticebar__inner{ padding: 8px 16px; }
  .dn-noticebar__track{ font-size: 13px; }
}

/* =========================================================
   FOOTER — Delirio Nacional (fondo transparente)
   ========================================================= */
.dn-footer{
  background: transparent;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* 3 columnas en escritorio */
.dn-footer__inner{
  width: 100%;
  margin: 0 auto;
  padding: 70px 40px 40px;

  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 40px;
  align-items: center;
}

.dn-footer__brand{
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.dn-footer__logo img{
  max-width: 100px;
  height: auto;
  display: block;
}

.dn-footer__logo-fallback{
  display: inline-block;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.dn-footer__copy{
  max-width: 520px;
}

.dn-footer__kicker{
  font-size: 50px;
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 14px;
}

.dn-footer__copy p{
  font-size: 22px;
  line-height: 1.35;
  margin: 0 0 12px;
}

.dn-footer__micro{
  font-size: 17px;
  font-weight: 700;
  opacity: 0.95;
}

/* Form (iframe) */
.dn-footer__form{
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: var(--dn-card-sh);
}

.dn-footer__form .ipz-iframe{
  display: block;
  width: 100%;
  border: 0;
  overflow: hidden;
  background: transparent;
  min-height: 260px;
  filter: contrast(0.95) brightness(0.99);
}

.dn-footer__col--headline{
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

.dn-footer__headline{
  margin: 0;
  font-size: clamp(34px, 4vw, 74px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
}

/* Barra inferior */
.dn-footer__bar{
  padding: 14px 0;
  background: transparent;
}

.dn-footer__bar-inner{
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.dn-footer__copyright{
  font-size: 14px;
  opacity: 0.9;
}

.dn-footer__legal-menu{
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.dn-footer__legal-menu a{
  font-size: 14px;
  text-decoration: none;
  opacity: 0.9;
}

.dn-footer__legal-menu a:hover{
  opacity: 1;
  text-decoration: underline;
  color: #000 !important;
}

@media (max-width: 980px){
  .dn-footer__inner{
    padding: 50px 22px 30px;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }

  .dn-footer__col--headline{
    text-align: left;
    justify-content: flex-start;
  }

  .dn-footer__bar-inner{
    padding: 0 22px;
    flex-direction: column;
    align-items: flex-start;
  }

  .dn-footer__kicker{ font-size: 20px; }
  .dn-footer__copy p{ font-size: 17px; }
  .dn-footer__micro{ font-size: 16px; }

  .dn-footer__form{ border-radius: 18px; }
  .dn-footer__form .ipz-iframe{ min-height: 280px; }
}

/* =========================================================
   WooCommerce — Layout general DN (tienda/producto/carrito/checkout/cuenta)
   Ancho completo con márgenes laterales
   ========================================================= */

/* Quitar sidebar en el flujo Woo y dar ancho completo */
body.woocommerce.archive .widget-area,
body.single-product .widget-area,
body.woocommerce-cart .widget-area,
body.woocommerce-checkout .widget-area,
body.woocommerce-account .widget-area,
body.woocommerce-order-received .widget-area{
  display: none !important;
}

body.woocommerce.archive .content-area,
body.single-product .content-area,
body.woocommerce-cart .content-area,
body.woocommerce-checkout .content-area,
body.woocommerce-account .content-area,
body.woocommerce-order-received .content-area{
  width: 100% !important;
  float: none !important;
}

/* Quitar la “caja” blanca de padding de GeneratePress */
body.woocommerce.archive .inside-article,
body.single-product .inside-article,
body.woocommerce-cart .inside-article,
body.woocommerce-checkout .inside-article,
body.woocommerce-account .inside-article,
body.woocommerce-order-received .inside-article{
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

/* Ancho total + padding lateral */
body.woocommerce.archive .site-main,
body.single-product .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main,
body.woocommerce-order-received .site-main{
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box;
}

@media (max-width: 768px){
  body.woocommerce.archive .site-main,
  body.single-product .site-main,
  body.woocommerce-cart .site-main,
  body.woocommerce-checkout .site-main,
  body.woocommerce-account .site-main,
  body.woocommerce-order-received .site-main{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =========================================================
   PRODUCTO (single-product): overflow + layout a 2 columnas robusto
   ========================================================= */

body.single-product{
  overflow-x: clip; /* mejor que hidden si está soportado */
}

@supports not (overflow: clip){
  body.single-product{ overflow-x: hidden; }
}

/* Asegura que nada “se sale” por culpa del contenedor */
body.single-product #page,
body.single-product .site,
body.single-product .site-content,
body.single-product .content-area,
body.single-product .site-main,
body.single-product .inside-article,
body.single-product .entry-content{
  max-width: 100%;
}

/* Flexslider/Woo gallery: recortar lo que se sale (wrapper suele tener width:400%/800%) */
body.single-product .woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery .flex-viewport{
  overflow: hidden;
  max-width: 100%;
}

body.single-product .woocommerce-product-gallery__wrapper{
  max-width: 100%;
}

body.single-product .woocommerce-product-gallery__image{
  overflow: hidden;
}

/* Layout: SOLO galería + summary en 2 columnas; lo demás abajo ancho completo */
body.single-product.woocommerce div.product{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* Importantísimo: permitir que los hijos se compriman (si no, overflow) */
body.single-product.woocommerce div.product > *{
  min-width: 0;
}

/* Neutraliza floats clásicos de Woo */
body.single-product.woocommerce div.product div.images,
body.single-product.woocommerce div.product div.summary{
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Galería a la izquierda (cubre ambos tipos: .woocommerce-product-gallery o div.images) */
body.single-product.woocommerce div.product > .woocommerce-product-gallery,
body.single-product.woocommerce div.product > div.images{
  grid-column: 1;
}

/* Summary a la derecha */
body.single-product.woocommerce div.product > .summary{
  grid-column: 2;
}

/* TODO lo demás dentro de div.product (tabs, relacionados, upsells, etc.) abajo a ancho completo */
body.single-product.woocommerce div.product > *:not(.woocommerce-product-gallery):not(.summary):not(div.images){
  grid-column: 1 / -1;
}

/* En pantallas medianas/móviles: 1 columna */
@media (max-width: 980px){
  body.single-product.woocommerce div.product{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body.single-product.woocommerce div.product > .summary,
  body.single-product.woocommerce div.product > .woocommerce-product-gallery,
  body.single-product.woocommerce div.product > div.images{
    grid-column: 1 / -1;
  }
}

/* Evitar que textos largos creen “líneas infinitas” */
body.single-product .product_title,
body.single-product .woocommerce-product-details__short-description,
body.single-product .summary{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Inputs/selects/tablas que a veces se salen en móvil */
body.single-product .summary select,
body.single-product .summary .variations,
body.single-product .summary table,
body.single-product .summary .woocommerce-variation-add-to-cart,
body.single-product .summary .single_add_to_cart_button{
  max-width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   PDP móvil: título arriba de la galería
   ========================================================= */

/* El título clonado solo se ve en móvil */
.dn-mobile-title{ display:none; }

@media (max-width: 980px){
  body.single-product .dn-mobile-title{
    display:block;
    margin: 8px 0 12px;
    font-size: clamp(28px, 6.2vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-weight: 900;
    color: #111;
  }

  /* Ocultar el título original dentro del summary (para no duplicar) */
  body.single-product .summary .product_title{
    display:none;
  }
}

/* =========================================================
   PDP: Precio (todos los tamaños)
   ========================================================= */

body.single-product .summary .price{
  margin: 10px 0 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: #111;
  font-size: clamp(26px, 2.2vw, 34px);
}

/* El símbolo € y decimales un pelín más suaves */
body.single-product .summary .price .woocommerce-Price-currencySymbol{
  font-weight: 900;
  opacity: 0.95;
}

body.single-product .summary .price .woocommerce-Price-amount{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

/* Rebajas: que no parezca un mercadillo */
body.single-product .summary .price del{
  opacity: 0.55;
  font-weight: 800;
  margin-right: 10px;
}

body.single-product .summary .price ins{
  text-decoration: none;
  color: var(--dn-orange);
  font-weight: 950;
}

/* Variaciones: cuando cambia el precio */
body.single-product .woocommerce-variation-price .price{
  margin-top: 8px;
}

/* Móvil: un pelín más grande y aire */
@media (max-width: 980px){
  body.single-product .summary .price{
    font-size: 30px;
    margin: 8px 0 12px;
  }
}


/* =========================================================
   PRODUCTO: relacionados/upsells abajo y que se vean bien
   (por si el tema los saca fuera del div.product o por si quedan raros)
   ========================================================= */
body.single-product .related.products,
body.single-product .upsells.products{
  clear: both;
  margin-top: 32px;
}

body.single-product .related.products > h2,
body.single-product .upsells.products > h2{
  margin: 18px 0 14px;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-weight: 900;
  color: #111;
}

body.single-product .related.products > h2:after,
body.single-product .upsells.products > h2:after{
  content:"";
  display:block;
  margin-top: 10px;
  height: 2px;
  width: 100%;
  background: rgba(0,0,0,0.12);
  border-radius: 999px;
}

/* Grid moderno para listados de productos en relacionados */
body.single-product .related.products ul.products,
body.single-product .upsells.products ul.products{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
}

@media (max-width: 1100px){
  body.single-product .related.products ul.products,
  body.single-product .upsells.products ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px){
  body.single-product .related.products ul.products,
  body.single-product .upsells.products ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  body.single-product .related.products ul.products,
  body.single-product .upsells.products ul.products{
    grid-template-columns: 1fr;
  }
}

/* Quitar márgenes raros del theme en items */
body.single-product .related.products ul.products li.product,
body.single-product .upsells.products ul.products li.product{
  list-style: none;
  margin: 0 !important;
  width: auto !important;
}

/* =========================================================
   WooCommerce — Botones (Delirio Nacional)
   Naranja -> hover negro
   ========================================================= */

/* AÑADIR AL CARRITO (shop + producto) */
.woocommerce a.button.add_to_cart_button,
.woocommerce a.button.product_type_simple,
.woocommerce a.button.product_type_variable,
.woocommerce a.button.product_type_grouped,
.woocommerce a.button.product_type_external,
.woocommerce button.button.single_add_to_cart_button,
.woocommerce a.button.single_add_to_cart_button,
.woocommerce button.button[name="add-to-cart"]{
  background: var(--dn-orange) !important;
  color: var(--dn-white) !important;
  border: 0 !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  padding: 12px 16px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.woocommerce a.button.add_to_cart_button:hover,
.woocommerce a.button.product_type_simple:hover,
.woocommerce a.button.product_type_variable:hover,
.woocommerce a.button.product_type_grouped:hover,
.woocommerce a.button.product_type_external:hover,
.woocommerce button.button.single_add_to_cart_button:hover,
.woocommerce a.button.single_add_to_cart_button:hover,
.woocommerce button.button[name="add-to-cart"]:hover{
  background: var(--dn-black) !important;
  color: var(--dn-white) !important;
}

/* "VER CARRITO" / "VER PRODUCTO" */
.woocommerce a.added_to_cart,
.woocommerce a.button.view-product,
.woocommerce a.view-product{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: var(--dn-orange) !important;
  color: var(--dn-white) !important;
  border: 0 !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  padding: 12px 16px !important;
  line-height: 1 !important;
}

.woocommerce a.added_to_cart:hover,
.woocommerce a.button.view-product:hover,
.woocommerce a.view-product:hover{
  background: var(--dn-black) !important;
  color: var(--dn-white) !important;
}

/* FINALIZAR COMPRA (carrito clásico) */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart a.checkout-button.button.alt.wc-forward{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 56px !important;
  padding: 14px 18px !important;

  background: var(--dn-orange) !important;
  color: var(--dn-white) !important;

  border: 0 !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  letter-spacing: 0.2px !important;

  box-shadow: none !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart a.checkout-button.button.alt.wc-forward:hover{
  background: var(--dn-black) !important;
  color: var(--dn-white) !important;
}

/* FINALIZAR COMPRA (carrito BLOCK) */
.woocommerce-cart .wc-block-cart__submit-container .wc-block-components-button,
.woocommerce-cart .wc-block-cart__submit-container a.wc-block-components-button,
.woocommerce-cart .wc-block-cart__submit-container button.wc-block-components-button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 56px !important;
  padding: 14px 18px !important;

  background: var(--dn-orange) !important;
  color: var(--dn-white) !important;

  border: 0 !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  letter-spacing: 0.2px !important;
  box-shadow: none !important;
}

.woocommerce-cart .wc-block-cart__submit-container .wc-block-components-button:hover,
.woocommerce-cart .wc-block-cart__submit-container a.wc-block-components-button:hover,
.woocommerce-cart .wc-block-cart__submit-container button.wc-block-components-button:hover{
  background: var(--dn-black) !important;
  color: var(--dn-white) !important;
}

/* FINALIZAR PEDIDO (checkout) */
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order,
.woocommerce-checkout .button#place_order{
  background: var(--dn-orange) !important;
  color: var(--dn-white) !important;
  border: 0 !important;
  border-radius: 5px !important;
  font-weight: 900 !important;
  padding: 14px 18px !important;
  min-height: 52px !important;
  box-shadow: none !important;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout button#place_order:hover,
.woocommerce-checkout .button#place_order:hover{
  background: var(--dn-black) !important;
  color: var(--dn-white) !important;
}

/* Focus teclado */
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus,
.woocommerce-checkout #place_order:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(224,72,35,0.25) !important;
}

/* No tocar Apple/Google Pay (Stripe) */
.wc-stripe-payment-request-wrapper,
.wc-stripe-payment-request-button,
.apple-pay-button,
.gpay-button{
  border-radius: 5px !important;
}

/* =========================================================
   WooCommerce — Mi cuenta (estilo DN)
   ========================================================= */
.woocommerce-account .woocommerce{
  background: var(--dn-card-bg);
  border: 1px solid var(--dn-card-bd);
  border-radius: 14px;
  box-shadow: var(--dn-card-sh);
  backdrop-filter: blur(3px);
  padding: 18px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a{
  font-weight: 900;
  text-decoration: none;
}

.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account textarea{
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.55);
  padding: 10px 12px;
}

.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account input.button{
  background: var(--dn-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  padding: 12px 16px !important;
}

.woocommerce-account .button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover{
  background: #111 !important;
  color: #fff !important;
}

/* =========================================================
   Contacto
   ========================================================= */
.dn-contact{
  width: 100%;
  padding: 40px 0 80px;
}

.dn-contact__inner{
  width: min(900px, 92vw);
  margin: 0 auto;
}

.dn-contact__title{
  margin: 0 0 10px;
  font-size: clamp(42px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #131313;
}

.dn-contact__lead{
  margin: 0 0 22px;
  font-size: 16px;
  color: #111;
  opacity: 0.85;
}

.dn-contact__notice{
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 16px;
  font-weight: 700;
}

.dn-contact__notice--ok{
  background: rgba(255,255,255,0.45);
  border: 2px solid rgba(0,0,0,0.15);
  color: #111;
}

.dn-contact__notice--err{
  background: rgba(224,72,35,0.18);
  border: 2px solid rgba(224,72,35,0.35);
  color: #111;
}

.dn-contact__form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dn-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dn-field--full{
  grid-column: 1 / -1;
}

.dn-field label{
  font-size: 13px;
  font-weight: 700;
  color: #111;
  opacity: 0.85;
}

.dn-field input,
.dn-field select,
.dn-field textarea{
  width: 100%;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0.15);
  padding: 10px 12px;
  background: rgba(255,255,255,0.55);
  color: #111;
  outline: none;
  box-sizing: border-box;
}

.dn-field textarea{ resize: vertical; }

.dn-field input:focus,
.dn-field select:focus,
.dn-field textarea:focus{
  border-color: rgba(224,72,35,0.65);
  box-shadow: 0 0 0 3px rgba(224,72,35,0.15);
}

.dn-consent{
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.35;
  color: #111;
  opacity: 0.9;
}

.dn-consent input{
  margin-right: 10px;
  transform: translateY(1px);
}

.dn-consent a{
  color: #111;
  text-decoration: underline;
}

.dn-contact__btn{
  grid-column: 1 / -1;
  height: 44px;
  border-radius: 12px;
  border: 0;
  background: var(--dn-orange);
  color: #111;
  font-weight: 900;
  cursor: pointer;
}

.dn-contact__btn:hover{ filter: brightness(1.05); }

@media (max-width: 780px){
  .dn-contact__form{ grid-template-columns: 1fr; }
}

/* =========================================================
   LEGAL — Delirio Nacional (tarjetas + menú anclas)
   ========================================================= */
.dn-legal{ padding: 40px 0 80px; }

.dn-legal__inner{
  width: min(1100px, calc(100% - 80px));
  margin: 0 auto;
}

@media (max-width: 768px){
  .dn-legal__inner{ width: min(1100px, calc(100% - 32px)); }
}

.dn-legal__title{
  margin: 0 0 10px;
  font-size: clamp(42px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #131313;
  text-transform: uppercase;
}

.dn-legal__lead{
  margin: 0 0 18px;
  font-size: 16px;
  color: #111;
  opacity: 0.85;
}

.dn-legal-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  margin: 0 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(3px);
  box-shadow: var(--dn-card-sh);
}

.dn-legal-nav a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration: none;
  color: #111;
  border: 2px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.35);
}

.dn-legal-nav a:hover{
  background: #111;
  color: #fff;
  border-color: #111;
}

.dn-legal-card{
  margin: 0 0 14px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(3px);
  box-shadow: var(--dn-card-sh);
}

.dn-legal-card h2{ margin: 0 0 10px; letter-spacing: -0.01em; }
.dn-legal-card h3{ margin: 18px 0 10px; letter-spacing: -0.01em; }

.dn-legal-card p{ margin: 0 0 12px; line-height: 1.6; }

.dn-legal-card ul,
.dn-legal-card ol{ margin: 10px 0 14px 18px; }

.dn-legal-card a{
  color: var(--dn-orange);
  font-weight: 900;
  text-decoration: none;
}

.dn-legal-card a:hover{
  text-decoration: underline;
  opacity: 1;
}

/* =========================================================
   Shop por secciones (categorías) — Delirio Nacional
   ========================================================= */
.dn-shop-grouped{ padding: 10px 0 50px; }
.dn-shop-section{ margin: 0 0 28px; }

.dn-shop-section__title{
  margin: 18px 0 14px;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-weight: 900;
  color: #111;
}

.dn-shop-section__title:after{
  content:"";
  display:block;
  margin-top: 10px;
  height: 2px;
  width: 100%;
  background: rgba(0,0,0,0.12);
  border-radius: 999px;
}

/* PDP — Descripción izquierda / Valoraciones derecha */
body.single-product .dn-pdp-panels{
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

body.single-product .dn-pdp-panels__col{
  min-width: 0;
  background: var(--dn-card-bg);
  border: 1px solid var(--dn-card-bd);
  border-radius: 14px;
  box-shadow: var(--dn-card-sh);
  backdrop-filter: blur(3px);
  padding: 18px;
}

body.single-product .dn-pdp-panels__title{
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Por si algún plugin/tema vuelve a meter tabs */
body.single-product .woocommerce-tabs{
  display: none !important;
}

@media (max-width: 980px){
  body.single-product .dn-pdp-panels{
    grid-template-columns: 1fr;
    gap: 22px;
  }
}