/* ============================================================
   COLOR — distribución
   WIDDI, 2026-09-24.

   La paleta estaba bien elegida pero mal repartida: de 53 fondos del
   sitio, 44 eran blanco, gris o tintes casi invisibles, y el cobre no
   aparecía sólido ni una vez. El manual pide 60/30/10 y la realidad
   era 83/13/4. «Le falta vida» (Sucely, 2026-09-24).

   Esto no agrega colores nuevos: usa los de la marca donde hoy no estaban.
   Quitar el enqueue devuelve el sitio a como estaba.
   ============================================================ */

/* --- la barra superior pasa a cobre: golpe de color en toda página --- */

.t-announcement {
    background: var(--t-acento);
    color: #fff;
    font-weight: 600;
    letter-spacing: .01em;
}
.t-announcement a { color: #fff; }

/* --- el precio, que es lo que más se mira --- */

.t-site ul.products li.product .price,
.t-site .t-card-price .price {
    color: var(--t-acento);
    font-weight: 700;
    font-size: 1.32rem;
}
.t-site ul.products li.product .price del { color: var(--t-suave); font-weight: 400; }

/* --- etiquetas sobre las tarjetas --- */

.t-site .t-card-flag,
.t-site .t-badge--destacado,
.t-site ul.products li.product .onsale {
    background: var(--t-acento);
    color: #fff;
    font-weight: 700;
    border-radius: 3px;
    letter-spacing: .02em;
}

/* --- la tarjeta destacada se distingue --- */

.t-site ul.products li.product.featured,
.t-site ul.products li.t-product-card.featured {
    border-top: 3px solid var(--t-acento);
}

/* --- los números de los pasos, grandes y en cobre --- */

.t-site .t-step-number,
.t-site .t-audience-number,
.t-site .t-choice li::before {
    color: var(--t-acento);
    font-weight: 700;
}

/* --- ritmo de fondos: se intercala un tinte cobre entre los grises --- */

.t-site .t-choice { background: var(--t-acento-050); }
.t-site .t-faq    { background: var(--t-superficie); }

/* --- iconos --- */

.t-site .t-icon,
.t-site svg.t-icon { color: var(--t-acento); }

/* --- disponibilidad: el verde se gana su lugar --- */

.t-site .stock.in-stock,
.t-site .t-card-stock { color: var(--t-exito); font-weight: 600; }

/* --- footer: los enlaces responden en cobre claro --- */

.t-footer a:hover { color: var(--t-acento-200); }
.t-footer .t-footer-heading { color: var(--t-acento-200); }

/* --- el rojo pasa a ser el color de la accion — 2026-09-28 -----
   Sucely: «el naranja suave no me invita a comprar» (2026-09-28).
   Se cambio la paleta de acento a rojo y, sobre todo, el acento dejo de
   marcar solo informacion: ahora pinta el boton de compra. El azul se
   queda con estructura — header, footer y titulos.
   Antes de esto el CTA del hero era #E8A87C con texto azul: leia como
   boton secundario. --------------------------------------------- */

/* El hero pasó a foto a sangre el 2026-09-30 y sus botones viven en
   assets/secciones.css, ya en rojo. Aquí quedaría duplicado. */

/* Solo los botones que cierran la compra. El resto de botones siguen
   azules: si todo es rojo, el rojo deja de significar «comprá». */

.t-site div.product form.cart .single_add_to_cart_button,
.t-site ul.products li.t-product-card .t-card-actions > a.button,
.t-site .woocommerce .cart_totals .wc-proceed-to-checkout .checkout-button,
.t-site .woocommerce #payment #place_order,
.t-site #t-cart-dialog .woocommerce-mini-cart__buttons .checkout,
.t-site .t-purchase-bar .t-purchase-go {
    background: var(--t-acento);
    color: var(--t-blanco);
}
.t-site div.product form.cart .single_add_to_cart_button:hover,
.t-site ul.products li.t-product-card .t-card-actions > a.button:hover,
.t-site .woocommerce .cart_totals .wc-proceed-to-checkout .checkout-button:hover,
.t-site .woocommerce #payment #place_order:hover,
.t-site #t-cart-dialog .woocommerce-mini-cart__buttons .checkout:hover,
.t-site .t-purchase-bar .t-purchase-go:hover {
    background: var(--t-acento-900);
    color: var(--t-blanco);
}

/* El precio de la pagina de producto tambien en rojo, como en las tarjetas. */
.t-site div.product .summary p.price { color: var(--t-acento); }

/* El aviso de error deja de usar el tinte de marca: ahora la marca es roja. */
.t-site .woocommerce-error { background: var(--t-superficie); }

/* --- sección del video --------------------------------------- */

.t-video { background: var(--t-primario); color: #fff; }
.t-video h2 { color: #fff; }
.t-video .t-kicker { color: var(--t-acento-200); }
.t-video-grid { display: grid; gap: 28px; align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); }
/* 2026-09-30: el video es vertical. En computadora iba a 300 px dentro de un
   bloque de 850 de alto; en teléfono ocupaba pantalla y media. */
.t-video-media { max-width: 300px; margin-inline: auto; }
@media (max-width: 767px) {
  .t-video-media { max-width: 62%; }
}
.t-video-el {
    width: 100%; height: auto; display: block;
    border-radius: var(--t-radio);
    box-shadow: 0 26px 50px -22px rgb(0 0 0 / .55);
    background: var(--t-primario-900);
}
.t-video-lead { color: rgb(255 255 255 / .86); max-width: 52ch; }
.t-video-list { list-style: none; margin: 18px 0 24px; padding: 0; }
.t-video-list li { padding-left: 22px; position: relative; margin-bottom: 8px; color: rgb(255 255 255 / .92); }
.t-video-list li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 8px; height: 8px; border-radius: 50%; background: var(--t-acento);
}
.t-video .t-button-primary { background: var(--t-acento); color: #fff; }
.t-video .t-button-primary:hover { background: var(--t-acento-900); }

@media (min-width: 900px) {
    .t-video-grid { grid-template-columns: minmax(0, 400px) 1fr; gap: 72px; }
    .t-video-media { max-width: 400px; }
    .t-video-media, .t-video-el { aspect-ratio: 4 / 5; }
    .t-video-el { width: 100%; height: 100%; object-fit: cover; }
    .t-video-copy h2 { font-size: clamp(2.4rem, 4vw, 3.4rem); }
    .t-video-lead { font-size: 1.15rem; }
    .t-video-media { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .t-video-el { display: none; }
    .t-video-media { background-image: var(--t-video-poster); }
}

/* 2026-10-22: dos botones en la ficha. «Comprar ahora» es el rojo (cierra la
   compra); «Añadir al carrito» pasa a contorno debajo, para quien sigue viendo. */
.t-site div.product form.cart .quantity { order: 1; }
.t-site div.product form.cart .t-buy-now {
    order: 2; flex: 1; min-height: 52px; padding: 14px 20px;
    border: 0; border-radius: var(--t-radio-sm);
    background: var(--t-acento); color: var(--t-blanco); font-weight: 700;
}
.t-site div.product form.cart .t-buy-now:hover { background: var(--t-acento-900); color: var(--t-blanco); }
.t-site div.product form.cart .single_add_to_cart_button {
    order: 3; flex-basis: 100%;
    background: transparent; color: var(--t-acento);
    box-shadow: inset 0 0 0 2px var(--t-acento);
}
.t-site div.product form.cart .single_add_to_cart_button:hover { background: var(--t-acento); color: var(--t-blanco); }
.t-site .t-purchase-actions { display: flex; gap: 8px; flex-shrink: 0; }
.t-site .t-purchase-bar .t-purchase-cart {
    display: inline-flex; align-items: center; justify-content: center; padding-inline: 12px;
    background: transparent; color: var(--t-acento); box-shadow: inset 0 0 0 2px var(--t-acento);
}
.t-site .t-purchase-bar .t-purchase-cart svg { width: 22px; height: 22px; }