/*============================================================================
dnt-custom-v3.css — CSS custom de donata.com.ar (theme Rio / Tiendanube)
==============================================================================
QUÉ ES
- Capa de CSS custom propia, separada del theme. Acá viven los ajustes de
conversión (CTAs, badges de confianza, envío, urgencia, etc.).
- Prefijo de clases custom: .dnt-
CACHE-BUST (IMPORTANTE)
- El CDN de Tiendanube cachea CSS de forma agresiva. NO basta con editar este
archivo: hay que VERSIONAR el nombre. Al cambiar el contenido:
1) renombrar el archivo: dnt-custom-v3.css -> dnt-custom-v4.css -> ...
2) actualizar la referencia en layouts/layout.tpl al mismo número
3) pushear AMBOS cambios juntos (mismo push) para no dejar un 404
- Subir siempre en modo BINARIO.
CÓMO SE CARGA
- Enlazado en layouts/layout.tpl con:
{{ 'css/dnt-custom-v3.css' | static_url | css_tag }}
- css_tag => render-blocking (por defecto, a propósito).
CASCADA / ESPECIFICIDAD
- El theme usa !important masivo (crítico + utilidades). Para ganar: especificidad
scopeada (body.template-... .dnt-...) o !important deliberado. El orden no alcanza.
- NUNCA estilar clases .js- ni usar IDs para estilos.
CONTRASTE (WCAG AA)
- Los grises/acentos claros sobre crema fallan AA en texto chico. Por eso este
archivo define tokens de TEXTO corregidos (--dnt-muted / --dnt-accent-text /
--dnt-gold-text) y NO usa los opacity del theme para texto.
============================================================================*/
/*============================================================================
Tokens de marca corregidos (no son del theme; contraste AA sobre crema/blanco)
==============================================================================*/
:root{
--dnt-muted:#6A655D; /* texto secundario (5.2:1 cream / 5.8:1 blanco) */
--dnt-accent-text:#5F7152; /* sage oscuro p/TEXTO "con transferencia" (4.8:1) */
--dnt-gold-text:#806326; /* gold oscuro p/TEXTO "Paso 0X" (4.6:1) */
--cream2:#EFE9E0; /* superficie cálida de marca */
}
/*============================================================================
#1 Helpers / utilidades dnt-
==============================================================================*/
.dnt-visually-hidden{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/*============================================================================
#2 Botones y CTAs
==============================================================================*/
.dnt-btn{
display:inline-flex; align-items:center; justify-content:center;
min-height:44px; /* tap target accesible */
padding:12px 22px;
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
border-radius:2px;
text-decoration:none;
white-space:nowrap;
cursor:pointer;
transition:opacity .15s ease;
}
.dnt-btn:hover{opacity:.88}
.dnt-btn:focus-visible{
outline:2px solid var(--main-foreground,#1A1714);
outline-offset:2px;
}
.dnt-btn--primary{
background:var(--button-background,#1A1714);
color:var(--button-foreground,#F7F3ED);
border:1px solid var(--button-background,#1A1714);
}
.dnt-btn--primary:focus-visible{ outline-color:#C4A96A; } /* contraste contra fondo ink */
.dnt-btn--secondary{
background:transparent;
color:var(--main-foreground,#4A4540);
border:1px solid var(--main-foreground-opacity-20,#D8D0C4);
}
.dnt-btn--sm{ min-height:40px; padding:10px 16px; font-size:11px; }
/*============================================================================
#2b Hero (mitad de arriba) — .dnt-hero
==============================================================================*/
.dnt-hero{
display:grid;
grid-template-columns:1fr; /* mobile-first: apilado */
max-width:1180px; /* alineado con el resto de las secciones */
margin-left:auto; margin-right:auto;
background:var(--main-background,#F7F3ED);
color:var(--main-foreground,#1A1714);
}
.dnt-hero__media{
position:relative;
aspect-ratio:1/1; /* cuadrado, igual que la foto del producto */
background:#E4DDD2;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
overflow:hidden;
}
.dnt-hero__img{ /* foto cuadrada en caja cuadrada -> llena sin recorte */
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
display:block;
}
.dnt-hero__tag{
position:absolute; top:14px; left:14px; z-index:1;
background:var(--main-foreground,#1A1714);
color:#E8E0D0;
font-size:10px;
letter-spacing:.1em;
text-transform:uppercase;
padding:5px 10px;
border-radius:2px;
}
.dnt-hero__media-ph{
font-size:11px;
letter-spacing:.06em;
color:#5A554E; /* AA sobre cream3; es temporal (se va con la foto real) */
}
.dnt-hero__content{
padding:30px 24px;
display:flex;
flex-direction:column;
justify-content:center;
gap:14px;
}
.dnt-hero__eyebrow{
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--dnt-muted,#6A655D);
}
.dnt-hero__title{
margin:0;
font-family:var(--heading-font,'DM Serif Display',serif);
font-size:30px;
font-weight:400;
line-height:1.18;
letter-spacing:-.01em;
color:var(--main-foreground,#1A1714);
}
.dnt-hero__title strong{font-weight:700}
.dnt-hero__text{
margin:0;
font-size:13px;
line-height:1.7;
color:var(--main-foreground-opacity-70,#4A4540); /* ink2: pasa AA holgado */
}
.dnt-hero__actions{display:flex;gap:10px;flex-wrap:wrap}
.dnt-hero__note{
display:flex;align-items:center;gap:6px;
margin:0;
font-size:11.5px;
color:var(--dnt-muted,#6A655D);
}
.dnt-ico{width:14px;height:14px;flex:0 0 auto}
@media (max-width:767px){
.dnt-hero__actions{flex-direction:column;gap:10px}
.dnt-hero__actions .dnt-btn{width:100%}
}
@media (min-width:768px){
.dnt-hero{grid-template-columns:minmax(0,460px) 1fr; gap:48px; align-items:center}
.dnt-hero__media{max-width:460px; width:100%; margin:24px 0; border-radius:10px} /* cuadrado, alineado a la izquierda del bloque */
.dnt-hero__content{padding:40px 36px}
.dnt-hero__title{font-size:34px}
}
/*============================================================================
#3 Señales de confianza
==============================================================================*/
/* --- Topbar / barra de anuncios (adbar nativa) --- */
.section-adbar .adbar-message{
letter-spacing:.12em;
text-transform:uppercase;
}
.section-adbar .adbar-message a{ text-decoration:none; color:inherit; }
.section-adbar .adbar-message a:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
@media (max-width:767px){
.section-adbar .adbar-message{
font-size:10px;
letter-spacing:.06em;
line-height:1.4;
white-space:normal !important; /* permitir wrap en mobile (anula nowrap del swiper) */
}
}
/* --- Trust strip (banner-services nativo) --- */
body.template-home .section-informative-banners{
background:var(--main-background,#F7F3ED);
border-top:1px solid var(--main-foreground-opacity-20,#D8D0C4);
border-bottom:1px solid var(--main-foreground-opacity-20,#D8D0C4);
}
.section-informative-banners .service-item{ text-align:center; padding:8px 4px; }
.section-informative-banners .service-item svg{
width:24px !important; height:24px !important;
color:var(--accent-color,#7A8C6E) !important; /* ícono decorativo (UI), no texto */
margin-bottom:6px !important;
}
.section-informative-banners .service-item h3{
font-size:13px !important; font-weight:500 !important;
margin-bottom:2px !important;
color:var(--main-foreground,#1A1714);
}
.section-informative-banners .service-item p{
font-size:11.5px; line-height:1.45;
color:var(--dnt-muted,#6A655D);
}
@media (min-width:768px){
.section-informative-banners .service-item-container + .service-item-container .service-item{
border-left:1px solid var(--main-foreground-opacity-20,#D8D0C4);
}
}
/*============================================================================
#4 Cómo funciona (custom) — .dnt-how
==============================================================================*/
.dnt-sec-label{
font-size:11px; letter-spacing:.15em; text-transform:uppercase;
color:var(--dnt-muted,#6A655D);
margin:0 0 6px;
}
.dnt-sec-title{
font-family:var(--heading-font,'DM Serif Display',serif);
font-size:20px; font-weight:400; letter-spacing:-.01em;
color:var(--main-foreground,#1A1714);
margin:0 0 20px;
}
.dnt-how{
background:#fff;
padding:30px 24px;
border-top:1px solid var(--main-foreground-opacity-20,#D8D0C4);
border-bottom:1px solid var(--main-foreground-opacity-20,#D8D0C4);
}
/* Capear el contenido al mismo ancho que productos (sección full-width, contenido centrado) */
.dnt-how > *{ max-width:1180px; margin-left:auto; margin-right:auto; }
.dnt-how__steps{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dnt-step{
padding:16px 12px;
border:1px solid var(--main-foreground-opacity-20,#D8D0C4);
border-radius:6px;
background:var(--main-background,#F7F3ED);
}
.dnt-step__n{
font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
color:var(--dnt-gold-text,#806326);
margin:0 0 8px;
}
.dnt-step__t{ font-size:12.5px; font-weight:500; line-height:1.3; color:var(--main-foreground,#1A1714); margin:0 0 4px; }
.dnt-step__d{ font-size:11.5px; line-height:1.5; color:var(--dnt-muted,#6A655D); margin:0; }
.dnt-how__cta{
margin-top:16px; padding:14px 16px;
background:var(--cream2,#EFE9E0);
border:1px solid var(--main-foreground-opacity-20,#D8D0C4);
border-radius:6px;
display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.dnt-how__cta-txt{ font-size:12.5px; color:var(--main-foreground-opacity-70,#4A4540); margin:0; }
.dnt-how__cta-txt strong{ color:var(--main-foreground,#1A1714); font-weight:700; }
@media (max-width:767px){
.dnt-how{ padding:26px 18px; }
.dnt-how__steps{ gap:10px; }
.dnt-step{ padding:14px 12px; }
.dnt-how__cta{ flex-direction:column; align-items:stretch; }
.dnt-how__cta .dnt-btn--sm{ width:100%; min-height:44px; font-size:11.5px; }
}
@media (max-width:380px){ .dnt-how__steps{ grid-template-columns:1fr; } }
@media (min-width:768px){
.dnt-how{ padding:36px 36px; }
.dnt-sec-title{ font-size:24px; }
.dnt-how__steps{ grid-template-columns:repeat(4,1fr); gap:10px; }
}
/*============================================================================
#5 Grilla / cards de producto (home) — overrides sobre clases nativas
Scopeado a body.template-home para no tocar categoría/búsqueda por ahora.
==============================================================================*/
body.template-home .section-featured-home .section-title{
font-family:var(--heading-font,'DM Serif Display',serif) !important;
font-size:18px !important; font-weight:400 !important;
letter-spacing:-.01em;
text-align:center !important;
}
/* Acotar el ancho del bloque para que las cards no queden gigantes en pantallas anchas */
body.template-home .section-featured-home .js-products-featured-container{
max-width:1180px;
margin-left:auto;
margin-right:auto;
}
body.template-home .item-product .item-image{
border-radius:6px; overflow:hidden;
background:var(--cream2,#EFE9E0);
}
body.template-home .item-product .item-name{
font-size:12.5px !important; font-weight:500 !important;
color:var(--main-foreground,#1A1714);
}
body.template-home .item-product .item-price{
font-size:13px !important;
color:var(--main-foreground,#1A1714);
}
body.template-home .item-product .price-compare{
color:var(--dnt-muted,#6A655D);
}
/* "$X con transferencia" (payment-discount-price -> .font-small dentro del precio) */
body.template-home .item-product .item-price-container .font-small{
color:var(--dnt-accent-text,#5F7152) !important;
}
/* Botón de la card: estilo outline editorial + tap target */
body.template-home .item-product .btn-primary{
background:transparent !important;
color:var(--main-foreground-opacity-70,#4A4540) !important;
border:1px solid var(--main-foreground-opacity-20,#D8D0C4) !important;
text-transform:uppercase; letter-spacing:.06em;
font-size:11px !important;
min-height:44px; display:flex; align-items:center; justify-content:center; padding:12px 8px;
transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
body.template-home .item-product .btn-primary:hover{
background:var(--button-background,#1A1714) !important;
color:var(--button-foreground,#F7F3ED) !important;
border-color:var(--button-background,#1A1714) !important;
}
body.template-home .item-product .btn-primary:focus-visible{
outline:2px solid var(--main-foreground,#1A1714); outline-offset:2px;
}
/* Mostrar siempre el botón de compra rápida (el theme lo oculta hasta hover en desktop) */
body.template-home .item-product .js-item-quickshop{ opacity:1 !important; visibility:visible !important; }
/* Mobile: en GRILLA, 2 columnas; en SLIDER, la card llena el slide (sin huecos) */
@media (max-width:767px){
body.template-home .js-products-featured-grid:not(.swiper-wrapper) > .item-product{
flex:0 0 50% !important; max-width:50% !important;
}
body.template-home .js-products-featured-grid.swiper-wrapper .item-product{
flex:0 0 100% !important; max-width:100% !important; width:100% !important;
}
body.template-home .item-product .item-name{ display:block !important; }
}
/*============================================================================
#5b Categorías principales (main_categories nativo) — cards en vez de íconos circulares
==============================================================================*/
body.template-home .section-categories-home{
max-width:1180px; margin-left:auto; margin-right:auto;
padding:12px 24px 4px;
}
body.template-home .section-categories-home .home-category{
width:150px !important; margin-right:18px !important;
}
body.template-home .section-categories-home .home-category-image{
width:150px !important; height:150px !important;
border-radius:10px !important; overflow:hidden !important;
}
body.template-home .section-categories-home .home-category-image img{
position:absolute !important; inset:0 !important; transform:none !important;
width:100% !important; height:100% !important; max-width:none !important; max-height:none !important;
object-fit:cover !important;
}
body.template-home .section-categories-home .home-category-name{
margin-top:8px !important; font-size:12px !important; font-weight:500 !important;
color:var(--main-foreground,#1A1714) !important;
}
/*============================================================================
#6 Carrito
==============================================================================*/
/*============================================================================
#6b Personalización (explainer) + Banda WhatsApp — mitad de abajo
==============================================================================*/
/* Botón claro (sobre fondo oscuro) */
.dnt-btn--light{
background:transparent;
color:#E8E0D0;
border:1px solid rgba(255,255,255,.22);
width:fit-content;
}
.dnt-btn--light:hover{ background:rgba(232,224,208,.08); opacity:1; }
/* --- Personalización --- */
.dnt-pers{
display:grid;
grid-template-columns:1fr; /* mobile: apilado */
max-width:1180px; /* alineado con el resto de las secciones */
margin-left:auto; margin-right:auto;
border-top:1px solid var(--main-foreground-opacity-20,#D8D0C4);
border-bottom:1px solid var(--main-foreground-opacity-20,#D8D0C4);
}
.dnt-pers__left{
background:var(--main-foreground,#1A1714);
padding:32px 28px;
display:flex; flex-direction:column; justify-content:center; gap:14px;
}
.dnt-pers__title{
margin:0;
font-family:var(--heading-font,'DM Serif Display',serif);
font-size:22px; font-weight:400; line-height:1.25; letter-spacing:-.01em;
color:#E8E0D0;
}
.dnt-pers__text{
margin:0;
font-size:13px; line-height:1.7;
color:#B0A99E; /* sobre #1A1714 ≈ 7:1 (AA) */
}
.dnt-pers__right{
background:var(--cream2,#EFE9E0);
padding:24px 22px;
display:flex; flex-direction:column; gap:10px; justify-content:center;
}
.dnt-pers__step{
display:flex; align-items:flex-start; gap:10px;
padding:12px; background:#fff;
border:1px solid var(--main-foreground-opacity-20,#D8D0C4); border-radius:6px;
}
.dnt-pers__num{
flex:0 0 auto;
width:24px; height:24px; border-radius:50%;
background:var(--main-foreground,#1A1714); color:#E8E0D0;
display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; margin-top:1px;
}
.dnt-pers__step-txt strong{ display:block; font-size:12px; color:var(--main-foreground,#1A1714); font-weight:500; margin-bottom:2px; }
.dnt-pers__step-txt span{ font-size:11px; color:var(--dnt-muted,#6A655D); line-height:1.4; }
@media (min-width:768px){
.dnt-pers{ grid-template-columns:1fr 1fr; }
.dnt-pers__left{ padding:44px 40px; }
.dnt-pers__title{ font-size:26px; }
.dnt-pers__right{ padding:32px 36px; }
}
/* --- Banda WhatsApp --- */
.dnt-wa{
max-width:1180px; /* alineado con el resto de las secciones */
margin-left:auto; margin-right:auto;
background:var(--main-foreground,#1A1714);
padding:22px 28px;
display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.dnt-wa__title{ margin:0 0 4px; color:#E8E0D0; font-size:15px; font-weight:500; }
.dnt-wa__sub{ margin:0; color:#B0A99E; font-size:11.5px; }
.dnt-wa__btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
min-height:44px; padding:11px 20px;
background:#25D366; color:#fff; /* verde marca WhatsApp */
border-radius:2px; text-decoration:none;
font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
white-space:nowrap;
}
.dnt-wa__btn:hover{ background:#20bd5a; }
.dnt-wa__btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (max-width:767px){
.dnt-wa{ flex-direction:column; align-items:flex-start; }
.dnt-wa__btn{ width:100%; }
}
/*============================================================================
#7 Accesibilidad global / motion
==============================================================================*/
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}