/*
 * Lo que se agregó el 20-09-2026: la barra con las categorías a los lados, el
 * pie en filas, «recién agregado» y la portada que cambia de lámina.
 *
 * Va aparte de style.css para poder volver atrás borrando una línea, y se
 * carga después, así que gana cuando la especificidad empata.
 */

/* ------------------------------------------------------------- la barra
 *
 * En pantalla ancha: categorías a la izquierda, logotipo al centro, Giraffe y
 * el carrito a la derecha. En el teléfono vuelve la hamburguesa, que ahí sí
 * es la forma correcta: seis enlaces en una barra de 375px no caben.
 */

.gc-barra-in { gap: 14px; }

/* Un <p> acá dentro solo puede venir de `wpautop`, y nunca hay que mostrarlo:
 * en la grilla contaba como una columna más. */
.gc-barra-in > p { display: none; }

.gc-nav { display: none; align-items: center; gap: 22px; }

.gc-barra .gc-nav a,
.gc-barra .gc-desplegable-btn {
  color: #fff;
  font-family: var(--gc-display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}

.gc-barra .gc-desplegable-btn span { font-size: 10px; margin-left: 4px; }
.gc-barra .gc-nav a:hover,
.gc-barra .gc-desplegable-btn:hover { color: var(--gc-menta); text-decoration: none; }

.gc-barra-logo { display: flex; align-items: center; }
.gc-barra-logo a { display: block; }

@media (min-width: 1000px) {
  .gc-barra-in {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 26px;
  }
  /* Se esconde el envoltorio, no solo el botón: si el div queda, la grilla
   * sigue contando cuatro hijos y el menú de la derecha se va a otra fila. */
  .gc-barra-ham { display: none; }
  .gc-nav { display: flex; }
  .gc-nav-der { justify-content: flex-end; }
  .gc-barra .gc-nav .gc-carro { margin-left: 8px; }
}

/* En el teléfono vuelve la barra de siempre: hamburguesa, logotipo y carrito.
 * El carrito vive dentro del menú de la derecha, así que ese menú se muestra
 * pero se le esconden los otros dos enlaces — sin esto, en el teléfono
 * desaparecía el carrito, que es justo lo que no puede faltar. */
@media (max-width: 999px) {
  .gc-barra-in { display: flex; align-items: center; }
  .gc-barra-logo { flex: 1; }
  .gc-nav-der { display: flex; }
  .gc-nav-der a:not(.gc-carro) { display: none; }
}

/* ------------------------------------------------------- desplegables */

.gc-desplegable { position: relative; }

/* Lo mismo que arriba: `wpautop` deja un <p> vacío entre el botón y la caja. */
.gc-desplegable > p { display: none; }

.gc-desplegable-caja {
  position: absolute;
  /* El aire entre el botón y la caja va como borde transparente: si fuera
   * un hueco de verdad, el puntero al bajar salía del menú y lo cerraba. */
  top: 100%;
  border-top: 10px solid transparent !important;
  background-clip: padding-box;
  left: 0;
  z-index: 9000;
  background: #fff;
  color: var(--gc-tinto);
  border: 1px solid var(--gc-linea);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .13);
  padding: 18px 22px;
  min-width: 230px;
  display: grid;
  gap: 9px 26px;
  border-radius: 2px;
}

.gc-desplegable-caja[hidden] { display: none; }

.gc-barra .gc-desplegable-caja a {
  color: var(--gc-tinto);
  font-family: var(--gc-texto);
  font-size: 14px;
  letter-spacing: .01em;
  text-transform: none;
}
.gc-barra .gc-desplegable-caja a:hover { color: var(--gc-ocre-hondo); }

/* Cuarenta marcas en una columna serían una cortina. En tres se leen. */
.gc-caja-marcas {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  max-height: 60vh;
  overflow-y: auto;
}
.gc-caja-marcas a { font-size: 13px; line-height: 1.35; }

/* El desplegable de la derecha se abre hacia adentro para no salirse. */
.gc-nav-der .gc-desplegable-caja { left: auto; right: 0; }

/* ---------------------------------------------------------- la portada */

.gc-portada-laminas { position: relative; }

.gc-lamina { display: none; }
.gc-lamina.gc-lamina-activa { display: block; animation: gc-aparecer .6s ease; }

@keyframes gc-aparecer { from { opacity: 0 } to { opacity: 1 } }

.gc-lamina-imagen img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.gc-puntos {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  display: flex;
  justify-content: center;
  gap: 9px;
}

.gc-punto {
  width: 9px; height: 9px;
  padding: 0;
  border: 1px solid var(--gc-tinto);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: .55;
}
.gc-punto-activo { background: var(--gc-tinto); opacity: 1; }

/* ------------------------------------------------------ recién agregado */

.gc-recien-tope {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 22px;
}

.gc-recien .gc-titulo-seccion { margin: 0; }

.gc-recien-todo {
  font-family: var(--gc-display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gc-ocre-hondo);
  text-decoration: none;
  white-space: nowrap;
}
.gc-recien-todo:hover { text-decoration: underline; text-underline-offset: 5px; }

.gc-recien-grilla { margin: 0; padding: 0; }

/* ------------------------------------------- pedido finalizado
 *
 * El bloque con los datos para transferir se salía de la página por la
 * derecha: WooCommerce le da `box-sizing: content-box`, así que sus 26px de
 * relleno a cada lado se suman al ancho completo de la columna. El texto
 * quedaba pegado al borde y la caja gris se cortaba.
 */

[class*="wc-block-order-confirmation"] {
  box-sizing: border-box;
  max-width: 100%;
}

/* Las líneas de la tabla del pedido, con el mismo aire arriba y abajo y sin
 * que el precio quede pegado al borde. */
.wc-block-order-confirmation-totals table th,
.wc-block-order-confirmation-totals table td {
  padding: 12px 0;
  vertical-align: top;
}
.wc-block-order-confirmation-totals table td:last-child,
.wc-block-order-confirmation-totals table th:last-child { text-align: right; }

/* -------------------------------------------------------------- el pie */

.gc-pie-in {
  display: block;
  max-width: 1400px;
  margin: 0 auto;
}

.gc-pie-logo { margin: 0 0 26px; }
.gc-pie-logo img { height: 26px; width: auto; margin: 0; }

.gc-pie-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 36px;
  padding: 0 0 26px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.gc-pie-titulo {
  font-family: var(--gc-display);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62) !important;
  margin: 0 0 12px !important;
}

.gc-pie-cols p { margin: 0 0 8px; }
.gc-pie a { text-decoration: none; }
.gc-pie a:hover { text-decoration: underline; text-underline-offset: 4px; }

.gc-pie-distinto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 36px;
  padding: 24px 0 0;
}
.gc-pie-distinto p { margin: 0; font-size: 13px; line-height: 1.6; }
.gc-pie-distinto strong { color: #fff; }

.gc-pie-envios {
  margin: 22px 0 0 !important;
  font-size: 13px;
  color: rgba(255, 255, 255, .62) !important;
}

@media (max-width: 860px) {
  .gc-pie-cols,
  .gc-pie-distinto { grid-template-columns: 1fr; }
  .gc-pie-distinto { gap: 12px; }
}

/* ======================================================= la portada nueva
 *
 * Rehecha el 21-09-2026 calcando el diseño de Elisa. Las medidas salen del
 * propio diseño (946px de ancho) pasadas a porcentaje del ancho de la
 * pantalla, así que en cualquier monitor queda con las mismas proporciones.
 */

.gc-inicio {
  --gc-serif: "Times New Roman", Times, serif;
  --gc-burdeo: #7A1C2F;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #fff;
  overflow-x: hidden;
}
.gc-inicio > p, .gc-inicio section > p { display: none; }
.gc-inicio img { display: block; max-width: none; }

/* 1 · las dos fotos */
.gc-inicio-hero {
  display: grid;
  grid-template-columns: 68.8fr 31.2fr;
  height: 46vw;
  margin: 0;
}
.gc-hero-izq, .gc-hero-der { position: relative; overflow: hidden; height: 46vw; }
.gc-hero-foto { width: 100%; height: 100%; object-fit: cover; }
.gc-hero-izq .gc-hero-foto { object-position: center 40%; transform: scale(1.04); transform-origin: 62% 0; }
.gc-hero-der .gc-hero-foto { object-position: center top; }

.gc-hero-marca {
  position: absolute;
  top: 1.6vw;
  left: 1.5vw;
  width: 40vw;
  z-index: 2;
}
.gc-hero-h1 { margin: 0 !important; padding: 0; line-height: 0; font-size: 0; }
.gc-hero-logo { width: 100%; height: auto; }
.gc-inicio a.gc-hero-ver {
  position: absolute;
  top: 17.5vw;
  left: 13.6vw;
  white-space: nowrap;
  font-family: var(--gc-serif);
  font-size: clamp(10px, 1.15vw, 18px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gc-burdeo);
  text-decoration: none;
  border-bottom: 1px solid var(--gc-burdeo);
  line-height: 1.25;
  padding-bottom: 1px;
}
.gc-inicio a.gc-hero-ver:hover { opacity: .75; }

/* 2 · últimos agregados */
.gc-inicio-ua { padding: 2.6vw 0 3.2vw; background: #fff; }
.gc-inicio-titulo {
  margin: 0 0 2.4vw 4% !important;
  font-family: var(--gc-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(15px, 1.65vw, 26px) !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #1c1c1c !important;
  line-height: 1.2;
}
.gc-ua-marco { position: relative; padding: 0 4%; }
.gc-ua-fila {
  display: flex;
  gap: 1.2vw;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gc-ua-fila::-webkit-scrollbar { display: none; }
.gc-ua-tarjeta {
  box-sizing: border-box;
  flex: 0 0 calc((100% - 3 * 1.2vw) / 4);
  scroll-snap-align: start;
  border: 1px solid #efecea;
  background: #fff;
  text-align: center;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
.gc-ua-img { position: relative; display: block; aspect-ratio: 1 / 1; background: #f3f2f0; overflow: hidden; }
.gc-ua-img img, .gc-ua-foto { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; }
.gc-ua-oferta {
  position: absolute; top: .4vw; right: .4vw; z-index: 1;
  background: #fff; color: var(--gc-burdeo);
  font-family: var(--gc-display); font-size: 8px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px;
}
.gc-ua-datos { padding: 1vw .6vw 1.2vw; display: flex; flex-direction: column; align-items: center; flex: 1; }
.gc-inicio a.gc-ua-marca {
  font-family: var(--gc-display);
  font-weight: 600;
  font-size: clamp(11px, 1.05vw, 16px);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #1c1c1c;
  text-decoration: none;
  line-height: 1.3;
}
.gc-inicio .gc-ua-bajada {
  display: block !important;
  margin: .2vw 0 0 !important;
  font-family: var(--gc-display);
  font-size: clamp(10px, .82vw, 13px);
  color: #555;
  line-height: 1.35;
}
.gc-inicio .gc-ua-precio {
  display: block !important;
  margin: .45vw 0 0 !important;
  font-family: var(--gc-display);
  font-weight: 600;
  font-size: clamp(11px, .95vw, 15px);
  color: var(--gc-burdeo);
}
.gc-ua-precio del { color: var(--gc-burdeo); opacity: 1; font-weight: 600; }
.gc-ua-precio ins { text-decoration: none; margin-left: 4px; }
.gc-inicio a.gc-ua-carro {
  margin-top: auto;
  padding-top: 1.2vw;
  font-family: var(--gc-serif);
  font-size: clamp(12px, 1.1vw, 17px);
  color: #6b2a2a;
  background: none !important;
  border: 0 !important;
  text-decoration: none;
  line-height: 1.2;
}
.gc-inicio a.gc-ua-carro:hover { text-decoration: underline; }
.gc-inicio a.gc-ua-carro.added::after { content: " ✓"; }
.gc-inicio .added_to_cart { display: none !important; }
.gc-ua-flecha {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 6px;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1;
  color: #b9b4b0;
  cursor: pointer;
  font-family: var(--gc-texto);
}
.gc-ua-flecha:hover { color: var(--gc-burdeo); }
.gc-ua-ant { left: .8%; }
.gc-ua-sig { right: .8%; }

/* 3 · las jirafas */
.gc-inicio-cats { background: #fff; padding: 2vw 4% 3.6vw; }
.gc-inicio-cats .gc-categorias { max-width: 76vw; margin: 0 auto; }

/* 4 · las tres fotos de marca */
.gc-inicio-paneles {
  display: grid;
  grid-template-columns: 31.6fr 36.6fr 31.8fr;
  height: 41vw;
}
.gc-inicio-panel { position: relative; display: block; overflow: hidden; height: 41vw; text-decoration: none; }
.gc-inicio-panel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gc-inicio-panel:hover img { transform: scale(1.03); }
.gc-panel-zadig img { object-position: center top; }
/* La zapatilla ocupa la foto de lado a lado; en el diseño respira. */
.gc-panel-golden { background: #e7e0d6; }
.gc-panel-golden img {
  object-fit: contain; transform: scale(.86); transform-origin: center 62%;
  /* Los bordes de la foto se funden con el fondo para que no se note el recuadro. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
.gc-panel-golden:hover img { transform: scale(.89); }
.gc-panel-rotulo {
  position: absolute;
  top: 1vw;
  right: 1.1vw;
  font-family: var(--gc-serif);
  font-size: clamp(11px, 1.15vw, 18px);
  color: #1c1c1c;
  border-bottom: 1px solid #1c1c1c;
  line-height: 1.3;
}

/* 5 · ¿cómo vender? */
.gc-inicio-vender {
  display: grid;
  grid-template-columns: 26fr 47.5fr 26.5fr;
  min-height: 32vw;
  background: #fff;
  align-items: stretch;
}
.gc-iv-jirafa { position: relative; display: flex; overflow: hidden; }
.gc-iv-izq { align-items: flex-end; justify-content: flex-start; }
.gc-iv-der { align-items: center; justify-content: flex-end; }
.gc-iv-jirafa img { width: 100%; height: auto; }
.gc-iv-texto { padding: 6.4vw 2vw 3vw 4vw; color: var(--gc-burdeo); font-family: var(--gc-serif); }
.gc-inicio .gc-iv-titulo {
  margin: 0 0 2.4vw !important;
  font-family: var(--gc-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(16px, 1.7vw, 27px) !important;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gc-burdeo) !important;
  margin-left: -1.2vw !important;
}
.gc-iv-texto p {
  display: block !important;
  margin: 0 0 2.6vw !important;
  font-family: var(--gc-serif);
  font-size: clamp(13px, 1.2vw, 19px);
  letter-spacing: .04em;
  line-height: 1.3;
  color: var(--gc-burdeo);
}
.gc-inicio .gc-iv-texto .gc-iv-registro { margin-bottom: .6vw !important; }
.gc-inicio .gc-iv-texto .gc-iv-nota {
  font-size: clamp(9px, .7vw, 12px);
  color: var(--gc-ocre-hondo, #B07A2A);
  margin-bottom: 2vw !important;
}
.gc-inicio a.gc-iv-btn {
  display: inline-block;
  background: var(--gc-burdeo);
  color: #fff;
  font-family: var(--gc-display);
  font-size: clamp(9px, .8vw, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1vw 1.7vw;
  border-radius: 1px;
}
.gc-inicio a.gc-iv-btn:hover { background: #5e1523; }

/* En el teléfono se mantiene el orden, pero las cosas se apilan donde no
 * caben: dos tarjetas y media a la vista, paneles de a uno, las jirafas
 * al costado del texto chicas. */
@media (max-width: 760px) {
  /* En el teléfono la foto roja va sola a todo el ancho: partida en dos
   * columnas de 390px, a las dos modelos se les cortaba la cara. */
  .gc-inicio-hero, .gc-hero-izq { height: 66vw; }
  .gc-inicio-hero { grid-template-columns: 1fr; }
  .gc-hero-der { display: none; }
  .gc-hero-marca { width: 52vw; }
  .gc-inicio a.gc-hero-ver { top: 22.75vw; left: 17.7vw; }
  .gc-inicio-titulo { margin-bottom: 16px !important; }
  .gc-ua-fila { gap: 8px; }
  .gc-ua-tarjeta { flex-basis: 42%; }
  .gc-ua-datos { padding: 10px 8px 12px; }
  .gc-inicio a.gc-ua-carro { padding-top: 10px; }
  .gc-ua-flecha { display: none; }
  .gc-inicio-cats { padding: 28px 4% 32px; }
  .gc-inicio-cats .gc-categorias { max-width: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .gc-inicio-cats .gc-cat-figura { height: 110px; }
  .gc-inicio-cats .gc-cat-figura img { height: 110px; width: auto; max-width: 100%; object-fit: contain; }
  .gc-inicio-cats .gc-cat-nombre { font-size: 8px; letter-spacing: .08em; }
  .gc-inicio-paneles { grid-template-columns: 1fr; height: auto; }
  .gc-inicio-panel { height: 100vw; }
  .gc-panel-rotulo { top: 12px; right: 14px; }
  .gc-panel-golden img, .gc-panel-golden:hover img { object-fit: cover; transform: none; -webkit-mask-image: none; mask-image: none; }
  .gc-inicio-vender { grid-template-columns: 1fr 1fr; }
  .gc-iv-texto { grid-column: 1 / -1; grid-row: 1; padding: 40px 24px 24px; }
  .gc-inicio .gc-iv-titulo { margin-left: 0 !important; margin-bottom: 20px !important; }
  .gc-iv-texto p { margin-bottom: 18px !important; }
  .gc-inicio .gc-iv-texto .gc-iv-registro { margin-bottom: 6px !important; }
  .gc-inicio .gc-iv-texto .gc-iv-nota { margin-bottom: 18px !important; }
  .gc-inicio a.gc-iv-btn { padding: 12px 22px; }
}

/* ------------------------------------------------ el formulario de oferta
 *
 * Todo el formulario con la misma letra que «Precio publicado…» (14px,
 * Questrial), como pidió Elisa el 22-09. Las etiquetas iban a 17px y los
 * campos salían con la letra y el tamaño de fábrica del navegador.
 */
.gc-of-form .gc-campo,
.gc-of-form .gc-campo label,
.gc-of-form label,
.gc-of-form .gc-req,
.gc-of-form input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.gc-of-form textarea,
.gc-of-form select,
.gc-of-form p {
  font-family: var(--gc-texto) !important;
  font-size: 14px !important;
  line-height: 1.45;
}
.gc-of-form .gc-of-tit { font-family: var(--gc-display) !important; font-size: 11px !important; }
.gc-of-form .gc-campo label { display: block; margin: 0 0 4px; color: var(--gc-tinta-2, #5A544F); }
.gc-of-form input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.gc-of-form textarea,
.gc-of-form select {
  box-sizing: border-box;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--gc-linea, #E3DCD5);
  border-radius: 2px;
  background: #fff;
  color: #1c1c1c;
}
.gc-of-form input:focus, .gc-of-form textarea:focus, .gc-of-form select:focus {
  outline: none; border-color: var(--gc-tinto, #7A1C2F);
}

/* ------------------------------------------------- la barra blanca
 *
 * Elisa, 22-09: fuera la franja burdeo; la barra queda blanca con todo en
 * burdeo. Para volver a la franja: borrar este bloque y volver a poner
 * `logo-giraffe-collective.png` en la barra de `partes.php`.
 */
.gc-barra { background: #fff !important; border-bottom: 1px solid var(--gc-linea, #EDE7E1); box-shadow: none !important; }
.gc-barra .gc-nav a,
.gc-barra .gc-desplegable-btn,
.gc-barra .gc-carro {
  color: var(--gc-tinto, #7A1C2F) !important;
  /* «Ropa» es un enlace (300) y los otros dos son botones (400): se igualan. */
  font-weight: 400 !important;
}
.gc-barra .gc-nav a:hover,
.gc-barra .gc-desplegable-btn:hover { color: var(--gc-ocre-hondo, #9A6420) !important; }
.gc-barra .gc-hamburguesa span { background: var(--gc-tinto, #7A1C2F) !important; }

/* «Ropa» es un enlace y los otros dos son botones: sin esto quedan a
 * distinta altura porque el botón trae su propia caja. */
.gc-barra .gc-nav { align-items: center; }
/* «Ropa» es un enlace y los otros dos son botones: para que los cinco
 * textos caigan en el mismo renglón, todos con la misma altura de línea y
 * caja en línea. (El desfase de verdad era un <br> que metía `wpautop`
 * dentro del botón; eso se arregló en partes.php.) */
.gc-barra .gc-nav > a,
.gc-barra .gc-desplegable,
.gc-barra .gc-desplegable-btn {
  display: inline-block;
  line-height: 20px;
  height: 20px;
}
.gc-barra .gc-desplegable-btn span {
  display: inline-block;
  line-height: 20px;
  vertical-align: top;
}
.wc-block-order-confirmation-totals table td:last-child,
.wc-block-order-confirmation-totals table th:last-child { text-align: right; }

/* -------------------------------------------------------------- el pie */

.gc-pie-in {
  display: block;
  max-width: 1400px;
  margin: 0 auto;
}

.gc-pie-logo { margin: 0 0 26px; }
.gc-pie-logo img { height: 26px; width: auto; margin: 0; }

.gc-pie-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 36px;
  padding: 0 0 26px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.gc-pie-titulo {
  font-family: var(--gc-display);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62) !important;
  margin: 0 0 12px !important;
}

.gc-pie-cols p { margin: 0 0 8px; }
.gc-pie a { text-decoration: none; }
.gc-pie a:hover { text-decoration: underline; text-underline-offset: 4px; }

.gc-pie-distinto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 36px;
  padding: 24px 0 0;
}
.gc-pie-distinto p { margin: 0; font-size: 13px; line-height: 1.6; }
.gc-pie-distinto strong { color: #fff; }

.gc-pie-envios {
  margin: 22px 0 0 !important;
  font-size: 13px;
  color: rgba(255, 255, 255, .62) !important;
}

@media (max-width: 860px) {
  .gc-pie-cols,
  .gc-pie-distinto { grid-template-columns: 1fr; }
  .gc-pie-distinto { gap: 12px; }
}

/* ======================================================= la portada nueva
 *
 * Rehecha el 21-09-2026 calcando el diseño de Elisa. Las medidas salen del
 * propio diseño (946px de ancho) pasadas a porcentaje del ancho de la
 * pantalla, así que en cualquier monitor queda con las mismas proporciones.
 */

.gc-inicio {
  --gc-serif: "Times New Roman", Times, serif;
  --gc-burdeo: #7A1C2F;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #fff;
  overflow-x: hidden;
}
.gc-inicio > p, .gc-inicio section > p { display: none; }
.gc-inicio img { display: block; max-width: none; }

/* 1 · las dos fotos */
.gc-inicio-hero {
  display: grid;
  grid-template-columns: 68.8fr 31.2fr;
  height: 46vw;
  margin: 0;
}
.gc-hero-izq, .gc-hero-der { position: relative; overflow: hidden; height: 46vw; }
.gc-hero-foto { width: 100%; height: 100%; object-fit: cover; }
.gc-hero-izq .gc-hero-foto { object-position: center 40%; transform: scale(1.04); transform-origin: 62% 0; }
.gc-hero-der .gc-hero-foto { object-position: center top; }

.gc-hero-marca {
  position: absolute;
  top: 1.6vw;
  left: 1.5vw;
  width: 40vw;
  z-index: 2;
}
.gc-hero-h1 { margin: 0 !important; padding: 0; line-height: 0; font-size: 0; }
.gc-hero-logo { width: 100%; height: auto; }
.gc-inicio a.gc-hero-ver {
  position: absolute;
  top: 17.5vw;
  left: 13.6vw;
  white-space: nowrap;
  font-family: var(--gc-serif);
  font-size: clamp(10px, 1.15vw, 18px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gc-burdeo);
  text-decoration: none;
  border-bottom: 1px solid var(--gc-burdeo);
  line-height: 1.25;
  padding-bottom: 1px;
}
.gc-inicio a.gc-hero-ver:hover { opacity: .75; }

/* 2 · últimos agregados */
.gc-inicio-ua { padding: 2.6vw 0 3.2vw; background: #fff; }
.gc-inicio-titulo {
  margin: 0 0 2.4vw 4% !important;
  font-family: var(--gc-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(15px, 1.65vw, 26px) !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #1c1c1c !important;
  line-height: 1.2;
}
.gc-ua-marco { position: relative; padding: 0 4%; }
.gc-ua-fila {
  display: flex;
  gap: 1.2vw;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gc-ua-fila::-webkit-scrollbar { display: none; }
.gc-ua-tarjeta {
  box-sizing: border-box;
  flex: 0 0 calc((100% - 3 * 1.2vw) / 4);
  scroll-snap-align: start;
  border: 1px solid #efecea;
  background: #fff;
  text-align: center;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
.gc-ua-img { position: relative; display: block; aspect-ratio: 1 / 1; background: #f3f2f0; overflow: hidden; }
.gc-ua-img img, .gc-ua-foto { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; }
.gc-ua-oferta {
  position: absolute; top: .4vw; right: .4vw; z-index: 1;
  background: #fff; color: var(--gc-burdeo);
  font-family: var(--gc-display); font-size: 8px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px;
}
.gc-ua-datos { padding: 1vw .6vw 1.2vw; display: flex; flex-direction: column; align-items: center; flex: 1; }
.gc-inicio a.gc-ua-marca {
  font-family: var(--gc-display);
  font-weight: 600;
  font-size: clamp(11px, 1.05vw, 16px);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #1c1c1c;
  text-decoration: none;
  line-height: 1.3;
}
.gc-inicio .gc-ua-bajada {
  display: block !important;
  margin: .2vw 0 0 !important;
  font-family: var(--gc-display);
  font-size: clamp(10px, .82vw, 13px);
  color: #555;
  line-height: 1.35;
}
.gc-inicio .gc-ua-precio {
  display: block !important;
  margin: .45vw 0 0 !important;
  font-family: var(--gc-display);
  font-weight: 600;
  font-size: clamp(11px, .95vw, 15px);
  color: var(--gc-burdeo);
}
.gc-ua-precio del { color: var(--gc-burdeo); opacity: 1; font-weight: 600; }
.gc-ua-precio ins { text-decoration: none; margin-left: 4px; }
.gc-inicio a.gc-ua-carro {
  margin-top: auto;
  padding-top: 1.2vw;
  font-family: var(--gc-serif);
  font-size: clamp(12px, 1.1vw, 17px);
  color: #6b2a2a;
  background: none !important;
  border: 0 !important;
  text-decoration: none;
  line-height: 1.2;
}
.gc-inicio a.gc-ua-carro:hover { text-decoration: underline; }
.gc-inicio a.gc-ua-carro.added::after { content: " ✓"; }
.gc-inicio .added_to_cart { display: none !important; }
.gc-ua-flecha {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 6px;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1;
  color: #b9b4b0;
  cursor: pointer;
  font-family: var(--gc-texto);
}
.gc-ua-flecha:hover { color: var(--gc-burdeo); }
.gc-ua-ant { left: .8%; }
.gc-ua-sig { right: .8%; }

/* 3 · las jirafas */
.gc-inicio-cats { background: #fff; padding: 2vw 4% 3.6vw; }
.gc-inicio-cats .gc-categorias { max-width: 76vw; margin: 0 auto; }

/* 4 · las tres fotos de marca */
.gc-inicio-paneles {
  display: grid;
  grid-template-columns: 31.6fr 36.6fr 31.8fr;
  height: 41vw;
}
.gc-inicio-panel { position: relative; display: block; overflow: hidden; height: 41vw; text-decoration: none; }
.gc-inicio-panel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gc-inicio-panel:hover img { transform: scale(1.03); }
.gc-panel-zadig img { object-position: center top; }
/* La zapatilla ocupa la foto de lado a lado; en el diseño respira. */
.gc-panel-golden { background: #e7e0d6; }
.gc-panel-golden img {
  object-fit: contain; transform: scale(.86); transform-origin: center 62%;
  /* Los bordes de la foto se funden con el fondo para que no se note el recuadro. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
.gc-panel-golden:hover img { transform: scale(.89); }
.gc-panel-rotulo {
  position: absolute;
  top: 1vw;
  right: 1.1vw;
  font-family: var(--gc-serif);
  font-size: clamp(11px, 1.15vw, 18px);
  color: #1c1c1c;
  border-bottom: 1px solid #1c1c1c;
  line-height: 1.3;
}

/* 5 · ¿cómo vender? */
.gc-inicio-vender {
  display: grid;
  grid-template-columns: 26fr 47.5fr 26.5fr;
  min-height: 32vw;
  background: #fff;
  align-items: stretch;
}
.gc-iv-jirafa { position: relative; display: flex; overflow: hidden; }
.gc-iv-izq { align-items: flex-end; justify-content: flex-start; }
.gc-iv-der { align-items: center; justify-content: flex-end; }
.gc-iv-jirafa img { width: 100%; height: auto; }
.gc-iv-texto { padding: 6.4vw 2vw 3vw 4vw; color: var(--gc-burdeo); font-family: var(--gc-serif); }
.gc-inicio .gc-iv-titulo {
  margin: 0 0 2.4vw !important;
  font-family: var(--gc-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(16px, 1.7vw, 27px) !important;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gc-burdeo) !important;
  margin-left: -1.2vw !important;
}
.gc-iv-texto p {
  display: block !important;
  margin: 0 0 2.6vw !important;
  font-family: var(--gc-serif);
  font-size: clamp(13px, 1.2vw, 19px);
  letter-spacing: .04em;
  line-height: 1.3;
  color: var(--gc-burdeo);
}
.gc-inicio .gc-iv-texto .gc-iv-registro { margin-bottom: .6vw !important; }
.gc-inicio .gc-iv-texto .gc-iv-nota {
  font-size: clamp(9px, .7vw, 12px);
  color: var(--gc-ocre-hondo, #B07A2A);
  margin-bottom: 2vw !important;
}
.gc-inicio a.gc-iv-btn {
  display: inline-block;
  background: var(--gc-burdeo);
  color: #fff;
  font-family: var(--gc-display);
  font-size: clamp(9px, .8vw, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1vw 1.7vw;
  border-radius: 1px;
}
.gc-inicio a.gc-iv-btn:hover { background: #5e1523; }

/* En el teléfono se mantiene el orden, pero las cosas se apilan donde no
 * caben: dos tarjetas y media a la vista, paneles de a uno, las jirafas
 * al costado del texto chicas. */
@media (max-width: 760px) {
  /* En el teléfono la foto roja va sola a todo el ancho: partida en dos
   * columnas de 390px, a las dos modelos se les cortaba la cara. */
  .gc-inicio-hero, .gc-hero-izq { height: 66vw; }
  .gc-inicio-hero { grid-template-columns: 1fr; }
  .gc-hero-der { display: none; }
  .gc-hero-marca { width: 52vw; }
  .gc-inicio a.gc-hero-ver { top: 22.75vw; left: 17.7vw; }
  .gc-inicio-titulo { margin-bottom: 16px !important; }
  .gc-ua-fila { gap: 8px; }
  .gc-ua-tarjeta { flex-basis: 42%; }
  .gc-ua-datos { padding: 10px 8px 12px; }
  .gc-inicio a.gc-ua-carro { padding-top: 10px; }
  .gc-ua-flecha { display: none; }
  .gc-inicio-cats { padding: 28px 4% 32px; }
  .gc-inicio-cats .gc-categorias { max-width: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .gc-inicio-cats .gc-cat-figura { height: 110px; }
  .gc-inicio-cats .gc-cat-figura img { height: 110px; width: auto; max-width: 100%; object-fit: contain; }
  .gc-inicio-cats .gc-cat-nombre { font-size: 8px; letter-spacing: .08em; }
  .gc-inicio-paneles { grid-template-columns: 1fr; height: auto; }
  .gc-inicio-panel { height: 100vw; }
  .gc-panel-rotulo { top: 12px; right: 14px; }
  .gc-panel-golden img, .gc-panel-golden:hover img { object-fit: cover; transform: none; -webkit-mask-image: none; mask-image: none; }
  .gc-inicio-vender { grid-template-columns: 1fr 1fr; }
  .gc-iv-texto { grid-column: 1 / -1; grid-row: 1; padding: 40px 24px 24px; }
  .gc-inicio .gc-iv-titulo { margin-left: 0 !important; margin-bottom: 20px !important; }
  .gc-iv-texto p { margin-bottom: 18px !important; }
  .gc-inicio .gc-iv-texto .gc-iv-registro { margin-bottom: 6px !important; }
  .gc-inicio .gc-iv-texto .gc-iv-nota { margin-bottom: 18px !important; }
  .gc-inicio a.gc-iv-btn { padding: 12px 22px; }
}

/* ------------------------------------------------ el formulario de oferta
 *
 * Todo el formulario con la misma letra que «Precio publicado…» (14px,
 * Questrial), como pidió Elisa el 22-09. Las etiquetas iban a 17px y los
 * campos salían con la letra y el tamaño de fábrica del navegador.
 */
.gc-of-form .gc-campo,
.gc-of-form .gc-campo label,
.gc-of-form label,
.gc-of-form .gc-req,
.gc-of-form input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.gc-of-form textarea,
.gc-of-form select,
.gc-of-form p {
  font-family: var(--gc-texto) !important;
  font-size: 14px !important;
  line-height: 1.45;
}
.gc-of-form .gc-of-tit { font-family: var(--gc-display) !important; font-size: 11px !important; }
.gc-of-form .gc-campo label { display: block; margin: 0 0 4px; color: var(--gc-tinta-2, #5A544F); }
.gc-of-form input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.gc-of-form textarea,
.gc-of-form select {
  box-sizing: border-box;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--gc-linea, #E3DCD5);
  border-radius: 2px;
  background: #fff;
  color: #1c1c1c;
}
.gc-of-form input:focus, .gc-of-form textarea:focus, .gc-of-form select:focus {
  outline: none; border-color: var(--gc-tinto, #7A1C2F);
}

/* ------------------------------------------------- la barra blanca
 *
 * Elisa, 22-09: fuera la franja burdeo; la barra queda blanca con todo en
 * burdeo. Para volver a la franja: borrar este bloque y volver a poner
 * `logo-giraffe-collective.png` en la barra de `partes.php`.
 */
.gc-barra { background: #fff !important; border-bottom: 1px solid var(--gc-linea, #EDE7E1); box-shadow: none !important; }
.gc-barra .gc-nav a,
.gc-barra .gc-desplegable-btn,
.gc-barra .gc-carro {
  color: var(--gc-tinto, #7A1C2F) !important;
  /* «Ropa» es un enlace (300) y los otros dos son botones (400): se igualan. */
  font-weight: 400 !important;
}
.gc-barra .gc-nav a:hover,
.gc-barra .gc-desplegable-btn:hover { color: var(--gc-ocre-hondo, #9A6420) !important; }
.gc-barra .gc-hamburguesa span { background: var(--gc-tinto, #7A1C2F) !important; }

/* «Ropa» es un enlace y los otros dos son botones: sin esto quedan a
 * distinta altura porque el botón trae su propia caja. */
.gc-barra .gc-nav { align-items: center; }
/* Nada de flex acá: dentro de un flex el texto suelto del botón se
 * convierte en un hijo anónimo y se dibuja 6px más abajo que el del
 * enlace. Con caja en línea y la misma altura de línea, los cinco textos
 * caen en el mismo renglón. */
.gc-barra .gc-nav > a,
.gc-barra .gc-desplegable,
.gc-barra .gc-desplegable-btn {
  display: inline-block;
  line-height: 20px;
  height: 20px;
  vertical-align: middle;
}
.gc-barra .gc-desplegable-btn span {
  display: inline-block;
  line-height: 20px;
  vertical-align: top;
}

/* Encabezado de la tabla de tallas: el tema lo pinta burdeo; letra blanca. */
.gc-tallas .gc-tallas-tabla th { color: #fff !important; }

/* ------------------------------------------------ ficha: botones juntos */
.single-product .wc-block-add-to-cart-form form { margin-bottom: 0 !important; }
.single-product .gc-btn.gc-borde { margin-top: 0 !important; }

/* ------------------------ últimos agregados: «Añadir al carrito» mostaza */
.gc-inicio a.gc-ua-carro {
  display: block;
  margin: auto 0 0;
  margin-top: auto;
  padding: 11px 10px !important;
  width: 100%;
  box-sizing: border-box;
  background: var(--gc-ocre, #B4691C) !important;
  color: #fff !important;
  font-family: var(--gc-display) !important;
  font-size: 11px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none !important;
  border-radius: 1px;
}
.gc-inicio a.gc-ua-carro:hover { background: var(--gc-ocre-hondo, #9A6420) !important; text-decoration: none !important; }
.gc-inicio .gc-ua-precio { margin-bottom: 1vw !important; }

/* ------------------------------------------- el desplegable de marcas
 *
 * Tres columnas, pero leyéndose hacia abajo: con `grid` el orden iba de
 * izquierda a derecha y la lista alfabética quedaba imposible de seguir.
 */
/* Ojo: este `!important` pisaba al `[hidden]` del desplegable y la caja de
 * marcas se quedaba abierta para siempre. Por eso la regla de abajo. */
.gc-barra .gc-caja-marcas[hidden] { display: none !important; }
.gc-barra .gc-caja-marcas {
  display: block !important;
  column-count: 3;
  column-gap: 26px;
  max-height: 62vh;
  overflow-y: auto;
}
.gc-barra .gc-caja-marcas a {
  display: block;
  break-inside: avoid;
  padding: 3px 0;
}

/* --------------------------------------------------- prenda vendida */
.single-product p.stock.gc-vendido {
  display: inline-block;
  color: #fff !important;
  background: var(--gc-tinto, #7A1C2F);
  font-family: var(--gc-display);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 10px 22px;
  margin: 0 !important;
  border-radius: 1px;
}
.gc-vendida-nota {
  margin: 14px 0 0 !important;
  font-size: 14px;
  color: var(--gc-tinta-2, #5A544F);
  order: 4;
}
.gc-vendida-nota a { color: var(--gc-tinto, #7A1C2F); text-underline-offset: 3px; }

/* La lupa de la galería tapaba la ventana de la guía de tallas. */
.woocommerce-product-gallery__trigger { z-index: 2 !important; }

/* ======================================================== Quiénes somos
 *
 * La página estaba con los títulos de fábrica del tema (negro, enormes) y
 * el texto suelto. Acá va con los colores y las tipografías de Giraffe:
 * títulos burdeo, texto Questrial y las razones en tarjetas.
 */
.gc-qs {
  --qs-borde: #EDE7E1;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 4% 40px;
  font-family: var(--gc-texto);
  color: var(--gc-tinta, #1E1B19);
}
.gc-qs-hero { text-align: center; padding: 18px 0 44px; }
.gc-qs-ojo {
  font-family: var(--gc-display);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gc-ocre-hondo, #9A6420);
  margin: 0 0 14px !important;
}
.gc-qs h1.gc-qs-titulo {
  font-family: var(--gc-display) !important;
  font-weight: 300 !important;
  font-size: clamp(30px, 4vw, 52px) !important;
  letter-spacing: .02em;
  color: var(--gc-tinto, #7A1C2F) !important;
  margin: 0 0 18px !important;
  text-transform: none;
}
.gc-qs-bajada {
  max-width: 620px;
  margin: 0 auto !important;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
  color: var(--gc-tinta-2, #5A544F);
}
.gc-qs-seccion { padding: 34px 0; border-top: 1px solid var(--qs-borde); }
.gc-qs h2.gc-qs-h2 {
  font-family: var(--gc-display) !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 2vw, 27px) !important;
  letter-spacing: .04em;
  color: var(--gc-tinto, #7A1C2F) !important;
  margin: 0 0 20px !important;
  text-transform: none;
}
.gc-qs-texto p { font-size: 17px; line-height: 1.75; margin: 0 0 14px !important; max-width: 68ch; }
.gc-qs-relato { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; border-top: 0; }
.gc-qs-foto img { display: block; width: 100%; height: 320px; object-fit: cover; border-radius: 2px; }

.gc-qs-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 34px; }
.gc-qs-tarjeta { border-top: 2px solid var(--gc-tinto, #7A1C2F); padding: 14px 0 0; }
.gc-qs-tarjeta h3 {
  font-family: var(--gc-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gc-tinto, #7A1C2F) !important;
  margin: 0 0 8px !important;
}
.gc-qs-tarjeta p { font-size: 15px; line-height: 1.65; margin: 0 !important; color: var(--gc-tinta-2, #5A544F); }

.gc-qs-lista { list-style: none; margin: 0 0 28px !important; padding: 0 !important; display: grid; gap: 14px; }
.gc-qs-lista li { display: flex; gap: 14px; align-items: flex-start; margin: 0 !important; }
.gc-qs-lista span {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gc-tinto, #7A1C2F);
  color: #fff;
  font-family: var(--gc-display);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gc-qs-lista p { margin: 2px 0 0 !important; font-size: 16px; line-height: 1.6; }

.gc-qs-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }
.gc-qs a.gc-qs-btn {
  display: inline-block;
  background: var(--gc-tinto, #7A1C2F);
  color: #fff;
  font-family: var(--gc-display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 1px;
}
.gc-qs a.gc-qs-btn:hover { background: #5E1523; }
.gc-qs a.gc-qs-btn-linea {
  background: transparent;
  color: var(--gc-tinto, #7A1C2F);
  border: 1px solid var(--gc-tinto, #7A1C2F);
}
.gc-qs a.gc-qs-btn-linea:hover { background: rgba(122, 28, 47, .06); }

@media (max-width: 860px) {
  .gc-qs-relato { grid-template-columns: 1fr; gap: 22px; }
  .gc-qs-foto img { height: 260px; }
  .gc-qs-grilla { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================ la confirmación del pedido
 *
 * La tabla venía con recuadro y las celdas pegadas a la línea. Acá queda
 * sin marco, con líneas suaves entre filas y aire a los lados.
 */
.wc-block-order-confirmation-totals__table,
.wc-correios-tracking__table {
  width: 100%;
  border: 0 !important;
  border-collapse: collapse;
  margin: 0 0 8px;
}
.wc-block-order-confirmation-totals__table th,
.wc-block-order-confirmation-totals__table td,
.wc-correios-tracking__table th,
.wc-correios-tracking__table td {
  border: 0 !important;
  border-bottom: 1px solid var(--gc-linea, #EDE7E1) !important;
  padding: 16px 10px !important;
  vertical-align: middle;
}
.wc-block-order-confirmation-totals__table th:first-child,
.wc-block-order-confirmation-totals__table td:first-child,
.wc-correios-tracking__table th:first-child,
.wc-correios-tracking__table td:first-child { padding-left: 0 !important; }
.wc-block-order-confirmation-totals__table th:last-child,
.wc-block-order-confirmation-totals__table td:last-child,
.wc-correios-tracking__table th:last-child,
.wc-correios-tracking__table td:last-child { padding-right: 0 !important; text-align: right; }
.wc-block-order-confirmation-totals__table thead th {
  font-family: var(--gc-display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gc-tinta-2, #5A544F);
  padding-bottom: 10px !important;
}
.wc-block-order-confirmation-totals__table tfoot tr:last-child th,
.wc-block-order-confirmation-totals__table tfoot tr:last-child td {
  border-bottom: 0 !important;
  font-weight: 600;
}
.wc-block-order-confirmation-totals__table img { border-radius: 2px; }

/* Los recuadros de dirección y de seguimiento, con aire adentro. */
.wc-block-order-confirmation-shipping-address,
.wc-block-order-confirmation-billing-address,
.wc-block-order-confirmation-address,
.woocommerce-customer-details address {
  padding: 18px 20px !important;
  border: 1px solid var(--gc-linea, #EDE7E1) !important;
  border-radius: 2px;
  line-height: 1.7;
}
.wc-block-order-confirmation-summary-list {
  border-color: var(--gc-linea, #EDE7E1) !important;
  padding: 20px 0 !important;
  gap: 18px 32px;
}
[class*="wc-block-order-confirmation"] h2,
[class*="wc-block-order-confirmation"] h3 { margin-bottom: 14px !important; }

/* ------------------------------------------------- «Ya transferí» */
.gc-transferi {
  margin: 22px 0 26px;
  padding: 20px 22px;
  border: 1px solid var(--gc-linea, #EDE7E1);
  border-left: 3px solid var(--gc-tinto, #7A1C2F);
  background: #FBF7F2;
  border-radius: 2px;
}
.gc-transferi p { margin: 0 0 14px; line-height: 1.6; }
.gc-transferi .gc-transferi-btn { margin: 0; }
.gc-transferi a {
  display: inline-block;
  background: var(--gc-tinto, #7A1C2F);
  color: #fff !important;
  font-family: var(--gc-display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 14px 30px;
  border-radius: 1px;
}
.gc-transferi a:hover { background: #5E1523; }
.gc-transferi-ok { border-left-color: var(--gc-ocre, #B4691C); }
.gc-transferi-ok p:last-child { margin-bottom: 0; }

/* Quiénes somos: el título del tema sobraba, la página trae el suyo. */
body.page-id-1654 .wp-block-post-title { display: none; }

/* La jirafa de la derecha de «¿Cómo vender?» quedaba flotando. */
.gc-iv-der { align-items: flex-end !important; }

/* ------------------------------------------- portada: la lámina «WTF»
 *
 * Tres piezas sueltas en vez de una sola foto: la jirafa (fotografía) pegada
 * al borde izquierdo y, al centro del espacio que queda, el «WTF», la frase
 * manuscrita y el botón. Así el texto es vectorial —nítido en cualquier
 * pantalla— y de paso se va el aire muerto que quedaba a la derecha cuando
 * la lámina era una imagen sola. */
.gc-lamina-wtf {
  position: relative;
  height: 46vw;
  background: #fff;
  text-decoration: none;
  overflow: hidden;
}
.gc-inicio .gc-wtf-jirafa {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
}
.gc-wtf-centro {
  position: absolute;
  left: 22%;
  right: 3%;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gc-inicio .gc-wtf-titulo { width: 26vw; height: auto; }
.gc-inicio .gc-wtf-frase  { width: 63vw; height: auto; margin-top: 1.1vw; }

/* El mismo botón que «Ver ropa» de la lámina de campaña. Va en <span> y no
 * en <a> porque la lámina entera ya es un enlace. */
.gc-wtf-btn {
  margin-top: 2.4vw;
  font-family: var(--gc-serif);
  font-size: clamp(10px, 1.15vw, 18px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gc-burdeo);
  border-bottom: 1px solid var(--gc-burdeo);
  line-height: 1.25;
  padding-bottom: 1px;
}
.gc-lamina-wtf:hover .gc-wtf-btn { opacity: .75; }

/* Los puntitos van sobre el blanco de abajo, nunca encima de la jirafa. */
.gc-inicio .gc-puntos { bottom: 1.1vw; z-index: 3; }
.gc-inicio .gc-punto { width: 11px; height: 11px; border-color: var(--gc-tinto, #7A1C2F); }

@media (max-width: 760px) {
  /* Mismo alto que la lámina de campaña en el teléfono, para que el banner
   * no cambie de tamaño al rotar. La jirafa se estrecha sola (va por alto),
   * así que el texto se corre y crece. */
  .gc-lamina-wtf { height: 66vw; }
  .gc-wtf-centro { left: 32%; right: 2%; }
  .gc-inicio .gc-wtf-titulo { width: 30vw; }
  .gc-inicio .gc-wtf-frase  { width: 60vw; margin-top: 2vw; }
  .gc-wtf-btn { margin-top: 4.4vw; font-size: 11px; }
}


/* (what the fock) en texto, sobre el WTF — 01-10-2026 */
.gc-wtf-que{display:block;font-family:Poppins,Questrial,Helvetica,Arial,sans-serif;font-weight:400;font-size:clamp(8px,.8vw,13px);letter-spacing:.38em;padding-left:.38em;text-transform:uppercase;color:#65071B;margin:0 0 1.2vw;line-height:1}

/* ===== Pago con tarjeta (Transbank) en la página de gracias — 20-10-2026 ===== */
.woocommerce-order-received .wc-block-order-confirmation-additional-information:has(#payment_details){background:#fff !important;border:1px solid var(--gc-linea,#DAD5CF);border-radius:8px;padding:26px 28px 14px !important;box-shadow:none}
.woocommerce-order-received .wc-block-order-confirmation-additional-information:has(#payment_details) > br{display:none}
.woocommerce-order-received .wc-block-order-confirmation-additional-information:has(#payment_details) .wc-block-components-notice-banner.is-success{display:flex;align-items:center;gap:10px;background:transparent !important;border:0 !important;border-radius:0;padding:0 0 18px !important;margin:0 0 6px !important;border-bottom:1px solid var(--gc-linea,#DAD5CF) !important;outline:none !important;box-shadow:none !important;font-family:var(--gc-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#2E6B4F}
.woocommerce-order-received .wc-block-order-confirmation-additional-information:has(#payment_details) .wc-block-components-notice-banner.is-success:focus,
.woocommerce-order-received .wc-block-order-confirmation-additional-information:has(#payment_details) .wc-block-components-notice-banner.is-success:focus-visible{outline:none !important;box-shadow:none !important}
.woocommerce-order-received .wc-block-order-confirmation-additional-information:has(#payment_details) .wc-block-components-notice-banner.is-success > svg{width:22px;height:22px;min-width:22px;padding:3px;margin:0;background:#2E6B4F;border-radius:50%;fill:#fff}
.woocommerce-order-received .wc-block-order-confirmation-additional-information:has(#payment_details) .wc-block-components-notice-banner__content{padding:0 !important}
.woocommerce-order-received #payment_details{margin:18px 0 6px !important;font-size:11px !important;letter-spacing:.18em !important;color:var(--gc-cafe-mid,#7A1C2F) !important}
.woocommerce-order-received #payment_details + table.shop_table{width:100%;border:0 !important;border-collapse:collapse;margin:0 !important;background:transparent}
.woocommerce-order-received #payment_details + table.shop_table tr{border:0}
.woocommerce-order-received #payment_details + table.shop_table th,
.woocommerce-order-received #payment_details + table.shop_table td{padding:11px 0 !important;border:0 !important;border-bottom:1px solid var(--gc-linea,#DAD5CF) !important;font-size:14.5px !important;line-height:1.35;background:transparent !important;vertical-align:baseline}
.woocommerce-order-received #payment_details + table.shop_table th{font-weight:400 !important;color:#5A544F;text-align:left;width:48%}
.woocommerce-order-received #payment_details + table.shop_table td{text-align:right;color:var(--gc-tinta,#2A2523);font-variant-numeric:tabular-nums;word-break:break-word}
.woocommerce-order-received #payment_details + table.shop_table tr:last-child th,
.woocommerce-order-received #payment_details + table.shop_table tr:last-child td{border-bottom:0 !important}
.woocommerce-order-received #payment_details + table.shop_table tr:has(.amount) th,
.woocommerce-order-received #payment_details + table.shop_table tr:has(.amount) td{font-weight:600 !important;color:var(--gc-tinta,#2A2523)}
@media (min-width:760px){
  .woocommerce-order-received #payment_details + table.shop_table tfoot{display:grid;grid-template-columns:1fr 1fr;column-gap:44px}
  .woocommerce-order-received #payment_details + table.shop_table tr{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--gc-linea,#DAD5CF)}
  .woocommerce-order-received #payment_details + table.shop_table th,
  .woocommerce-order-received #payment_details + table.shop_table td{border-bottom:0 !important;width:auto}
  .woocommerce-order-received #payment_details + table.shop_table tr:last-child,
  .woocommerce-order-received #payment_details + table.shop_table tr:nth-last-child(2):nth-child(odd){border-bottom:0 !important}
}
@media (max-width:600px){
  .woocommerce-order-received .wc-block-order-confirmation-additional-information:has(#payment_details){padding:20px 18px 8px !important}
  .woocommerce-order-received #payment_details + table.shop_table th,
  .woocommerce-order-received #payment_details + table.shop_table td{font-size:13.5px !important}
}
/* Tarjeta guardada en el pago (20-10-2026): la tarjeta inscrita sale arriba sola;
   la opción suelta de Oneclick (inscribir otra tarjeta) no se muestra en el pago. */
.wc-block-components-radio-control__option:has(input[value="transbank_oneclick_mall_rest"]),
.wc-block-components-radio-control-accordion-option:has(input[value="transbank_oneclick_mall_rest"]){display:none !important}