/* ═══════════════════════════════════════════════════════════════════════════
   Piezas del sitio que no son la ficha ni un shortcode.

   Se carga la última (prioridad 20, sin dependencias) para poder pisar a
   styles.css y elements.css sin subir la especificidad.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Alto de la cabecera ─────────────────────────────────────────────────────
   OJO con lo que hace esta variable y con lo que NO hace.

   Sirve para UNA cosa: colocar la barra fija del popup justo debajo de la
   cabecera. Antes iba con un 95px escrito a mano, medido para la cabecera de
   90px que había; al adelgazarla quedó un hueco entre las dos.

   Lo que NO es es un hueco que haya que reservarle al contenido. Lo intenté y
   estaba equivocado: el contenido ya arranca donde tiene que arrancar, así que
   sumarle el alto de la cabecera lo bajaba una segunda vez y abría un hueco
   enorme en la portada. Si alguna vez hace falta reservar sitio, que se mida
   antes si de verdad falta: aquí no faltaba.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --trm-header-h: 74px;
}

@media (max-width: 991px) {
  :root {
    --trm-header-h: 62px;
  }
}

/* wpautop deja un <p></p> vacío alrededor de los shortcodes de bloque. No se ve,
   pero arrastra el margen inferior de los párrafos y abre un hueco de la nada
   justo encima de la portada. */
.page-wraper > p:empty,
.page-wrapper > p:empty,
.entry-content > p:empty {
  display: none;
}

/* ── Cabecera ────────────────────────────────────────────────────────────────
   El tema la deja en 90px de alto con los enlaces a 35px de padding vertical y
   14px de horizontal: mucho grosor y poco aire entre unos y otros. Aquí se
   apreta en vertical, se separa en horizontal y se rehacen los desplegables.
   ────────────────────────────────────────────────────────────────────────── */

.wpo-site-header .navigation {
  min-height: 74px;
  border-bottom: 1px solid #f0ede8;
}

/* La sombra al quedarse fija era azul (#086ad84a), de la paleta del tema
   original. Neutra y mucho más floja. */
.sticky-header {
  box-shadow: 0 2px 18px rgba(20, 16, 12, 0.08);
}

@media (min-width: 992px) {
  .wpo-site-header #navbar > ul > li > a {
    padding: 26px 17px;
    font-size: 0.93rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--neutro2);
  }

  .wpo-site-header #navbar > ul > li > a:hover,
  .wpo-site-header #navbar > ul > li.current-menu-item > a,
  .wpo-site-header #navbar > ul > li.current-menu-ancestor > a {
    color: var(--trm-oro-fuerte, #175c60);
  }

  /* La marca del activo era una barra de 4px pegada al techo del header. Pasa a
     un filete fino debajo del texto, que crece desde el centro. */
  .wpo-site-header #navbar > ul > li > a:before {
    left: 17px;
    right: 17px;
    top: auto;
    bottom: 18px;
    width: auto;
    height: 2px;
    background: var(--trm-oro-fuerte, #175c60);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .wpo-site-header #navbar > ul > li > a:hover:before,
  .wpo-site-header #navbar > ul > li > a.active:before,
  .wpo-site-header #navbar > ul > li.current-menu-item > a:before,
  .wpo-site-header #navbar > ul > li.current-menu-ancestor > a:before {
    opacity: 1;
    visibility: visible;
    transform: scaleX(1);
  }

  /* La flecha del desplegable estaba pegada al texto y sin sitio propio. */
  .wpo-site-header #navbar li.menu-item-has-children {
    padding-right: 8px;
  }

  .wpo-site-header #navbar > ul > .menu-item-has-children > a:after {
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    opacity: 0.55;
    transition: opacity 0.2s ease;
  }

  .wpo-site-header #navbar > ul > .menu-item-has-children:hover > a:after {
    opacity: 1;
  }

  /* ── Desplegables ── */

  .wpo-site-header #navbar > ul .sub-menu {
    width: auto;
    min-width: 236px;
    padding: 8px;
    border: 1px solid #f0ede8;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(20, 16, 12, 0.1);
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  .wpo-site-header #navbar > ul > li:hover > .sub-menu,
  .wpo-site-header #navbar .sub-menu > li:hover > .sub-menu {
    transform: none;
  }

  .wpo-site-header #navbar > ul > li .sub-menu a {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--neutro3);
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .wpo-site-header #navbar > ul > li .sub-menu a:hover,
  .wpo-site-header #navbar > ul > li .sub-menu li.current-menu-item > a {
    background: #faf6ee;
    color: var(--trm-oro-fuerte, #175c60);
  }

  /* El subrayado que se deslizaba por debajo del texto sobra: ahora el estado
     lo lleva el propio fondo de la fila, que se lee mejor y no salta. */
  .wpo-site-header #navbar > ul > li .sub-menu a:after {
    content: none;
  }

  /* La flecha del submenú de segundo nivel, alineada con el texto. */
  .wpo-site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a:before {
    right: 12px;
    opacity: 0.5;
  }

  .wpo-site-header #navbar > ul > li > .sub-menu .sub-menu {
    left: 100%;
    margin-left: 6px;
  }
}

/* ── Teléfono y carrito ── */

.wpo-site-header .headerRight {
  display: flex;
  align-items: center;
  gap: 22px;
  justify-content: flex-end;
}

.wpo-site-header .telefonoCabecera {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--neutro2);
  transition: color 0.2s ease;
}

.wpo-site-header .telefonoCabecera:hover {
  color: var(--trm-oro-fuerte, #175c60);
}

.wpo-site-header .telefonoCabecera svg {
  width: 19px;
  height: 19px;
}

.wpo-site-header .phone_head {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: inherit;
}

/* El carrito quedaba más alto que el teléfono. El teléfono es hijo directo de
   .headerRight, o sea un elemento flex, y se centra solo. El carrito no: cuelga
   de un <div class="header-cart">, así que su enlace se coloca por la línea de
   texto y se apoya en la base de esa línea, que cae por debajo del centro. De
   ahí que flotara. Haciendo flex también ese div, el enlace se centra igual que
   el otro. */
.wpo-site-header .header-cart {
  display: flex;
  align-items: center;
}

.wpo-site-header .header-cart .cart-contents {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  color: var(--neutro2);
  transition: color 0.2s ease;
}

.wpo-site-header .header-cart .cart-contents:hover {
  color: var(--trm-oro-fuerte, #175c60);
}

.wpo-site-header .header-cart .cart-count {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--trm-oro-fuerte, #175c60);
}

@media (max-width: 991px) {
  /* 10px arriba y abajo con el botón de 42px dan los 62px justos del
     min-height, que es lo que declara --trm-header-h. Con 12px se pasaba de
     largo y la variable dejaba de cuadrar. */
  .wpo-site-header .navigation {
    padding: 10px 0;
    min-height: 62px;
  }

  /* La retícula de Bootstrap reparte 3 + 6 + 1 + 2 columnas: al bloque de la
     derecha le tocaban dos doceavos, unos 70px, y ahí no caben el teléfono y
     el carrito. Se pasa a flex y se reparte a mano.
     La columna del menú se queda a cero, pero NO se oculta: el panel vive
     dentro y con display:none desaparecería.

     Va por las clases de columna y no por :has(), que es lo que había antes:
     un selector con :has() le gana en especificidad a cualquier ajuste que se
     escriba después, y hay optimizadores de CSS que directamente se lo comen.
     Si esas reglas no llegan a aplicarse, la cabecera vuelve a la retícula de
     Bootstrap y el carrito se sale de sus 65px de columna. */
  .wpo-site-header .navigation .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
  }

  /* El mismo hueco a los dos lados. El tema le quita el padding derecho al
     contenedor de la cabecera (styles.css), así que el carrito quedaba 12px
     más pegado al borde que la hamburguesa. Con el margen negativo de la fila
     y el padding de las columnas a cero, la distancia al borde la pone este
     padding y nada más. */
  .wpo-site-header .navigation .container-fluid {
    padding-left: 14px;
    padding-right: 14px;
  }

  .wpo-site-header .navigation .row > div {
    padding-left: 0;
    padding-right: 0;
  }

  /* Los dos extremos crecen igual, así que el logo queda en el centro de la
     pantalla y no en el centro de lo que sobra entre ellos, que no miden lo
     mismo: 42px la hamburguesa contra unos 80 los dos iconos. */
  .wpo-site-header .navigation .row > .col-3,
  .wpo-site-header .navigation .row > .col-2 {
    flex: 1 1 0;
    width: auto;
    max-width: none;
  }

  .wpo-site-header .navigation .row > .col-6 {
    flex: 0 1 auto;
    width: auto;
    max-width: 46%;
    text-align: center;
  }

  .wpo-site-header .navigation .row > .col-1 {
    flex: 0 0 0;
    width: 0;
    padding: 0;
  }

  /* Por debajo de 450px el tema alinea el logo a la derecha de su columna, y
     ahí es donde se torcía de verdad: acababa pegado a los iconos en vez de en
     el medio. */
  .wpo-site-header .navbar-header {
    text-align: center;
  }

  /* El logo lleva ancho fijo a propósito.

     logo.svg va sin width ni height, solo con viewBox, y la plantilla tampoco
     se los pone: es una imagen sin tamaño propio. Dentro de un contenedor flex
     eso colapsa a cero, y por eso el logo desapareció al dejar su columna sin
     flex-grow. Antes se sostenía de rebote, porque la columna crecía sola.
     En producción no se ve el fallo porque WP Rocket le añade los atributos
     width y height a las imágenes; en desarrollo, sin Rocket, no hay nada.

     Los anchos van a la par con el max-width de elements.css: aquí solo pasan
     a estar definidos.
     Y de paso se anula el margen negativo que esa hoja le mete por debajo de
     575px, que descentra el logo 13px. */
  .wpo-site-header .navbar-header .site-logo .navbar-brand img {
    width: 140px;
    height: auto;
    margin-left: 0;
  }

  .wpo-site-header .headerRight {
    gap: 14px;
  }

  /* En móvil el número entero no cabe sin apretarlo todo: se queda el icono,
     que sigue llamando igual. */
  .wpo-site-header .phone_head {
    display: none;
  }
}

/* El mismo escalón que ya hace elements.css con su max-width, ahora como ancho
   de verdad. */
@media (max-width: 575px) {
  .wpo-site-header .navbar-header .site-logo .navbar-brand img {
    width: 118px;
  }
}

/* ── Menú móvil, rehecho de cero ─────────────────────────────────────────────

   Lo del tema no se podía ajustar a base de retoques, porque se contradice solo:
   pone las flechas de los submenús en position:absolute y a la vez fuerza
   position:static en los <li> que las contienen, así que se anclan a un
   antepasado que no es el suyo; el relleno de los enlaces va con !important; y
   el panel mezcla medidas fijas con porcentajes.

   Aquí se anula todo eso y se monta de nuevo. Lo único que se respeta es el
   comportamiento del JS del tema, que no se toca:

     .slideInn   en .navigation-holder     abre y cierra el panel
     .small-nav  en #navbar > ul           lo pone el JS por debajo de 992px
     .sub-toggle boton inyectado DENTRO del <a> de cada padre
     .rotate     en el enlace y en el botón, con el submenú abierto
     slideToggle escribe display en línea sobre .sub-menu: aquí no se toca
                 la propiedad display de los submenús, o se rompe la animación
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {

  /* ── Botón hamburguesa ── */

  /* Pegado a la izquierda de su columna. El botón es inline-flex, y por debajo
     de 767px el tema le mete text-align:center a .header-style-1, que es la
     clase de esta cabecera: el botón se quedaba centrado en su hueco, con un
     claro raro entre el borde de la pantalla y él. Con el contenedor en flex,
     la alineación deja de depender del text-align que herede. */
  .wpo-site-header .mobail-menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .wpo-site-header .mobail-menu button,
  .wpo-site-header .mobail-menu .open-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #e6e2db;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .wpo-site-header .mobail-menu .open-btn:hover {
    border-color: var(--trm-oro-fuerte, #175c60);
    background: #faf6ee;
  }

  .wpo-site-header .mobail-menu button span,
  .wpo-site-header .navbar-header button span {
    position: static;
    width: 18px;
    height: 2px;
    margin: 0;
    border-radius: 2px;
    background-color: var(--neutro2);
    transform: none;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  /* ── Velo ──
     Cuelga del <nav> y no del <body> a propósito: nav#site-navigation es
     position:fixed con z-index 9999, o sea que abre un contexto de apilamiento.
     El 999999 del panel solo ordena dentro de ese contexto. Un velo colgado del
     <body> vive en el contexto raíz y se pintaba por encima del panel entero. */

  #site-navigation:has(.navigation-holder.slideInn)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999998;
    background: rgba(12, 10, 8, 0.5);
    animation: trm-velo 0.25s ease;
  }

  @keyframes trm-velo {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  body:has(.navigation-holder.slideInn) {
    overflow: hidden;
  }

  /* Con el panel abierto sobra la hamburguesa: el aspa del panel ya cierra. */
  #site-navigation:has(.navigation-holder.slideInn) .mobail-menu .open-btn {
    opacity: 0;
    pointer-events: none;
  }

  /* ── El panel ──
     dvh y no vh: en el móvil vh cuenta con la barra del navegador desplegada y
     el panel se quedaba corto por abajo. */

  .wpo-site-header #navbar {
    position: fixed;
    top: 0;
    left: calc(-1 * min(88vw, 340px) - 24px);
    z-index: 999999;
    display: flex !important;
    flex-direction: column;
    width: min(88vw, 340px);
    height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    box-shadow: 6px 0 34px rgba(20, 16, 12, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: left 0.3s ease, opacity 0.25s ease;
  }

  .wpo-site-header .slideInn {
    left: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* ── Cabecera del panel: solo el aspa ── */

  .wpo-site-header .menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 14px 14px 14px auto;
    padding: 0;
    border: 1px solid #e6e2db;
    border-radius: 10px;
    background: none;
    color: var(--neutro2);
    font-size: 15px;
    line-height: 1;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .wpo-site-header .menu-close:hover {
    border-color: var(--trm-oro-fuerte, #175c60);
    background: #faf6ee;
  }

  .wpo-site-header #navbar .close-navbar {
    display: none;
  }

  /* ── La lista ── */

  .wpo-site-header #navbar .navbar-nav,
  .wpo-site-header #navbar > ul {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 0 40px;
    border-top: 1px solid #f0ece6;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wpo-site-header #navbar li {
    position: relative;
    float: none;
    width: 100%;
  }

  .wpo-site-header #navbar > ul > li + li {
    border-top: 1px solid #f4f1ec;
  }

  /* El enlace es una fila: texto a la izquierda, flecha al final. Así la flecha
     no necesita posicionarse en absoluto y no se puede descolocar. */
  .wpo-site-header #navbar > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px !important;
    font-size: 0.97rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--neutro2);
  }

  .wpo-site-header #navbar ul a:hover,
  .wpo-site-header #navbar ul li.current-menu-item > a,
  .wpo-site-header #navbar ul li.current-menu-ancestor > a,
  .wpo-site-header #navbar > ul .menu-item-has-children > a.rotate {
    color: var(--trm-oro-fuerte, #175c60);
  }

  /* ── Flecha de los submenús ──
     Deja de ser absoluta y pasa a ser un hijo más de la fila. */
  .wpo-site-header #navbar .sub-toggle {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 1px solid #e6e2db;
    border-radius: 8px;
    background: none;
    color: var(--neutro4);
    line-height: 1;
    transform: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  .wpo-site-header #navbar .sub-toggle.rotate {
    border-color: var(--trm-oro-fuerte, #175c60);
    background: #faf6ee;
    color: var(--trm-oro-fuerte, #175c60);
  }

  .wpo-site-header #navbar .sub-toggle i {
    display: block;
    font-size: 10px;
    line-height: 1;
    transition: transform 0.25s ease;
  }

  .wpo-site-header #navbar .sub-toggle.rotate i {
    transform: rotate(180deg);
  }

  /* ── Submenús ──
     Sin tocar display: lo escribe jQuery en línea con slideToggle(). */
  .wpo-site-header #navbar .sub-menu {
    position: static;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #faf9f7;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .wpo-site-header #navbar .sub-menu li + li {
    border-top: 1px solid #f0ece6;
  }

  .wpo-site-header #navbar .sub-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px 12px 28px !important;
    font-size: 0.91rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--neutro4);
  }

  /* Tercer nivel: un escalón más de sangría y fondo algo más marcado. */
  .wpo-site-header #navbar .sub-menu .sub-menu {
    background: #f4f2ee;
  }

  .wpo-site-header #navbar .sub-menu .sub-menu a {
    padding-left: 40px !important;
    font-size: 0.88rem;
  }

  /* El subrayado que se desliza es cosa del escritorio. */
  .wpo-site-header #navbar .sub-menu a:after,
  .wpo-site-header #navbar > ul > li > a:before,
  .wpo-site-header #navbar > ul > .menu-item-has-children > a:after {
    content: none;
  }
}

/* ── Barra de título ─────────────────────────────────────────────────────── */

/* La foto ya no es background-image: es un <img> de verdad (title-bar.php), que
   el navegador encuentra en el HTML y sirve con srcset. Va detrás del velo, que
   está en z-index -1. */
   .wpo-page-title-section {
    margin-top: 60px !important;
   }
   @media (max-width: 991px) {
    .wpo-page-title-section {
      margin-top: 0px !important; 
    }
   }
.wpo-page-title-section .wpo-page-title-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* El velo era un negro plano al 60%. Con un poco de dorado en diagonal entona
   con las demás bandas del sitio sin dejar de hacer legible el texto. */
.wpo-page-title-section:before {
  background:
    linear-gradient(122deg, rgba(120, 86, 30, 0.4) 0%, transparent 48%, rgba(240, 128, 120, 0.22) 100%),
    linear-gradient(180deg, rgba(10, 8, 6, 0.62) 0%, rgba(10, 8, 6, 0.5) 50%, rgba(10, 8, 6, 0.72) 100%);
}

/* En el móvil el checkout va sin la foto: entre ella y sus 50 px de margen
   empujaban el formulario a media pantalla, y el pago rápido no se veía sin
   bajar. La foto arrancaba por debajo de la cabecera fija, que le tapaba la
   parte de arriba; sin ella, es el contenido el que tiene que apartarse.
   La página de gracias se queda como estaba. */
@media (max-width: 768px) {
  body.woocommerce-checkout:not(.woocommerce-order-received) .wpo-page-title-section {
    display: none;
  }

  body.woocommerce-checkout:not(.woocommerce-order-received) .page-wrap {
    margin-top: calc(var(--trm-header-h) + 12px);
  }
}

/* ── Tablas del contenido ────────────────────────────────────────────────── */

/*
 * La cabecera iba con --canun-brand y texto blanco (elements.css:99). Ese es el
 * dorado claro, el de los acentos sobre fondo oscuro: con blanco encima da 1,9:1
 * y no se lee. El de relleno es --trm-oro-fuerte, que es justo para lo que está.
 *
 * El relleno era 10px parejo para td y th; la cabecera pedía más aire arriba y
 * abajo, y las celdas también respiran mejor con algo más de alto que de ancho.
 *
 * El :not([class*="wc-block"]) deja fuera las tablas de WooCommerce por bloques.
 * Esto se escribió para las tablas de contenido —la de tallas, [TableProduct]—,
 * pero pillaba también la del carrito: allí el fondo dorado no llegaba a entrar
 * y el color: #fff sí, así que PRODUCTO y TOTAL se quedaban en blanco sobre
 * blanco. Estaban ahí, invisibles.
 */
.page-wraper table:not([class*="wc-block"]) tbody tr th,
.page-wraper table:not([class*="wc-block"]) thead tr th {
  padding: 15px 16px;
  background: var(--trm-oro-fuerte, #175c60);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: #fff;
  text-align: left;
  text-transform: uppercase;
  vertical-align: middle;
}

/* El tema le ponía un :hover que la volvía gris oscuro. Una cabecera de tabla
   no es pulsable: el cambio de color solo despistaba. */
.page-wraper table:not([class*="wc-block"]) tbody tr th:hover,
.page-wraper table:not([class*="wc-block"]) thead tr th:hover {
  background: var(--trm-oro-fuerte, #175c60);
}

.page-wraper table:not([class*="wc-block"]) tbody tr td {
  padding: 13px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--neutro3);
  vertical-align: middle;
}

/* Filas alternas: en tablas largas es lo que evita saltarse una línea. */
.page-wraper table:not([class*="wc-block"]) tbody tr:nth-child(even) td {
  background: #fbfaf8;
}

/* Una tabla ancha se desplaza dentro de su caja, no empuja la página entera. */
.page-wraper .wp-block-table,
.page-wraper figure.wp-block-table {
  overflow-x: auto;
}

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.wpo-site-footer {
  background: #0f4246;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.62);
}

.wpo-site-footer .wpo-upper-footer {
  padding: 64px 0 44px;
}

/* Las cabeceras: el sitio donde el dorado se ve de verdad. */
.wpo-site-footer .widget-title {
  margin-bottom: 18px;
}

.wpo-site-footer .widget-title h3,
.wpo-site-footer .contact-widget-inner h3 {
  margin: 0;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.4;
  color: var(--canun-brand);
  text-transform: uppercase;
}

.wpo-site-footer li,
.wpo-site-footer p,
.wpo-site-footer .about-widget p,
.wpo-site-footer .wpo-lower-footer p,
.wpo-site-footer .contact-ft ul li {
  color: rgba(255, 255, 255, 0.62);
}

.wpo-site-footer .about-widget p {
  max-width: 38ch;
  font-size: 0.9rem;
  line-height: 1.8;
}

.wpo-site-footer .link-widget ul li {
  padding-bottom: 9px;
  font-size: 0.9rem;
}

.wpo-site-footer .link-widget ul li + li,
.wpo-site-footer .contact-ft ul li + li {
  margin-left: 0;
}

/* El tamaño hay que ponerlo en el <a>, no en el <li>: styles.css:3452 se lo
   fija a 17px al enlace y el li no le llega. */
.wpo-site-footer a,
.wpo-site-footer .link-widget ul li a,
.wpo-site-footer .widget_nav_menu ul li a,
.wpo-site-footer .widget ul li a,
.wpo-site-footer .social-widget ul li a,
.wpo-site-footer .wpo-lower-footer p a,
.wpo-site-footer .wpo-lower-footer .copyright a {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.2s ease;
}

.wpo-site-footer a:hover,
.wpo-site-footer .link-widget ul li a:hover,
.wpo-site-footer .widget_nav_menu ul li a:hover,
.wpo-site-footer .widget ul li a:hover,
.wpo-site-footer .social-widget ul li a:hover,
.wpo-site-footer .wpo-lower-footer p a:hover,
.wpo-site-footer .wpo-lower-footer .copyright a:hover {
  color: #fff;
}

.wpo-site-footer .contact-ft ul li i,
.wpo-site-footer .contact-ft ul li .fi:before {
  color: var(--canun-brand);
}

/* Contacto: el icono deja de ir en absoluto.
   El tema lo colocaba con position:absolute y top:6px, una medida calculada
   para el texto de 17px que tenía antes. Al bajarlo a 0.9rem el icono se quedó
   descolgado de su línea, y el padding-left de 30px sobraba. Ahora la fila es
   flex y el icono es un hijo más: se alinea solo, mida lo que mida el texto. */
.wpo-site-footer .contact-ft ul li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 0 0 11px 0;
  font-size: 0.9rem;
}

.wpo-site-footer .contact-ft ul li i {
  position: static;
  flex: 0 0 auto;
  top: auto;
  left: auto;
  line-height: 1.5;
}

.wpo-site-footer .contact-ft ul li .fi:before {
  margin-right: 0;
  font-size: 15px;
}
/* Los redondeles de las redes: apagados en reposo, dorados al pasar. */
.footer-social-link,
.wpo-site-footer .about-widget ul li a {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
}

.footer-social-link:hover,
.wpo-site-footer .about-widget ul li a:hover {
  border-color: var(--canun-brand);
  background: var(--canun-brand);
  color: #0f4246;
}

.wpo-site-footer .newsletter-widget input {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.wpo-site-footer .newsletter-widget input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.wpo-site-footer .wpo-lower-footer {
  background: transparent;
}

.wpo-site-footer .wpo-lower-footer .row {
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.wpo-site-footer .wpo-lower-footer .copyright,
.wpo-site-footer .wpo-lower-footer .copyright a,
.wpo-site-footer .wpo-lower-footer p,
.wpo-site-footer .wpo-lower-footer p a {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 991px) {
  .wpo-site-footer .wpo-service-link-widget {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .wpo-site-footer .wpo-upper-footer {
    padding: 48px 0 32px;
  }
}

/* Guía de marca: precios en la fuente de titulares. */
.price,
.woocommerce-Price-amount {
  font-family: var(--tipo-titulares);
}