/* Base del tema: solo lo que WordPress no aporta y el diseño aprobado necesita.
   El resto del diseño está en tokens.css, b3.css y b3-home.css, copiados del prototipo. */

/* Reset del prototipo B3 (src/styles/base.css). Sin border-box, .b3-container
   suma su padding al 100 % de ancho y desborda. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* El resto del reset se limita a las piezas del diseño B3 (cabecera, menú, pie, barra y
   secciones del Home) para no alterar los márgenes que WordPress da a los bloques. */
:where(.b3-header, .b3-mobile-menu, .b3-footer, .b3-actionbar, .b3-hero, .b3-trust, .b3-section, .b3-expertise)
  :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) {
  margin: 0;
}

/* Igual que en el prototipo: una lista marcada como `role="list"` es una lista de diseño,
   sin viñetas. `:where()` deja la especificidad a cero, así que no pisa a los bloques. */
:where(ul[role='list'], ol[role='list']) {
  list-style: none;
  padding: 0;
  margin: 0;
}

:where(.b3-header, .b3-mobile-menu, .b3-footer, .b3-actionbar, .b3-hero, .b3-trust, .b3-section, .b3-expertise) a {
  color: inherit;
}

:where(.b3-header, .b3-mobile-menu, .b3-footer, .b3-actionbar, .b3-hero, .b3-trust, .b3-section, .b3-expertise) button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--b3-ink, #1d1914);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline: 3px solid var(--b3-focus-dark, #f2c94c);
  outline-offset: 2px;
}

/* El contenedor de bloques usa el mismo ancho y márgenes que el prototipo */
.wp-site-blocks > * {
  margin-block: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Añadidos del tema que no existen en el prototipo aprobado.
   Usan sus mismos tokens para no introducir valores nuevos.
   ============================================================ */

/* Panel de búsqueda: el prototipo solo mostraba un aviso, aquí hay buscador real */
.b3-search {
  border-top: 1px solid var(--b3-line);
  background: var(--b3-white);
}

.b3-search .b3-container {
  padding-block: 1rem;
}

.b3-search form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.b3-search label {
  font-size: var(--b3-fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b3-ink-muted);
}

.b3-search input[type='search'] {
  flex: 1 1 16rem;
  min-height: 3rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--b3-line);
  border-radius: 0;
  background: var(--b3-warm-white);
  font: inherit;
  color: var(--b3-ink);
}

.b3-search button {
  min-height: 3rem;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--b3-ink);
  background: var(--b3-ink);
  color: var(--b3-white);
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Enlace todavía no disponible: se ve, pero no navega ni finge ser un enlace */
.b3-pendiente {
  color: var(--b3-ink-muted);
  cursor: default;
}

.b3-footer .b3-pendiente {
  color: var(--b3-on-night-muted);
}

.b3-footer__hours {
  color: var(--b3-on-night-muted);
  font-size: var(--b3-fs-small);
  line-height: 1.6;
}

/* El idioma español aún no existe: el botón se ve, pero no promete nada */
.b3-lang__btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* En el menú móvil y el pie, el selector se usa con el dedo: 44 × 44 px (B3 lo tenía a 40 de ancho). */
.b3-lang--menu .b3-lang__btn,
.b3-lang--footer .b3-lang__btn {
  min-width: 44px;
}

/* WordPress envuelve cada parte de plantilla en un <div>. La cabecera y la barra de acciones
   de B3 son position: sticky y necesitan que su contenedor sea toda la página, no ese <div>. */
.wp-block-template-part:has(> .b3-header),
.wp-block-template-part:has(> .b3-actionbar) {
  display: contents;
}

/* Mientras la página de presupuesto no exista, el botón es un <span>: mismo aspecto que el enlace. */
@media (max-width: 767px) {
  .b3-actionbar .b3-pendiente {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: default;
  }
}

/* Con sesión iniciada, la barra de administración es fija a partir de 601 px: la cabecera se queda debajo. */
@media (min-width: 601px) {
  .admin-bar .b3-header {
    top: var(--wp-admin--admin-bar--height, 32px);
  }
}

/* Botón o pieza cuyo destino aún no existe: conserva el diseño aprobado (bajar la opacidad
   rompía el contraste AA), pero no es pulsable. */
.b3-btn.b3-pendiente,
.b3-tile__link.b3-pendiente {
  cursor: default;
}


/* ============================================================
   Bloque 3B: piezas que el prototipo no tenía porque no había
   catálogo real. Mismos tokens de B3, sin valores nuevos.
   ============================================================ */

/*
 * Foto del producto dentro del marco de la tarjeta.
 *
 * «contain» y no «cover»: las fotografías del catálogo de Citizen son verticales, y recortarlas
 * al marco cortaba la correa. Con «contain» se ve el reloj completo, y el hueco que queda a los
 * lados lo llena el degradado del marco, que es parte del diseño aprobado.
 *
 * El tamaño de la foto se gradúa por contexto con --b3-foto-aire: el catálogo, los relacionados
 * y el Home no necesitan el mismo peso visual.
 */
.b3 .b3-product__image img {
  /*
   * Se posiciona, no se estira.
   *
   * El contenedor centra sus hijos con "place-items: center", y eso hace que el elemento deje
   * de estirarse: entonces "height: 100%" no tiene contra qué resolver y la imagen tomaba su
   * alto natural. Una foto vertical acababa midiendo 614 px dentro de un marco de 310, y el
   * marco la recortaba por arriba y por abajo: justo lo que "object-fit: contain" debía evitar.
   *
   * Anclada a los cuatro lados, la caja es exactamente la del marco y "contain" ya puede hacer
   * su trabajo: el reloj entero, centrado, con el aire que pida cada contexto.
   */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: var(--b3-foto-aire, 6%);
  box-sizing: border-box;
}

/* Sin existencias: el punto se rellena, para que no dependa solo del texto */
.b3 .b3-product__stock--out-of-stock .b3-product__dot {
  background: var(--b3-ink-muted);
}

/* El precio de oferta que imprime WooCommerce: precio anterior tachado y precio actual */
.b3 .b3-product__price del {
  margin-right: 0.5rem;
  color: var(--b3-ink-muted);
  text-decoration: line-through;
}

.b3 .b3-product__price ins {
  color: var(--b3-ink);
  font-weight: 650;
  text-decoration: none;
}

/* Catálogo vacío: mensaje digno, sin romper la sección */
.b3-citizen__vacio {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  max-width: 44rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--b3-warm-white);
  border: 1px solid var(--b3-line);
}

.b3-citizen__vacio-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.b3-citizen__aviso {
  font-size: var(--b3-fs-small);
  color: var(--b3-ink-muted);
}

/* Servicios confirmados que el diseño no destaca */
.b3-svc__extra {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.b3-svc__extra-label {
  margin-bottom: 0.75rem;
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--b3-champagne-deep);
}

.b3-svc__extra-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  color: var(--b3-ink-muted);
}

.b3-svc__extra-list li {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.b3-svc__extra-link {
  color: var(--b3-ink);
  text-decoration: none;
}

.b3-svc__extra-link:hover {
  color: var(--b3-champagne-deep);
}

/* Los anclajes del hero no deben quedar bajo la cabecera fija. La altura real la mide
   header.js en --pkb3-cabecera; el valor de reserva vale si el script no llega a ejecutarse. */
.b3 :is(.b3-section, .b3-hero, [id]) {
  scroll-margin-top: calc(var(--pkb3-cabecera, 5.5rem) + 1rem);
}

/* ---------- Formulario demostrativo del cierre (bloque 3C) ---------- */
/* El prototipo no tenía mensajes propios: usaba los del navegador. */
.b3-form__aviso,
.b3-form__resumen {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  font-size: var(--b3-fs-small);
  line-height: 1.5;
}

.b3-form__aviso {
  background: rgb(205 178 134 / 0.16);
  border-left: 3px solid var(--b3-champagne);
  color: var(--b3-on-night);
}

.b3-form__aviso--noscript {
  margin-top: 1rem;
}

.b3-form__aviso a {
  color: var(--b3-champagne);
}

.b3-form__resumen {
  background: rgb(255 255 255 / 0.08);
  border-left: 3px solid #ff9f8f;
  color: var(--b3-on-night);
}

.b3-field__error {
  margin-top: 0.35rem;
  font-size: var(--b3-fs-small);
  color: #ffb4a6;
}

.b3-field :is(input, select)[aria-invalid='true'] {
  border-color: #ffb4a6;
}