/* ============================================================================
secciones.css — CSS de secciones del front, consolidado desde los partials
elehaus/*_styles.php (antes inline por página) para que el navegador lo CACHEE
una sola vez (mejor rendimiento/CWV). Clases scoped (.pdp .lg .co- .header-two-area
etc.), así que cargarlo global es inocuo. Cache-busting con ?v= en el .
============================================================================ */
/* ---- nav_styles.php ---- */
/* Skip-link (accesibilidad): oculto hasta recibir foco por teclado */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100000; background:#e73c17; color:#fff; padding:10px 18px; border-radius:0 0 8px 0; font-weight:600; text-decoration:none; }
.skip-link:focus{ left:0; outline:3px solid #fff; outline-offset:-3px; }
/* Foco visible por teclado (accesibilidad) sin afectar clic de mouse */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid #e73c17; outline-offset:2px; border-radius:3px; }
/* Etiqueta solo para lectores de pantalla (no visible, sin afectar el diseño) */
.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; }
/* Desktop "chico" (laptops 1366/1440/1536): baja la escala 10% para mostrar más
contenido en pantalla. No afecta móvil/tablet ni monitores grandes (>=1600). */
@media (min-width:992px) and (max-width:1600px){
body{ zoom:0.9; }
}
/* ===== Estructura: ancho del sitio un poco mayor en pantallas grandes =====
(da aire al nav para que entre en una sola fila; sitewide para mantener
alineado el header con el contenido). */
@media (min-width:1200px){
.container{ max-width:1280px; }
}
/* Hero del inicio: igualar su ancho al del contenido (estilos.css lo capaba a
1200px !important, más angosto que el contenido). Lo subimos a 1280px. */
.hero-six-slider-area .hero-six-slider-container{ max-width:1280px !important; }
/* ===== Header superior (logo / buscador / cuenta / carro) ===== */
/* Buscador centrado y expandido: usa el espacio disponible en vez de quedar
pegado a la derecha con un hueco grande a la izquierda. */
.header-middle .header-search-col{ padding-left:30px; padding-right:30px; }
.header-middle .header-search-box{
margin:0 auto !important;
min-width:0 !important;
width:100%;
max-width:660px;
}
.header-middle .header-actions-col{ flex-shrink:0; }
.header-middle .header-action-account{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.header-middle .header-action-account .fa{ font-size:14px; color:#6b7280; }
.header-middle .header-action-account .ha-sep{ color:#8a909a; font-weight:400; margin:0 1px; }
/* ===== Nav principal — pulido y espaciado optimizado ===== */
.header-two-area .main-nav-item{ padding:0 7px !important; margin:0 !important; }
.header-two-area .main-nav-link{
font-size:14px;
letter-spacing:.01em;
padding:20px 8px;
white-space:nowrap;
}
.header-two-area .main-nav-link .fa-home{ margin-right:5px; }
.header-two-area .main-nav{ align-items:center; }
/* Subrayado animado (hover + activo) en vez del bloque rojo macizo */
.header-two-area .main-nav-item::after{
content:"";
position:absolute;
left:10px; right:10px;
bottom:16px;
height:2px;
background:#e73c17;
border-radius:2px;
transform:scaleX(0);
transform-origin:left center;
transition:transform .25s ease;
pointer-events:none;
}
.header-two-area .main-nav-item:hover::after{ transform:scaleX(1); }
/* Estado activo: texto acento + subrayado (anula el background rojo de estilos.css) */
.header-two-area .main-nav-item.activar{ background:transparent !important; border-radius:0 !important; }
.header-two-area .main-nav-item.activar > .main-nav-link{ background:transparent !important; color:#e73c17 !important; }
.header-two-area .main-nav-item.activar::after{ transform:scaleX(1); }
/* Hover: mismo lenguaje (estilos.css forzaba un bloque rojo en hover, lo anulamos) */
.header-two-area .main-nav-item:hover{ background:transparent !important; border-radius:0 !important; }
.header-two-area .main-nav-item:hover > .main-nav-link{ color:#e73c17 !important; }
/* Caret en ítems con submenú */
.header-two-area .main-nav-item.has-submenu > .main-nav-link::after{
content:"\f107";
font-family:"FontAwesome";
font-size:11px;
margin-left:7px;
opacity:.65;
transition:transform .2s ease;
display:inline-block;
}
.header-two-area .main-nav-item.has-submenu:hover > .main-nav-link::after{ transform:rotate(180deg); opacity:1; }
/* ===== Categoría "Ofertas" destacada (píldora borde + pulso) ===== */
.header-two-area .main-nav-item.main-nav-ofertas{ display:flex; align-items:center; margin:0 !important; padding:0 4px !important; background:transparent !important; border-radius:8px !important; }
.header-two-area .main-nav-item.main-nav-ofertas:hover{ background:transparent !important; }
.header-two-area .main-nav-item.main-nav-ofertas::after{ display:none; }
.header-two-area .main-nav-item.main-nav-ofertas > .main-nav-link{
border:1.5px solid #e73c17;
color:#ff6a4d !important;
border-radius:8px;
padding:7px 13px !important;
line-height:1;
display:inline-flex;
align-items:center;
gap:7px;
white-space:nowrap;
animation:ofertasPulse 2.2s ease-in-out infinite;
}
.header-two-area .main-nav-item.main-nav-ofertas > .main-nav-link:hover{
background:#e73c17 !important;
color:#fff !important;
}
.header-two-area .main-nav-ofertas .nav-fire{ font-size:13px; line-height:1; }
@keyframes ofertasPulse{
0%,100%{ box-shadow:0 0 0 0 rgba(231,60,23,.45); }
50%{ box-shadow:0 0 0 7px rgba(231,60,23,0); }
}
@media (prefers-reduced-motion: reduce){
.header-two-area .main-nav-item.main-nav-ofertas > .main-nav-link{ animation:none; }
}
/* ===== Dropdowns modernos ===== */
.header-two-area .submenu-nav,
.header-two-area .submenu-nav-mega{
border-radius:14px;
border:1px solid #eef0f2;
box-shadow:0 18px 44px rgba(17,24,39,.16);
padding:10px;
margin-top:18px;
}
.header-two-area .has-submenu:hover .submenu-nav,
.header-two-area .has-submenu:hover .submenu-nav-mega{ margin-top:10px; }
/* Puente invisible: cubre el espacio entre el ítem y el menú para que NO se
oculte al mover el mouse hacia él (mantiene el :hover del .has-submenu). */
.header-two-area .has-submenu > .submenu-nav::before,
.header-two-area .has-submenu > .submenu-nav-mega::before{
content:"";
position:absolute;
left:0; right:0;
top:-16px;
height:18px;
background:transparent;
}
.header-two-area .submenu-nav-item{ border-bottom:0; }
.header-two-area .submenu-nav-link{
border-radius:10px;
padding:11px 15px;
font-size:13.5px;
font-weight:500;
color:#374151;
transition:background .15s ease, color .15s ease;
}
.header-two-area .submenu-nav-link:hover{
background:#fff7f5;
color:#e73c17;
}
/* Ítems con submenú anidado: caret a la derecha + no se ocultan al ir al flyout */
.header-two-area .submenu-nav .has-submenu > .submenu-nav-link::before{ color:#6b7280; }
.header-two-area .submenu-nav .has-submenu:hover > .submenu-nav-link{ background:#fff7f5; color:#e73c17; }
.header-two-area .submenu-nav .has-submenu > .submenu-nav{
margin-top:0 !important;
border-radius:14px;
border:1px solid #eef0f2;
box-shadow:0 18px 44px rgba(17,24,39,.16);
}
.header-two-area .submenu-nav .has-submenu > .submenu-nav::before{
content:""; position:absolute; left:-14px; top:0; width:16px; height:100%; background:transparent;
}
/* Mega menú */
.header-two-area .submenu-nav-mega{ padding:16px; gap:8px; }
.header-two-area .submenu-nav-mega-item{ border-right:1px solid #f1f2f4; padding:0 16px; }
.header-two-area .submenu-nav-mega-item:last-child{ border-right:0; }
.header-two-area .mega-title{
display:inline-block;
color:#1f2937 !important;
font-weight:700;
font-size:12.5px;
text-transform:uppercase;
letter-spacing:.04em;
margin-bottom:6px;
padding:4px 6px;
}
.header-two-area .mega-title:hover{ color:#e73c17 !important; }
.header-two-area .submenu-nav-mega-link{
border-radius:8px;
padding:7px 10px;
font-size:13.5px;
color:#4b5563;
transition:background .15s ease, color .15s ease;
}
.header-two-area .submenu-nav-mega-link:hover{ background:#fff7f5; color:#e73c17; }
/* ---- footer_styles.php ---- */
/* Desplegables del footer en móvil: el theme los pintaba con su gris antiguo
(#353535 / #3f3f3f). Los alineamos con la paleta de marca (#1f2937). */
@media (max-width:767px){
.footer-main .widget-title.widget-collapsed-title{
background-color:#2a3645 !important;
border:1px solid #2a3645 !important;
}
.footer-main .widget-title.widget-collapsed-title:not(.collapsed){
background-color:#2a3645 !important;
}
.footer-main .widget-collapse-body{
background-color:#172029 !important;
border:1px solid #2a3645 !important;
border-top:0 !important;
}
}
/* Títulos de columna con detalle de acento */
.footer-three-area .widget-title.negrita{ position:relative; padding-bottom:11px; margin-bottom:18px; font-size:1rem; letter-spacing:.01em; }
.footer-three-area .widget-title.negrita::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:#e73c17; border-radius:2px; }
/* Enlaces de los menús */
.footer-three-area .widget-nav li{ margin-bottom:9px; }
.footer-three-area .widget-nav a{ color:#c7cedb; transition:color .15s ease, padding-left .15s ease; }
.footer-three-area .widget-nav a:hover{ color:#ff8a70; padding-left:5px; }
/* Bloque de contacto con íconos FA */
.footer-three-area .fc-item{ display:flex; align-items:flex-start; gap:11px; margin-bottom:14px; color:#c7cedb; }
.footer-three-area .fc-item .fc-ic{ color:#ff8a70; width:18px; text-align:center; margin-top:3px; flex-shrink:0; font-size:1rem; }
.footer-three-area .fc-item p{ margin:0; line-height:1.55; }
.footer-three-area .fc-item a{ color:#c7cedb; transition:color .15s ease; }
.footer-three-area .fc-item a:hover{ color:#fff; }
.footer-three-area .fc-item .info-item-call a{ display:block; }
/* Redes sociales en círculos */
.footer-three-area .footer-social{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
@media (min-width:992px){ .footer-three-area .footer-social{ margin-top:70px; } }
.footer-three-area .footer-social a{ width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); color:#fff; font-size:1.05rem; transition:background .18s ease, transform .18s ease; }
.footer-three-area .footer-social a svg{ width:17px; height:17px; fill:currentColor; }
.footer-three-area .footer-social a:hover{ background:#e73c17; color:#fff; transform:translateY(-3px); }
.footer-three-area .footer-social a.s-wa:hover{ background:#25D366; }
.footer-three-area .footer-social a.s-yt:hover{ background:#FF0000; }
.footer-three-area .footer-social a.s-ig:hover{ background:#E1306C; }
.footer-three-area .footer-social a.s-fb:hover{ background:#1877F2; }
.footer-three-area .footer-social a.s-tk:hover{ background:#000; }
/* Bloque inferior */
.footer-three-area .footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:12px; padding-top:20px; }
.footer-three-area .footer-bottom .copyright{ color:#9aa6b5; font-size:.85rem; margin:0; }
.footer-three-area .footer-bottom .copyright a{ color:#c7cedb; }
.footer-three-area .footer-bottom .copyright a:hover{ color:#fff; }
/* ---- sidebar_style.php ---- */
.sidebar-modern{ --accent:#e73c17; }
/* Sticky removido: con muchas categorías el sidebar superaba el alto de la
pantalla y no se podía ver todo su contenido. Ahora hace scroll con la página. */
.sidebar-modern .sidebar-widget{
background:#fff;
border:1px solid #eef0f2;
border-radius:16px;
box-shadow:0 2px 10px rgba(17,24,39,.05);
padding:18px 16px 20px;
margin-bottom:22px;
}
.sidebar-modern .sidebar-title{
font-size:1.05rem;
font-weight:700;
color:#1f2937;
margin:0 0 1rem;
padding-bottom:.7rem;
border-bottom:1px solid #f1f2f4;
position:relative;
}
.sidebar-modern .sidebar-title::after{
content:"";
position:absolute;
left:0;
bottom:-1px;
width:42px;
height:2px;
background:var(--accent);
}
/* ---- Árbol de categorías ---- */
.sidebar-modern .cat-tree,
.sidebar-modern .cat-subtree{ list-style:none; margin:0; padding:0; }
.sidebar-modern .cat-tree-row{
display:flex;
align-items:center;
border-radius:8px;
transition:background .15s ease;
}
.sidebar-modern .cat-tree-row:hover{ background:#f8f9fa; }
.sidebar-modern .cat-tree-link{
flex:1;
display:flex;
align-items:center;
justify-content:flex-start;
gap:.45rem;
color:#374151;
text-decoration:none;
font-weight:500;
font-size:.92rem;
line-height:1.3;
padding:.5rem .55rem;
transition:color .15s ease;
}
.sidebar-modern .cat-tree-link:hover{ color:var(--accent); }
/* Ancestro activo (rama abierta): énfasis sutil, sin fondo ni barra */
.sidebar-modern .cat-tree-item.active > .cat-tree-row > .cat-tree-link{
color:#1f2937;
font-weight:600;
}
/* Página actual (item más profundo): solo texto rojo, sin barra ni fondo */
.sidebar-modern .cat-tree-item.current > .cat-tree-row > .cat-tree-link{
color:var(--accent);
font-weight:600;
}
.sidebar-modern .cat-count{
font-size:.7rem;
font-weight:600;
color:#6b7280;
background:#f1f2f4;
border-radius:20px;
padding:.08rem .5rem;
flex-shrink:0;
}
.sidebar-modern .cat-toggle{
background:none;
border:0;
cursor:pointer;
padding:.45rem .55rem;
display:flex;
align-items:center;
}
.sidebar-modern .cat-toggle .chev{
width:.7rem;
height:.7rem;
display:block;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='%239ca3af'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3e%3c/svg%3e");
transition:transform .25s ease;
}
.sidebar-modern .cat-toggle.collapsed .chev{ transform:rotate(-90deg); }
.sidebar-modern .cat-subtree{
margin:.1rem 0 .3rem .8rem;
padding-left:.6rem;
border-left:1px solid #eef0f2;
}
.sidebar-modern .cat-subtree .cat-tree-link{ font-size:.85rem; font-weight:400; }
.sidebar-modern .cat-subtree .cat-subtree .cat-tree-link{ font-size:.8rem; }
/* ---- Ofertas ---- */
.sidebar-modern .sidebar-offer{
display:flex;
gap:.7rem;
align-items:center;
padding:.55rem;
border-radius:12px;
text-decoration:none;
transition:background .15s ease;
position:relative;
}
.sidebar-modern .sidebar-offer:hover{ background:#f8f9fa; }
.sidebar-modern .sidebar-offer-thumb{
width:62px;
height:62px;
flex-shrink:0;
border-radius:10px;
background:#fff;
border:1px solid #eef0f2;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.sidebar-modern .sidebar-offer-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.sidebar-modern .sidebar-offer-title{
font-size:.82rem;
font-weight:600;
color:#1f2937;
line-height:1.3;
margin:0 0 .25rem;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.sidebar-modern .sidebar-offer-price{
font-size:.92rem;
font-weight:700;
color:var(--accent);
}
.sidebar-modern .sidebar-offer-price .old{
font-size:.75rem;
font-weight:500;
color:#6b7280;
text-decoration:line-through;
margin-left:.3rem;
}
.sidebar-modern .sidebar-offer-badge{
position:absolute;
top:.4rem;
left:.4rem;
background:var(--accent);
color:#fff;
font-size:.62rem;
font-weight:700;
border-radius:20px;
padding:.05rem .4rem;
box-shadow:0 2px 5px rgba(231,60,23,.3);
}
.sidebar-modern .sidebar-see-all{
display:block;
text-align:center;
margin-top:.7rem;
padding-top:.7rem;
border-top:1px solid #f1f2f4;
font-size:.85rem;
font-weight:600;
color:var(--accent);
text-decoration:none;
}
.sidebar-modern .sidebar-see-all:hover{ text-decoration:underline; }
/* ---- Menú móvil (offcanvas): árbol con targets más grandes ---- */
.mobile-tree .cat-tree-link{ padding:.72rem .6rem; font-size:.97rem; }
.mobile-tree .cat-toggle{ padding:.6rem .6rem; }
.mobile-tree .cat-subtree{ margin-left:.7rem; }
.mobile-tree .cat-tree-item{ border-bottom:1px solid #f4f5f6; }
.mobile-tree .cat-subtree .cat-tree-item:last-child{ border-bottom:0; }
/* ---- cart_toast_style.php ---- */
#snc-toasts{
position:fixed;
top:90px;
right:20px;
z-index:9999;
display:flex;
flex-direction:column;
gap:12px;
width:330px;
max-width:calc(100vw - 40px);
pointer-events:none;
}
#snc-toasts .cart-toast,
#snc-toasts .snc-toast{ pointer-events:auto; }
.cart-toast{
background:#fff;
border:1px solid #eef0f2;
border-radius:14px;
box-shadow:0 14px 36px rgba(17,24,39,.18);
padding:15px 15px 0;
position:relative;
overflow:hidden;
transform:translateX(120%);
opacity:0;
transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .45s ease;
}
.cart-toast.show{ transform:translateX(0); opacity:1; }
.cart-toast.hide{ transform:translateX(120%); opacity:0; }
.cart-toast-close{
position:absolute;
top:7px;
right:11px;
background:none;
border:0;
font-size:19px;
line-height:1;
color:#8a909a;
cursor:pointer;
}
.cart-toast-close:hover{ color:#1f2937; }
.cart-toast-body{ display:flex; gap:12px; align-items:flex-start; padding-right:16px; }
.cart-toast-icon{
width:34px;
height:34px;
border-radius:50%;
background:#16a34a;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
flex-shrink:0;
}
.cart-toast-text{ display:flex; flex-direction:column; min-width:0; }
.cart-toast-text strong{ font-size:.95rem; color:#1f2937; }
.cart-toast-name{
font-size:.84rem;
color:#6b7280;
line-height:1.3;
margin-top:2px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.cart-toast-btn{
display:block;
text-align:center;
margin:13px 0 15px;
background:#e73c17;
color:#fff;
font-weight:600;
font-size:.85rem;
border-radius:30px;
padding:.55rem;
text-decoration:none;
transition:background .2s ease;
}
.cart-toast-btn:hover{ background:#cf3414; color:#fff; }
.cart-toast-bar{
position:absolute;
bottom:0;
left:0;
height:3px;
background:#e73c17;
width:100%;
}
.cart-toast-bar.run{ animation:cartToastBar 4s linear forwards; }
@keyframes cartToastBar{ from{ width:100%; } to{ width:0; } }
@media (max-width:575px){
#snc-toasts{ top:auto; bottom:18px; right:12px; left:12px; width:auto; }
.cart-toast{ transform:translateY(140%); }
.cart-toast.show{ transform:translateY(0); }
.cart-toast.hide{ transform:translateY(140%); }
}
/* ---- Toast genérico (Notify) — mismo estilo que el del carro ---- */
.snc-toast{
background:#fff;
border:1px solid #eef0f2;
border-radius:14px;
box-shadow:0 14px 36px rgba(17,24,39,.18);
padding:14px 16px;
position:relative;
overflow:hidden;
display:flex;
align-items:flex-start;
gap:12px;
transform:translateX(120%);
opacity:0;
transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .45s ease;
}
.snc-toast.show{ transform:translateX(0); opacity:1; }
.snc-toast.hide{ transform:translateX(120%); opacity:0; }
.snc-toast-icon{
width:30px; height:30px; border-radius:50%; color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:13px; flex-shrink:0; margin-top:1px;
}
.snc-toast.success .snc-toast-icon{ background:#16a34a; }
.snc-toast.error .snc-toast-icon{ background:#e11d48; }
.snc-toast.warning .snc-toast-icon{ background:#d97706; }
.snc-toast.info .snc-toast-icon{ background:#2563eb; }
.snc-toast-text{ font-size:.9rem; color:#1f2937; line-height:1.4; padding-right:14px; flex:1; min-width:0; }
.snc-toast-text strong{ font-weight:700; }
.snc-toast-close{ position:absolute; top:6px; right:10px; background:none; border:0; font-size:18px; line-height:1; color:#8a909a; cursor:pointer; }
.snc-toast-close:hover{ color:#1f2937; }
.snc-toast-bar{ position:absolute; bottom:0; left:0; height:3px; width:100%; }
.snc-toast.success .snc-toast-bar{ background:#16a34a; }
.snc-toast.error .snc-toast-bar{ background:#e11d48; }
.snc-toast.warning .snc-toast-bar{ background:#d97706; }
.snc-toast.info .snc-toast-bar{ background:#2563eb; }
.snc-toast-bar.run{ animation:sncToastBar 4s linear forwards; }
@keyframes sncToastBar{ from{ width:100%; } to{ width:0; } }
@media (max-width:575px){
.snc-toast{ transform:translateY(140%); }
.snc-toast.show{ transform:translateY(0); }
.snc-toast.hide{ transform:translateY(140%); }
}
/* ---- home_styles.php ---- */
/* Banners promocionales del inicio. La imagen se muestra COMPLETA (modo "fit" en img(),
sin recorte), porque las imágenes ya traen su composición/franjas y recortarlas
("cover") perdía contenido. La card lleva overflow:hidden + border-radius y la imagen
va width:100% height:auto: el alto de la card = alto de la imagen, así que la imagen
toma exactamente la forma de la card. align-items:start evita que el grid estire una
card respecto de la otra. Hover: sombra + zoom suave recortado por overflow:hidden. */
.snc-banners{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; align-items:start; }
.snc-banner{ display:block; border:1px solid #eef0f2; border-radius:16px; overflow:hidden; text-decoration:none; box-shadow:0 1px 4px rgba(17,24,39,.06); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.snc-banner:hover{ border-color:#fde3dc; box-shadow:0 12px 30px rgba(17,24,39,.14); transform:translateY(-4px); }
.snc-banner .snc-media{ overflow:hidden; line-height:0; }
.snc-banner .snc-media img{ display:block; width:100%; height:auto; border-radius:16px; transition:transform .35s ease; }
.snc-banner:hover .snc-media img{ transform:scale(1.06); }
@media (max-width:767px){ .snc-banners{ grid-template-columns:1fr; gap:18px; } }
.home-modern{ --accent:#e73c17; --dark:#1f2937; }
.home-modern .home-section{ padding:64px 0; }
.home-modern .home-section--alt{ background:#f7f8fa; }
@media (max-width:767px){ .home-modern .home-section{ padding:42px 0; } }
/* Encabezado de sección */
.home-modern .home-head{ margin-bottom:34px; }
.home-modern .home-head.center{ text-align:center; }
.home-modern .home-eyebrow{ display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); background:#fdecea; padding:5px 13px; border-radius:999px; margin-bottom:12px; }
.home-modern .home-title{ font-weight:700; color:var(--dark); font-size:1.9rem; margin:0; line-height:1.2; }
.home-modern .home-sub{ color:#6b7280; font-size:.98rem; margin-top:10px; max-width:640px; }
.home-modern .home-head.center .home-sub{ margin-left:auto; margin-right:auto; }
.home-modern .home-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.home-modern .home-seeall{ color:var(--accent); font-weight:600; font-size:.92rem; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.home-modern .home-seeall:hover{ gap:9px; }
@media (max-width:767px){ .home-modern .home-title{ font-size:1.5rem; } }
/* Barra de confianza */
.home-modern .trust-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.home-modern .trust-item{ display:flex; align-items:center; gap:13px; background:#fff; border:1px solid #eef0f2; border-radius:14px; padding:18px 20px; box-shadow:0 2px 10px rgba(17,24,39,.04); }
.home-modern .trust-item .ti-ic{ width:46px; height:46px; flex-shrink:0; border-radius:12px; background:#fff7f5; color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.home-modern .trust-item h4{ font-size:.95rem; font-weight:700; color:var(--dark); margin:0 0 2px; }
.home-modern .trust-item p{ font-size:.82rem; color:#6b7280; margin:0; line-height:1.4; }
@media (max-width:991px){ .home-modern .trust-bar{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:479px){ .home-modern .trust-bar{ grid-template-columns:1fr; } }
/* Grilla de categorías */
.home-modern .cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.home-modern .cat-card{ display:block; background:#fff; border:1px solid #eef0f2; border-radius:16px; overflow:hidden; text-decoration:none; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.home-modern .cat-card:hover{ border-color:#fde3dc; box-shadow:0 12px 30px rgba(231,60,23,.1); transform:translateY(-4px); }
.home-modern .cat-card .cat-media{ height:128px; background:#f6f7f8; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.home-modern .cat-card .cat-img-rect{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.home-modern .cat-card:hover .cat-img-rect{ transform:scale(1.06); }
.home-modern .cat-card .cat-ic{ font-size:2.1rem; color:#8a909a; }
.home-modern .cat-card .cat-body{ padding:14px 16px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.home-modern .cat-card h3{ font-size:1rem; font-weight:700; color:var(--dark); margin:0 0 3px; line-height:1.25; }
.home-modern .cat-card .cat-count{ font-size:.8rem; color:#6b7280; font-weight:500; }
.home-modern .cat-card .cat-go{ color:#8a909a; flex-shrink:0; transition:color .2s ease, transform .2s ease; }
.home-modern .cat-card:hover .cat-go{ color:var(--accent); transform:translateX(3px); }
@media (max-width:991px){ .home-modern .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:575px){ .home-modern .cat-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } .home-modern .cat-card .cat-media{ height:104px; } }
/* Índice de categorías: tarjeta rica con subcategorías */
.home-modern .cat-index-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.home-modern .cic{ background:#fff; border:1px solid #eef0f2; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.home-modern .cic:hover{ border-color:#fde3dc; box-shadow:0 14px 32px rgba(231,60,23,.1); transform:translateY(-4px); }
.home-modern .cic-media{ display:block; height:160px; background:#f6f7f8; overflow:hidden; }
.home-modern .cic-media img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.home-modern .cic:hover .cic-media img{ transform:scale(1.06); }
.home-modern .cic-media .cic-ph{ display:flex; align-items:center; justify-content:center; height:100%; color:#8a909a; font-size:2.2rem; }
.home-modern .cic-body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.home-modern .cic-body h2{ font-size:1.12rem; font-weight:700; margin:0 0 3px; line-height:1.25; }
.home-modern .cic-body h2 a{ color:var(--dark); text-decoration:none; }
.home-modern .cic-body h2 a:hover{ color:var(--accent); }
.home-modern .cic-count{ font-size:.82rem; color:#6b7280; font-weight:500; margin-bottom:13px; }
.home-modern .cic-subs{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
.home-modern .cic-subs a{ font-size:.78rem; background:#f6f7f8; color:#4b5563; padding:5px 11px; border-radius:999px; text-decoration:none; transition:background .15s ease, color .15s ease; }
.home-modern .cic-subs a:hover{ background:#fff7f5; color:var(--accent); }
.home-modern .cic-subs a.more{ background:transparent; color:var(--accent); font-weight:600; padding-left:4px; }
@media (max-width:991px){ .home-modern .cat-index-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:575px){ .home-modern .cat-index-grid{ grid-template-columns:1fr; } }
/* Tabs de destacados (rediseño del nav-tabs) */
.home-modern .home-tabs .nav-tabs{ border:0; gap:10px; margin-bottom:28px; flex-wrap:wrap; }
.home-modern .home-tabs .nav-tabs .nav-link{ border:1px solid #e5e7eb !important; border-radius:30px; color:#374151; font-weight:600; font-size:.9rem; padding:9px 20px; background:#fff; transition:all .18s ease; }
.home-modern .home-tabs .nav-tabs .nav-link:hover{ border-color:var(--accent) !important; color:var(--accent); }
.home-modern .home-tabs .nav-tabs .nav-link.active{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; box-shadow:0 6px 16px rgba(231,60,23,.25); }
/* Tarjeta de producto vertical (ofertas / top ventas) */
.home-modern .hprod-card{ background:#fff; border:1px solid #eef0f2; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; height:100%; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.home-modern .hprod-card:hover{ border-color:#e5e7eb; box-shadow:0 14px 30px rgba(17,24,39,.1); transform:translateY(-4px); }
.home-modern .hprod-thumb{ position:relative; display:flex; align-items:center; justify-content:center; height:158px; background:#fff; padding:14px; }
.home-modern .hprod-thumb img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transition:transform .35s ease; }
.home-modern .hprod-card:hover .hprod-thumb img{ transform:scale(1.06); }
.home-modern .hprod-badge{ position:absolute; top:12px; left:12px; background:var(--accent); color:#fff; font-size:.74rem; font-weight:700; padding:3px 11px; border-radius:999px; box-shadow:0 3px 8px rgba(231,60,23,.3); }
.home-modern .hprod-body{ padding:12px 16px 18px; text-align:center; border-top:1px solid #f4f5f7; display:flex; flex-direction:column; flex:1; }
.home-modern .hprod-brand{ display:block; color:#6b7280; font-size:.71rem; text-transform:uppercase; letter-spacing:.04em; font-weight:600; margin-bottom:4px; }
.home-modern .hprod-title{ font-size:.9rem; line-height:1.35; margin:0 0 10px; min-height:2.45em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.home-modern .hprod-title a{ color:var(--dark); text-decoration:none; }
.home-modern .hprod-title a:hover{ color:var(--accent); }
.home-modern .hprod-price{ margin-top:auto; font-weight:800; color:var(--accent); font-size:1.1rem; }
.home-modern .hprod-price .old{ font-size:.82rem; color:#6b7280; text-decoration:line-through; font-weight:500; margin-left:6px; }
/* Catálogo: 5 por fila en desktop (flex explícito; los row-cols no aplicaban) */
.home-modern .products-modern > .col-5ths{ flex:0 0 50%; max-width:50%; min-width:0; padding-left:.25rem; padding-right:.25rem; }
@media (min-width:768px){ .home-modern .products-modern > .col-5ths{ flex:0 0 33.333%; max-width:33.333%; } }
@media (min-width:992px){ .home-modern .products-modern > .col-5ths{ flex:0 0 20%; max-width:20%; } }
/* Grilla de 5 (top ventas / destacados) */
.home-modern .home-grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:1199px){ .home-modern .home-grid-5{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:991px){ .home-modern .home-grid-5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:575px){ .home-modern .home-grid-5{ grid-template-columns:repeat(2,1fr); gap:10px; } }
/* Carrusel de productos (Swiper del tema, autoplay/loop) */
.home-modern .home-carousel{ position:relative; }
.home-modern .home-carousel .product-slider-two-container{ padding:6px 2px 12px; }
.home-modern .home-carousel .swiper-slide{ height:auto; }
.home-modern .home-carousel .swiper-slide .hprod-card{ height:100%; }
.home-modern .carousel-nav{ display:flex; gap:8px; align-items:center; }
.home-modern .carousel-nav .swiper-button-prev,
.home-modern .carousel-nav .swiper-button-next{ position:static; margin:0; width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid #e5e7eb; color:#374151; box-shadow:0 2px 8px rgba(17,24,39,.06); transition:background .18s ease, border-color .18s ease, color .18s ease; }
.home-modern .carousel-nav .swiper-button-prev:hover,
.home-modern .carousel-nav .swiper-button-next:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.home-modern .carousel-nav .swiper-button-prev::after,
.home-modern .carousel-nav .swiper-button-next::after{ font-size:15px; font-weight:700; }
/* Marcas */
.home-modern .brand-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.home-modern .brand-chip{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #eef0f2; border-radius:12px; padding:14px 22px; font-weight:700; color:var(--dark); font-size:1.02rem; letter-spacing:.01em; text-decoration:none; transition:border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.home-modern .brand-chip i{ color:var(--accent); font-size:.95rem; }
.home-modern .brand-chip:hover{ border-color:#fde3dc; color:var(--accent); box-shadow:0 8px 20px rgba(231,60,23,.08); }
/* About / GEO */
.home-modern .home-about{ background:linear-gradient(135deg,#1f2937 0%,#2b3950 100%); border-radius:22px; padding:48px 44px; color:#fff; }
.home-modern .home-about .ha-eyebrow{ display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#ff8a70; margin-bottom:12px; }
.home-modern .home-about h1{ font-size:1.85rem; font-weight:700; color:#fff; margin:0 0 14px; line-height:1.25; }
.home-modern .home-about p{ color:#cbd3df; font-size:1rem; line-height:1.7; margin:0 0 10px; max-width:760px; }
.home-modern .home-about .ha-meta{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:22px; }
.home-modern .home-about .ha-meta span{ display:inline-flex; align-items:center; gap:8px; color:#e7ebf1; font-size:.92rem; font-weight:500; }
.home-modern .home-about .ha-meta i{ color:#ff8a70; }
.home-modern .home-about .ha-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:26px; background:var(--accent); color:#fff; font-weight:600; padding:12px 24px; border-radius:30px; text-decoration:none; transition:background .2s ease; }
.home-modern .home-about .ha-btn:hover{ background:#cf3414; }
.home-modern .home-about .ha-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:24px 26px; }
.home-modern .home-about .ha-card-title{ font-weight:700; color:#fff; font-size:1rem; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.home-modern .home-about .ha-card-title i{ color:#ff8a70; }
.home-modern .home-about .ha-list{ list-style:none; margin:0; padding:0; }
.home-modern .home-about .ha-list li{ display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.08); color:#dfe5ee; font-size:.92rem; line-height:1.45; }
.home-modern .home-about .ha-list li:last-child{ border-bottom:0; }
.home-modern .home-about .ha-list li i{ color:#ff8a70; margin-top:2px; flex-shrink:0; width:16px; text-align:center; }
.home-modern .home-about .ha-list li strong{ color:#fff; display:block; font-weight:600; margin-bottom:1px; }
@media (max-width:767px){ .home-modern .home-about{ padding:34px 24px; } .home-modern .home-about h1{ font-size:1.45rem; } }
/* Reseñas */
.home-modern .reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.home-modern .review-card{ background:#fff; border:1px solid #eef0f2; border-radius:16px; padding:24px; box-shadow:0 2px 10px rgba(17,24,39,.04); display:flex; flex-direction:column; }
.home-modern .review-stars{ color:#f5a623; font-size:.92rem; letter-spacing:1px; margin-bottom:12px; }
.home-modern .review-text{ color:#374151; font-size:.95rem; line-height:1.65; flex:1; margin:0 0 16px; }
.home-modern .review-author{ display:flex; align-items:center; gap:11px; }
.home-modern .review-avatar{ width:42px; height:42px; border-radius:50%; background:#fff7f5; color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem; flex-shrink:0; }
.home-modern .review-author .ra-name{ font-weight:700; color:var(--dark); font-size:.9rem; }
.home-modern .review-author .ra-src{ font-size:.78rem; color:#6b7280; display:flex; align-items:center; gap:5px; }
.home-modern .reviews-cta{ text-align:center; margin-top:28px; }
@media (max-width:991px){ .home-modern .reviews-grid{ grid-template-columns:1fr; } }
/* ---- producto_styles.php ---- */
.pdp{ --accent:#e73c17; --dark:#1f2937; }
/* ===== Galería (propia, sin swiper) ===== */
.pdp .pdp-gallery{ position:relative; }
.pdp .pdp-gmain{ position:relative; border:1px solid #eef0f2; border-radius:16px; background:#fff; height:460px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pdp .pdp-gmain-img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; padding:24px; cursor:zoom-in; transition:opacity .15s ease; }
.pdp .pdp-badge{ position:absolute; top:16px; left:16px; z-index:3; background:var(--accent); color:#fff; font-size:.82rem; font-weight:700; padding:5px 13px; border-radius:999px; box-shadow:0 4px 10px rgba(231,60,23,.3); }
.pdp .pdp-garrow{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid #e5e7eb; color:#374151; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(17,24,39,.1); cursor:pointer; z-index:2; transition:background .18s ease, border-color .18s ease, color .18s ease; }
.pdp .pdp-garrow.prev{ left:14px; }
.pdp .pdp-garrow.next{ right:14px; }
.pdp .pdp-garrow:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pdp .pdp-gzoom{ position:absolute; bottom:14px; right:14px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.92); border:1px solid #e5e7eb; color:#374151; display:flex; align-items:center; justify-content:center; cursor:zoom-in; z-index:2; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.pdp .pdp-gzoom:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.pdp .pdp-gthumbs{ display:flex; gap:10px; margin-top:14px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.pdp .pdp-gthumb{ flex:0 0 auto; width:74px; height:74px; border:2px solid #eef0f2; border-radius:12px; background:#fff; padding:5px; cursor:pointer; overflow:hidden; transition:border-color .18s ease; }
.pdp .pdp-gthumb img{ width:100%; height:100%; object-fit:contain; }
.pdp .pdp-gthumb.active{ border-color:var(--accent); }
.pdp .pdp-gthumb:hover{ border-color:#fbd9d2; }
.pdp .pdp-fbx-group{ display:none; }
@media (max-width:991px){ .pdp .pdp-gmain{ height:340px; } }
/* ===== Buy box ===== */
.pdp .pdp-brand{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); background:#fdecea; padding:5px 13px; border-radius:999px; text-decoration:none; margin-bottom:12px; }
.pdp .pdp-brand:hover{ background:#fbd9d2; color:var(--accent); }
.pdp h1.producto-nombre{ font-size:1.7rem; font-weight:700; color:var(--dark); line-height:1.25; margin:0 0 14px; }
.pdp .pdp-price-wrap{ margin-bottom:6px; }
.pdp .pdp-price{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pdp .pdp-price-now{ font-size:2rem; font-weight:800; color:var(--accent); line-height:1; }
.pdp .pdp-price-old{ font-size:1.1rem; color:#6b7280; text-decoration:line-through; font-weight:500; }
.pdp .pdp-save{ font-size:.78rem; font-weight:700; color:#fff; background:var(--accent); padding:3px 10px; border-radius:999px; }
.pdp .pdp-save-line{ font-size:.9rem; color:#16a34a; font-weight:600; margin-top:6px; }
.pdp .product-detail-desc{ color:#6b7280; line-height:1.65; font-size:.95rem; margin:16px 0; }
.pdp hr.hr{ border:0; border-top:1px solid #eef0f2; opacity:1; margin:18px 0; }
/* Stock */
.pdp .pdp-stock{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; padding:8px 14px; border-radius:10px; margin:2px 0 18px; }
.pdp .pdp-stock.in{ color:#16a34a; background:#e7f6ec; }
.pdp .pdp-stock.low{ color:#b45309; background:#fef6e7; }
.pdp .pdp-stock.out{ color:#e11d48; background:#fef2f2; }
/* Acciones */
.pdp .pro-qty{ margin-right:12px; }
.pdp .product-detail-cart-btn.add-to-cart-btn{ background:#1f2937 !important; color:#fff !important; border:0 !important; border-radius:30px !important; font-weight:600; padding:0 24px; height:52px; transition:background .2s ease; }
.pdp .product-detail-cart-btn.add-to-cart-btn:hover{ background:#111827 !important; }
.pdp .btn-comprar{ background:var(--accent) !important; color:#fff !important; border:0 !important; border-radius:30px !important; font-weight:600; padding:0 26px; height:52px; transition:background .2s ease; }
.pdp .btn-comprar:hover{ background:#cf3414 !important; color:#fff !important; }
.pdp .btn-comprar.btn-cotizar{ display:inline-flex; align-items:center; gap:8px; }
.pdp .product-detail-cart-btn:not(.add-to-cart-btn){ background:#f1f2f4; color:#6b7280; border:0; border-radius:30px; height:52px; padding:0 26px; font-weight:600; cursor:not-allowed; }
/* Sellos de confianza */
.pdp .pdp-trust{ list-style:none; padding:16px 18px; margin:20px 0; background:#f8f9fb; border:1px solid #eef0f2; border-radius:14px; }
.pdp .pdp-trust li{ display:flex; align-items:flex-start; gap:11px; font-size:.86rem; color:#4b5563; padding:7px 0; line-height:1.45; }
.pdp .pdp-trust li:not(:last-child){ border-bottom:1px solid #eef0f2; }
.pdp .pdp-trust li i{ color:var(--accent); width:18px; text-align:center; margin-top:2px; flex-shrink:0; }
.pdp .pdp-trust li strong{ color:var(--dark); }
/* Meta */
.pdp .product-detail-meta{ list-style:none; padding:0; margin:18px 0 0; }
.pdp .product-detail-meta li{ font-size:.88rem; color:#6b7280; margin-bottom:7px; }
.pdp .product-detail-meta .negrita{ color:var(--dark); }
.pdp .product-detail-meta a{ color:var(--accent); text-decoration:none; }
.pdp .product-detail-meta a:hover{ text-decoration:underline; }
/* ===== Tabs ===== */
.pdp .product-detail-nav{ gap:8px; border:0; margin:42px 0 0; flex-wrap:wrap; }
.pdp .product-detail-nav-link{ border:1px solid #e5e7eb; background:#fff; border-radius:30px; color:#374151; font-weight:600; font-size:.9rem; padding:9px 20px; transition:all .18s ease; }
.pdp .product-detail-nav-link:hover{ border-color:var(--accent); color:var(--accent); }
.pdp .product-detail-nav-link.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pdp .tab-content{ margin-top:22px; color:#4b5563; line-height:1.75; }
.pdp .tab-content .product-detail-nav-description{ color:#4b5563; line-height:1.75; }
/* ===== Relacionados (encabezado) ===== */
.pdp-related{ margin-top:8px; }
.pdp-related h2{ font-size:1.5rem; font-weight:700; color:#1f2937; margin-bottom:24px; }
@media (max-width:991px){
.pdp h1.producto-nombre{ font-size:1.45rem; }
.pdp .pdp-price-now{ font-size:1.7rem; }
}
/* ---- landing_styles.php ---- */
.lg{ --accent:#e73c17; }
/* ===== Hero editorial ===== */
/* Lienzo gris neutro (#f8f9fa) tipo blog clásico: las tarjetas blancas resaltan.
Antes era un degradado cálido #fff7f5 que se leía "sucio/gris" junto al blanco
del resto del sitio. Este gris es intencional y neutro. */
.lg-hero{ background:#f8f9fa; border-bottom:1px solid #eef0f2; padding:30px 0 30px; }
.lg-hero .breadcrumb{ margin-bottom:14px; }
.lg-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); background:#fff; border:1px solid #fbd9d2; padding:5px 13px; border-radius:999px; margin-bottom:15px; }
.lg-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.lg-hero h1{ font-weight:700; color:#1f2937; font-size:2.05rem; line-height:1.18; margin:0 0 13px; }
.lg-hero .lg-intro{ font-size:1.07rem; color:#4b5563; line-height:1.75; }
.lg-hero .lg-intro p{ margin:0 0 .6rem; }
.lg-hero .lg-intro p:last-child{ margin-bottom:0; }
.lg-hero .lg-intro strong{ color:#1f2937; }
/* ===== Cuerpo ===== */
.lg-body{ background:#f8f9fa; padding:38px 0 56px; }
/* ===== Blog: grid de entradas (/blog) ===== */
.blog-grid{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:576px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:992px){ .blog-grid{ grid-template-columns:1fr 1fr 1fr; } }
.blog-card{ display:flex; flex-direction:column; background:#fff; border:1px solid #eef0f2; border-radius:16px; overflow:hidden; box-shadow:0 2px 10px rgba(17,24,39,.05); text-decoration:none; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.blog-card:hover{ box-shadow:0 16px 36px rgba(17,24,39,.12); transform:translateY(-4px); border-color:#fbd9d2; }
.blog-card-media{ position:relative; aspect-ratio:16/10; background:#f6f7f8; overflow:hidden; }
.blog-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.blog-card:hover .blog-card-media img{ transform:scale(1.04); }
.blog-card-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:#fff; background:linear-gradient(135deg, #e73c17, #ff7a5c); }
.blog-card-chip{ position:absolute; top:12px; left:12px; background:rgba(255,255,255,.95); color:#1f2937; font-size:.72rem; font-weight:700; letter-spacing:.02em; padding:5px 11px; border-radius:999px; box-shadow:0 2px 8px rgba(17,24,39,.12); }
.blog-card-body{ display:flex; flex-direction:column; flex:1 1 auto; padding:18px 20px 20px; }
.blog-card-date{ font-size:.76rem; color:#8a909a; font-weight:500; margin-bottom:7px; }
.blog-card-title{ font-size:1.12rem; font-weight:700; color:#1f2937; line-height:1.3; margin:0 0 9px; }
.blog-card-excerpt{ color:#6b7280; font-size:.92rem; line-height:1.6; margin:0 0 16px; flex:1 1 auto; }
.blog-card-link{ color:var(--accent); font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:7px; }
.blog-card-link i{ transition:transform .18s ease; }
.blog-card:hover .blog-card-link i{ transform:translateX(3px); }
.blog-card-meta{ font-size:.76rem; color:#8a909a; font-weight:500; margin-bottom:7px; display:block; }
.blog-card-tipo{ color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.7rem; }
/* Filtro de categorías del blog */
.blog-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.blog-filter-opt{ font-size:.85rem; font-weight:600; color:#374151; text-decoration:none; background:#fff; border:1px solid #eef0f2; padding:8px 14px; border-radius:999px; transition:background .15s, color .15s, border-color .15s; }
.blog-filter-opt:hover{ background:#fff7f5; color:var(--accent); border-color:#fbd9d2; }
.blog-filter-opt.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
/* Toolbar / buscador del blog */
.blog-toolbar{ display:flex; justify-content:flex-end; margin-bottom:24px; }
.blog-search{ position:relative; width:100%; max-width:360px; }
.blog-search i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#8a909a; font-size:.95rem; }
.blog-search input{ width:100%; border:1px solid #e2e8f0; border-radius:999px; padding:11px 16px 11px 40px; font-size:.95rem; color:#1f2937; background:#fff; outline:none; transition:border-color .15s, box-shadow .15s; }
.blog-search input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(231,60,23,.12); }
/* Destacado (featured) */
.blog-feat{ display:grid; grid-template-columns:1fr; background:#fff; border:1px solid #eef0f2; border-radius:18px; overflow:hidden; box-shadow:0 2px 10px rgba(17,24,39,.05); text-decoration:none; margin-bottom:30px; transition:box-shadow .18s ease, transform .18s ease; }
.blog-feat:hover{ box-shadow:0 18px 40px rgba(17,24,39,.12); transform:translateY(-3px); }
@media (min-width:768px){ .blog-feat{ grid-template-columns:1.15fr 1fr; } }
.blog-feat-media{ position:relative; background:#f6f7f8; overflow:hidden; aspect-ratio:16/10; }
@media (min-width:768px){ .blog-feat-media{ aspect-ratio:auto; height:100%; min-height:260px; } }
.blog-feat-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.blog-feat:hover .blog-feat-media img{ transform:scale(1.03); }
.blog-feat-body{ padding:26px 30px; display:flex; flex-direction:column; justify-content:center; }
.blog-feat-title{ font-size:1.5rem; font-weight:700; color:#1f2937; line-height:1.25; margin:6px 0 10px; }
.blog-feat-excerpt{ color:#6b7280; font-size:1rem; line-height:1.65; margin:0 0 18px; }
@media (max-width:575px){ .blog-feat-body{ padding:20px; } .blog-feat-title{ font-size:1.25rem; } }
.blog-noresults{ text-align:center; color:#6b7280; padding:36px 0; }
/* Taxonomía en la entrada (categoría + tags) */
.blog-taxo{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:18px; }
.blog-taxo-cat{ display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff; font-size:.82rem; font-weight:600; padding:6px 13px; border-radius:999px; text-decoration:none; }
.blog-taxo-cat:hover{ filter:brightness(1.06); color:#fff; }
.blog-taxo-tag{ background:#fff; border:1px solid #eef0f2; color:#4b5563; font-size:.82rem; padding:6px 12px; border-radius:999px; text-decoration:none; transition:background .15s, color .15s, border-color .15s; }
.blog-taxo-tag:hover{ background:#fff7f5; color:var(--accent); border-color:#fbd9d2; }
/* ===== Artículo (entrada tipo articulo) ===== */
.art-hero-img{ max-width:1000px; margin:0 auto 28px; border-radius:16px; overflow:hidden; }
.art-hero-img img{ width:100%; height:auto; display:block; }
/* Encabezado de sección (productos) */
.lg-section-title{ font-weight:700; color:#1f2937; font-size:1.5rem; margin:0 0 4px; }
.lg-section-sub{ color:#6b7280; font-size:.95rem; margin:0 0 22px; }
/* ===== Tema: selector de eje (alternar temas del grupo) ===== */
.tema-switch{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:20px; background:#fff; border:1px solid #eef0f2; border-radius:999px; padding:5px; box-shadow:0 2px 10px rgba(17,24,39,.05); }
.tema-switch-label{ font-size:.78rem; font-weight:600; color:#6b7280; padding:0 8px 0 10px; }
.tema-switch-opt{ font-size:.86rem; font-weight:600; color:#374151; text-decoration:none; padding:8px 15px; border-radius:999px; transition:background .15s, color .15s; }
.tema-switch-opt:hover{ background:#fff7f5; color:var(--accent); }
.tema-switch-opt.active{ background:var(--accent); color:#fff; }
/* ===== Tema: CTA cruzada hacia el otro eje ===== */
.tema-cross{ margin:44px 0 0; background:#fff7f5; border:1px solid #fbd9d2; border-radius:18px; padding:28px 26px; text-align:center; }
.tema-cross-eyebrow{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); margin-bottom:5px; }
.tema-cross-txt h3{ margin:0; font-size:1.2rem; font-weight:700; color:#1f2937; }
.tema-cross-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; }
.tema-cross-btn{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--accent); color:var(--accent); font-weight:600; font-size:.92rem; padding:11px 18px; border-radius:10px; text-decoration:none; transition:background .15s, color .15s; }
.tema-cross-btn:hover{ background:var(--accent); color:#fff; }
/* ===== Tema: texto de cierre (antes de FAQ) — full width, coherente ===== */
.tema-closing{ margin:46px 0 0; background:#fff; border:1px solid #eef0f2; border-radius:16px; padding:28px 30px; }
.tema-closing h2{ font-size:1.35rem; font-weight:700; color:#1f2937; margin:0 0 12px; }
.tema-closing p{ color:#4b5563; line-height:1.75; margin:0 0 .8rem; max-width:900px; }
.tema-closing p:last-child{ margin-bottom:0; }
.tema-closing strong{ color:#1f2937; }
.tema-closing ul{ color:#4b5563; margin:.6rem 0 0; padding-left:1.2rem; }
.tema-closing li::marker{ color:var(--accent); }
/* ===== Tema: chips de salto a secciones ===== */
.tema-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.tema-chips a{ display:inline-flex; align-items:center; background:#fff; border:1px solid #eef0f2; color:#374151; font-size:.85rem; font-weight:500; padding:7px 13px; border-radius:999px; text-decoration:none; transition:background .15s, color .15s, border-color .15s; }
.tema-chips a:hover{ background:#fff7f5; color:var(--accent); border-color:#fbd9d2; }
/* ===== Tema: sección (explicación + carril de productos) ===== */
.tema-sec{ margin:0 0 48px; scroll-margin-top:100px; }
/* Bloque de explicación (card con acento) */
.tema-sec-card{ background:#fff; border:1px solid #eef0f2; border-radius:16px; padding:22px 24px; margin-bottom:20px; }
.tema-sec-top{ display:flex; align-items:center; gap:14px; margin-bottom:13px; }
.tema-sec-num{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; background:var(--accent); color:#fff; font-weight:700; font-size:1.1rem; display:flex; align-items:center; justify-content:center; }
.tema-sec-title{ font-size:1.35rem; font-weight:700; color:#1f2937; margin:0; line-height:1.2; }
.tema-sec-tag{ color:var(--accent); font-size:.85rem; font-weight:600; margin:3px 0 0; }
.tema-sec-desc{ color:#4b5563; line-height:1.7; font-size:1rem; }
.tema-sec-desc p{ margin:0 0 .8rem; }
.tema-sec-desc p:last-child{ margin-bottom:0; }
.tema-sec-desc strong{ color:#1f2937; }
.tema-sec-desc ul{ list-style:none; padding:0; margin:.6rem 0 .2rem; display:grid; grid-template-columns:1fr; gap:9px 26px; }
@media (min-width:640px){ .tema-sec-desc ul{ grid-template-columns:1fr 1fr; } }
.tema-sec-desc li{ position:relative; padding-left:27px; color:#4b5563; }
.tema-sec-desc li::before{ content:"\f00c"; font-family:"FontAwesome"; position:absolute; left:0; top:2px; color:var(--accent); font-size:.78rem; }
/* Párrafo de cierre tras el checklist: más aire para que no quede pegado */
.tema-sec-desc ul + p{ margin-top:1.2rem; }
/* Barra del carril: etiqueta + flechas (dentro del margen) */
.tema-rail-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.tema-rail-label{ font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#6b7280; }
.tema-nav{ display:flex; gap:8px; flex-shrink:0; }
.tema-nav button{ width:38px; height:38px; border-radius:50%; border:1px solid #e2e8f0; background:#fff; color:#1f2937; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; transition:background .15s, color .15s, border-color .15s; }
.tema-nav button:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.tema-nav button:disabled{ opacity:.35; cursor:default; }
/* Carril con scroll-snap (sin Swiper: nunca se desborda) */
.tema-rail{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 1px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tema-rail::-webkit-scrollbar{ display:none; }
.tema-rail > .tema-card{ scroll-snap-align:start; flex:0 0 calc(50% - 8px); }
@media (min-width:768px){ .tema-rail > .tema-card{ flex-basis:calc(33.333% - 11px); } }
@media (min-width:992px){ .tema-rail > .tema-card{ flex-basis:calc(25% - 12px); } }
@media (min-width:1200px){ .tema-rail > .tema-card{ flex-basis:calc(20% - 13px); } }
/* Tarjeta de producto */
.tema-card{ display:flex; flex-direction:column; background:#fff; border:1px solid #eef0f2; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(17,24,39,.05); transition:box-shadow .18s ease, transform .18s ease; }
.tema-card:hover{ box-shadow:0 14px 30px rgba(17,24,39,.1); transform:translateY(-3px); }
.tema-card-thumb{ position:relative; display:block; aspect-ratio:1/1; padding:12px; }
.tema-card-thumb img{ width:100%; height:100%; object-fit:contain; }
.tema-card-badge{ position:absolute; top:8px; left:8px; background:var(--accent); color:#fff; font-size:.72rem; font-weight:700; padding:3px 8px; border-radius:6px; }
.tema-card-body{ padding:12px 14px 15px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto; }
.tema-card-title{ font-size:.92rem; font-weight:600; line-height:1.35; margin:0; }
.tema-card-title a{ color:#1f2937; text-decoration:none; }
.tema-card-title a:hover{ color:var(--accent); }
.tema-card-price{ font-weight:700; color:#1f2937; margin-top:auto; }
.tema-card-price .old{ font-weight:500; color:#8a909a; text-decoration:line-through; font-size:.85rem; margin-left:5px; }
@media (max-width:575px){ .tema-sec-card{ padding:18px; } }
/* ===== Índice (TOC) ===== */
.lg-toc{ background:#fff; border:1px solid #eef0f2; border-radius:14px; padding:16px 20px; box-shadow:0 2px 10px rgba(17,24,39,.05); margin:0 0 28px; }
.lg-toc-title{ font-size:.73rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#6b7280; margin:0 0 10px; }
.lg-toc-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; grid-template-columns:1fr; counter-reset:toc; }
@media (min-width:768px){ .lg-toc-list{ grid-template-columns:1fr 1fr; column-gap:18px; } }
.lg-toc-list a{ display:flex; gap:9px; padding:8px 10px; border-radius:8px; font-size:.92rem; color:#4b5563; text-decoration:none; border-left:2px solid transparent; transition:background .15s, color .15s, border-color .15s; }
.lg-toc-list a::before{ counter-increment:toc; content:counter(toc); color:var(--accent); font-weight:700; font-size:.82rem; flex:0 0 auto; }
.lg-toc-list a:hover{ background:#fff7f5; color:var(--accent); border-left-color:var(--accent); }
/* ===== Contenido editorial (artículo) ===== */
.lg-article{ color:#374151; line-height:1.8; font-size:1.02rem; max-width:820px; margin-left:auto; margin-right:auto; }
.lg-article h2, .lg-article .lg-h2{ font-size:1.45rem; font-weight:700; color:#1f2937; margin:2.1rem 0 .8rem; scroll-margin-top:100px; }
.lg-article .lg-h2::before{ content:""; display:block; width:42px; height:3px; background:var(--accent); border-radius:3px; margin-bottom:13px; }
.lg-article h3{ font-size:1.16rem; font-weight:700; color:#1f2937; margin:1.5rem 0 .6rem; }
.lg-article p{ margin:0 0 1rem; }
.lg-article ul, .lg-article ol{ padding-left:1.3rem; margin:0 0 1.1rem; }
.lg-article li{ margin-bottom:.55rem; padding-left:.2rem; }
.lg-article ul li::marker{ color:var(--accent); }
.lg-article strong{ color:#1f2937; }
.lg-article a{ color:var(--accent); text-decoration:underline; }
/* Callout: si el contenido usa se ve como caja "tip/importante" */
.lg-article blockquote{ margin:1.5rem 0; background:#fff7f5; border:1px solid #fbd9d2; border-left:4px solid var(--accent); border-radius:0 12px 12px 0; padding:15px 18px; color:#7a2c1c; }
.lg-article blockquote p:last-child{ margin-bottom:0; }
/* Tabla comparativa (scroll horizontal en móvil vía .lg-table-wrap) */
.lg-table-wrap{ overflow-x:auto; margin:1.5rem 0; border:1px solid #eef0f2; border-radius:12px; }
.lg-article table{ width:100%; border-collapse:collapse; font-size:.93rem; min-width:520px; margin:0; }
.lg-article th, .lg-article td{ text-align:left; padding:12px 15px; border-bottom:1px solid #eef0f2; vertical-align:top; }
.lg-article thead th{ background:#f8f9fa; color:#1f2937; font-weight:700; }
.lg-article tbody tr:last-child td{ border-bottom:0; }
.lg-article tbody tr:hover{ background:#fff7f5; }
/* Listas ordenadas como PASOS numerados (círculos de acento) */
.lg-article ol{ counter-reset:step; list-style:none; padding-left:0; margin:1.2rem 0; }
.lg-article ol > li{ position:relative; padding-left:46px; margin-bottom:1rem; min-height:32px; }
.lg-article ol > li::before{ counter-increment:step; content:counter(step); position:absolute; left:0; top:-1px; width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:.88rem; display:flex; align-items:center; justify-content:center; }
/* ===== CTA de cierre ===== */
.lg-cta{ margin:42px 0 0; background:#1f2937; border-radius:18px; padding:30px 28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; }
.lg-cta-txt h3{ color:#fff; font-weight:700; font-size:1.28rem; margin:0 0 5px; }
.lg-cta-txt p{ color:#c7cedb; margin:0; font-size:.96rem; }
.lg-cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.lg-btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:10px; font-weight:600; text-decoration:none; font-size:.95rem; transition:filter .15s ease; }
.lg-btn-wa{ background:#25d366; color:#fff; }
.lg-btn-ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); }
.lg-btn:hover{ filter:brightness(1.06); }
@media (max-width:575px){
.lg-hero{ padding:22px 0; }
.lg-hero h1{ font-size:1.62rem; }
.lg-cta{ padding:24px 20px; }
}
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
/* ---- checkout_styles.php ---- */
.checkout-modern{ --accent:#e73c17; }
.checkout-modern .co-block-head h3{ font-weight:700; color:#1f2937; font-size:1.3rem; margin-bottom:.25rem; }
.checkout-modern .co-block-head p{ color:#6b7280; font-size:.9rem; margin-bottom:1.25rem; }
.checkout-modern .co-block-head a{ color:var(--accent); }
/* Tarjetas seleccionables (DTE / direcciones) */
.checkout-modern .post-item.co-card{ display:block; background:#fff; border:1.5px solid #eef0f2; border-radius:14px; padding:16px 46px 16px 18px; margin-bottom:14px; cursor:pointer; position:relative; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.checkout-modern .post-item.co-card:hover{ border-color:#dfe3e8; }
.checkout-modern .post-item.co-card.selected{ border-color:var(--accent); background:#fff7f5; box-shadow:0 4px 16px rgba(231,60,23,.08); }
.checkout-modern .co-card .co-radio{ position:absolute; top:18px; right:16px; width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }
.checkout-modern .co-card-top{ display:flex; align-items:center; gap:10px; margin-bottom:7px; flex-wrap:wrap; }
.checkout-modern .co-card-top .co-card-name{ margin-bottom:0; }
.checkout-modern .co-dte-type{ font-weight:700; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); background:#fdecea; padding:3px 11px; border-radius:999px; }
.checkout-modern .co-fav{ font-size:.74rem; font-weight:600; color:#d97706; display:inline-flex; align-items:center; gap:4px; }
.checkout-modern .co-badge-free{ font-weight:700; font-size:.7rem; letter-spacing:.03em; text-transform:uppercase; color:#16a34a; background:#e7f6ec; padding:3px 11px; border-radius:999px; }
.checkout-modern .co-card-name{ display:block; font-weight:600; color:#1f2937; font-size:1rem; margin-bottom:3px; }
.checkout-modern .co-card-desc{ display:block; color:#6b7280; font-size:.86rem; line-height:1.55; }
.checkout-modern .co-ship{ display:block; margin-top:8px; font-weight:700; font-size:.86rem; color:var(--accent); }
.checkout-modern .co-ship-free{ display:block; margin-top:3px; font-weight:600; font-size:.82rem; color:#16a34a; }
/* Tarjeta "Nuevo" con formulario */
.checkout-modern .post-item.co-card-new{ cursor:default; padding:18px 18px; }
.checkout-modern .co-card-new-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.checkout-modern .co-card-new .co-radio{ position:static; flex-shrink:0; }
.checkout-modern .co-card-new-title{ font-weight:600; color:#1f2937; font-size:.95rem; }
.checkout-modern .co-validation{ background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:10px; padding:10px 14px; font-size:.85rem; margin-bottom:14px; }
.checkout-modern .co-form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 16px; }
.checkout-modern .co-form-grid .co-col-full{ grid-column:1 / -1; }
.checkout-modern .form-label{ font-size:.8rem; font-weight:600; color:#374151; margin-bottom:5px; }
.checkout-modern .form-control,
.checkout-modern .form-select{ height:46px; border:1px solid #e5e7eb; border-radius:10px; font-size:.9rem; color:#1f2937; padding:0 14px; box-shadow:none; transition:border-color .2s ease, box-shadow .2s ease; }
.checkout-modern textarea.form-control{ height:auto; padding:10px 14px; }
.checkout-modern .form-control:focus,
.checkout-modern .form-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(231,60,23,.12); outline:none; }
.checkout-modern .form-check-input{ cursor:pointer; }
.checkout-modern .form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); }
.checkout-modern .form-check-label{ font-size:.86rem; color:#374151; cursor:pointer; }
/* Fila RUT + botón (Venta directa) */
.checkout-modern .co-rut-row{ display:flex; gap:12px; align-items:flex-end; }
.checkout-modern .co-rut-row .co-rut-field{ flex:1; }
.checkout-modern .co-rut-row .co-btn{ flex:0 0 auto; height:46px; padding:0 22px; }
@media (max-width:575px){
.checkout-modern .co-rut-row{ flex-direction:column; align-items:stretch; }
}
/* Tarjetas de información (Resumen) */
.checkout-modern .co-info-card{ background:#fff; border:1px solid #eef0f2; border-radius:14px; padding:18px 20px; margin-bottom:16px; }
.checkout-modern .co-info-card h4{ font-size:.95rem; font-weight:700; color:#1f2937; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.checkout-modern .co-info-card h4 .fa{ color:var(--accent); }
.checkout-modern .co-info-card p{ color:#6b7280; font-size:.88rem; line-height:1.65; margin:0; }
.checkout-modern .co-info-card .co-strong{ color:#1f2937; font-weight:600; }
.checkout-modern .co-retiro-note{ background:#fff7f5; border:1px solid #fde3dc; border-radius:10px; padding:12px 14px; color:#9a3412; font-size:.88rem; line-height:1.55; }
.checkout-modern .co-retiro-note strong{ color:#9a3412; }
/* Resumen del pedido */
.checkout-modern .co-summary{ background:#fff; border:1px solid #eef0f2; border-radius:16px; padding:24px; box-shadow:0 6px 26px rgba(17,24,39,.05); }
.checkout-modern .co-summary-row{ display:flex; justify-content:space-between; align-items:center; font-size:.89rem; color:#4b5563; padding:7px 0; }
.checkout-modern .co-summary-row span:last-child{ font-weight:600; color:#1f2937; }
.checkout-modern .co-webpay{ text-align:center; margin:18px 0 4px; }
.checkout-modern .co-webpay img{ max-width:160px; width:60%; height:auto; }
.checkout-modern .co-summary h3{ font-weight:700; color:#1f2937; font-size:1.15rem; margin-bottom:16px; }
.checkout-modern .co-summary-items{ list-style:none; padding:0; margin:0; }
.checkout-modern .co-summary-items li{ display:flex; justify-content:space-between; gap:12px; font-size:.88rem; color:#4b5563; padding:9px 0; border-bottom:1px dashed #eef0f2; }
.checkout-modern .co-summary-items li span:last-child{ font-weight:600; color:#1f2937; white-space:nowrap; }
.checkout-modern .co-summary-total{ display:flex; justify-content:space-between; align-items:center; padding-top:14px; margin-top:6px; border-top:2px solid #f1f2f4; }
.checkout-modern .co-summary-total .lbl{ font-weight:700; color:#1f2937; font-size:1rem; }
.checkout-modern .co-summary-total .val{ font-weight:800; color:var(--accent); font-size:1.3rem; }
.checkout-modern .co-note{ font-size:.78rem; color:#6b7280; line-height:1.55; margin-top:14px; margin-bottom:0; }
.checkout-modern .co-actions{ display:flex; gap:12px; margin-top:18px; }
.checkout-modern .co-btn{ flex:1; height:50px; border-radius:30px; font-weight:600; font-size:.92rem; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; transition:background .2s ease, transform .1s ease; }
.checkout-modern .co-btn:active{ transform:translateY(1px); }
.checkout-modern .co-btn-back{ background:#f1f2f4; color:#374151; }
.checkout-modern .co-btn-back:hover{ background:#e6e8eb; color:#1f2937; }
.checkout-modern .co-btn-next{ background:var(--accent); color:#fff; }
.checkout-modern .co-btn-next:hover{ background:#cf3414; color:#fff; }
@media (max-width:991px){
.checkout-modern .co-summary{ position:static; margin-top:8px; }
}
@media (max-width:575px){
.checkout-modern .co-form-grid{ grid-template-columns:1fr; }
}
/* ---- account_styles.php ---- */
/* Separar el contenido del breadcrumb (el breadcrumb ya aporta ~28px abajo). */
.account-modern.account-area{ padding-top:18px !important; }
@media (max-width:575px){
.account-modern.account-area{ padding-top:26px !important; }
}
/* Barra lateral */
.account-modern .acc-nav{ display:flex; flex-direction:column; gap:3px; background:#fff; border:1px solid #eef0f2; border-radius:14px; padding:10px; box-shadow:0 6px 26px rgba(17,24,39,.05); }
.account-modern .acc-nav-link{ display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:10px; color:#4b5563; font-weight:500; font-size:.92rem; text-decoration:none; transition:background .15s ease, color .15s ease; }
.account-modern .acc-nav-link .fa{ width:18px; text-align:center; color:#6b7280; font-size:1rem; transition:color .15s ease; }
.account-modern .acc-nav-link:hover{ background:#f6f7f8; color:#1f2937; }
.account-modern .acc-nav-link.active{ background:#fff7f5; color:var(--accent); font-weight:600; }
.account-modern .acc-nav-link.active .fa{ color:var(--accent); }
.account-modern .acc-nav-link.acc-logout{ color:#e11d48; margin-top:5px; padding-top:13px; border-top:1px solid #f1f2f4; border-radius:0; }
.account-modern .acc-nav-link.acc-logout .fa{ color:#e11d48; }
.account-modern .acc-nav-link.acc-logout:hover{ background:#fef2f4; }
/* Contenido */
.account-modern .acc-content{ background:#fff; border:1px solid #eef0f2; border-radius:14px; padding:26px 28px; box-shadow:0 6px 26px rgba(17,24,39,.05); }
.account-modern .acc-content > h3{ font-weight:700; color:#1f2937; font-size:1.3rem; margin-bottom:4px; }
.account-modern .acc-greeting{ color:#1f2937; font-size:1rem; margin-bottom:10px; }
.account-modern .acc-greeting strong{ color:var(--accent); }
.account-modern .acc-lead{ color:#6b7280; font-size:.92rem; line-height:1.65; margin-bottom:0; }
/* Encabezado de sección con acción a la derecha */
.account-modern .acc-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.account-modern .acc-head h3{ font-weight:700; color:#1f2937; font-size:1.3rem; margin:0; }
/* Accesos rápidos (Perfil) */
.account-modern .acc-quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }
.account-modern .acc-quick-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; padding:22px 14px; border:1px solid #eef0f2; border-radius:12px; color:#374151; text-decoration:none; transition:border-color .2s ease, box-shadow .2s ease, transform .1s ease; }
.account-modern .acc-quick-card .fa{ font-size:1.6rem; color:var(--accent); }
.account-modern .acc-quick-card span{ font-weight:600; font-size:.88rem; }
.account-modern .acc-quick-card:hover{ border-color:#fde3dc; box-shadow:0 6px 18px rgba(231,60,23,.08); transform:translateY(-2px); }
/* Caja admin */
.account-modern .acc-admin-box{ margin-top:22px; padding:16px 18px; background:#f8f9fb; border:1px solid #eef0f2; border-radius:12px; }
.account-modern .acc-admin-box p{ color:#6b7280; font-size:.88rem; }
.account-modern .acc-admin-box strong{ color:#1f2937; }
/* Estado vacío / placeholder */
.account-modern .acc-empty{ text-align:center; padding:46px 20px; }
.account-modern .acc-empty .acc-empty-icon{ width:84px; height:84px; border-radius:50%; background:#f6f7f8; color:#8a909a; display:inline-flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:16px; }
.account-modern .acc-empty h4{ color:#1f2937; font-weight:700; font-size:1.05rem; margin-bottom:6px; }
.account-modern .acc-empty p{ color:#6b7280; font-size:.9rem; margin:0 auto; max-width:340px; line-height:1.6; }
/* Listado de tarjetas (direcciones / datos de facturación) — 2 columnas */
.account-modern .acc-cards-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.account-modern .acc-item{ display:flex; flex-direction:column; background:#fff; border:1px solid #eef0f2; border-radius:14px; padding:18px 20px; transition:border-color .2s ease, box-shadow .2s ease; }
.account-modern .acc-item:hover{ border-color:#dfe3e8; box-shadow:0 6px 18px rgba(17,24,39,.06); }
.account-modern .acc-item.is-fav{ border-color:#fde3dc; background:#fffdfc; }
.account-modern .acc-item-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; flex-wrap:wrap; }
.account-modern .acc-item-name{ display:flex; align-items:center; gap:8px; font-weight:700; color:#1f2937; font-size:1rem; }
.account-modern .acc-item-name .fa{ color:var(--accent); }
.account-modern .acc-item-badge{ font-weight:700; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); background:#fdecea; padding:3px 11px; border-radius:999px; }
.account-modern .acc-item-fav{ display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:600; color:#d97706; background:#fef6e7; padding:3px 10px; border-radius:999px; }
.account-modern .acc-item-body{ flex:1 1 auto; color:#6b7280; font-size:.87rem; line-height:1.6; }
.account-modern .acc-item-body strong{ color:#1f2937; font-weight:600; }
.account-modern .acc-item-foot{ display:flex; gap:10px; margin-top:16px; padding-top:13px; border-top:1px solid #f1f2f4; }
.account-modern .acc-item-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:38px; border-radius:9px; font-size:.84rem; font-weight:600; text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.account-modern .acc-item-btn.edit{ background:#f6f7f8; color:#374151; }
.account-modern .acc-item-btn.edit:hover{ background:#eceef0; color:var(--accent); }
.account-modern .acc-item-btn.delete{ background:#fff; border:1px solid #f3d6dc; color:#e11d48; }
.account-modern .acc-item-btn.delete:hover{ background:#fef2f4; color:#be123c; }
@media (max-width:767px){
.account-modern .acc-cards-grid{ grid-template-columns:1fr; }
}
/* Botón inline auto-ancho */
.account-modern .co-btn-inline{ display:inline-flex; width:auto; padding:0 22px; }
/* Historial de compras */
.account-modern .acc-orders{ display:flex; flex-direction:column; gap:16px; }
.account-modern .acc-order{ border:1px solid #eef0f2; border-radius:14px; padding:18px 20px; transition:box-shadow .2s ease, border-color .2s ease; }
.account-modern .acc-order:hover{ border-color:#dfe3e8; box-shadow:0 6px 18px rgba(17,24,39,.06); }
.account-modern .acc-order-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.account-modern .acc-order-num{ display:block; font-weight:700; color:#1f2937; font-size:1rem; }
.account-modern .acc-order-date{ display:block; color:#6b7280; font-size:.82rem; margin-top:2px; }
.account-modern .acc-order-date .fa{ margin-right:5px; }
.account-modern .acc-order-right{ text-align:right; }
.account-modern .acc-order-status{ display:inline-block; font-weight:700; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:#16a34a; background:#e7f6ec; padding:3px 11px; border-radius:999px; }
.account-modern .acc-order-total{ display:block; font-weight:800; color:var(--accent); font-size:1.25rem; margin-top:5px; }
.account-modern .acc-order-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:13px; padding-top:13px; border-top:1px solid #f1f2f4; }
.account-modern .acc-order-meta span{ color:#6b7280; font-size:.84rem; display:inline-flex; align-items:center; gap:6px; }
.account-modern .acc-order-meta .fa{ color:#6b7280; }
.account-modern .acc-order-details{ margin-top:12px; }
.account-modern .acc-order-details > summary{ cursor:pointer; color:var(--accent); font-weight:600; font-size:.86rem; list-style:none; display:inline-flex; align-items:center; gap:6px; }
.account-modern .acc-order-details > summary::-webkit-details-marker{ display:none; }
.account-modern .acc-order-details > summary::after{ content:"\f107"; font-family:FontAwesome; transition:transform .2s ease; }
.account-modern .acc-order-details[open] > summary::after{ transform:rotate(180deg); }
.account-modern .acc-order-items{ list-style:none; padding:0; margin:14px 0 0; }
.account-modern .acc-order-items li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed #eef0f2; }
.account-modern .acc-order-items .acc-it-name{ color:#4b5563; font-size:.86rem; }
.account-modern .acc-order-items .acc-it-amt{ font-weight:600; color:#1f2937; font-size:.86rem; white-space:nowrap; }
.account-modern .acc-order-grand{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:12px; border-top:2px solid #f1f2f4; }
.account-modern .acc-order-grand span:first-child{ font-weight:700; color:#1f2937; }
.account-modern .acc-order-grand span:last-child{ font-weight:800; color:var(--accent); font-size:1.1rem; }
/* Acciones de formulario (no estiradas) */
.account-modern .co-actions.co-actions-start{ justify-content:flex-start; margin-top:22px; }
.account-modern .co-actions.co-actions-start .co-btn{ flex:0 0 auto; min-width:160px; }
.account-modern .co-actions.co-actions-start .co-btn-delete{ background:#e11d48; color:#fff; }
.account-modern .co-actions.co-actions-start .co-btn-delete:hover{ background:#be123c; color:#fff; }
@media (max-width:575px){
.account-modern .co-actions.co-actions-start{ flex-direction:column; }
.account-modern .co-actions.co-actions-start .co-btn{ width:100%; }
}
@media (max-width:991px){
.account-modern .acc-nav{ position:static; flex-direction:row; flex-wrap:wrap; margin-bottom:18px; }
.account-modern .acc-nav-link{ flex:1 1 auto; justify-content:center; }
.account-modern .acc-nav-link.acc-logout{ border-top:0; margin-top:0; border-radius:10px; }
}
@media (max-width:575px){
.account-modern .acc-quick{ grid-template-columns:1fr; }
.account-modern .acc-content{ padding:20px; }
}
/* ---- auth_styles.php ---- */
.auth-simple{ --accent:#e73c17; }
.auth-simple > .container{ padding-top:40px; }
.auth-simple .auth-card{ background:#fff; border:1px solid #eef0f2; border-radius:18px; box-shadow:0 6px 26px rgba(17,24,39,.06); padding:36px 34px; max-width:460px; margin:0 auto; }
.auth-simple .auth-icon{ width:72px; height:72px; border-radius:50%; background:#fff7f5; color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 18px; }
.auth-simple .auth-icon.is-success{ background:#e7f6ec; color:#16a34a; }
.auth-simple h3{ font-weight:700; color:#1f2937; font-size:1.35rem; text-align:center; margin-bottom:.4rem; }
.auth-simple .auth-sub{ color:#6b7280; font-size:.92rem; text-align:center; margin-bottom:1.5rem; line-height:1.6; }
.auth-simple .auth-field{ position:relative; margin-bottom:1rem; }
.auth-simple .auth-field > i{ position:absolute; left:17px; top:50%; transform:translateY(-50%); color:#6b7280; font-size:.95rem; }
.auth-simple .auth-field input{ width:100%; height:50px; border:1px solid #e5e7eb; border-radius:30px; padding:0 18px 0 44px; font-size:.92rem; color:#1f2937; background:#fff; transition:border-color .2s ease, box-shadow .2s ease; }
.auth-simple .auth-field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(231,60,23,.12); }
.auth-simple .auth-field input:disabled{ background:#f6f7f8; color:#6b7280; }
.auth-simple .auth-field input::placeholder{ color:#6b7280; }
.auth-simple .auth-btn{ width:100%; height:50px; background:var(--accent); color:#fff; border:0; border-radius:30px; font-weight:600; font-size:.95rem; transition:background .2s ease; }
.auth-simple .auth-btn:hover{ background:#cf3414; }
.auth-simple .auth-error{ background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:12px; padding:11px 16px; font-size:.88rem; text-align:center; margin:0 auto 1.2rem; max-width:460px; }
.auth-simple .auth-back{ display:block; text-align:center; margin-top:1.1rem; color:#6b7280; font-size:.88rem; text-decoration:none; }
.auth-simple .auth-back:hover{ color:var(--accent); }
/* ---- pago_result_styles.php ---- */
.pago-result{ --accent:#e73c17; }
/* Separar el contenido del breadcrumb (el breadcrumb ya aporta ~28px abajo). */
.pago-result.section-space{ padding-top:18px !important; }
@media (max-width:575px){
.pago-result.section-space{ padding-top:26px !important; }
}
.pago-result .pr-card{ max-width:560px; margin:0 auto; background:#fff; border:1px solid #eef0f2; border-radius:18px; box-shadow:0 8px 30px rgba(17,24,39,.06); padding:44px 38px; text-align:center; }
.pago-result .pr-icon{ width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.2rem; margin:0 auto 22px; }
.pago-result .pr-icon.success{ background:#e7f6ec; color:#16a34a; }
.pago-result .pr-icon.error{ background:#fdecea; color:#e11d48; }
.pago-result h1{ font-size:1.7rem; font-weight:700; color:#1f2937; margin-bottom:.6rem; }
.pago-result .pr-sub{ color:#6b7280; font-size:.95rem; line-height:1.6; margin-bottom:1.8rem; }
.pago-result .pr-sub strong{ color:#374151; }
.pago-result .pr-summary{ text-align:left; background:#f8f9fb; border:1px solid #eef0f2; border-radius:12px; padding:8px 18px; margin-bottom:1.8rem; }
.pago-result .pr-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; border-bottom:1px dashed #e6e9ee; font-size:.9rem; color:#6b7280; }
.pago-result .pr-row:last-child{ border-bottom:0; }
.pago-result .pr-row strong{ color:#1f2937; font-weight:600; }
.pago-result .pr-causes{ text-align:left; background:#fff7f5; border:1px solid #fde3dc; border-radius:12px; padding:16px 20px; margin-bottom:1.4rem; }
.pago-result .pr-causes-title{ font-weight:700; color:#1f2937; font-size:.9rem; margin-bottom:8px; }
.pago-result .pr-causes ul{ margin:0; padding-left:18px; color:#6b7280; font-size:.88rem; line-height:1.7; }
.pago-result .pr-help{ color:#6b7280; font-size:.88rem; line-height:1.6; margin-bottom:1.6rem; }
.pago-result .pr-help a{ color:var(--accent); font-weight:600; text-decoration:none; }
.pago-result .pr-help a:hover{ text-decoration:underline; }
.pago-result .pr-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.pago-result .pr-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 22px; border-radius:30px; font-weight:600; font-size:.9rem; text-decoration:none; transition:background .2s ease, color .2s ease; }
.pago-result .pr-btn-primary{ background:var(--accent); color:#fff; }
.pago-result .pr-btn-primary:hover{ background:#cf3414; color:#fff; }
.pago-result .pr-btn-back{ background:#f1f2f4; color:#374151; }
.pago-result .pr-btn-back:hover{ background:#e6e8eb; color:#1f2937; }
@media (max-width:575px){
.pago-result .pr-card{ padding:34px 22px; }
.pago-result .pr-actions{ flex-direction:column; }
.pago-result .pr-btn{ width:100%; }
}
/* ---- header.php (bloques inline movidos) ---- */
/* Header STICKY (no fixed): ocupa su espacio en el flujo, el contenido fluye debajo. */
.header-wrapper.fixed-top{ position:sticky !important; top:0 !important; }
/* overflow-x:clip no rompe el sticky (a diferencia de hidden). Global. */
.wrapper{ overflow-x:clip; }
body{ padding-top:0 !important; }
.main-content{ padding-top:18px !important; background:#fff !important; }
/* Sticky footer: el contenido empuja el footer abajo aunque la página sea corta. */
.wrapper.home-five-wrapper{ display:flex; flex-direction:column; min-height:100vh; }
.wrapper.home-five-wrapper > .main-content{ flex:1 0 auto; }
.wrapper.home-five-wrapper > footer{ flex-shrink:0; }
/* Nav y footer: gris azulado de marca */
.header-two-area{ background-color:#1f2937 !important; }
.footer-area{ background:#1f2937 !important; }
.aside-side-menu-wrapper .offcanvas-header{ background-color:#1f2937 !important; }
/* Contador del carro: badge compacto */
.header-action-cart .cart-count{
display:inline-flex !important; align-items:center; justify-content:center;
box-sizing:border-box; min-width:18px; width:auto !important; height:18px !important;
line-height:1 !important; padding:0 5px !important; text-align:center;
font-family:inherit !important; font-size:11px !important; font-weight:700;
border-radius:9px !important; top:-8px !important; right:-11px !important;
box-shadow:0 2px 6px rgba(231,60,23,.35);
}
/* Íconos modernos (SVG inline tipo Lucide) en el header móvil */
.header-middle .header-action .btn-search-menu,
.header-middle .header-action .header-action-user,
.header-middle .header-action .header-action-cart{ display:inline-flex; align-items:center; justify-content:center; }
.header-middle .header-action .hi{ width:23px; height:23px; display:block; }
.header-middle .btn-menu{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0 !important; border-radius:10px !important; }
.header-middle .btn-menu .hi{ width:21px; height:21px; }
/* ---- cinta de anuncio (announcement bar) ---- */
.announcement-bar{ background:linear-gradient(90deg,#e73c17,#cf3414); color:#fff; position:relative; }
.announcement-inner{ max-width:1320px; margin:0 auto; padding:.65rem 2.6rem; display:flex; align-items:center; justify-content:center; gap:.55rem; text-align:center; font-size:.93rem; line-height:1.35; }
.announcement-inner .announcement-icon{ flex-shrink:0; opacity:.95; }
.announcement-inner .announcement-text{ font-weight:500; }
.announcement-inner .announcement-text strong{ font-weight:700; }
.announcement-close{ position:absolute; right:1rem; top:50%; transform:translateY(-50%); background:none; border:0; color:#fff; font-size:1.35rem; line-height:1; cursor:pointer; opacity:.85; padding:0 .2rem; }
.announcement-close:hover{ opacity:1; }
@media (max-width:575px){ .announcement-inner{ padding:.6rem 2.2rem; font-size:.85rem; } }
/* ---- footer.php (bloques inline movidos): botón flotante WhatsApp + notificaciones ---- */
.whatsapp{ position:fixed; width:60px; height:60px; bottom:40px; right:40px; background-color:#25d366; color:#FFF; border-radius:50px; text-align:center; font-size:30px; z-index:100; }
.whatsapp-icon{ margin-top:13px; }
#notifications{ cursor:pointer; position:fixed; right:0px; z-index:9999; top:150px; margin-bottom:22px; margin-right:15px; max-width:400px; }
/* ---- breadcrumb_style.php ---- */
/* ===== Barra de breadcrumb (contenedor) =====
Da aire y una separación sutil del contenido. Se actúa sobre .page-header-area
(no tiene el padding inline !important del .container interno), así el arreglo es
solo-CSS y aplica de forma consistente a todas las vistas. */
.page-header-area{
background:#fff;
padding-bottom:22px;
}
/* En celular ocultamos la banda de breadcrumb en todas las vistas (consistencia:
algunas ya lo hacían con d-none d-sm-block). El gap del header lo da .main-content.
El blog no usa .page-header-area, así que conserva su breadcrumb en el hero. */
@media (max-width:575px){
.page-header-area{ display:none !important; }
}
/* ===== Migas (estilo premium, estándar actual) ===== */
.breadcrumb-modern{
display:flex;
flex-wrap:wrap;
align-items:center;
padding:0;
margin:0;
list-style:none;
font-size:.84rem;
line-height:1.5;
color:#9aa0a8;
letter-spacing:.005em;
}
.breadcrumb-modern li{ display:inline-flex; align-items:center; min-width:0; }
.breadcrumb-modern li:not(:last-child)::after{
content:"";
flex:0 0 auto;
width:.72rem;
height:.72rem;
margin:0 .48rem;
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.2' stroke='%23cbd0d6'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5'/%3e%3c/svg%3e");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
.breadcrumb-modern a{
color:#8b929c;
text-decoration:none;
font-weight:500;
transition:color .18s ease;
white-space:nowrap;
}
.breadcrumb-modern a:hover{ color:#e73c17; }
.breadcrumb-modern a .fa{ margin-right:.34rem; font-size:.8rem; opacity:.9; }
.breadcrumb-modern li.active,
.breadcrumb-modern li.active a{
color:#1f2937;
font-weight:600;
pointer-events:none;
cursor:default;
}
/* La página actual (última miga) puede truncar con elipsis si es muy larga */
.breadcrumb-modern li:last-child{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
max-width:60vw;
}
/* Móvil: una sola línea con scroll horizontal sutil en vez de romper en varias filas */
@media (max-width:575px){
.breadcrumb-modern{
flex-wrap:nowrap;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.breadcrumb-modern::-webkit-scrollbar{ display:none; }
}
/* ---- product_card_style.php ---- */
.products-modern{ --accent:#e73c17; }
.products-modern .product-item{
background:#fff;
border:1px solid #eef0f2;
border-radius:16px;
padding:9px 9px 16px;
box-shadow:0 2px 10px rgba(17,24,39,.05);
transition:box-shadow .28s ease, transform .28s ease, border-color .28s ease;
display:flex;
flex-direction:column;
position:relative;
overflow:hidden;
}
.products-modern .product-item:hover{
box-shadow:0 14px 30px rgba(17,24,39,.12);
transform:translateY(-5px);
border-color:#e5e7eb;
}
.products-modern .product-item-thumb{
display:flex;
align-items:center;
justify-content:center;
width:100%;
aspect-ratio:1/1;
border-radius:12px;
overflow:hidden;
background:#fff;
margin-bottom:14px;
padding:0;
}
.products-modern .product-item-thumb img{
width:auto !important;
height:auto !important;
max-width:100% !important;
max-height:100% !important;
object-fit:contain;
transition:transform .45s ease;
}
.products-modern .product-item:hover .product-item-thumb img{
transform:scale(1.06);
}
.products-modern .badges{
position:absolute;
top:20px;
left:20px;
background:var(--accent);
color:#fff;
font-size:.74rem;
font-weight:700;
padding:.28rem .62rem;
border-radius:30px;
z-index:2;
letter-spacing:.02em;
box-shadow:0 3px 8px rgba(231,60,23,.28);
}
.products-modern .product-item-info{
display:flex;
flex-direction:column;
flex:1;
}
.products-modern .product-item-title{
font-size:.92rem;
line-height:1.35;
font-weight:600;
margin-bottom:.15rem;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.products-modern .product-item-title a{
color:#1f2937;
text-decoration:none;
transition:color .2s ease;
}
.products-modern .product-item-title a:hover{ color:var(--accent); }
.products-modern .product-item-info small{
display:block;
margin:.05rem 0 .9rem !important;
line-height:1.3;
color:#6b7280;
font-size:.73rem;
text-transform:uppercase;
letter-spacing:.04em;
font-weight:600;
}
/* Oculta los
del markup original (el espaciado lo maneja el CSS) */
.products-modern .product-item-info br{ display:none; }
/* Precio + acción anclados al fondo → alineación pareja aunque los nombres varíen */
.products-modern .product-item-price{
display:flex !important;
justify-content:center !important;
align-items:center;
font-size:1.1rem;
font-weight:700;
color:#1f2937;
margin:auto 0 .8rem;
}
.products-modern .product-item-price .price-old{
font-size:.85rem;
font-weight:500;
color:#6b7280;
text-decoration:line-through;
}
/* Producto con descuento (tiene badge): precio en rojo para resaltar */
.products-modern .product-item:has(.badges) .product-item-price{
color:var(--accent);
}
.products-modern .add-shopping-cart{
display:flex;
align-items:center;
justify-content:center;
}
.products-modern .add-to-cart-btn{
background:var(--accent) !important;
border:0 !important;
color:#fff !important;
height:50px;
border-radius:30px !important;
transition:background .2s ease, transform .2s ease;
}
.products-modern .add-to-cart-btn:hover{
background:#cf3414 !important;
color:#fff !important;
transform:scale(1.05);
}
/* En móvil/tablet el input baja a 45px (style.css): igualamos el botón para que no quede más alto */
@media only screen and (max-width:991px){
.products-modern .add-to-cart-btn{ height:45px; }
}
.products-modern .btn-cotizar{
background:#1f2937 !important;
border:0 !important;
border-radius:30px !important;
height:50px;
line-height:48px;
padding:0 1.4rem;
font-size:.85rem;
font-weight:600;
color:#fff !important;
display:inline-block;
}
.products-modern .btn-cotizar:hover{ background:#111827 !important; color:#fff !important; }
.products-modern .product-detail-cart-btn{
background:#f1f2f4;
color:#6b7280;
border:0;
border-radius:30px;
padding:.55rem 1.2rem;
font-size:.82rem;
font-weight:600;
cursor:not-allowed;
}
/* ---- blog_seccion.php (bloque inline movido) ---- */
.blog-sec{ padding:48px 0; background:#fafbfc; }
.blog-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.blog-sec-title{ font-size:1.5rem; font-weight:700; color:#1f2937; margin:0; }
.blog-sec-sub{ color:#6b7280; font-size:.95rem; margin:4px 0 0; }
.blog-sec-all{ color:#e73c17; font-weight:600; font-size:.92rem; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; }
.blog-sec-all:hover{ color:#e73c17; text-decoration:underline; }
.blog-sec-grid{ display:grid; gap:22px; grid-template-columns:1fr; }
@media(min-width:576px){ .blog-sec-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:992px){ .blog-sec-grid{ grid-template-columns:repeat(4,1fr); } }
.bcard{ display:flex; flex-direction:column; background:#fff; border:1px solid #eef0f2; border-radius:16px; overflow:hidden; box-shadow:0 2px 10px rgba(17,24,39,.05); text-decoration:none; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.bcard:hover{ box-shadow:0 16px 36px rgba(17,24,39,.12); transform:translateY(-4px); border-color:#fbd9d2; }
.bcard-media{ position:relative; aspect-ratio:16/10; background:#f6f7f8; overflow:hidden; }
.bcard-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.bcard:hover .bcard-media img{ transform:scale(1.04); }
.bcard-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.4rem; color:#fff; background:linear-gradient(135deg,#e73c17,#ff7a5c); }
.bcard-chip{ position:absolute; top:10px; left:10px; background:rgba(255,255,255,.95); color:#1f2937; font-size:.7rem; font-weight:700; padding:5px 10px; border-radius:999px; box-shadow:0 2px 8px rgba(17,24,39,.12); }
.bcard-body{ padding:15px 16px 17px; display:flex; flex-direction:column; flex:1 1 auto; }
.bcard-title{ font-size:1rem; font-weight:700; color:#1f2937; line-height:1.3; margin:0 0 8px; }
.bcard-excerpt{ color:#6b7280; font-size:.88rem; line-height:1.55; margin:0 0 14px; flex:1 1 auto; }
.bcard-link{ color:#e73c17; font-weight:600; font-size:.88rem; display:inline-flex; align-items:center; gap:6px; }
.bcard-link i{ transition:transform .18s ease; }
.bcard:hover .bcard-link i{ transform:translateX(3px); }
/* ---- faq_accordion.php (bloque inline movido) ---- */
.faq-elegant{
--faq-accent:#d6293e;
max-width:820px;
margin-left:auto;
margin-right:auto;
}
.faq-elegant .faq-divider{
border:0;
height:1px;
background:linear-gradient(to right, transparent, #e2e5e9 18%, #e2e5e9 82%, transparent);
margin:0 0 2.6rem;
opacity:1;
}
.faq-elegant h2{
font-weight:700;
color:#1f2937;
text-align:center;
position:relative;
padding-bottom:.9rem;
margin-bottom:2.2rem !important;
}
.faq-elegant h2::after{
content:"";
position:absolute;
left:50%;
bottom:0;
transform:translateX(-50%);
width:54px;
height:3px;
border-radius:3px;
background:var(--faq-accent);
}
.faq-elegant .accordion-item{
background:#fff;
border:1px solid #eef0f2;
border-radius:14px;
margin-bottom:14px;
box-shadow:0 2px 10px rgba(17,24,39,.04);
overflow:hidden;
transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.faq-elegant .accordion-item:last-child{ margin-bottom:0; }
.faq-elegant .accordion-item:hover{
box-shadow:0 8px 24px rgba(17,24,39,.09);
transform:translateY(-2px);
}
.faq-elegant .accordion-item:has(.accordion-button:not(.collapsed)){
box-shadow:0 10px 28px rgba(17,24,39,.11);
border-color:#e5e7eb;
}
.faq-elegant .accordion-button{
background:#fff;
border:0;
padding:1.15rem 1.4rem;
font-weight:600;
font-size:1.03rem;
line-height:1.4;
color:#1f2937;
box-shadow:none;
}
.faq-elegant .accordion-button:not(.collapsed){
background:#fff;
color:var(--faq-accent);
box-shadow:none;
}
.faq-elegant .accordion-button:focus{
box-shadow:none;
border-color:transparent;
outline:none;
}
.faq-elegant .accordion-button::after{
width:1.05rem;
height:1.05rem;
background-size:1.05rem;
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='%239ca3af'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3e%3c/svg%3e");
transition:transform .25s ease;
}
.faq-elegant .accordion-button:not(.collapsed)::after{
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='%23d6293e'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3e%3c/svg%3e");
}
.faq-elegant .accordion-body{
padding:0 1.4rem 1.35rem;
color:#5b6470;
line-height:1.7;
font-size:.96rem;
}
/* ---- carousel_a11y.php (bloque inline movido) ---- */
.snc-carousel-a11y{
position:absolute; z-index:20; top:12px; right:12px;
width:38px; height:38px;
display:inline-flex; align-items:center; justify-content:center;
border:0; border-radius:50%;
background:rgba(31,41,55,.62); color:#fff; cursor:pointer;
font-size:14px; line-height:1; transition:background .15s ease;
}
.snc-carousel-a11y:hover{ background:rgba(31,41,55,.88); }
.snc-carousel-a11y:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (max-width:575px){
.snc-carousel-a11y{ width:32px; height:32px; font-size:12px; top:8px; right:8px; }
}
/* ---- search_autocomplete.php (bloque inline movido) ---- */
.search-suggest{
position:absolute;
top:calc(100% + 8px);
left:0;
right:0;
background:#fff;
border:1px solid #eef0f2;
border-radius:14px;
box-shadow:0 14px 34px rgba(17,24,39,.16);
list-style:none;
margin:0;
padding:6px;
z-index:1050;
max-height:380px;
overflow-y:auto;
display:none;
}
.search-suggest.open{ display:block; }
.search-suggest li{
display:flex;
align-items:center;
gap:.65rem;
padding:.6rem .75rem;
border-radius:9px;
cursor:pointer;
font-size:.9rem;
color:#374151;
line-height:1.3;
}
.search-suggest li .si-icon{ color:#8a909a; font-size:.85rem; flex-shrink:0; }
.search-suggest li:hover,
.search-suggest li.active{ background:#f6f7f8; }
.search-suggest li .si-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-suggest li .si-text b{ color:#e73c17; font-weight:700; }
.search-suggest .si-empty{ padding:.7rem .75rem; color:#6b7280; font-size:.88rem; cursor:default; }
/* Variante para el buscador móvil (dentro del offcanvas): fluye en el documento
en vez de posicionarse absoluto, para que no se recorte. */
.search-suggest-inline{
position:static;
box-shadow:none;
margin-top:12px;
max-height:60vh;
}
/* El offcanvas de búsqueda móvil tenía altura fija (215px) y recortaba las
sugerencias: que crezca con el contenido y haga scroll interno si es necesario. */
.aside-search-box-wrapper.offcanvas-top{ height:auto !important; max-height:92vh; }
.aside-search-box-wrapper .offcanvas-body{ overflow-y:auto; padding-bottom:24px; }
/* La lupa es absolute con height:100%; al meter las sugerencias en .search-form
el form crece y el botón se estiraba. Lo fijamos a la altura del input. */
.aside-search-box-wrapper .search-form .search-button{ height:50px; }
/* ---- producto.php (bloque inline movido) ---- */
/* Descripciones del producto responsivas: el HTML cargado (imágenes, tablas,
videos) se adapta al ancho en móvil sin desbordar. */
.product-detail-desc, .product-detail-nav-description,
#description, #specification, #adicional{ max-width:100%; }
.product-detail-nav-description img, #description img, #specification img, #adicional img{
max-width:100%; height:auto;
}
.product-detail-nav-description table, #description table, #specification table, #adicional table{
max-width:100%; display:block; overflow-x:auto; border-collapse:collapse;
}
.product-detail-nav-description iframe, #description iframe, #specification iframe, #adicional iframe{
max-width:100%;
}
/* ---- categoria.php (bloque inline movido) ---- */
.cat-more{ text-align:center; padding:30px 0 8px; }
.cat-more-btn{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #e73c17; color:#e73c17; font-weight:600; font-size:.95rem; padding:12px 26px; border-radius:10px; text-decoration:none; transition:background .15s, color .15s; cursor:pointer; }
.cat-more-btn:hover{ background:#e73c17; color:#fff; }
.cat-more-btn.loading{ opacity:.6; pointer-events:none; }
.cat-more-info{ color:#8a909a; font-size:.82rem; margin:12px 0 0; }
/* ---- nosotros.php (bloque inline movido) ---- */
.home-modern .nos-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center; }
.home-modern .nos-stats > div{ background:#fff; border:1px solid #eef0f2; border-radius:14px; padding:24px 16px; }
.home-modern .nos-stats strong{ display:block; font-size:1.9rem; font-weight:800; color:var(--accent); line-height:1; }
.home-modern .nos-stats span{ display:block; margin-top:6px; color:#6b7280; font-size:.85rem; }
.home-modern .nos-areas{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.home-modern .nos-intro-img{ width:100%; height:auto; border-radius:18px; box-shadow:0 10px 30px rgba(17,24,39,.1); }
@media (max-width:767px){ .home-modern .nos-stats{ grid-template-columns:repeat(2,1fr); } .home-modern .nos-areas{ grid-template-columns:1fr; } }
/* ---- contacto.php (bloque inline movido) ---- */
.home-modern .ct-card{ background:#fff; border:1px solid #eef0f2; border-radius:14px; padding:18px 20px; margin-bottom:14px; display:flex; gap:14px; }
.home-modern .ct-card .ct-ic{ width:46px; height:46px; flex-shrink:0; border-radius:12px; background:#fff7f5; color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.home-modern .ct-card h4{ font-size:.95rem; font-weight:700; color:var(--dark); margin:0 0 6px; }
.home-modern .ct-card a, .home-modern .ct-card p{ display:block; color:#6b7280; font-size:.9rem; margin:0 0 3px; text-decoration:none; line-height:1.5; }
.home-modern .ct-card a:hover{ color:var(--accent); }
.home-modern .ct-card .ct-links a{ display:inline-block; margin-right:14px; color:var(--accent); font-weight:600; }
.home-modern .ct-card .ct-phone{ display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.home-modern .ct-card .ct-phone i{ width:16px; text-align:center; color:#6b7280; flex-shrink:0; }
.home-modern .ct-form{ background:#fff; border:1px solid #eef0f2; border-radius:16px; padding:28px; box-shadow:0 6px 26px rgba(17,24,39,.05); }
.home-modern .ct-form h3{ font-size:1.2rem; font-weight:700; color:var(--dark); margin:0 0 20px; }
.home-modern .ct-field{ margin-bottom:16px; }
.home-modern .ct-field label{ display:block; font-size:.82rem; font-weight:600; color:#374151; margin-bottom:6px; }
.home-modern .ct-field .form-control{ width:100%; height:48px; border:1px solid #e5e7eb; border-radius:10px; padding:0 14px; font-size:.92rem; color:#1f2937; box-shadow:none; transition:border-color .2s ease, box-shadow .2s ease; }
.home-modern .ct-field textarea.form-control{ height:auto; min-height:130px; padding:12px 14px; resize:vertical; }
.home-modern .ct-field .form-control:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(231,60,23,.12); outline:none; }
.home-modern .ct-form .btn-submit{ background:var(--accent); color:#fff; border:0; border-radius:30px; height:50px; padding:0 28px; font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:background .2s ease; }
.home-modern .ct-form .btn-submit:hover{ background:#cf3414; color:#fff; }
.home-modern .ct-captcha{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.home-modern .ct-captcha img{ height:48px; border:1px solid #eef0f2; border-radius:10px; }
.home-modern .ct-captcha .ct-field{ margin-bottom:0; }
.home-modern .ct-captcha .ct-field .form-control{ max-width:200px; }
.home-modern .ct-map iframe{ width:100%; height:400px; border:0; display:block; }
/* ---- usuario/ingreso.php (bloque inline movido) ---- */
.auth-modern{ --accent:#e73c17; }
.auth-modern > .container{ padding-top:36px; }
.auth-modern .auth-card{ background:#fff; border:1px solid #eef0f2; border-radius:18px; box-shadow:0 6px 26px rgba(17,24,39,.06); padding:34px 34px; }
.auth-modern h3{ font-weight:700; color:#1f2937; font-size:1.35rem; margin-bottom:.35rem; }
.auth-modern .auth-sub{ color:#6b7280; font-size:.92rem; margin-bottom:1.5rem; line-height:1.55; }
.auth-modern .auth-sub strong{ color:#374151; }
.auth-modern .auth-field{ position:relative; margin-bottom:1rem; }
.auth-modern .auth-field > i{ position:absolute; left:17px; top:50%; transform:translateY(-50%); color:#6b7280; font-size:.95rem; }
.auth-modern .auth-field input{ width:100%; height:50px; border:1px solid #e5e7eb; border-radius:30px; padding:0 18px 0 44px; font-size:.92rem; color:#1f2937; background:#fff; transition:border-color .2s ease, box-shadow .2s ease; }
.auth-modern .auth-field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(231,60,23,.12); }
.auth-modern .auth-field input::placeholder{ color:#6b7280; }
.auth-modern .auth-btn{ width:100%; height:50px; background:var(--accent); color:#fff; border:0; border-radius:30px; font-weight:600; font-size:.95rem; transition:background .2s ease, transform .1s ease; }
.auth-modern .auth-btn:hover{ background:#cf3414; }
.auth-modern .auth-btn:active{ transform:translateY(1px); }
.auth-modern .auth-btn-dark{ background:#1f2937; }
.auth-modern .auth-btn-dark:hover{ background:#111827; }
.auth-modern .auth-link{ color:var(--accent); font-size:.88rem; text-decoration:none; font-weight:500; cursor:pointer; }
.auth-modern .auth-link:hover{ text-decoration:underline; }
.auth-modern .auth-note{ font-size:.8rem; color:#6b7280; line-height:1.55; margin:.5rem 0 1.1rem; }
.auth-modern .auth-note a{ color:var(--accent); }
.auth-modern .auth-divider{ border:0; border-top:1px solid #f1f2f4; margin:1.5rem 0; }
.auth-modern .recuperar-box{ display:none; }
.auth-modern .recuperar-box.show{ display:block; }
.auth-modern .validation-box{ max-width:1040px; margin:0 auto 1.5rem; }
.auth-modern .validation-box .alert{ border-radius:12px; }
/* ---- carro/carro.php (bloque inline movido) ---- */
.cart-modern{ --accent:#e73c17; }
.cart-modern .cart-title{ font-weight:700; color:#1f2937; font-size:1.4rem; margin-bottom:1.2rem; }
.cart-modern .cart-line{
display:flex; align-items:center; gap:16px;
background:#fff; border:1px solid #eef0f2; border-radius:14px;
padding:14px 16px; margin-bottom:14px;
box-shadow:0 2px 8px rgba(17,24,39,.04);
}
.cart-modern .cart-line-img{ width:74px; height:74px; flex-shrink:0; border:1px solid #eef0f2; border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff; }
.cart-modern .cart-line-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.cart-modern .cart-line-info{ flex:1; min-width:0; }
.cart-modern .cart-line-name{ font-weight:600; font-size:.95rem; line-height:1.35; color:#1f2937; }
.cart-modern .cart-line-name a{ color:#1f2937; text-decoration:none; }
.cart-modern .cart-line-name a:hover{ color:var(--accent); }
.cart-modern .cart-line-tag{ font-size:.78rem; color:var(--accent); font-weight:600; margin-top:3px; }
.cart-modern .cart-line-unit{ font-size:.85rem; color:#6b7280; margin-top:2px; }
.cart-modern .cart-line-unit .old{ text-decoration:line-through; color:#6b7280; margin-right:.35rem; }
.cart-modern .cart-qty{ display:inline-flex; align-items:center; border:1px solid #e5e7eb; border-radius:30px; overflow:hidden; flex-shrink:0; }
.cart-modern .cart-qty button{ width:34px; height:42px; border:0; background:#fff; color:#1f2937; font-size:1.1rem; cursor:pointer; line-height:1; }
.cart-modern .cart-qty button:hover{ color:var(--accent); }
.cart-modern .cart-qty input{ width:44px; height:42px; border:0; text-align:center; font-weight:600; color:#1f2937; -moz-appearance:textfield; }
.cart-modern .cart-qty input::-webkit-outer-spin-button,
.cart-modern .cart-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cart-modern .cart-line-total{ font-weight:700; font-size:1.05rem; color:#1f2937; min-width:90px; text-align:right; flex-shrink:0; }
.cart-modern .cart-line-remove{ color:#8a909a; font-size:1.05rem; flex-shrink:0; }
.cart-modern .cart-line-remove:hover{ color:var(--accent); }
.cart-modern .cart-summary{ background:#fff; border:1px solid #eef0f2; border-radius:16px; box-shadow:0 6px 22px rgba(17,24,39,.06); padding:22px; }
/* Sticky removido del resumen del carro (evita ocultar contenido). */
.cart-modern .cart-summary h4{ font-weight:700; color:#1f2937; font-size:1.1rem; margin-bottom:1rem; }
.cart-modern .summary-row{ display:flex; justify-content:space-between; align-items:baseline; padding:.45rem 0; color:#4b5563; }
.cart-modern .summary-total{ border-top:1px solid #f1f2f4; margin-top:.5rem; padding-top:1rem; font-size:1.15rem; font-weight:700; color:#1f2937; }
.cart-modern .summary-total .old{ text-decoration:line-through; color:#6b7280; font-size:.9rem; font-weight:500; margin-right:.4rem; }
.cart-modern .btn-finalizar{ display:block; width:100%; text-align:center; background:var(--accent); color:#fff; border:0; font-weight:600; border-radius:30px; padding:.8rem; margin-top:1.1rem; text-decoration:none; transition:background .2s ease; }
.cart-modern .btn-finalizar:hover{ background:#cf3414; color:#fff; }
.cart-modern .cart-coupon input{ width:100%; border:1px solid #e5e7eb; border-radius:30px; padding:.6rem 1rem; font-size:.9rem; }
.cart-modern .cart-coupon button{ width:100%; margin-top:.5rem; background:#1f2937; color:#fff; border:0; border-radius:30px; padding:.6rem; font-weight:600; }
.cart-modern .cart-coupon button:hover{ background:#111827; }
.cart-modern .cart-foot{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-top:6px; }
.cart-modern .btn-seguir{ color:#6b7280; text-decoration:none; font-weight:600; font-size:.9rem; }
.cart-modern .btn-seguir:hover{ color:var(--accent); }
.cart-modern .btn-actualizar{ background:none; border:1px solid #e5e7eb; color:#6b7280; border-radius:30px; padding:.5rem 1.1rem; font-size:.85rem; font-weight:600; }
.cart-modern .btn-actualizar:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:575px){
.cart-modern.section-space{ padding-top:18px !important; }
.cart-modern .cart-line{ flex-wrap:wrap; }
.cart-modern .cart-line-info{ flex-basis:calc(100% - 90px); }
.cart-modern .cart-qty, .cart-modern .cart-line-total{ margin-top:8px; }
.cart-modern .cart-line-total{ margin-left:auto; }
}
/* ---- carro/carrovacio.php (bloque inline movido) ---- */
.cart-empty{ max-width:520px; margin:0 auto; text-align:center; padding:40px 20px 60px; }
.cart-empty-icon{ width:96px; height:96px; margin:0 auto 24px; border-radius:50%; background:#f6f7f8; display:flex; align-items:center; justify-content:center; }
.cart-empty-icon i{ font-size:42px; color:#8a909a; }
.cart-empty h1{ font-size:1.6rem; font-weight:700; color:#1f2937; margin-bottom:.6rem; }
.cart-empty p{ color:#6b7280; margin-bottom:1.6rem; }
.cart-empty .btn-explorar{ display:inline-block; background:#e73c17; color:#fff; font-weight:600; border-radius:30px; padding:.75rem 2rem; text-decoration:none; transition:background .2s ease; }
.cart-empty .btn-explorar:hover{ background:#cf3414; color:#fff; }
/* ---- checkout_steps.php (bloque inline movido) ---- */
.checkout-steps{ display:flex; align-items:flex-start; justify-content:center; max-width:560px; margin:0 auto; padding:40px 0 38px; }
.checkout-steps .cs-step{ display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
.checkout-steps .cs-line{ position:absolute; top:27px; left:50%; width:100%; height:3px; background:#eef0f2; z-index:0; }
.checkout-steps .cs-step:last-child .cs-line{ display:none; }
.checkout-steps .cs-icon{
width:54px; height:54px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:1.2rem; background:#f1f2f4; color:#6b7280;
border:2px solid #f1f2f4; position:relative; z-index:1;
transition:background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.checkout-steps .cs-label{ margin-top:.6rem; font-size:.85rem; font-weight:600; color:#6b7280; text-align:center; }
/* Paso completado */
.checkout-steps .cs-step.done .cs-icon{ background:#16a34a; border-color:#16a34a; color:#fff; }
.checkout-steps .cs-step.done .cs-label{ color:#16a34a; }
.checkout-steps .cs-step.done .cs-line{ background:#16a34a; }
/* Paso actual */
.checkout-steps .cs-step.active .cs-icon{ background:#e73c17; border-color:#e73c17; color:#fff; box-shadow:0 8px 18px rgba(231,60,23,.3); }
.checkout-steps .cs-step.active .cs-label{ color:#1f2937; }
@media (max-width:575px){
.checkout-steps{ padding:26px 0 24px; }
.checkout-steps .cs-icon{ width:46px; height:46px; font-size:1rem; }
.checkout-steps .cs-line{ top:23px; }
.checkout-steps .cs-label{ font-size:.78rem; }
}