/* Akento · componentes.
   Botones, cejas, migas, acordeones, precios y contenido editorial.
   Fuente: akento-v2/estilos.css + inventario de §4.7. Aquí van solo los
   componentes que ya usa la base; los propios de ficha, tienda, home y
   carrito se añaden en sus tarjetas reutilizando estos tokens. */

/* Botón primario */

.boton-primario {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--rojo);
  color: var(--marfil);
  min-height: 56px;
  padding: 16px 23px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  border-radius: var(--radio);
  transition: background var(--transicion), box-shadow var(--transicion);
}

/* Dentro del contenido el padre subraya todos los enlaces y les cambia la
   tipografía; el botón es un enlace, así que se excluye con más especificidad. */

.entrada-contenido .boton-primario {
  font-family: var(--sans);
  text-decoration: none;
}

.boton-primario:hover {
  background: var(--negro);
  text-decoration: none;
}

.boton-primario:focus-visible {
  outline: 2px solid var(--negro);
  outline-offset: 4px;
}

.boton-primario svg {
  width: 21px;
  height: 21px;
  transition: transform .25s;
}

.boton-primario:hover svg {
  transform: translateX(3px);
}

.boton-primario[aria-disabled="true"],
.boton-primario:disabled {
  cursor: not-allowed;
  opacity: .6;
}

/* Enlace de acción con flecha (Descubre y Contacto).
   Une dos bloques con una línea fina; no es un botón y no compite con él. */

.enlace {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 44px;
  padding: 6px 0;
  border-bottom: var(--borde);
  font-size: 13px;
  font-weight: 500;
  color: var(--rojo);
  text-decoration: none;
}

.enlace svg {
  width: 19px;
  height: 19px;
  transition: transform var(--transicion);
}

.enlace:hover {
  text-decoration: none;
}

.enlace:hover svg {
  transform: translateX(4px);
}

/* Botón icono */

.boton-icono {
  width: 44px;
  height: 44px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-circulo);
  flex-shrink: 0;
}

.boton-icono:hover {
  background: var(--rosa);
}

/* Contador de bolsa */

.bolsa {
  position: relative;
  margin-right: 8px;
}

.contador-bolsa {
  background: var(--rojo);
  color: var(--marfil);
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radio-circulo);
  position: absolute;
  right: 0;
  top: 0;
}

/* Panel de la bolsa (cabecera).
   Hoja lateral con el carrito real de WooCommerce: se pinta en cada carga de
   página desde la sesión, así que no necesita copia local ni refresco por JS.
   En móvil ocupa el ancho completo. */

.dialogo.panel-bolsa {
  position: fixed;
  inset: 0 0 0 auto;
  width: 430px;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 26px 26px 30px;
  border: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.cerrar-bolsa {
  margin-left: auto;
}

.mini-cuenta {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gris);
}

.mini-lineas {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.mini-linea {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: var(--borde);
}

.mini-foto {
  display: block;
  background: var(--rosa);
}

.mini-foto img {
  width: 56px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

/* El resumen ya dice el IVA del total y el prototipo enseña importes limpios. */
.mini-linea .tax_label {
  display: none;
}

.mini-nombre {
  font: 400 15px/1.25 var(--serif);
}

.mini-nombre a:hover {
  color: var(--rojo);
  text-decoration: none;
}

.mini-detalle {
  margin-top: 3px;
  font-size: 10px;
  color: var(--gris);
}

.mini-subtotal {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
}

.mini-quitar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  color: var(--rojo);
}

.mini-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: var(--borde);
  font-size: 12px;
}

.mini-total strong {
  font-size: 22px;
  font-weight: 500;
}

.panel-bolsa .boton-primario {
  width: 100%;
  margin-top: 18px;
}

.mini-checkout {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  text-align: center;
  color: var(--rojo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mini-vacio {
  margin-block: 30px 0;
  font-size: 13px;
  color: var(--gris);
}

/* Etiquetas */

.ceja {
  font-size: var(--ceja);
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 1.7px;
}

/* Migas */

.migas {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 22px;
  font-size: 11px;
  color: var(--gris);
}

.migas [aria-current="page"] {
  color: var(--rojo);
}

/* Precio */

.precio-principal {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.precio {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
}

.precio-nota,
.precio-unidad {
  font-size: 11px;
  color: var(--gris);
}

.ahorro {
  font-size: 11px;
  color: var(--rojo);
}

/* Microcopy */

.microcopy {
  font-size: 10px;
  color: var(--gris);
  border-top: var(--borde);
  padding-top: 16px;
  margin-top: 19px;
}

/* Acordeones */

.acordeones {
  border-top: var(--borde);
}

.acordeones details {
  border-bottom: var(--borde);
}

.acordeones summary {
  font-size: 13px;
  padding: 20px 0;
}

.acordeones summary svg {
  color: var(--rojo);
}

.acordeones details>p,
.acordeones details>div {
  font-size: 13px;
  color: var(--gris);
  line-height: 1.8;
  margin-bottom: 23px;
  padding-right: 28px;
}

details summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 15px;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transicion);
}

details[open] summary svg {
  transform: rotate(45deg);
}

/* Formularios */

.campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}

.campo label {
  font-size: 12px;
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: var(--borde);
  border-radius: var(--radio);
  background: var(--marfil);
  color: var(--negro);
}

.campo textarea {
  min-height: 140px;
  resize: vertical;
}

/* Contenido editorial (páginas de WordPress) */

.entrada {
  max-width: 760px;
}

.entrada-cabecera {
  margin-bottom: 32px;
}

.entrada-contenido>*+* {
  margin-top: 1.1em;
}

.entrada-contenido a:not(.boton-primario) {
  color: var(--rojo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entrada-contenido h2 {
  font-size: 36px;
  margin-top: 1.4em;
}

.entrada-contenido h3 {
  margin-top: 1.2em;
}

.entrada-contenido .boton-primario {
  margin-top: 1.6em;
}

.entrada-contenido img {
  margin-block: 1.4em;
}

.alignleft {
  float: left;
  margin: 0 1.4em 1em 0;
}

.alignright {
  float: right;
  margin: 0 0 1em 1.4em;
}

.aligncenter {
  display: block;
  margin-inline: auto;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size: 11px;
  color: var(--gris);
  padding-top: 6px;
}

.sticky,
.bypostauthor {
  position: static;
}