/* TIPOGRAFÍA OFICIAL */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap'); body, p, li, span { font-family: 'Roboto', sans-serif !important; color: #222 !important; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5 { font-family: 'Montserrat', sans-serif !important; -webkit-font-smoothing: antialiased; } /* MARQUEE PROFESIONAL */ .corio-marquee { width: 100%; overflow: hidden; background-color: #ffffff !important; border-top: 2px solid #b3162d !important; border-bottom: 2px solid #b3162d !important; padding: 10px 0 !important; color: #b3162d !important; font-size: 18px !important; font-weight: 500 !important; letter-spacing: 0.4px; } .corio-marquee-inner { display: inline-block; padding-left: 100%; white-space: nowrap; animation: corio-scroll 18s linear infinite; } @keyframes corio-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* BOTONES CORIODERMINA */ button, .btn, .add-to-cart, input[type="submit"] { background-color: #cc0000 !important; color: #ffffff !important; padding: 12px 22px !important; border-radius: 8px !important; font-weight: 600 !important; border: none !important; transition: 0.3s ease-in-out; } button:hover, .btn:hover, input[type="submit"]:hover { background-color: #ffcc00 !important; color: #000 !important; transform: translateY(-2px); } .product-price, .price { color: #cc0000 !important; font-weight: 700 !important; font-size: 20px !important; } .blog_item_title, .blog_item_title a { font-family: 'Montserrat', sans-serif !important; font-size: 22px !important; color: #000 !important; text-align: center !important; font-weight: 600 !important; } .blog_item_title a:hover { color: #ffcc00 !important; } a[href*="freewebstore.com"] { display: none !important; } /* Quitar franjas rojas fuertes */ div[style*="background-color: #c8102e"] { background-color: #ffffff !important; border-top: 3px solid #b3162d !important; border-bottom: none !important; } /* BOTONES CORIODERMINA — FIX TOTAL */ button, .btn, .add-to-cart, .add_to_cart_small, .addtobasket, input[type="submit"], input[type="button"], .add-to-cart-button { background-color: #cc0000 !important; color: #ffffff !important; padding: 12px 22px !important; border-radius: 8px !important; border: none !important; font-weight: 600 !important; letter-spacing: 0.5px !important; transition: 0.3s ease-in-out; text-align: center !important; } /* Hover */ button:hover, .btn:hover, .addtobasket:hover, .add-to-cart-button:hover, input[type="submit"]:hover { background-color: #ffcc00 !important; color: #000 !important; transform: translateY(-2px); } /* ======== AJUSTES GLOBAL MOBILE ======== */ @media (max-width: 768px) { /* Reducir títulos demasiado grandes */ h1, .page-title { font-size: 24px !important; line-height: 1.3 !important; } h2 { font-size: 20px !important; } h3 { font-size: 18px !important; } /* Párrafos más legibles en celular */ p, li, span { font-size: 16px !important; line-height: 1.6 !important; } /* Botones centrados y legibles */ a.button, .hb-cta-button, .btn, .product-button { font-size: 16px !important; padding: 12px 20px !important; margin: 10px auto !important; display: block !important; text-align: center !important; } /* Imágenes que no se salgan */ img { max-width: 100% !important; height: auto !important; } /* Centrar productos */ .product, .product-list-item { text-align: center !important; } /* Ajustar columnas del blog */ .blog-post { width: 100% !important; margin: 0 auto !important; } /* Ajustar el banner */ .banner, .hero-image, .header-image { width: 100% !important; height: auto !important; } /* Ajustar márgenes excesivos */ .content, .container, section { padding: 10px !important; margin: 0 !important; } /* Search bar centrada */ .search-box input { width: 100% !important; font-size: 16px !important; } } /* BLOG POSTS — PERFECT PARALLEL FIX */ .home_blog_container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 30px !important; } .blog_item_home { width: 46% !important; /* 2 columnas perfectas */ margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; text-align: center !important; float: none !important; } .blog_item_header, .blog_item_content, .blog_item_footer { width: 100% !important; text-align: center !important; padding: 10px 0 !important; margin: 0 auto !important; } .blog_item_title a { font-size: 22px !important; font-weight: 600 !important; display: block !important; width: 100% !important; } /* BUTTON ALIGNMENT FIX — CORRECT BUTTON CENTERING */ button, .btn, .addtobasket, .add-to-cart-button, input[type="submit"], input[type="button"], input.addtobasket { display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; padding: 10px 20px !important; line-height: 1.2 !important; background-color: #cc0000 !important; color: #ffffff !important; border-radius: 8px !important; border: none !important; font-weight: 600 !important; font-size: 15px !important; } /* Fix for text overflow */ button *, .btn *, .addtobasket *, .add-to-cart-button * { padding: 0 !important; margin: 0 !important; line-height: 1.2 !important; } /* BLOG READ MORE = MISMO ESTILO QUE BUY NOW */ .blog_item_footer a, .blog_item_home .blog_item_footer a, .blog_item_home a.read-more { background-color: #cc0000 !important; /* rojo Coriodermina */ color: #ffffff !important; /* texto blanco */ padding: 10px 24px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: none !important; } /* Hover igual que los demás botones */ .blog_item_footer a:hover, .blog_item_home .blog_item_footer a:hover, .blog_item_home a.read-more:hover { background-color: #ffcc00 !important; color: #000000 !important; transform: translateY(-2px); } /* FIX ESPECIAL PARA EL BOTÓN DE BÚSQUEDA (LUPA) */ #search input[type="submit"], #header input[type="submit"], header form#search input[type="submit"] { display: inline-block !important; /* quitar flex que lo deforma */ padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; /* deja solo el icono/lupa original */ width: auto !important; height: auto !important; line-height: normal !important; transform: none !important; } /* ============================ FIX: TEXT INSIDE ALL BUTTONS ============================ */ /* Botones generales */ button, .btn, .add-to-cart, input[type="submit"], input[type="button"], a.product-buy, a.product-details, a.read-more { color: #ffffff !important; /* blanco puro */ } /* Botones de BLOG (solo texto del botón, NO headers) */ .blog_item_home .read-more, .blog_item_home .read-more * { color: #ffffff !important; } /* Evitar que los headers del blog se vuelvan blancos */ .blog_item_title, .blog_item_title a, .blog_item_home h1 { color: #000000 !important; /* negro elegante */ } /* ============================ FIX: MATCH YELLOW HOVER ============================ */ button:hover, .btn:hover, .add-to-cart:hover, input[type="submit"]:hover, input[type="button"]:hover, .read-more:hover, .blog_item_home .read-more:hover { background-color: #ffcc00 !important; /* el mismo amarillo */ color: #000000 !important; /* negro como tus BUY NOW */ }/* Forzar visibilidad del menú principal */ #fwsheader nav, #fwsheader ul, #fwsheader li, #fwsheader a { display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 1000 !important; } /* Asegurar que no esté fuera de pantalla */ #fwsheader nav { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; } /******************************************** MENÚ PREMIUM CLÍNICO CORIODERMINA *********************************************/ /* Fondo blanco clínico con separación fina */ #fwsheader { background-color: #ffffff !important; border-bottom: 2px solid #e5e5e5 !important; padding: 14px 0 !important; } /* Contenedor del menú */ #fwsheader nav ul { display: flex !important; justify-content: center !important; gap: 28px !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* Estilo de los enlaces */ #fwsheader nav ul li a { font-family: 'Montserrat', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; color: #333333 !important; padding: 8px 6px !important; text-decoration: none !important; letter-spacing: 0.3px !important; transition: color 0.25s ease, border-bottom 0.25s ease !important; } /* Hover elegante en color ROJO CORIODERMINA */ #fwsheader nav ul li a:hover { color: #c8102e !important; border-bottom: 2px solid #c8102e !important; } /* Asegurar visibilidad absoluta */ #fwsheader nav, #fwsheader nav ul, #fwsheader nav li, #fwsheader nav a { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 9999 !important; } /* Evitar que otros estilos lo sobrescriban */ #header-links, #menu, .navigation, .main-nav { all: unset !important; } /* QUITAR LÍNEA ROJA DEL MARQUEE */ .corio-marquee { border-top: none !important; border-bottom: none !important; } /* Texto clínico debajo del logo */ #fwslogo:after { content: "Welcome to Coriodermina – Dermatological Brand Since 1982 \A Coriodermina.com® · Official Site · Dermatological Care You Can Trust"; white-space: pre-wrap; display: block; text-align: center; margin-top: 6px; font-family: Montserrat, sans-serif; font-size: 13px; color: #444; font-weight: 400; line-height: 1.3; } /* BENEFICIOS ESTILO CLÍNICO, COMO EL EJEMPLO QUE MANDASTE */ .beneficio-linea, .home-benefits td { font-family: 'Montserrat', Helvetica, Arial, sans-serif !important; font-size: 17px !important; color: #333 !important; line-height: 1.55 !important; font-weight: 400 !important; /* NO bold */ } /* MARQUEE MÁS LENTO + COLOR #232F3E */ .corio-marquee, .corio-marquee-inner { color: #232F3E !important; /* azul gris elegante */ font-weight: 400 !important; /* NO bold */ font-family: 'Montserrat', sans-serif !important; } /* MARQUEE MUY LENTO + AZUL OSCURO CLÍNICO */ .corio-marquee, .corio-marquee-inner { color: #0A2540 !important; /* azul oscuro clínico */ font-weight: 400 !important; /* NO bold */ font-family: 'Montserrat', sans-serif !important; } /* velocidad aún más lenta (60s) */ .corio-marquee-inner { animation: corio-scroll 60s linear infinite !important; } /* ================================================ BLOG FIX – FREEWEBSTORE (MOBILE + DESKTOP) ================================================ */ /* Forzar todas las tarjetas del blog al mismo ancho */ .blog-post, .blog-grid-item, .blog-list-item { width: 100% !important; max-width: 100% !important; margin: 0 auto 25px auto !important; display: block !important; } /* Alinear contenido dentro del blog */ .blog-post .post-body, .blog-grid-item .post-body { text-align: left !important; padding: 10px 5px !important; } /* Fix para que las imágenes no se deformen */ .blog-post img, .blog-grid-item img { width: 100% !important; height: auto !important; border-radius: 8px !important; } /* Botón READ MORE corregido */ .blog-post a, .blog-grid-item a, a.read-more { background: #c8102e !important; /* tu rojo corporativo */ color: #fff !important; padding: 10px 18px !important; border-radius: 6px !important; text-decoration: none !important; font-size: 16px !important; display: inline-block !important; margin-top: 10px !important; } /* Centrar títulos */ .blog-post h2, .blog-post h3, .blog-grid-item h2, .blog-grid-item h3 { text-align: center !important; font-size: 22px !important; line-height: 1.3 !important; } /* BLOQUES PERFECTOS EN MÓVIL */ @media (max-width: 768px) { .blog-post, .blog-grid-item { width: 100% !important; margin: 0 auto 25px auto !important; } .blog-post h2, .blog-grid-item h2 { font-size: 20px !important; } .blog-post p, .blog-grid-item p { font-size: 16px !important; line-height: 1.6 !important; } a.read-more { width: 100% !important; text-align: center !important; padding: 12px !important; } /* ================================================ BLOG FIX – FREEWEBSTORE (FULL COMPATIBILITY) ================================================ */ /* Forzar todas las tarjetas del blog al mismo ancho */ .blog-post, .blog-grid-item, .blog-list-item, .fws-blog-post, .blog-item, .post-container { width: 100% !important; max-width: 100% !important; margin: 0 auto 25px auto !important; display: block !important; } /* Estilo interno del contenido */ .blog-post .post-body, .blog-grid-item .post-body, .post-container .post-body, .blog-item .post-body, .fws-blog-post .post-body, .post-content { text-align: left !important; padding: 10px 5px !important; } /* Imágenes perfectas */ .blog-post img, .blog-grid-item img, .fws-blog-post img, .blog-item img, .post-container img { width: 100% !important; height: auto !important; border-radius: 8px !important; object-fit: cover !important; } /* Botón READ MORE */ .blog-post a, .blog-grid-item a, a.read-more, .post-container a, .blog-item a { background: #c8102e !important; color: #fff !important; padding: 10px 18px !important; border-radius: 6px !important; text-decoration: none !important; font-size: 16px !important; display: inline-block !important; margin-top: 10px !important; } /* Títulos centrados */ .blog-post h2, .blog-post h3, .blog-grid-item h2, .blog-grid-item h3, .fws-blog-post h2, .fws-blog-post h3, .blog-item h2, .blog-item h3, .post-container h2 { text-align: center !important; font-size: 22px !important; line-height: 1.3 !important; } /* ============================ MOBILE FIX ============================ */ @media (max-width: 768px) { .blog-post, .blog-grid-item, .fws-blog-post, .blog-item, .post-container { width: 100% !important; margin: 0 auto 25px auto !important; } .blog-post h2, .blog-grid-item h2, .blog-item h2, .post-container h2 { font-size: 20px !important; } .blog-post p, .blog-grid-item p, .blog-item p, .post-container p { font-size: 16px !important; line-height: 1.6 !important; } a.read-more, .blog-post a, .blog-item a, .post-container a { width: 100% !important; text-align: center !important; padding: 12px !important; } /******************************************** 🔥 FIX FINAL — BOTÓN "DETAILS" EXPANDIDO ********************************************/ a.product-details, a.details, a[href*="detail"], .product-more-info, .product-details-button { font-size: 22px !important; /* ⬆ letra más grande */ padding: 16px 42px !important; /* ⬆ más ancho y alto */ font-weight: 700 !important; border-radius: 12px !important; letter-spacing: .6px !important; line-height: 1.35 !important; } /* Hover igual que los BUY NOW */ a.product-details:hover, a.details:hover, a[href*="detail"]:hover { background-color: #ffcc00 !important; color: #000 !important; transform: translateY(-2px); / /* Productos en 1 columna para móvil */ @media (max-width: 768px) { .product-list .product { width: 100% !important; margin-bottom: 18px !important; } @media (max-width: 768px) { h1, h2, h3 { font-size: 20px !important; line-height: 1.3 !important; } p { font-size: 15px !important; line-height: 1.6 !important; } } @media (max-width: 768px) { img { max-width: 100% !important; height: auto !important; } .hero img { width: 100% !important; height: auto !important; } } @media (max-width: 768px) { .container, .content, .section { padding: 10px 15px !important; } .ticker-wrapper { width: 100%; overflow: hidden; background: transparent; padding: 8px 0; } .ticker { display: flex; align-items: center; } .ticker__track { display: inline-block; white-space: nowrap; will-change: transform; animation: ticker-scroll 25s linear infinite; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; color: #232F3E; } /* Faster scroll → lower time; slower → higher time */ @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* MAIN CONTAINER */ .corio-premium-ultra { position: relative; width: 100%; overflow: hidden; background: #ffffff; border-top: 2px solid #C8102E; /* Coriodermina red */ border-bottom: 2px solid #F4B400; /* Coriodermina gold */ padding: 12px 0; } /* TEXT STYLE */ .corio-ultra { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 600; color: #232F3E; letter-spacing: 0.3px; text-shadow: 0 0 3px rgba(255,255,255,0.8); } /* FADE LEFT + RIGHT */ .fade-left:before, .fade-right:after { content: ""; position: absolute; top: 0; width: 110px; height: 100%; z-index: 10; } .fade-left:before { left: 0; background: linear-gradient(to right, #ffffff, rgba(255,255,255,0)); } .fade-right:after { right: 0; background: linear-gradient(to left, #ffffff, rgba(255,255,255,0)); } /* MOBILE OPTIMIZATION */ @media (max-width: 600px) { .corio-ultra { font-size: 15px; } } /* BLOCK FREEWEBSTORE INTRUSIVE FOOTER LINK */ a[href*="freeshopifyalternative.com"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; height: 0 !important; width: 0 !important; overflow: hidden !important; }