/*
Theme Name: Candela Theme
Theme URI: https://candelasevilla.com/
Description: Tema clasico (PHP + CSS estandar) para Candela Solo Flamenco, en sustitucion de CandelaSevilla/hello-elementor (sin dependencia de Elementor).
Author: Candela Solo Flamenco
Version: 1.0.0
Text Domain: candela-theme
*/

/* ===== Tokens de diseño (extraidos del sitio original en produccion, ver extraction/design-tokens.css) ===== */
:root {
  --color-primary: #6EC1E4;
  --color-secondary: #54595F;
  --color-text: #7A7A7A;
  --color-accent: #D08D6F;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-bg-light: #F5F5F5;

  --font-heading: "Cinzel", serif;
  --font-body: "Roboto", sans-serif;
  --font-button: "Jost", sans-serif;

  --container-max-width: 1140px;
  --breakpoint-tablet: 1024px;
  --breakpoint-mobile: 767px;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ===== Reset minimo ===== */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.6;
  background: var(--color-white);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-secondary);
  font-weight: 400;
  line-height: 1.2;
}

h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Produccion (verificado por DOM en vivo 2026-08-22 contra varias fuentes:
   tarjetas "Comprar ahora" del kit e-global-color-0ea0bb7/755bfe8, boton del
   formulario de contacto en post-1135.css, boton "APUNTATE AHORA" del footer):
   el boton general es fondo acento (#D08D6F) por defecto, negro al hover.
   Unica excepcion real: el "COMPRAR" del slider del hero (elementor-element-55e9cf51),
   que es negro por defecto y acento al hover — ver ".hero .button" mas abajo. */
.button, button, input[type="submit"] {
  font-family: var(--font-button);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.05em;
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  display: inline-block;
}
.button:hover, button:hover, input[type="submit"]:hover {
  background: var(--color-black);
}

.hero .button {
  background: var(--color-black);
}
.hero .button:hover {
  background: var(--color-accent);
}

/* ===== Header =====
   Produccion (candelasevilla.com, verificado por DOM en vivo 2026-08-20): las
   dos barras del header NO usan el .container de 1140px del resto del sitio,
   van a ancho completo con 40px de padding lateral (elementor-section-full_width,
   padding: 5px 40px / 0 40px). Overrides de .container solo para estas dos filas. */
.site-header-top {
  background: var(--color-bg-light);
  font-size: 13px;
}
.site-header-top .container,
.site-header-main .container {
  max-width: none;
  padding-left: 40px;
  padding-right: 40px;
}
.site-header-top .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
}
.site-header-top .social-links {
  display: flex;
  gap: 12px;
}
.site-header-top .social-links a,
.site-header-top svg {
  width: 20px;
  height: 20px;
  color: #69727D;
}
.site-header-main .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}
.site-logo img { max-height: 70px; width: auto; }
.site-logo { font-family: var(--font-heading); font-size: 22px; color: var(--color-secondary); }

/* Menu + telefono/lupa/carrito en un mismo bloque que no se parte: junto
   al logo si cabe (pantallas de ~1440px o mas), y si no, entero en una
   segunda fila con el menu a la izquierda y las acciones a la derecha. */
.header-bar {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
}
.primary-nav > ul { display: flex; flex-wrap: nowrap; }
/* Margenes algo mas ajustados que produccion (8px en vez de 10px por lado
   en el menu, 14px en vez de 20px entre iconos) para que todo quepa en una
   sola fila desde 1440px, un ancho muy habitual en portatiles. */
@media (min-width: 1025px) {
  .primary-nav > ul > li > a { padding-left: 8px; padding-right: 8px; }
  .site-header-main .header-actions { gap: 14px; }
}
.primary-nav > ul > li > a { white-space: nowrap; }
/* Entre 1025 y 1199px el bloque no cabe con el numero escrito: solo icono
   (el numero sigue en el enlace para lectores de pantalla y al pulsar llama) */
@media (min-width: 1025px) and (max-width: 1199px) {
  .header-phone span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}
.primary-nav a {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 13px 10px;
  color: var(--color-accent);
}
.primary-nav a:hover { color: var(--color-primary); }
/* En produccion el item de la pagina actual se pinta en gris oscuro en vez
   del color de acento del resto del menu (verificado por DOM en vivo
   2026-08-20: rgb(47,47,47)). El enlace "Tienda flamenca online" a la
   portada se quito el 2026-10-09 a peticion del usuario (heredaba el titulo
   SEO de la home y confundia: parecia la tienda; el logo ya lleva a la
   portada). */
.primary-nav > ul > li.current-menu-item > a { color: #2F2F2F; }

/* Submenus del menu real (WordPress, termino "Ropa de Baile Flamenco" id 85,
   conectado a la ubicacion "primary" -- ver ESTADO_PROYECTO.md seccion 7).
   Desplegable simple al pasar el raton/foco, mismo patron que produccion. */
.primary-nav li { position: relative; }
.primary-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  background: var(--color-white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  padding: 10px 0;
  flex-direction: column;
  gap: 0;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: flex; }
.primary-nav .sub-menu a {
  display: block;
  padding: 8px 20px;
  font-size: 13px;
  white-space: nowrap;
  color: #33373D;
}

/* ===== Menu "hamburguesa" (<=1024px) =====
   Produccion (Nav Menu de Elementor Pro, `toggle:burger`,
   `full_width:stretch`, `dropdown-tablet`; medido por DOM en vivo
   2026-10-07): icono 25px #33373D; desplegable blanco a todo el ancho;
   items en Cinzel 16px/500 sin mayusculas, #33373D, padding 10px 20px;
   item activo/abierto/hover con fondo #D08D6F y texto blanco; flecha
   (caret) junto a los que tienen submenu; submenu en sans-serif, sangrado
   28px. Diferencias deliberadas: submenu a 13px (produccion 11px, poco
   legible en movil), el desplegable se abre bajo el header completo (en
   produccion tapa la fila del telefono en movil) y lleva una sombra suave
   para separarlo del contenido en paginas de fondo blanco. */
.menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 6px;
  color: #33373D;
  cursor: pointer;
  line-height: 0;
}
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

@media (max-width: 1024px) {
  .header-bar { display: contents; }
  .site-header-main { position: relative; }
  .site-header-main .container { flex-wrap: nowrap; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9997;
    background: var(--color-white);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    max-height: 80vh;
    overflow-y: auto;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav > ul { display: block; }
  .primary-nav a {
    display: flex;
    align-items: center;
    text-transform: none;
    color: #33373D;
    padding: 10px 20px;
  }
  .primary-nav a:hover,
  .primary-nav a:focus,
  .primary-nav li.is-open > a,
  .primary-nav > ul > li.current-menu-item > a {
    background: var(--color-accent);
    color: var(--color-white);
  }
  .primary-nav li.menu-item-has-children > a::after {
    content: "";
    margin-left: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
  }
  .primary-nav .sub-menu {
    position: static;
    display: none;
    box-shadow: none;
    min-width: 0;
    padding: 0;
  }
  .primary-nav li:hover > .sub-menu,
  .primary-nav li:focus-within > .sub-menu { display: none; }
  .primary-nav li.is-open > .sub-menu { display: block; }
  .primary-nav .sub-menu a {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    white-space: normal;
    padding: 10px 20px 10px 28px;
  }
}

@media (max-width: 767px) {
  /* Movil: logo + hamburguesa en la primera fila; telefono a la izquierda y
     carrito/buscador a la derecha en la segunda, como produccion. */
  .site-header-main .container { flex-wrap: wrap; gap: 12px 16px; }
  .site-logo { flex: 1 1 0; min-width: 0; }
  .site-logo img { max-width: 100%; height: auto; }
  .header-actions { width: 100%; }
  .header-phone { margin-right: auto; }
}

.header-actions { display: flex; align-items: center; gap: 20px; }
.header-actions a { display: inline-flex; align-items: center; gap: 6px; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; }
.header-phone svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Numero algo mas pequeno que el menu (16px), a peticion del usuario 2026-10-09 */
.header-phone span { font-size: 14px; }
.header-cart { position: relative; }
.header-cart svg { width: 20px; height: 20px; }
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 11px;
  padding: 0 4px;
}

/* Icono de busqueda del header: en produccion es "fas fa-search" de 20px
   en #69727D, sin fondo (medido 2026-10-08). Se anula la regla global de
   botones (fondo acento / negro al hover), que pintaba un recuadro negro. */
.header-search { position: relative; display: flex; align-items: center; }
.header-search__toggle,
.header-search__toggle:hover,
.header-search__toggle:focus {
  background: none;
  border: none;
  padding: 4px;
  color: #69727D;
  cursor: pointer;
  display: inline-flex;
}
.header-search__toggle:hover { color: var(--color-primary); }

/* ===== Buscador a pantalla completa (popup "buscar" de produccion, id 3708) =====
   Medido por DOM en vivo 2026-10-08 a 1280px y 375px. */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  animation: candela-search-fade 0.3s ease;
}
.search-overlay[hidden] { display: none; }
@keyframes candela-search-fade { from { opacity: 0; } to { opacity: 1; } }
body.search-overlay-open { overflow: hidden; }
.search-overlay__dialog {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 640px;
  max-width: 100%;
  height: 100vh;
  background: #202020;
  box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);
}
.search-overlay__content { width: 100%; padding: 0 30px; box-sizing: border-box; }
.search-overlay__title {
  margin: 0 0 20px;
  padding-bottom: 50px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 92px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  text-align: center;
}
.search-overlay__close,
.search-overlay__close:hover,
.search-overlay__close:focus {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  padding: 0;
  background: none;
  border: none;
  color: #9A9A9A;
  cursor: pointer;
}
.search-overlay__close:hover { color: #FFFFFF; }
/* FiboSearch: estilos del widget de produccion (custom_css del shortcode) */
.search-overlay .dgwt-wcas-search-wrapp { max-width: none; width: 100%; margin: 0; }
.search-overlay .dgwt-wcas-sf-wrapp { padding: 0; background: none; }
.search-overlay .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  box-sizing: border-box;
  height: 50px;
  margin: 0;
  padding: 10px 15px 10px 40px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  color: #FFFFFF;
  background: transparent;
  border: 2px solid #FFFFFF;
  border-radius: 25px;
  -webkit-appearance: none;
}
.search-overlay .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder { color: #999999; font-style: normal; opacity: 1; }
.search-overlay .dgwt-wcas-ico-magnifier { left: 12px; width: 20px; height: 20px; fill: #FFFFFF; opacity: 1; }
/* Sugerencias de FiboSearch: se anaden al <body>, por encima del overlay */
.dgwt-wcas-suggestions-wrapp, .dgwt-wcas-details-wrapp { z-index: 10000 !important; }
/* Respaldo si FiboSearch no esta activo: buscador nativo con el mismo aspecto */
.search-overlay .search-form { display: flex; }
.search-overlay .search-form label { flex: 1; }
.search-overlay .search-form .search-field {
  width: 100%; box-sizing: border-box; height: 50px; padding: 10px 20px;
  color: #FFFFFF; background: transparent; border: 2px solid #FFFFFF; border-radius: 25px;
}
.search-overlay .search-form .search-submit { display: none; }
@media (max-width: 1024px) {
  .search-overlay__title { font-size: 70px; }
}
@media (max-width: 767px) {
  .search-overlay__dialog { width: 100%; height: auto; padding: 30px 0; }
  .search-overlay__title { font-size: 40px; }
}

/* ===== Carrito lateral (mini-cart deslizante) =====
   Recrea el widget "Menu Cart" (cart_type: side-cart) de Elementor Pro,
   verificado por DOM en vivo 2026-09-19: overlay fixed rgba(0,0,0,.25),
   panel fixed a la derecha 350px/alto completo, fondo blanco, sombra
   0 0 20px rgba(0,0,0,.2), transicion .3s. Contenido real (imagen, nombre,
   cantidad x precio, quitar, subtotal, botones) sobre el marcado ESTANDAR
   de WooCommerce (`.woocommerce-mini-cart`), no las clases de Elementor. */
.mini-cart-drawer { position: fixed; inset: 0; z-index: 9998; visibility: hidden; }
.mini-cart-drawer.is-open { visibility: visible; }
.mini-cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.3s;
}
.mini-cart-drawer.is-open .mini-cart-drawer__overlay { opacity: 1; }
.mini-cart-drawer__panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  max-width: 90vw;
  height: 100%;
  background: var(--color-white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  padding: 20px 30px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s;
}
.mini-cart-drawer.is-open .mini-cart-drawer__panel { transform: translateX(0); }
.mini-cart-drawer__close {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -6px -6px 4px auto;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}
.mini-cart-drawer__close:hover { background: #F5F5F5; }
.mini-cart-drawer__close::before,
.mini-cart-drawer__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: #69727D;
  transition: background 0.2s;
}
.mini-cart-drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.mini-cart-drawer__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mini-cart-drawer__close:hover::before,
.mini-cart-drawer__close:hover::after { background: var(--color-black); }

.woocommerce-mini-cart__empty-message { font-family: var(--font-heading); font-size: 17px; text-align: center; margin-top: 40px; }
ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
/* Reordenado a peticion del usuario (2026-09-19): foto fija a la izquierda,
   nombre/color-talla/precio apilados a la derecha, en vez del orden por
   defecto de WooCommerce. El marcado real de un item del mini-carrito es
   siempre `.remove` + `<a>` (con la imagen Y el nombre dentro, en ese
   orden) + `<dl class="variation">` (solo si el producto tiene atributos,
   ej. "Tallas"/"Colores") + `.quantity` -- los 3 ultimos son HERMANOS al
   mismo nivel dentro del `<li>`, no anidados unos dentro de otros. Con
   `display:flex` en el `<li>` (como estaba antes) cada uno se convertia en
   su propia columna en fila, así que en un producto CON variante la
   columna de "Tallas"/"Colores" quedaba flotando aparte, descuadrada con
   el precio. Y encima WooCommerce trae de serie `float:right` en la
   imagen del mini-carrito, así que el nombre se leia ANTES que la foto
   (texto fluyendo a su izquierda) en vez de foto-luego-nombre. Solucion
   robusta: sacar la imagen del flujo con `position:absolute` a la
   izquierda (anula el `float` heredado) y dejar `<a>`/`<dl>`/`.quantity`
   apilarse en bloque con el hueco de la imagen reservado via
   `padding-left` en el `<li>` -- no dependen de que sean o no hermanos. */
ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
  position: relative;
  padding: 15px 0 15px 71px;
  border-bottom: 1px solid #eee;
  min-height: 56px;
}
ul.woocommerce-mini-cart li.woocommerce-mini-cart-item:first-child { border-top: 0; }
.woocommerce-mini-cart-item img {
  position: absolute;
  left: 0;
  top: 15px;
  float: none;
  width: 56px;
  height: 56px;
  object-fit: cover;
}
.woocommerce-mini-cart-item a:not(.remove) {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-black);
  text-decoration: none;
  display: block;
  line-height: 1.3;
  padding-right: 22px;
}
.woocommerce-mini-cart-item .variation {
  margin: 4px 22px 0 0;
  font-size: 12px;
  color: #7A7A7A;
}
.woocommerce-mini-cart-item .variation dt,
.woocommerce-mini-cart-item .variation dd,
.woocommerce-mini-cart-item .variation p {
  display: inline;
  margin: 0;
  font-weight: 400;
}
.woocommerce-mini-cart-item .variation dd { margin-right: 10px; }
.woocommerce-mini-cart-item .quantity {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-accent);
  margin-top: 6px;
}
/* WooCommerce pinta su propia "x" nativa aqui (texto real del enlace,
   &times;) con `a.remove{color:var(--wc-red)!important;border-radius:100%;
   font-size:1.5em;position:absolute;left:0;...}` (woocommerce.css) -- sin
   anular ese !important con el nuestro, se veian las dos "x" superpuestas
   (la nuestra dibujada por ::before/::after y la nativa en rojo debajo),
   bug real visto en captura del usuario, 2026-09-19. Se oculta el texto
   nativo del todo (color/background transparent !important) y se resetean
   position/tamaño/radio que WooCommerce le da por defecto. */
.woocommerce-mini-cart-item .remove {
  position: absolute !important;
  top: 18px;
  right: 0;
  left: auto !important;
  width: 14px;
  height: 14px;
  display: block;
  font-size: 0 !important;
  line-height: 0;
  color: transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.woocommerce-mini-cart-item .remove::before,
.woocommerce-mini-cart-item .remove::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: var(--color-accent);
}
.woocommerce-mini-cart-item .remove::before { transform: rotate(45deg); }
.woocommerce-mini-cart-item .remove::after { transform: rotate(-45deg); }
/* WooCommerce tambien pinta un circulo rojo de fondo en :hover
   (`a.remove:hover{background:var(--wc-red)}`, sin !important en background
   pero igual gana por especificidad) -- anulado aqui para que al pasar el
   raton no reaparezca el circulo detras de nuestra "x". */
.woocommerce-mini-cart-item .remove:hover { background: transparent !important; }
.woocommerce-mini-cart-item .remove:hover::before,
.woocommerce-mini-cart-item .remove:hover::after { background: var(--color-black); }
.woocommerce-mini-cart__total {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  padding: 20px 0;
  margin: 0;
}
.woocommerce-mini-cart__buttons {
  display: flex;
  gap: 10px;
  margin: 0;
}
/* `.woocommerce a.button` (woocommerce.css, font-size:100%;padding:.618em 1em)
   tiene mas especificidad (2 clases + elemento) que un simple
   `.woocommerce-mini-cart__buttons .button` (2 clases) y ganaba pese a
   cargarse antes -- selector reforzado con el elemento "a" para igualarla. */
.woocommerce-mini-cart__buttons a.button {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  font-size: 11px;
  text-transform: uppercase;
  text-decoration: none;
}
.woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout) {
  background: var(--color-black);
  color: var(--color-white);
}
.woocommerce-mini-cart__buttons a.button.checkout {
  background: transparent;
  color: #7A7A7A;
  border: 1px solid #7A7A7A;
}
body.mini-cart-open { overflow: hidden; }

/* ===== Footer ===== */
/* Produccion (verificado por DOM en vivo): el footer NO tiene fondo oscuro --
   fondo gris muy claro #F5F5F5 (lo pinta la seccion de Elementor por dentro,
   no la etiqueta <footer> en si, que es transparente), texto gris oscuro
   #333. El esquema anterior (fondo oscuro + texto blanco) nunca se habia
   comprobado contra produccion. */
.site-footer {
  background: #F5F5F5;
  color: #333333;
  margin-top: 60px;
  padding: 50px 0 20px;
}
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--color-accent); }
.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-bottom: 30px;
}
/* "Enlaces de interes" en produccion es naranja acento; "Suscribete a
   nuestras newsletter" es gris -- no comparten color pese a compartir clase.
   Verificado por DOM en vivo (ambos titulos): fuente de sistema sin serifas,
   peso 500, sin mayusculas -- NO heredan la Cinzel serif que usa el resto de
   titulos del sitio (h1-h4 global), asi que se sobrescribe aqui explicitamente. */
.footer-columns h4 {
  color: #7A7A7A;
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
  font-size: 16px;
  margin-bottom: 14px;
}
.footer-newsletter h4 { font-size: 20px; }
/* Produccion (verificado por DOM en vivo): la columna de newsletter completa
   lleva un recuadro (border 3px solid #333, padding 40px) -- no es solo el
   input, es toda la columna (titulo, texto, formulario). */
.footer-newsletter {
  border: 3px solid #333333;
  padding: 40px;
}
/* "Enlaces de interes" en produccion NO esta dentro de ninguna de las 3
   columnas (verificado por DOM: es un widget de ancho completo -- elementor-
   col-100 -- que envuelve a la fila de 3 columnas, alineado al centro), asi
   que aqui va como titulo centrado encima de .footer-columns, no dentro de
   una columna. */
.footer-heading {
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
  font-size: 16px;
  text-align: center;
  margin-bottom: 24px;
}
.footer-columns li { margin-bottom: 8px; font-size: 14px; }
/* Produccion (verificado por DOM en vivo): icono de telefono en un naranja
   distinto (#D16737) al de email (#D08D6F, el acento general del sitio) --
   inconsistencia real del sitio original, no un error de aqui. */
.footer-contact-line { display: flex; align-items: center; gap: 8px; }
.footer-contact-line--phone svg { color: #D16737; flex-shrink: 0; }
.footer-contact-line--email svg { color: var(--color-accent); flex-shrink: 0; }
.site-footer .social-links { display: flex; gap: 14px; margin-top: 10px; }
.site-footer .social-links a { color: #7A7A7A; display: inline-flex; }
.site-footer .social-links a:hover { color: var(--color-accent); }
/* Produccion (verificado por DOM en vivo, viewport 1280px): copyright y logo
   de metodos de pago van en fila, cada uno en su mitad (50/50), copyright a
   la izquierda alineado al inicio. El logo NO tiene un ancho fijo -- en
   produccion se encoge para igualar la altura de la fila de texto (columnas
   dentro de un flex con align-items:stretch, altura de fila ~40px), y queda
   pegado al borde derecho, no centrado. Replicar el stretch exacto no es
   viable aqui (nuestro .footer-bottom no tiene una altura de fila propia --
   con height:100% el navegador cae al tamaño natural de la imagen, 648x142,
   un bucle que la agranda en vez de encogerla), asi que se fija la altura
   directamente al resultado real medido en produccion (~40px). */
.footer-bottom {
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-bottom p { margin: 0; }
.footer-bottom img { display: block; height: 40px; width: auto; margin-left: auto; }

@media (max-width: 767px) {
  .site-header-top .container,
  .site-header-main .container { padding-left: 16px; padding-right: 16px; }
}

/* ===== Home =====
   Hero real de produccion: widget "slides" de Elementor Pro (Swiper, fade,
   autoplay 5000ms, 2 diapositivas con el mismo texto/boton y distinta
   imagen de fondo -- flamenca-pl-espana.png y plazatoros.jpg). Recreado aqui
   con capas CSS + un JS minimo (assets/js/hero-slider.js), sin dependencia
   de Swiper. */
/* Produccion (verificado por DOM en vivo 2026-08-20): la seccion del slider
   usa "Full Height" de Elementor -- altura = 100vh exacto (medido 720px en
   una ventana de 1280x720), no una altura fija. */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--color-white);
  text-align: center;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; width: 100%; }
/* Produccion (verificado por DOM en vivo 2026-08-20): el bloque de texto del
   slide ocupa ~47% del ancho de la fila (585px de 1265px), texto centrado
   dentro de ese bloque pero el bloque en si asentado a la izquierda (no
   centrado en toda la pantalla) -- de ahi el h1 partido en 3 lineas. */
/* 585px medido en produccion a 1280px (2026-10-24); con los 560px de antes
   el titular salia en 4 lineas en vez de 3.
   DESVIACION DELIBERADA de produccion (2026-10-24, a peticion del usuario):
   produccion asienta el bloque a la izquierda; aqui va centrado en la
   pantalla. Para volver a la izquierda: margin: 0 auto 0 0. */
.hero-content { max-width: 585px; margin: 0 auto; text-align: center; }
.hero h1 { color: var(--color-white); text-transform: uppercase; font-size: 66px; line-height: 1; }
.hero p { margin: 10px 0 20px; font-family: var(--font-heading); font-size: 20px; }
/* CORRECCION (2026-10-24): antes habia un ajuste de movil para el hero mas
   arriba (bloque @media de la cabecera), pero al ir ANTES de estas reglas con
   la misma especificidad nunca se aplicaba: en movil el titular salia a 66px
   y "ESPECIALISTAS" (468px) se salia de la pantalla. Van aqui, despues.
   Valores medidos en produccion (breakpoints de Elementor, 2026-10-24):
   tablet (768px) titular 36px/1 en 2 lineas, slider al 70vh; movil (375px)
   32px/1.1 en 3 lineas, bloque a todo el ancho y centrado, slider al 100vh. */
@media (max-width: 1024px) {
  .hero { min-height: 70vh; }
  .hero-content { max-width: 553px; }
  .hero h1 { font-size: 36px; }
}
@media (max-width: 767px) {
  .hero { min-height: 100vh; }
  .hero-content { max-width: none; }
  .hero h1 { font-size: 32px; line-height: 1.1; }
}

.section { padding: 60px 0; }
/* Produccion (verificado por DOM en vivo 2026-08-20): el h2 no tiene tope de
   ancho legible, ocupa todo el contenedor de la seccion (de ahi que quede en
   una sola linea) -- no lo forzamos a una caja estrecha de 640px. */
.section-intro { margin: 0 auto 36px; text-align: center; }
.section-intro h2 { margin-bottom: 12px; }
/* Produccion (verificado por DOM en vivo 2026-08-20): SOLO este titulo en
   concreto ("Vestuario flamenco para bailaoras profesionales") no usa la
   tipografia Cinzel del resto de cabeceras -- se quedo con la fuente/color
   por defecto del kit de Elementor (sans-serif, #333). El resto de titulos
   .section-intro (Novedades, Productos destacados, Colecciones...) SI usan
   Cinzel -- heredan la regla general h1,h2,h3,h4 de mas arriba. */
.category-intro h2 { font-family: var(--font-body); color: #333333; font-weight: 400; }

/* Produccion (captura del usuario 2026-08-22, verificado contra los dos
   titulos de rejilla de productos "Novedades..." y "Productos destacados..."):
   llevan una linea horizontal a cada lado del texto, centradas verticalmente
   con el bloque de titulo aunque este ocupe dos lineas. */
.section-intro--divided h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.section-intro--divided h2::before,
.section-intro--divided h2::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-secondary);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.two-col img { width: 100%; height: auto; }

.category-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.category-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  overflow: hidden;
}
.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}
/* Produccion (verificado por DOM en vivo 2026-08-20): chip solido blanco con
   texto negro, sin borde -- no es un boton "outline" transparente. */
.category-card__label {
  position: relative;
  z-index: 1;
  color: #000;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 20px 40px;
}
.category-card--info { padding: 0; }
.category-card--info img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Produccion (verificado por DOM en vivo 2026-08-20): caja translucida
   (blanco 33%) con texto BLANCO, no una tarjeta blanca opaca con texto oscuro. */
.category-card__overlay {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.33);
  text-align: center;
  padding: 24px;
  max-width: 82%;
}
.category-card__overlay h4 {
  margin-bottom: 8px;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
}
.category-card__overlay p { margin-bottom: 16px; font-size: 16px; color: var(--color-white); font-family: var(--font-button); }

.promo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 50px;
}
.promo-row__image { width: 100%; height: auto; }
.promo-row__text h3 { margin-bottom: 14px; }
.promo-row__text p { margin-bottom: 20px; }

@media (max-width: 767px) {
  .category-cards { grid-template-columns: 1fr; }
  .promo-row { grid-template-columns: 1fr; margin-top: 30px; }
  /* En escritorio los bloques alternan foto a izquierda/derecha segun el
     orden del HTML; en movil, foto siempre arriba y luego texto y boton, como
     produccion (2026-10-24: antes "Vestido primavera" y "Camisa Ayeos" salian
     con el texto primero). */
  .promo-row__image { order: -1; }
}

.trust-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  padding: 30px 0;
  border-top: 1px solid var(--color-bg-light);
  border-bottom: 1px solid var(--color-bg-light);
}
.trust-badges > div { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.trust-badges svg { flex-shrink: 0; color: var(--color-accent); }
.trust-badges strong { display: block; font-family: var(--font-heading); color: var(--color-secondary); }

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.product-card { text-align: center; }
/* Produccion (verificado por DOM en vivo: rejilla "Novedades"): las 8 fotos
   son cuadradas y del mismo tamano exacto (270x270), object-fit:fill. Usamos
   la imagen "woocommerce_thumbnail" (ya cuadrada de origen) + cover para
   evitar el recorte forzado de fill, pero manteniendo el cuadrado uniforme. */
.product-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; margin-bottom: 12px; }
.product-card .price { color: var(--color-accent); font-weight: 500; margin: 6px 0 12px; }

/* Produccion (corregido por DOM en vivo contra candelasevilla.com, sustituye la
   verificacion por captura del 2026-08-22 que se quedo corta): "Añadir al carrito"
   en la rejilla de tienda no tiene fondo (transparente todo el rato, no blanco
   solido), borde/texto gris oscuro #54595F (no negro puro), padding 15px uniforme
   (no 12px 24px), y al hover NO se rellena de negro -- solo cambia el texto al
   color de acento, el fondo sigue transparente. */
.product-card .button {
  background: transparent;
  color: #54595F;
  border: 1px solid #54595F;
  padding: 15px;
}
.product-card .button:hover {
  background: transparent;
  color: var(--color-accent);
  border-color: #54595F;
}

.collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
/* Produccion (verificado por DOM en vivo 2026-08-22): no es una caja oscura
   con texto superpuesto -- es una foto circular a la izquierda (recorte de
   bailaora sobre un fondo rosa/melocoton) y el texto a la derecha, en color. */
.collection-card {
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: left;
}
.collection-card__media {
  flex: 0 0 45%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #F5DCCB;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 78%;
}
.collection-card__body h3 { color: var(--color-accent); }
.collection-card__body p { margin-bottom: 16px; }

@media (max-width: 600px) {
  .collection-card { flex-direction: column; text-align: center; }
  .collection-card__media { flex-basis: 60%; width: 60%; }
}

.section-center { text-align: center; max-width: 720px; margin: 0 auto; }

/* ===== Contenido generico de pagina (page.php) =====
   Ancho y tipografia verificados contra candelasevilla.com/politica-de-privacidad/
   en vivo (2026-09-09): sin columna de lectura mas estrecha (usa los 1140px
   normales del contenedor), texto en #333 (no el gris #7A7A7A del body global),
   line-height 1.5 y margen de parrafo 0.9em (24px/14.4px a 16px), enlaces en
   el naranja de contacto #D16737 sin subrayado -- no el enlace subrayado
   generico que tenia antes. */
.entry-content { color: #333333; line-height: 1.5; }
.entry-content p { margin-bottom: 14.4px; }
/* h2/h3 de contenido: heredan Cinzel/400 del h1-h4 global (correcto, verificado
   contra Informacion de la compania 2026-09-09: sus 4 h2 reales son Cinzel
   peso 400) pero con el gris de cuerpo de texto, no el gris de marca mas oscuro
   -- color real medido #7A7A7A (var(--color-text)), no #54595F
   (var(--color-secondary), el que hereda el h1-h4 global). Margen reducido:
   produccion los deja casi sin margen propio (0 o "0 0 10px", depende del
   widget), el "40px 0 16px" anterior no tenia respaldo real y quedaba muy
   suelto para texto plano sin las separaciones de seccion de Elementor. */
.entry-content h2 { color: var(--color-text); margin: 24px 0 10px; }
.entry-content h3 { color: var(--color-text); margin: 20px 0 8px; }
/* Condiciones generales de la contratacion (post 1841) es la EXCEPCION real
   encontrada hasta ahora: sus h2 no son Cinzel, son sans-serif peso 500 #333,
   margen "8px 0 16px" (verificado por DOM en vivo 2026-09-09) -- produccion
   no es consistente entre sus propias paginas legales, cada una se construyo
   a mano en su momento. No generalizar este caso a otras paginas sin verificar. */
/* Paginas de texto (body.text-page, ver candela_text_page_ids() en
   functions.php: Condiciones generales 1841, Politica de privacidad 2313 e
   Informacion de la compania 1141),
   homogeneizadas a peticion del usuario (2026-10-07) -- desviacion deliberada
   de produccion: los h2 a 32px competian con el titulo de la pagina y no
   habia jerarquia con los subtitulos (parrafos en negrita, ahora h3 reales
   via filtro the_content en functions.php). Escala: h1 40px (sin tocar),
   h2 seccion 20px/600 con separador, h3 subtitulo 16px/600, texto 16px. */
.text-page .entry-content h2 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  margin: 40px 0 14px;
  padding-top: 24px;
  border-top: 1px solid #E5E5E5;
}
.text-page .entry-content h2:first-of-type { margin-top: 28px; }
.text-page .entry-content h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  margin: 24px 0 8px;
}
.text-page .entry-content h2 + h3 { margin-top: 0; }
/* Titulos en Cinzel en todas las paginas de texto (2026-10-24, a peticion del
   usuario): privacidad, condiciones, informacion de la compania, cookies y
   guia de tallas. Misma escala; solo cambia la tipografia (antes Roboto). */
.text-page .entry-content h2,
.text-page .entry-content h3 { font-family: var(--font-heading); }
.text-page .entry-content ul {
  margin: 0 0 14.4px;
  padding-left: 22px;
}
/* Mi cuenta: el "Acceder" del formulario de login lo pinta el propio
   WooCommerce (my-account/form-login.php), no es contenido migrado -- cae
   dentro de .entry-content por como esta montada la plantilla, pero su estilo
   real (verificado 2026-09-13) es igual al h2 de condiciones generales:
   sans-serif/peso 500/#333, no la Cinzel/gris que llevan los h2 de contenido
   real como los de Informacion de la compania. */
.woocommerce-account .entry-content h2 { font-family: var(--font-body); font-weight: 500; color: #333333; margin: 8px 0 16px; }
/* Titulo plano de Mi cuenta (sin candela_page_hero(), ver page-mi-cuenta.php):
   sans-serif/peso 500/#333/40px/centrado, tal como se ve hoy en produccion
   con la foto de fondo rota. */
.account-title-section h1 { font-family: var(--font-body); font-weight: 500; color: #333333; font-size: 40px; text-align: center; margin: 0 0 30px; }
/* Boton "Acceso" del login (woocommerce-form-login__submit): fondo/color/
   radio ya coincidian con produccion sin tocar nada (los pinta el propio
   WooCommerce, con mas especificidad que la regla generica `.button` de
   aqui), pero tipografia/mayusculas SI las heredaba de esa regla generica
   -- verificado por DOM en vivo: produccion NO pone este boton en
   mayusculas ni en la fuente Jost del resto de botones del sitio, usa la
   fuente de cuerpo normal, sin transformar. */
.woocommerce-account .woocommerce-form-login__submit {
  font-family: var(--font-body);
  text-transform: none;
}
/* A peticion directa del usuario (2026-09-29): el formulario de login se
   veia estirado a todo el ancho del contenedor (~1100px, campos gigantes)
   con mucho espacio en blanco entre "MI CUENTA" y "Acceder" -- asi es
   tambien en produccion (verificado por DOM en vivo: el formulario ahi
   mide igual de ancho, ~1120px, no es un fallo de fidelidad), pero el
   usuario pidio una caja mas compacta y centrada en vez de replicarlo.
   Desviacion deliberada, no un gap de paridad. */
.woocommerce-account .account-title-section,
.woocommerce-account .account-title-section + .section {
  padding: 30px 0;
}
.woocommerce-account .account-title-section h1 { margin-bottom: 0; }
.woocommerce-account .entry-content .woocommerce {
  max-width: 480px;
  margin: 0 auto;
}
.entry-content ul, .entry-content ol { list-style: disc; padding-left: 22px; margin-bottom: 18px; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 6px; }
.entry-content a { color: #D16737; text-decoration: none; }
.entry-content a:hover { color: var(--color-primary); text-decoration: underline; }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
/* Imagenes sueltas del contenido migrado (ej. guia-de-tallas: la "tabla" de
   tallas es en realidad una imagen) van centradas en produccion
   (`.elementor-widget-image{text-align:center}`, verificado 2026-09-09) --
   local las heredaba alineadas a la izquierda por defecto. */
.entry-content img { display: block; margin: 0 auto 24px; max-width: 100%; }

/* ===== Carrito (page-carrito.php, [woocommerce_cart]) =====
   Producción usa el widget "Carrito" de Elementor Pro (clases e-cart__*,
   e-shop-table, e-cart-section), verificado por DOM en vivo 2026-09-13:
   layout de 2 columnas (tabla ~61% / totales ~39%, gap 30px), ambas dentro
   de una caja con borde 1px solid #D5D8DC, radio 3px, padding 16px 30px.
   Recreado sobre el marcado clasico de WooCommerce (misma logica de
   "recreacion equivalente" que el resto del tema), sin tocar plantillas de
   WooCommerce. */
.cart-page-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 32px;
  color: #333333;
  text-align: center;
  margin: 0 0 30px;
}
.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 30px;
  align-items: start;
}
/* WooCommerce mete un div.woocommerce-notices-wrapper (normalmente vacio)
   como primer hijo de .woocommerce -- sin esto, el grid de 2 columnas lo
   coloca en la primera celda y descoloca la tabla/totales a la celda
   siguiente. Se le da su propia fila a ancho completo. */
.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart form.woocommerce-cart-form { grid-column: 1; }
.woocommerce-cart .cart-collaterals { grid-column: 2; }
.woocommerce-cart table.cart {
  border: 1px solid #D5D8DC;
  border-radius: 3px;
  padding: 16px 30px;
  margin-bottom: 0;
  box-sizing: border-box;
}
/* La miniatura por defecto de WooCommerce sale minuscula (usa el atributo
   width="300" del <img> sin reescalar) -- produccion la muestra a ~50px. */
/* `.entry-content img{max-width:100%}` (regla general de la pagina) limita
   la imagen al ancho de su celda, que WooCommerce calcula sola en base al
   contenido -- sin ensanchar tambien la celda, el `width:80px` de aqui se
   quedaba capado al ancho viejo (~27px reales, verificado). */
.woocommerce-cart table.cart td.product-thumbnail { width: 80px; }
.woocommerce-cart table.cart td.product-thumbnail img { width: 80px; max-width: none; height: auto; }
/* Separador visual antes de la fila del cupon (en produccion vive en una
   caja aparte, debajo de la tabla; aqui sigue siendo la misma tabla --
   ver page-carrito.php -- asi que se simula el corte con un borde). */
.woocommerce-cart table.cart tr:has(td.actions) { border-top: 1px solid #D5D8DC; }
.woocommerce-cart table.cart tr:has(td.actions) td { padding-top: 20px; }
/* Mismo bug que la "x" del carrito lateral (sesion anterior): WooCommerce
   pinta su "x" nativa de la tabla en rojo con `color:var(--wc-red)!important`
   (woocommerce.css) -- produccion la muestra en negro simple, sin circulo
   de fondo, ~21.6px (verificado por DOM en vivo). */
.woocommerce-cart table.cart .remove { color: #000000 !important; background: transparent !important; }
.woocommerce-cart table.cart .remove:hover { color: var(--color-accent) !important; background: transparent !important; }
/* La celda de quitar producto le heredaba el padding generico de WooCommerce
   (9px 12px, celda de 48px) -- produccion la deja mas pegada a la imagen:
   sin padding horizontal, celda de solo 30px, "x" a 21.6px en vez de 24px
   (verificado por DOM en vivo). */
.woocommerce-cart table.cart td.product-remove { width: 30px; padding: 20px 0; }
.woocommerce-cart table.cart td.product-remove .remove { font-size: 21.6px; }
.woocommerce-cart.woocommerce-page .cart-collaterals .cart_totals {
  /* WooCommerce trae de serie `.woocommerce-page .cart-collaterals
     .cart_totals{float:right;width:48%}` (woocommerce-layout.css, 3 clases
     -- el body de esta pagina lleva SIEMPRE "woocommerce-cart" Y
     "woocommerce-page" a la vez), pensado para su layout clasico de una
     columna donde .cart_totals comparte fila con .cross-sells/.related por
     flotacion. Aqui ya lo posiciona el grid de `.woocommerce` (ver mas
     abajo), asi que sin igualar esa especificidad exacta la caja se
     quedaba a menos de la mitad del ancho de su columna y el contenido
     real desbordaba fuera del borde -- bug real visto en 2 capturas del
     usuario, 2026-09-14 (el primer intento, con solo 2 clases en el
     selector, perdia contra la variante de 3 clases de WooCommerce). */
  float: none;
  width: 100%;
  border: 1px solid #D5D8DC;
  border-radius: 3px;
  padding: 16px 30px;
  box-sizing: border-box;
}
.woocommerce-cart .cart_totals h2 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 16px;
}
/* Produccion oculta el <th> y usa el propio data-title del <td> (ya lo
   imprime WooCommerce de serie) como etiqueta flotada a la izquierda --
   mismo mecanismo que WooCommerce usa en su CSS "responsive" de movil
   (woocommerce-smallscreen.css), aqui activado siempre en vez de solo en
   pantallas pequeñas. Verificado por DOM en vivo: sin ":" tras la etiqueta,
   peso 700, valor alineado a la derecha en la misma linea.
   Selectores con ".cart-collaterals" de mas para igualar la especificidad
   de la regla propia de WooCommerce `.woocommerce-cart .cart-collaterals
   .cart_totals tr td{border-top:1px solid #e9e6ed}` (woocommerce.css) --
   sin ese calce exacto, esa regla gana y pinta lineas grises entre filas
   (bug real visto en captura del usuario, 2026-09-13). */
/* WooCommerce le pone a CUALQUIER tabla .shop_table un borde/radio propios
   por defecto (woocommerce.css: `.shop_table{border:1px solid ...;
   border-radius:5px}`) -- sin quitarlo aqui, la tabla de totales pintaba su
   propia caja redondeada DENTRO de la caja exterior de `.cart_totals`,
   dando el efecto de "caja doble" (bug real visto en captura del usuario,
   2026-09-13). En la tabla de productos (`table.cart`) no hace falta este
   reset porque ahi SI queremos ese borde (es la caja exterior de esa
   columna), pero en totales el borde real de produccion vive solo en
   `.cart_totals`, la tabla interior va sin caja propia. */
.woocommerce-cart .cart-collaterals .cart_totals table { margin: 0 0 16px; border: 0; border-radius: 0; }
.woocommerce-cart .cart_totals table th { display: none; }
.woocommerce-cart .cart-collaterals .cart_totals table td {
  display: table-cell;
  padding: 10px 0;
  border: 0;
  text-align: right;
  font-size: 14.4px;
  color: #333333;
}
.woocommerce-cart .cart_totals table td::before {
  content: attr(data-title);
  font-weight: 700;
  float: left;
}
.woocommerce-cart .wc-proceed-to-checkout { padding: 16px 0 0; }
/* WooCommerce trae de serie `.button.alt` con su propio morado (#7F54B9),
   Jost/uppercase heredado de la regla generica `.button` del tema y
   font-size:20px -- todo con mas especificidad/orden de carga que las
   reglas de aqui. Produccion lo muestra en el color de acento, Roboto,
   sin mayusculas, 15px (verificado por DOM en vivo 2026-09-19, mismo bug
   que el boton "Realizar el pedido" de Finalizar compra). */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--color-accent) !important;
  color: var(--color-white) !important;
  font-family: var(--font-body) !important;
  text-transform: none !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-align: center !important;
  padding: 15px !important;
  border-radius: 0 !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: var(--color-black) !important; }
/* Los botones de PayPal/"Paga a plazos" los renderiza un iframe sellado del
   propio SDK de PayPal -- no se puede restylear por dentro. A petición del
   usuario (mas pequenos), en vez de encoger el ancho del contenedor
   (dispara el propio breakpoint responsive del SDK y hace desaparecer el
   segundo boton "Paga a plazos" por debajo de ~300px) se escala el bloque
   completo con transform, que si conserva ambos botones y sigue siendo
   clicable (los navegadores mapean bien los clics a traves de transform).
   margin-bottom negativo compensa el hueco que deja el escalado (el
   elemento ocupa su tamaño real para el flujo del documento, no el visual). */
.woocommerce-cart .ppc-button-wrapper {
  transform: scale(0.75);
  transform-origin: top center;
  margin-bottom: -17px;
}
/* Mensaje de financiacion "PayPal Paga en hasta 24 plazos. Mas informacion"
   (widget de mensajeria "Pay Later" del propio plugin, `.ppcp-messages`) --
   ocultado por peticion directa del usuario. El propio script de PayPal le
   pone un `style="display:block"` en linea tras renderizar el mensaje, por
   eso hace falta !important -- un simple display:none pierde contra el
   estilo en linea. */
.woocommerce-cart .ppcp-messages { display: none !important; }
.woocommerce-cart .cart_totals #coupon_code,
.woocommerce-cart table.cart #coupon_code {
  border: 1px solid rgba(32, 7, 7, 0.8);
  border-radius: 4px;
}
/* Produccion (widget dedicado de Elementor Pro, `.coupon.e-cart-section`)
   apila el campo de cupon y el boton en su propia fila a ancho completo --
   se probo asi primero, pero a peticion del usuario (2026-09-19) se volvio
   a la fila unica original, con los controles mas pequenos para que quepan
   sin desbordar ni cortar el placeholder (el problema real la vez anterior
   no era compartir fila, era el tamano). Campo de cupon a `flex:1` (ocupa
   el espacio libre), botones a ancho automatico y tipografia mas compacta.
   "Actualizar carrito" no se quita (production lo sustituye por
   actualizacion en vivo via su propio JS, cambio de comportamiento que no
   se ha implementado) -- se deja visible con estilo secundario/discreto.
   OJO: `display:flex` directo en el <td colspan="6"> (probado primero) le
   rompe el calculo de ancho de columna de la tabla -- el navegador deja de
   tratarlo como celda de tabla y lo encoge a casi nada. Se deja el <td> con
   su display normal y se aplica flex solo a los hijos (inline-flex/
   inline-block), que si conservan el ancho completo real de la celda. */
.woocommerce-cart table.cart td.actions {
  white-space: normal;
  /* WooCommerce alinea a la derecha por defecto las celdas de datos de
     `table.cart` (pensado para las columnas numericas de precio/cantidad/
     subtotal) -- esta celda hereda lo mismo sin querer, desplazando el
     campo de cupon y "Actualizar carrito" hacia la derecha y partiendo la
     fila de forma descuadrada. Bug real visto en captura del usuario,
     2026-09-19. */
  text-align: left;
  /* El salto de linea/espacio en blanco entre </div> del .coupon y el
     <button> siguiente en el HTML cuenta como un espacio real entre dos
     elementos inline-level -- font-size:0 en el padre lo anula (se
     restaura el tamaño real en cada hijo mas abajo). Sin esto, el ancho
     efectivo disponible para el boton "Actualizar carrito" era un pelin
     mas corto de lo calculado y en fuentes/navegadores con metricas
     distintas a las de aqui podia desbordar y partir la fila -- bug real
     visto en captura del usuario con un producto variable (fila mas alta
     por la linea de "Tallas: X"), 2026-09-19. */
  font-size: 0;
}
.woocommerce-cart table.cart .coupon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 190px);
  max-width: 380px;
  vertical-align: middle;
  font-size: 14px;
}
.woocommerce-cart table.cart .coupon #coupon_code {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}
.woocommerce-cart table.cart .coupon .button {
  width: auto;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 11px;
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: 700;
  text-align: center;
}
.woocommerce-cart table.cart button[name="update_cart"] {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  box-sizing: border-box;
  margin: 0 0 0 8px;
  padding: 8px 12px;
  font-size: 11px;
  background: transparent;
  border: 1px solid #7A7A7A;
  color: #7A7A7A;
  font-weight: 700;
  text-align: center;
}
.woocommerce-cart table.cart button[name="update_cart"]:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 767px) {
  .woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-cart form.woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals { grid-column: 1; }
  /* La fila unica de cupon/actualizar (pedida por el usuario, 2026-09-19)
     no tiene sitio en movil -- por debajo de este ancho se apilan a ancho
     completo en vez de encogerse hasta cortar el texto. */
  .woocommerce-cart table.cart .coupon {
    display: block;
    width: 100%;
    max-width: none;
  }
  .woocommerce-cart table.cart .coupon #coupon_code {
    display: block;
    width: 100%;
    margin-bottom: 8px;
  }
  .woocommerce-cart table.cart .coupon .button { display: block; width: 100%; }
  .woocommerce-cart table.cart button[name="update_cart"] {
    display: block;
    width: 100%;
    margin: 8px 0 0;
  }
}

/* ===== Finalizar compra (page-finalizar-compra.php, [woocommerce_checkout]) =====
   Produccion usa el widget "Checkout" de Elementor Pro (clases e-checkout__*,
   e-checkout__column-start/-end para las 2 columnas, e-coupon-box para el
   cupon) -- aqui recreado con CSS Grid sobre el marcado estandar de
   WooCommerce ([woocommerce_checkout]), mismo criterio de "recreacion
   equivalente" que Carrito. Proporcion de columnas (627px/407px de 1120px)
   y orden real de las secciones (titulo, tabla, cupon, aviso PayPal,
   metodos de pago) verificados por DOM en vivo contra candelasevilla.com
   2026-09-19. */
.checkout-page-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 32px;
  color: #333333;
  text-align: center;
  margin: 0 0 30px;
}
/* `form.checkout` no aporta nada visual propio en produccion -- se aplana
   con `display:contents` para que sus hijos reales (`#customer_details`,
   `.order-review-box`, `.checkout-column-right`) se coloquen como celdas
   directas de la rejilla de 2 columnas, igual que hace Elementor con sus
   propios widgets independientes. `.coupon-wrapper` ya es hijo directo de
   por si (vive FUERA de `form.checkout` a proposito, ver la nota de clase
   en woocommerce/checkout/form-checkout.php -- un `<form>` no puede
   anidarse dentro de otro). */
.woocommerce-checkout .woocommerce {
  display: grid;
  grid-template-columns: 1.54fr 1fr;
  column-gap: 40px;
  align-items: start;
}
.woocommerce-checkout .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-checkout form.checkout.woocommerce-checkout {
  display: contents;
}
/* CORRECCION (2026-09-29), version final -- ver historial completo en
   ESTADO_PROYECTO.md seccion 7: mientras `#customer_details` (columna
   izquierda) comparta CUALQUIER fila de la rejilla con piezas sueltas de
   la columna derecha, CSS Grid iguala la altura de esa fila al elemento
   mas alto -- pasaba con `grid-row:1/span 7` (7 filas, algunas en 0 =
   huecos enormes) y seguia pasando, aunque menos, con solo 3 filas
   compartidas (caja del pedido/cupon/pago, ~95px/~70px de hueco en vez de
   los 259px/319px originales, pero lejos de los 24px/53px reales de
   produccion). La unica forma de que cada columna crezca con su propia
   altura, sin ningun reparto de sobrante, es que NINGUNA fila se comparta
   -- osea un solo elemento por columna. Eso exigia meter el cupon (un
   `<form>` que no puede anidarse dentro de `<form class="checkout">`)
   DENTRO de `.checkout-column-right` -- resuelto reubicandolo con
   JavaScript despues de renderizar (ver `footer.php`,
   `.coupon-wrapper`/`#coupon-slot`) en vez de con CSS. Con el cupon ya
   siendo un hijo real de `.checkout-column-right` en el DOM final, esta
   vuelve a ser UN SOLO grid-item (like `.order-review-box` antes de este
   hilo) y `#customer_details` ya no necesita ningun `span`. */
.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1; }
.woocommerce-checkout .checkout-column-right { grid-column: 2; grid-row: 1; }
/* Fallback sin JS (o antes de que el script del footer mueva el cupon):
   se queda fuera de las 2 columnas, a lo ancho, al final -- no rompe la
   rejilla aunque no tenga una columna asignada. El cupon ya depende de
   JS/AJAX en el nucleo de WooCommerce para funcionar, asi que no hay
   perdida real de funcionalidad en este caso. */
.woocommerce-checkout .coupon-wrapper { grid-column: 1 / -1; }
/* WooCommerce apila "Notas del pedido"/"Enviar a otra direccion" (col-2) a
   la derecha de la facturacion (col-1) por defecto (`.col2-set` flotado al
   48%) -- produccion los muestra apilados debajo, dentro de la misma
   columna izquierda. */
.woocommerce-checkout #customer_details.col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100%;
  float: none;
}
.woocommerce-checkout #customer_details h3 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  color: #000000;
  margin: 0 0 16px;
}
/* CORRECCION (2026-09-29): "Su pedido" y la tabla van DENTRO de una misma
   caja real en produccion (`.e-checkout__order_review`, un solo `<div>`
   envolviendo titulo+tabla, un solo borde). Antes se simulaba con 2
   grid-items separados y sombras "complementarias" (cada una omitiendo el
   lado que da a la union) -- el usuario detecto una costura/linea doble
   visible que no deberia estar ahi. Corregido de raiz: `functions.php`
   ahora envuelve titulo+tabla en un `.order-review-box` real (hooks
   `woocommerce_checkout_before_order_review_heading` /
   `woocommerce_checkout_after_order_review`), asi que aqui basta un unico
   box-shadow de 4 lados sin trucos. */
.woocommerce-checkout .order-review-box {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 2px #D5D8DC;
  border-radius: 3px;
  padding: 16px 30px;
  margin: 0 0 24px;
  box-sizing: border-box;
}
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  color: #000000;
  margin: 0 0 16px;
}
/* Tipografia de la tabla del pedido: heredaba el tamano base del body
   (16px) y el gris generico del tema (#333) -- verificado por DOM en vivo
   que produccion usa 14px en toda la tabla, con 2 colores distintos segun
   la fila: negro puro (#000) para el nombre/cantidad/precio de cada
   producto, gris #69727D (mas claro que el generico del tema) para las
   cabeceras y para Subtotal/Envio/Total -- ambos en negrita 700. El aviso
   "(incluye X IVA)" hereda el tamano menor de <small> (80% del padre) y el
   color/negrita del <strong> que lo acompana los hereda igual del td. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  font-family: var(--font-body);
  font-size: 14px;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
  font-weight: 700;
  color: #69727D;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td {
  font-weight: 400;
  color: #000000;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
  font-weight: 700;
  color: #69727D;
}
/* Campos de formulario: sin estilo propio del tema hasta ahora (heredaban
   el aspecto por defecto del navegador -- borde oscuro, radio 4px, fondo
   blanco). Produccion usa un estilo "relleno" sin borde, fondo gris claro
   #F9FAFA, sin radio -- verificado por DOM en vivo 2026-09-19. */
.woocommerce-checkout .form-row label {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: #69727D;
  margin: 0 0 3px;
}
.woocommerce-checkout .form-row { margin-bottom: 5px; }
/* `woocommerce.css` trae su propia regla para estos campos
   (`.woocommerce form .form-row .input-text`, 3 clases) con MAS
   especificidad que la de aqui (2 clases) -- gana ella y el input se
   queda con su borde oscuro/fondo blanco por defecto pese a esta regla
   (bug real, reproducido en navegador 2026-09-19, no era cache). Con
   `!important` (mismo patron ya usado en el resto del tema para vencer al
   CSS de WooCommerce) se soluciona sin depender de la especificidad. */
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  border: none !important;
  border-radius: 0 !important;
  background-color: #F9FAFA !important;
  padding: 16px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: #333333 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.woocommerce-checkout textarea { padding: 16px !important; min-height: 90px; }
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  outline: 1px solid var(--color-accent);
}
.woocommerce-checkout #ship-to-different-address label {
  font-size: 14px;
  font-weight: 700;
  color: #000000;
}
/* El boton "Aplicar cupon" (solo clase `.button`, no `.button.alt`) sale
   gris claro en vez del color de acento -- WooCommerce le aplica su propio
   estilo de boton secundario con mas especificidad que la regla generica
   `.button` del tema (verificado por DOM en vivo: produccion lo muestra en
   acento, blanco, Roboto, sin mayusculas). */
.woocommerce-checkout form.checkout_coupon .button {
  background: var(--color-accent) !important;
  color: var(--color-white) !important;
  font-family: var(--font-body) !important;
  text-transform: none !important;
  font-size: 14px !important;
  padding: 16px !important;
}
.woocommerce-checkout form.checkout_coupon .button:hover { background: var(--color-black) !important; }
.woocommerce-checkout form.checkout_coupon #coupon_code { flex: 1; }
.woocommerce-checkout form.checkout_coupon .form-row-first,
.woocommerce-checkout form.checkout_coupon .form-row-last {
  display: inline-block;
  vertical-align: top;
}
/* Mismo bug ya documentado para `.cart_totals table` (sección 7, 2026-09-13):
   WooCommerce le pone a CUALQUIER tabla `.shop_table` (esta lo es) un borde/
   radio propios por defecto (`woocommerce.css`: `.shop_table{border:1px
   solid ...;border-radius:5px}`) -- sin quitarlo, pinta su propia caja
   redondeada DENTRO de `.order-review-box`, dando "caja doble" (reportado
   por el usuario con captura, 2026-09-29). El borde real vive solo en el
   wrapper exterior. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  margin: 0;
  border: 0;
  border-radius: 0;
}
/* El aviso "info" de WooCommerce (icono + borde de color) no existe en
   produccion: alli el cupon es un simple parrafo con enlace dentro de una
   caja igual a las demas (borde #D5D8DC, radio 3px). */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin: 0 0 24px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  border: none;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 2px #D5D8DC;
  border-radius: 3px;
  padding: 16px 30px;
  margin: 0;
  color: #333333;
  font-size: 14px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.woocommerce-checkout .woocommerce-form-coupon-toggle a.showcoupon {
  color: var(--color-accent);
  text-decoration: underline;
}
.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon {
  box-shadow: inset 0 0 0 2px #D5D8DC;
  border-radius: 3px;
  padding: 16px 30px;
  margin: 0 0 24px;
  box-sizing: border-box;
}
/* A peticion del usuario (igual que en Carrito, ver `.woocommerce-cart
   .ppcp-messages` mas arriba): se oculta el aviso "Paga en X plazos" de
   PayPal tambien en Finalizar compra, aunque produccion si lo muestra
   aqui -- desviacion deliberada, no un fallo de fidelidad. */
.woocommerce-checkout .ppcp-messages { display: none !important; }
.woocommerce-checkout #payment {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 2px #D5D8DC;
  border-radius: 3px;
  padding: 16px 30px;
  margin: 0 0 24px;
  box-sizing: border-box;
}
/* El boton "Realizar el pedido" hereda `.button.alt` de WooCommerce, que
   trae su propio morado por defecto (#7F54B9) con mas especificidad que la
   regla generica `.button` del tema -- produccion lo muestra en el color de
   acento de la marca, sin mayusculas, con letra mas grande (Roboto/14px en
   vez de Jost/uppercase del resto de botones del sitio, verificado por DOM
   en vivo). */
.woocommerce-checkout #payment #place_order {
  display: block;
  width: 100%;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-body);
  text-transform: none;
  font-size: 20px;
  border-radius: 3px;
}
.woocommerce-checkout #payment #place_order:hover { background: var(--color-black); }
/* CORRECCION (2026-09-29): la nota de sesion 2026-09-19 (mas abajo, en el
   historial) decia que esta caja solo aparecia por debajo de 1200px --
   revisado de nuevo a peticion del usuario (reporto que a 1470px de ancho
   real en su navegador seguia sin verse el borde de "Detalles de
   facturacion"). Verificado por `document.styleSheets` en vivo contra
   produccion: la regla real
   (`.elementor-widget-woocommerce-checkout-page .woocommerce #customer_details
   .col-1`, junto con `.shipping_address`/`.woocommerce-additional-fields`/etc.)
   NO tiene NINGUNA media query -- es incondicional, se pinta a cualquier
   ancho. Confirmado tambien en vivo a 1470px: `border: 1px solid
   rgb(213, 216, 220)` presente. La investigacion anterior (que documentaba
   "SI a 1200, NO a 1220") no se puede reproducir hoy con la misma regla --
   posible cambio en el sitio de produccion entre el 19 y el 29 de
   septiembre (es un sitio en vivo, fuera de nuestro control), o un error de
   aquella sesion. En cualquier caso, la caja debe verse siempre, no solo
   por debajo de 1200px -- movida fuera de la media query. `border:1px
   solid` en vez de `box-shadow` aqui desaparecia por completo para el
   usuario en Chrome y Firefox normales (bug de bordes "hairline" con
   ciertos zoom/escala de pantalla, ver nota original 2026-09-20 en el
   historial de la seccion 7) asi que se mantiene `box-shadow`, solo se
   quita la condicion de ancho. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout .shipping_address,
.woocommerce-checkout .woocommerce-additional-fields {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 2px #D5D8DC;
  border-radius: 3px;
  padding: 16px 30px;
  box-sizing: border-box;
  margin-bottom: 24px;
}
/* El apilado a 1 columna ocurre en un breakpoint mas estrecho (el
   "tablet" de Elementor, 1024px: acotado por DOM en vivo -- a 1024 ya esta
   apilado, a 1100 todavia son 2 columnas). Entre 1025px y 1200px la
   maquetacion sigue siendo de 2 columnas pero YA con las cajas
   individuales de la regla anterior.
   CORRECCION (2026-09-29): con `#customer_details` y `.checkout-column-right`
   como los 2 unicos grid-items reales (ver mas arriba -- el cupon ya vive
   DENTRO de `.checkout-column-right` tras el script de footer.php),
   apilar a 1 columna es tan simple como cambiar `grid-template-columns`;
   ya salen en el orden correcto porque asi estan en el DOM. */
@media (max-width: 1024px) {
  .woocommerce-checkout .woocommerce { grid-template-columns: 1fr; }
  /* Ambos comparten `grid-row:1` en escritorio (2 columnas, misma fila) --
     en 1 columna eso las pondria literalmente en la misma celda, una
     encima de la otra (bug real, visto en pruebas: la caja del pedido se
     superponia con la facturacion). `#customer_details` se queda en su
     fila (ya es la primera en el DOM); `.checkout-column-right` pasa a
     `grid-row:2` para ir siempre despues, apilada debajo. */
  .woocommerce-checkout .checkout-column-right { grid-column: 1; grid-row: 2; }
}

/* ===== Tienda / archivo de productos (categoria y pagina "Shop") =====
   Re-estiliza la rejilla por defecto de WooCommerce (ul.products, flotada
   en columnas) para que coincida con .products-grid/.product-card de la
   home, sin tocar el PHP de WooCommerce (mantiene ajax add-to-cart,
   swatches de variaciones, orden y paginacion funcionando tal cual). */
.woocommerce-products-header { margin-bottom: 36px; text-align: center; }
.woocommerce-products-header__title { margin-bottom: 12px; }

/* Produccion usa "columns-4" (clase fija del widget de Elementor, no fluido):
   16 productos por pagina forman 4 filas de 4 exactas, sin ningun hueco final.
   El "auto-fit, minmax(220px,1fr)" que habia aqui es fluido y se asentaba en
   3 columnas a 1140px, dejando el ultimo producto de cada pagina solo en su
   fila con un hueco enorme al lado. */
ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 40px;
  padding: 0;
}
/* Tablet y movil (2026-10-07, a peticion del usuario): la regla de 2
   columnas que habia en el bloque movil general (mas arriba en el archivo)
   quedaba anulada por esta de 4, que va despues -- en movil salian 4
   columnas estrechas y desiguales (`1fr` se ensancha con los titulos
   largos; `minmax(0,1fr)` lo evita). Produccion, medido por DOM en vivo:
   3 columnas de 768 a 1024px, 2 por debajo, separacion 40px vertical y
   20px horizontal en ambos casos. */
@media (max-width: 1024px) {
  ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; }
}
@media (max-width: 767px) {
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* woocommerce-layout.css define un clearfix (content:" "; display:table) en
   ::before/::after de ul.products para su rejilla antigua basada en float.
   En CSS Grid ese pseudo-elemento cuenta como una celda real, desplazando el
   primer producto a la 2a columna y dejando un hueco vacio en la 1a fila.
   Neutralizado aqui para que la rejilla no cuente celdas fantasma. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none;
  display: none;
}
/* !important: woocommerce-smallscreen.css usa un selector de atributo
   ([class*="columns-"]) mas especifico que el nuestro para su propio
   grid flotado de 2 columnas en movil; forzamos aqui para que nuestra
   rejilla CSS Grid (mas arriba) mande en todos los anchos de pantalla. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: auto !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0;
  text-align: center;
  list-style: none;
}
.woocommerce ul.products li.product a,
.woocommerce-page ul.products li.product a { width: 100%; }
ul.products li.product img {
  aspect-ratio: 1/1;
  object-fit: cover;
  margin-bottom: 12px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  color: var(--color-secondary);
  margin: 4px 0;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  display: block;
  color: var(--color-accent);
  font-weight: 500;
  margin: 4px 0 12px;
}
/* Produccion (verificado por DOM en vivo en /categoria-producto/vestidos-flamencos/):
   fondo transparente, borde/texto gris claro #A7A7A7/#7A7A7A (mas claro que el
   gris de la rejilla de home, no es la misma regla reciclada); al hover solo
   cambia borde+texto al color de acento, sin rellenar. */
ul.products li.product .button {
  font-family: var(--font-button);
  background: transparent;
  color: #7A7A7A;
  border: 1px solid #A7A7A7;
}
ul.products li.product .button:hover {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
ul.products li.product .onsale {
  font-family: var(--font-button);
  font-size: 12px;
  background: var(--color-accent);
  color: var(--color-white);
  padding: 4px 10px;
  position: absolute;
}

.woocommerce-result-count,
.woocommerce-ordering { margin-bottom: 20px; }
.woocommerce-pagination ul.page-numbers {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.woocommerce-pagination .page-numbers { padding: 8px 14px; background: var(--color-bg-light); }
.woocommerce-pagination .page-numbers.current { background: var(--color-secondary); color: var(--color-white); }

/* ===== Producto individual ===== */
/* minmax(0,1fr) en vez de 1fr a secas: con "1fr" a secas las 2 columnas
   salian desiguales (386px/673px en vez de 50/50) porque un grid item no se
   encoge por debajo del min-content de su contenido por defecto; minmax(0,1fr)
   fuerza el suelo a 0 directamente en la pista, no en el hijo. */
.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}
/* WooCommerce trae de serie (woocommerce-layout.css) "float:left;width:48%"
   en div.images y "float:right;width:48%" en div.summary, pensado para su
   layout antiguo a base de float a ambos lados de un contenedor -- con
   !important porque ese selector del plugin ya iguala o supera nuestra
   especificidad. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
  width: 100% !important;
  float: none !important;
}
/* Produccion (verificado por DOM en vivo): el titulo del producto NO hereda
   la Cinzel serif del resto de titulos del sitio -- fuente de sistema sin
   serifas, 32px (no 40px), peso 500 (no 400), color #333 (no #54595F),
   line-height ajustado 1:1 al tamaño de fuente (32px, no 48px). */
.single-product div.product .product_title {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 500;
  color: #333333;
  line-height: 1;
}
.single-product div.product .price {
  color: var(--color-accent);
  font-size: 22px;
  margin: 10px 0;
}
.single-product div.product .cart { margin: 20px 0; }
/* Produccion (verificado por DOM/computed style en vivo): el bloque SKU/
   Categorias va envuelto entre 2 lineas horizontales (border-top/bottom 1px
   solid #7A7A7A, padding 25px 0), cada dato en su propia fila (flex-direction
   column), etiqueta en negrita SIN dos puntos seguida del valor, ambos en
   gris #7A7A7A -- no es el "SKU: valor Categorias: valor" en linea que trae
   WooCommerce por defecto. */
.single-product div.product .product-meta-wrap {
  border-top: 1px solid #7A7A7A;
  border-bottom: 1px solid #7A7A7A;
  padding: 25px 0;
  margin: 0 0 5px;
}
.single-product div.product .product_meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  color: #7A7A7A;
}
.single-product div.product .product_meta .detail-container {
  display: flex;
  gap: 6px;
}
.single-product div.product .product_meta .detail-label {
  font-weight: 700;
}
.single-product div.product .product_meta a { color: #7A7A7A; }
/* WooCommerce pinta ".button.alt" (incluye single_add_to_cart_button) en
   morado (rgb(127,84,179)) por defecto -- produccion usa el acento naranja
   estandar del sitio, verificado por DOM en vivo. */
.single-product div.product .single_add_to_cart_button {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
}
.single-product div.product .single_add_to_cart_button:hover {
  background-color: var(--color-black) !important;
}
.single-product .woocommerce-tabs { clear: both; margin-top: 40px; }
.single-product .woocommerce-tabs ul.tabs { display: flex; gap: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--color-bg-light); }
.single-product .woocommerce-tabs ul.tabs li { padding-bottom: 10px; }
.single-product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--color-secondary); }
.single-product .related.products { margin-top: 60px; }
.single-product .related.products > h2 { text-align: center; margin-bottom: 30px; }

@media (max-width: 767px) {
  .single-product div.product { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ===== Hero de pagina (imagen de fondo + titulo superpuesto) =====
   Patron real usado en el sitio de produccion en varias paginas (Contacto,
   Mi cuenta, Informacion de la compania), extraido de _elementor_data:
   background-size cover, overlay gradiente 90deg negro (60%) a transparente
   (100%) a opacidad 0.65, contenedor min-height 400px, titulo blanco centrado
   (ya usa la tipografia/tamaño de h1 global, Cinzel 40px). */
.page-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0 20px;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, #000000 60%, transparent 100%);
  opacity: 0.65;
}
.page-hero h1 {
  position: relative;
  color: var(--color-white);
  text-align: center;
  margin: 0;
}

/* Variante clara: usada en tienda/categorias de producto (imagen cabecera.png,
   overlay blanco->transparente, titulo oscuro y mas grande -- 55px, verificado
   contra candelasevilla.com/tienda-de-ropa-flamenca/ y una categoria real). */
.page-hero--light::before { background-image: linear-gradient(90deg, #FFFFFF 60%, transparent 100%); }
.page-hero--light h1 { color: #333333; font-size: 55px; }

/* Variante "company": Informacion de la compania (el unico caso real hasta
   ahora, verificado por DOM en vivo 2026-09-09). A diferencia de dark/light,
   el texto va alineado a la izquierda dentro del ancho de 1140px del sitio
   (no centrado a pantalla completa) y usa tipografia de contenido, no la
   Cinzel de marca: h1 sans-serif 40px/peso 500, subtitulo (h2) sans-serif
   32px/peso 500, mismo color #333 que el h1, ~20px de espacio entre ambos. */
.page-hero--company::before { background-image: linear-gradient(90deg, #FFFFFF 60%, transparent 100%); }
.page-hero--company { justify-content: flex-start; padding: 0 15px; }
.page-hero--company .page-hero__text { position: relative; width: 100%; max-width: 1140px; margin: 0 auto; text-align: left; }
/* CAMBIO (2026-10-24, a peticion del usuario): titulos en Cinzel como el
   resto de paginas de texto (h1 40px/400 #54595F, h2 20px/600 #333), en vez
   de la sans-serif de produccion. */
.page-hero--company h1 { font-family: var(--font-heading); font-size: 40px; font-weight: 400; color: var(--color-secondary); text-align: left; margin: 0; }
.page-hero--company h2 { font-family: var(--font-heading); font-size: 20px; font-weight: 600; color: #333333; text-align: left; margin: 20px 0 0; }

/* Mapa de Google a ancho completo (seccion propia, sin .container), tal
   como aparece en produccion justo debajo del hero en las paginas que lo usan. */
.page-map { width: 100%; height: 400px; position: relative; background: var(--color-bg-light); }
.page-map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Hasta el consentimiento de "Mapas" (banner de cookies): aviso en vez del iframe */
.page-map:not(.is-loaded) iframe { display: none; }
.page-map.is-loaded .page-map__placeholder { display: none; }
.page-map__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  font-size: 14px;
}
.page-map__placeholder p { margin: 0; }
.page-map__placeholder a { margin-left: 16px; color: var(--color-secondary); text-decoration: underline; }

/* ===== Contacto: bloques Direccion/Email/Movil con icono =====
   Medido por DOM/CSS en vivo en candelasevilla.com/contacto/ (2026-10-08,
   post-230.css). Escritorio: circulo de 89x92 (icono 35px + padding
   25/25/22 + borde 2px #333) y texto con margin-left -20px y padding
   8/100/11/60, centrado en vertical, 20px entre filas. Movil (<768px): todo
   apilado y centrado, texto con margin-top -20px y padding 30/50/20.
   Tipografia del sistema (no Roboto), igual que el widget de produccion. */
.contact-info { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
.contact-item { display: flex; align-items: center; margin-bottom: 20px; }
.contact-item:last-child { margin-bottom: 0; }
.contact-item__icon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 89px;
  height: 92px;
  padding: 25px 25px 22px;
  border: 2px solid #333333;
  border-radius: 100%;
  box-shadow: -10px 0 5px 0 rgba(0, 0, 0, 0.015);
  color: #7A7A7A;
}
.contact-item__icon svg { display: block; width: 35px; height: 35px; }
.contact-item__text { margin-left: -20px; padding: 8px 100px 11px 60px; }
.contact-info .contact-item__title {
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #333333;
  text-transform: none;
  letter-spacing: normal;
  margin: 0 0 8px;
}
.contact-item:first-child .contact-item__title { margin-bottom: 10px; }
.contact-item__text p { margin: 0; font-size: 16px; line-height: 24px; color: #333333; }
.contact-item__text a { color: inherit; text-decoration: none; }
.contact-item__text a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .contact-item { flex-direction: column; text-align: center; }
  .contact-item__text { margin: -20px 0 0; padding: 30px 50px 20px; }
}

/* ===== Popup newsletter (post_id 583, unico popup real de Elementor) =====
   Valores tomados de _elementor_page_settings/_elementor_data del post 583:
   ancho 650px (300px movil), overlay blanco semitransparente, box-shadow y
   colores literales del widget (#F42478 rosa, #6C7C69 verde), entrada fadeIn. */
.candela-notice {
  text-align: center;
  padding: 14px 20px;
  font-size: 14px;
}
.candela-notice--ok { background: #e6f4ea; color: #256029; }
.candela-notice--error { background: #fdecea; color: #a4262c; }

.candela-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFFB5;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.candela-popup-overlay.is-open { opacity: 1; }
.candela-popup-overlay[hidden] { display: none; }

.candela-popup {
  position: relative;
  width: 650px;
  max-width: 100%;
  display: grid;
  grid-template-columns: 45% 55%;
  background: var(--color-white);
  box-shadow: 2px 8px 25px 3px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.candela-popup__close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.candela-popup__close:hover { background: rgba(0, 0, 0, 0.55); }

.candela-popup__content { display: flex; flex-direction: column; }

.candela-popup__offer {
  background: #F424780D;
  border-right: 3px solid #F42478;
  border-bottom: 3px solid #F42478;
  padding: 24px 20px 24px 40px;
}
.candela-popup__offer h2 { color: var(--color-secondary); margin-bottom: 4px; }
.candela-popup__offer p { color: var(--color-primary); }

.candela-popup__form {
  background: #6C7C69;
  padding: 20px 20px 20px 25px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.candela-popup__form h3,
.candela-popup__form p { color: var(--color-white); }
.candela-popup__form h3 { margin-bottom: 6px; }
.candela-popup__form p { margin-bottom: 14px; font-size: 14px; }
.candela-popup__form form { display: flex; flex-direction: column; gap: 8px; }
.candela-popup__form input[type="email"] {
  padding: 10px;
  border: 1px solid var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
}
.candela-popup__form button {
  background: transparent;
  border: 1px solid var(--color-white);
}
.candela-popup__form button:hover { background: var(--color-white); color: #6C7C69; }

.candela-popup__image {
  background-size: cover;
  background-position: center right;
}

@media (max-width: 767px) {
  .candela-popup { width: 300px; grid-template-columns: 1fr; }
  .candela-popup__image { display: none; }
}

/* Botones de PayPal de la ficha de producto, mas compactos (alto fijado en
   functions.php, filtro woocommerce_paypal_payments_localized_script_data). */
.single-product #ppc-button-ppcp-gateway {
	max-width: 340px;
	margin-bottom: 12px;
}

/* ===== Pedido recibido (/finalizar-compra/order-received/..., thankyou.php
   de WooCommerce) =====
   Los titulos heredaban los h2/h3 genericos del tema (Cinzel 32px/24px gris,
   "Nuestros detalles bancarios", "Detalles del pedido", "Direccion de
   facturacion"...) y desentonaban con el resto del checkout, que usa Roboto
   en negrita. A peticion del usuario (2026-10-07) se homogeneizan: una sola
   escala -- titulo de pagina (32px, ya existente), secciones 18px/600,
   subtitulos 15px/600 y texto/tablas 14px, como la tabla del checkout. */
/* El grid de 2 columnas del checkout (`.woocommerce-checkout .woocommerce`)
   tambien se aplica aqui y dejaba todo el contenido encajonado en la
   columna izquierda (~640px), descentrado respecto al titulo. */
.woocommerce-order-received .woocommerce {
  display: block;
}
.woocommerce-order-received .woocommerce-order {
  max-width: 900px;
  margin: 0 auto;
  font-size: 14px;
}
.woocommerce-order-received ul.order_details {
  margin: 0 0 24px;
  padding: 0;
}
.woocommerce-order-received .woocommerce-order h2 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  text-transform: none;
  color: #333333;
  margin: 32px 0 12px;
}
.woocommerce-order-received .woocommerce-order h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  color: #333333;
  margin: 12px 0 8px;
}
.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 16px;
}
.woocommerce-order-received .woocommerce-order-overview strong,
.woocommerce-order-received .wc-bacs-bank-details strong {
  font-size: 14px;
}
.woocommerce-order-received table.woocommerce-table--order-details {
  font-family: var(--font-body);
  font-size: 14px;
}
.woocommerce-order-received table.woocommerce-table--order-details thead th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
  font-weight: 700;
  color: #69727D;
}
.woocommerce-order-received table.woocommerce-table--order-details tbody td {
  color: #000000;
}
.woocommerce-order-received .woocommerce-customer-details address {
  font-size: 14px;
  line-height: 1.6;
}

/* ===== Banner de cookies (2026-10-23) =====
   Ver assets/js/cookie-consent.js. Fijo abajo, sin tapar la web (no es un
   muro de cookies). "Aceptar" y "Rechazar" heredan el mismo estilo de boton
   del tema (misma visibilidad, AEPD); "Configurar" va como enlace. z-index por
   encima del boton de WhatsApp (Click to Chat usa 99999999). */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000000;
  background: var(--color-white);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-secondary);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.cookie-banner__text { flex: 1 1 420px; }
.cookie-banner__title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  margin: 0 0 4px;
}
.cookie-banner__text p { margin: 0; }
.cookie-banner__text a { color: var(--color-secondary); text-decoration: underline; }
.cookie-banner__prefs {
  flex: 1 1 100%;
  display: grid;
  gap: 10px;
  order: 1;
}
.cookie-banner__prefs[hidden] { display: none; }
.cookie-banner__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.cookie-banner__option input { margin-top: 4px; flex-shrink: 0; }
.cookie-banner__option strong { display: block; color: #333333; }
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  order: 2;
}
.cookie-banner__actions [hidden] { display: none; }
.cookie-banner__actions .cookie-banner__link,
.cookie-banner__actions .cookie-banner__link:hover {
  background: none;
  color: var(--color-secondary);
  text-decoration: underline;
  text-transform: none;
  letter-spacing: 0;
  padding: 12px 8px;
}
@media (max-width: 767px) {
  .cookie-banner__inner { padding: 16px; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions button[data-consent="accept"],
  .cookie-banner__actions button[data-consent="reject"],
  .cookie-banner__actions button[data-consent="save"] { flex: 1 1 0; }
}

/* ===== Tablas de /politica-de-cookies/ (2026-10-24) =====
   Clase puesta por scripts/politica_cookies.php; no afecta a las tablas de
   WooCommerce. En movil se desplazan en horizontal si no caben. */
.entry-content .cookie-table {
  font-size: 14px;
  line-height: 1.4;
}
@media (max-width: 767px) {
  .entry-content .cookie-table { display: block; overflow-x: auto; }
}
.cookie-table th,
.cookie-table td {
  border: 1px solid #E5E5E5;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.cookie-table th { background: var(--color-bg-light); color: #333333; font-weight: 600; }
.cookie-table td:first-child { word-break: break-word; min-width: 140px; }