/** Theme Name: Astra Child Author: Brainstorm Force Author URI: http://wpastra.com/about/ Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme! Version: 1.0.23 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: astra-child Template: astra */ /* === COQUETAS · sistema de diseño — inicio (generado, no editar a mano) === */ /* ========================================================================== COQUETAS MAKEUP · Sistema de diseño Creative Minds · 2026-08-28 Construido sobre el logotipo oficial (variante 06, «el atomizador que es una C»). Los colores NO se eligieron aquí: se leyeron del logotipo. Contraste verificado con el cálculo WCAG, no a ojo: tinta sobre perla 9.95:1 · tinta sobre arena 8.46:1 · tinta sobre nude 7.24:1 oro-texto sobre perla 5.15:1 · perla sobre tinta 9.95:1 El oro #BE9F63 es DECORATIVO (2.35:1). Nunca lleva texto encima. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap'); :root{ /* Paleta oficial del logotipo */ --cq-perla:#FBF6F0; --cq-arena:#EFE3D6; --cq-nude:#E9CFC8; --cq-rosa:#F5DCDA; --cq-oro:#BE9F63; --cq-oro-txt:#7E6530; /* el oro legible: 5.15:1 sobre perla */ --cq-tinta:#4A3B33; --cq-tinta-90:#3A2E28; --cq-linea:#E4D7C9; --cq-blanco:#FFFFFF; --cq-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif; --cq-sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cq-r:14px; /* radio de tarjeta */ --cq-sombra:0 1px 2px rgba(74,59,51,.04), 0 10px 30px rgba(74,59,51,.07); --cq-sombra-alta:0 2px 6px rgba(74,59,51,.06), 0 18px 46px rgba(74,59,51,.12); --cq-ancho:1180px; } /* ---------- Base ---------------------------------------------------------- */ body, .ast-container{ font-family:var(--cq-sans); color:var(--cq-tinta); } body{ background:var(--cq-perla); font-weight:400; letter-spacing:.005em; } h1,h2,h3,h4,.cq-display, .entry-title,.woocommerce-loop-product__title,.product_title{ font-family:var(--cq-serif); color:var(--cq-tinta); font-weight:500; letter-spacing:-.012em; line-height:1.12; } .cq a{ color:var(--cq-oro-txt); } .cq a:hover{ color:var(--cq-tinta); } /* Contenedor propio: las secciones sangran a todo el ancho y centran adentro */ .cq{ font-family:var(--cq-sans); color:var(--cq-tinta); } .cq *{ box-sizing:border-box; } .cq-wrap{ max-width:var(--cq-ancho); margin-inline:auto; padding-inline:22px; } .cq-sec{ padding-block:clamp(46px,6vw,86px); } .cq-sec--perla{ background:var(--cq-perla); } .cq-sec--arena{ background:var(--cq-arena); } .cq-sec--tinta{ background:var(--cq-tinta); color:var(--cq-perla); } .cq-sec--tinta h2,.cq-sec--tinta h3{ color:var(--cq-perla); } /* ---------- Tipografía de composición ------------------------------------ */ .cq-eyebrow{ font-family:var(--cq-sans); font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--cq-oro-txt); margin:0 0 14px; } .cq-sec--tinta .cq-eyebrow{ color:var(--cq-oro); } .cq-display{ font-size:clamp(2.1rem,5.2vw,3.5rem); margin:0 0 18px; } .cq-h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin:0 0 14px; } .cq-h3{ font-size:clamp(1.15rem,1.9vw,1.4rem); margin:0 0 8px; } .cq-lead{ font-size:clamp(1rem,1.35vw,1.12rem); line-height:1.7; max-width:62ch; margin:0 0 24px; opacity:.92; } .cq-p{ line-height:1.72; margin:0 0 14px; } .cq-mini{ font-size:.85rem; line-height:1.6; opacity:.8; } .cq-center{ text-align:center; } .cq-center .cq-lead{ margin-inline:auto; } /* Filete dorado bajo los títulos de sección */ .cq-rule{ display:block; width:54px; height:2px; background:var(--cq-oro); border:0; margin:0 0 22px; } .cq-center .cq-rule{ margin-inline:auto; } /* ---------- Botones ------------------------------------------------------- */ .cq-btns{ display:flex; flex-wrap:wrap; gap:12px; } .cq-center .cq-btns{ justify-content:center; } .cq-btn{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--cq-sans); font-size:.95rem; font-weight:500; letter-spacing:.03em; padding:14px 28px; border-radius:999px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; } .cq-btn--sol{ background:var(--cq-tinta); color:var(--cq-perla); } .cq-btn--sol:hover{ background:var(--cq-tinta-90); color:var(--cq-blanco); transform:translateY(-2px); box-shadow:var(--cq-sombra); } .cq-btn--linea{ border-color:var(--cq-oro); color:var(--cq-tinta); background:transparent; } .cq-btn--linea:hover{ background:var(--cq-oro); color:var(--cq-tinta); transform:translateY(-2px); } .cq-sec--tinta .cq-btn--linea{ color:var(--cq-perla); } .cq-sec--tinta .cq-btn--sol{ background:var(--cq-perla); color:var(--cq-tinta); } .cq-btn:focus-visible{ outline:3px solid var(--cq-oro-txt); outline-offset:3px; } /* Enlace con flecha */ .cq-link{ display:inline-flex; align-items:center; gap:.4em; text-decoration:none; font-weight:500; font-size:.92rem; letter-spacing:.02em; color:var(--cq-oro-txt); border-bottom:1px solid transparent; transition:border-color .18s, gap .18s, color .18s; } .cq-link:hover{ color:var(--cq-tinta); border-bottom-color:var(--cq-oro); gap:.7em; } .cq-link::after{ content:'→'; font-size:1.05em; line-height:1; } /* ---------- Portada ------------------------------------------------------- */ .cq-hero{ position:relative; overflow:hidden; background:var(--cq-perla); } .cq-hero::before{ content:''; position:absolute; inset:-30% -10% auto auto; width:62vw; height:62vw; max-width:760px; max-height:760px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--cq-rosa) 0%, var(--cq-arena) 48%, transparent 72%); opacity:.75; pointer-events:none; } .cq-hero__in{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center; } .cq-hero__fig{ position:relative; } .cq-hero__fig img{ width:100%; height:auto; display:block; border-radius:var(--cq-r); box-shadow:var(--cq-sombra-alta); } .cq-hero__sello{ position:absolute; left:-14px; bottom:-14px; background:var(--cq-perla); border:1px solid var(--cq-linea); border-radius:999px; padding:11px 20px; font-size:.8rem; font-weight:500; letter-spacing:.04em; box-shadow:var(--cq-sombra); } @media (max-width:860px){ .cq-hero__in{ grid-template-columns:1fr; } .cq-hero__fig{ order:-1; } } /* ---------- Barra de confianza ------------------------------------------- */ .cq-trust{ border-block:1px solid var(--cq-linea); background:var(--cq-perla); } .cq-trust__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; } .cq-trust__i{ padding:22px 18px; text-align:center; border-right:1px solid var(--cq-linea); } .cq-trust__i:last-child{ border-right:0; } .cq-trust__t{ font-family:var(--cq-serif); font-size:1.05rem; margin:0 0 3px; } .cq-trust__d{ font-size:.82rem; line-height:1.5; opacity:.78; margin:0; } @media (max-width:760px){ .cq-trust__in{ grid-template-columns:repeat(2,1fr); } .cq-trust__i:nth-child(2){ border-right:0; } .cq-trust__i:nth-child(-n+2){ border-bottom:1px solid var(--cq-linea); } } /* ---------- Carrusel por desplazamiento (sin JS) -------------------------- */ .cq-rail-head{ display:flex; align-items:end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px; } .cq-rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(216px,1fr); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 22px 20px; margin-inline:-22px; scrollbar-width:thin; scrollbar-color:var(--cq-oro) transparent; } .cq-rail > *{ scroll-snap-align:start; } .cq-rail::-webkit-scrollbar{ height:6px; } .cq-rail::-webkit-scrollbar-thumb{ background:var(--cq-oro); border-radius:99px; } .cq-rail::-webkit-scrollbar-track{ background:var(--cq-linea); border-radius:99px; } @media (min-width:1000px){ .cq-rail{ grid-auto-columns:minmax(240px,1fr); } } .cq-rail-nota{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; opacity:.6; margin:0; } /* ---------- Tarjetas ------------------------------------------------------ */ .cq-card{ display:flex; flex-direction:column; background:var(--cq-blanco); border:1px solid var(--cq-linea); border-radius:var(--cq-r); overflow:hidden; text-decoration:none; color:var(--cq-tinta); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .cq-card:hover{ transform:translateY(-4px); box-shadow:var(--cq-sombra-alta); border-color:var(--cq-oro); } .cq-card__fig{ aspect-ratio:4/3; background:var(--cq-arena); overflow:hidden; } .cq-card__fig img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; } .cq-card:hover .cq-card__fig img{ transform:scale(1.05); } .cq-card__body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; flex:1; } .cq-card__t{ font-family:var(--cq-serif); font-size:1.22rem; margin:0; } .cq-card__d{ font-size:.87rem; line-height:1.55; opacity:.8; margin:0; flex:1; } .cq-card__cta{ font-size:.83rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--cq-oro-txt); margin-top:6px; } /* Tarjeta de marca: solo tipografía, sin foto */ .cq-marca{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:104px; padding:20px 16px; background:var(--cq-blanco); border:1px solid var(--cq-linea); border-radius:var(--cq-r); font-family:var(--cq-serif); font-size:1.08rem; letter-spacing:.04em; color:var(--cq-tinta); text-decoration:none; transition:background-color .2s, border-color .2s, transform .2s; } .cq-marca:hover{ background:var(--cq-arena); border-color:var(--cq-oro); transform:translateY(-3px); } /* Rejilla genérica */ .cq-grid{ display:grid; gap:20px; } .cq-grid--2{ grid-template-columns:repeat(2,1fr); } .cq-grid--3{ grid-template-columns:repeat(3,1fr); } .cq-grid--4{ grid-template-columns:repeat(4,1fr); } @media (max-width:900px){ .cq-grid--3,.cq-grid--4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .cq-grid--2,.cq-grid--3,.cq-grid--4{ grid-template-columns:1fr; } } /* ---------- Bloque de dos columnas con imagen ---------------------------- */ .cq-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,60px); align-items:center; } .cq-split img{ width:100%; height:auto; display:block; border-radius:var(--cq-r); box-shadow:var(--cq-sombra); } .cq-split--flip .cq-split__txt{ order:2; } @media (max-width:820px){ .cq-split{ grid-template-columns:1fr; } .cq-split--flip .cq-split__txt{ order:0; } } /* ---------- Lista de argumentos ------------------------------------------ */ .cq-checks{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px; } .cq-checks li{ position:relative; padding-left:30px; line-height:1.6; } .cq-checks li::before{ content:''; position:absolute; left:0; top:.42em; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--cq-oro); background:radial-gradient(circle, var(--cq-oro) 0 34%, transparent 36%); } /* ---------- Preguntas frecuentes ----------------------------------------- */ .cq-faq{ border-top:1px solid var(--cq-linea); } .cq-faq details{ border-bottom:1px solid var(--cq-linea); } .cq-faq summary{ cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative; font-family:var(--cq-serif); font-size:1.12rem; color:var(--cq-tinta); } .cq-faq summary::-webkit-details-marker{ display:none; } .cq-faq summary::after{ content:'+'; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-family:var(--cq-sans); font-size:1.4rem; font-weight:300; color:var(--cq-oro-txt); transition:transform .2s ease; } .cq-faq details[open] summary::after{ content:'−'; } .cq-faq summary:focus-visible{ outline:3px solid var(--cq-oro-txt); outline-offset:2px; } .cq-faq__a{ padding:0 44px 22px 0; line-height:1.72; margin:0; opacity:.9; } /* ---------- Cierre / llamado final --------------------------------------- */ .cq-cierre{ background:var(--cq-tinta); color:var(--cq-perla); border-radius:var(--cq-r); padding:clamp(32px,5vw,58px); text-align:center; } .cq-cierre h2{ color:var(--cq-perla); } .cq-cierre .cq-lead{ color:var(--cq-perla); opacity:.88; } /* ---------- Aviso interno (marcadores [PENDIENTE]) ----------------------- */ .cq-pendiente{ border:1px dashed #C08A86; background:#FDEEF3; color:#6B3B38; border-radius:10px; padding:12px 16px; font-size:.86rem; line-height:1.55; margin:0 0 14px; } /* ---------- Integración con WooCommerce ---------------------------------- */ .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--cq-serif); font-size:1.05rem; font-weight:500; color:var(--cq-tinta); } .woocommerce ul.products li.product .price, .woocommerce div.product p.price{ color:var(--cq-tinta); font-family:var(--cq-sans); font-weight:500; } .woocommerce ul.products li.product .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt{ background:var(--cq-tinta); color:var(--cq-perla); border-radius:999px; font-family:var(--cq-sans); font-weight:500; letter-spacing:.03em; border:0; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{ background:var(--cq-tinta-90); color:var(--cq-blanco); } .woocommerce ul.products li.product a img{ border-radius:10px; } .woocommerce .woocommerce-breadcrumb{ font-size:.85rem; color:var(--cq-oro-txt); } .woocommerce span.onsale{ background:var(--cq-oro); color:var(--cq-tinta); font-weight:500; } /* Bloques de WooCommerce dentro de nuestras páginas */ .wc-block-grid__product-title, .wp-block-woocommerce-product-template .wp-block-post-title{ font-family:var(--cq-serif); } .wc-block-featured-category{ border-radius:var(--cq-r); overflow:hidden; } /* ---------- Cabecera y pie ------------------------------------------------ */ .ast-primary-header-bar, .site-header{ background:var(--cq-perla) !important; border-bottom:1px solid var(--cq-linea); } .main-header-menu a{ font-family:var(--cq-sans); letter-spacing:.04em; font-size:.95rem; } .site-footer, .ast-small-footer{ background:var(--cq-tinta); color:var(--cq-perla); } .site-footer a, .ast-small-footer a{ color:var(--cq-nude); } /* ---------- Accesibilidad / movimiento ----------------------------------- */ @media (prefers-reduced-motion:reduce){ .cq *,.cq *::before,.cq *::after{ transition:none !important; animation:none !important; } .cq-card:hover{ transform:none; } .cq-rail{ scroll-behavior:auto; } } /* ========================================================================== Correcciones medidas sobre el render (28-ago). Cada una salio de mirar el HTML que el navegador pinta, no de suponer. ========================================================================== */ /* 1. Cabecera. El logotipo YA dice «Coquetas Makeup»: repetirlo como titulo del sitio lo imprimia dos veces, y ademas salia a 670 px de ancho. */ .ast-site-identity .site-title, .ast-site-identity .site-description{ display:none !important; } .site-header .custom-logo, .ast-site-identity img.custom-logo{ max-width:240px !important; width:auto !important; height:auto !important; } @media (max-width:600px){ .site-header .custom-logo{ max-width:168px !important; } } /* 2. Fondo perla en todo el sitio: Astra lo dejaba blanco. */ body, .site, #page{ background-color:var(--cq-perla); } /* 3. Astra subraya todo enlace dentro del contenido. En una tarjeta o un boton eso se ve roto; el subrayado se conserva donde SI ayuda: dentro de un parrafo, que es donde el usuario necesita distinguir el enlace. */ .cq a, .cq .cq-btn, .cq .cq-card, .cq .cq-marca, .cq .cq-link, .entry-content .cq a{ text-decoration:none; } .cq .cq-p a, .cq .cq-lead a, .cq .cq-faq__a a, .cq .cq-card__d a, .entry-content .cq .cq-p a, .entry-content .cq .cq-lead a{ text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; } /* 4. Los bloques de producto de WooCommerce venian con el azul de fabrica (#046BD2) en «Anadir al carrito» y con el titulo subrayado. */ .wc-block-grid__product{ background:var(--cq-blanco); border:1px solid var(--cq-linea); border-radius:var(--cq-r); padding:16px 16px 20px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .wc-block-grid__product:hover{ transform:translateY(-4px); box-shadow:var(--cq-sombra-alta); border-color:var(--cq-oro); } .wc-block-grid__product-link, .entry-content .wc-block-grid__product-link{ text-decoration:none !important; } .wc-block-grid__product-title{ font-family:var(--cq-serif) !important; font-size:1.05rem !important; font-weight:500; line-height:1.25; color:var(--cq-tinta); margin-bottom:6px; } .wc-block-grid__product-price, .wc-block-grid__product-price .amount{ font-family:var(--cq-sans) !important; font-weight:500; color:var(--cq-tinta) !important; } .wc-block-grid__product-image img{ border-radius:10px; } .wc-block-grid__product .wp-block-button__link, .wc-block-grid__product a.add_to_cart_button, .entry-content .wc-block-grid__product .wp-block-button__link{ background:var(--cq-tinta) !important; color:var(--cq-perla) !important; border:0 !important; border-radius:999px !important; font-family:var(--cq-sans) !important; font-weight:500; letter-spacing:.03em; padding:11px 22px !important; text-decoration:none !important; } .wc-block-grid__product .wp-block-button__link:hover, .wc-block-grid__product a.add_to_cart_button:hover{ background:var(--cq-tinta-90) !important; color:var(--cq-blanco) !important; } /* 5. Los bloques de producto van pegados a la seccion que los presenta, para que se lean como una sola franja y no como un bloque suelto. */ .wp-block-woocommerce-handpicked-products, .wp-block-woocommerce-product-category{ margin:0 !important; padding:0 22px clamp(40px,5vw,72px); } .wp-block-woocommerce-handpicked-products{ background:var(--cq-arena); } .wp-block-woocommerce-product-category{ background:var(--cq-perla); } .wp-block-woocommerce-handpicked-products .wc-block-grid, .wp-block-woocommerce-product-category .wc-block-grid, .wp-block-woocommerce-handpicked-products > .wc-block-grid__products, .wp-block-woocommerce-product-category > .wc-block-grid__products{ max-width:var(--cq-ancho); margin-inline:auto; } #cq-destacado{ padding-bottom:6px; } /* 6. El contenido de la pagina no lleva la caja blanca ni el ancho de Astra: nuestras secciones sangran a todo el ancho y centran por dentro. */ .page .entry-content > .cq, .page .entry-content > .wp-block-woocommerce-handpicked-products, .page .entry-content > .wp-block-woocommerce-product-category{ margin-inline:0; } /* 7. Packshots. Las fotos del distribuidor vienen cuadradas y con fondo blanco. Recortadas a 4:3 con `cover` mostraban puro fondo y el producto quedaba fuera del encuadre, asi que van con `contain`. Primero se probo `mix-blend-mode:multiply` para fundir el blanco de la foto con el panel. Se descarto tras medirlo: las imagenes estan sanas -se descargaron y se comprobo que traen pixeles opacos y oscuros- pero el blend las pintaba en blanco de forma intermitente. Se resuelve con una loseta blanca sobre panel tintado, que ademas es como monta los packshots cualquier tienda seria. */ .cq-card__fig--pack{ background:linear-gradient(155deg, var(--cq-arena) 0%, var(--cq-rosa) 100%); padding:16px; } .cq-card__fig--pack img{ object-fit:contain; background:var(--cq-blanco); border-radius:10px; padding:8px; box-shadow:0 6px 18px rgba(74,59,51,.10); } .cq-pack{ background:linear-gradient(155deg, var(--cq-arena) 0%, var(--cq-rosa) 100%); border-radius:var(--cq-r); padding:clamp(18px,2.4vw,34px); display:flex; align-items:center; justify-content:center; } .cq-pack img{ background:var(--cq-blanco); border-radius:10px !important; box-shadow:0 8px 26px rgba(74,59,51,.12) !important; } .cq-hero__fig .cq-pack{ box-shadow:var(--cq-sombra-alta); } /* 8. El bloque de cierre es oscuro y no lleva la clase `--tinta`, asi que el boton solido salia tinta sobre tinta: invisible. Medido sobre el render. Los colores de aqui se eligieron por contraste calculado sobre #4A3B33: perla 9.95:1 · nude 7.24:1 · oro 4.24:1 (suficiente solo para el filete). */ .cq-cierre .cq-btn--sol{ background:var(--cq-perla); color:var(--cq-tinta); } .cq-cierre .cq-btn--sol:hover{ background:var(--cq-blanco); color:var(--cq-tinta-90); } .cq-cierre .cq-btn--linea{ border-color:var(--cq-oro); color:var(--cq-perla); } .cq-cierre .cq-btn--linea:hover{ background:var(--cq-oro); color:var(--cq-tinta); } .cq-cierre .cq-eyebrow{ color:var(--cq-nude); } .cq-cierre .cq-rule{ background:var(--cq-oro); } .cq-cierre .cq-pendiente{ text-align:left; } /* 9. Las fichas de los bloques de Woo tienen titulos de una o dos lineas, y el precio y el boton quedaban a distinta altura entre tarjetas. */ .wc-block-grid__products{ align-items:stretch; } .wc-block-grid__product{ display:flex; flex-direction:column; } .wc-block-grid__product-title{ min-height:2.6em; } .wc-block-grid__product-price{ margin-top:auto; padding-top:6px; } .wc-block-grid__product-add-to-cart{ margin-top:12px; } /* 10. La seccion que presenta un carrusel de productos y el carrusel mismo son dos bloques distintos; juntos dejaban un hueco muerto. */ .cq-sec:has(+ .wp-block-woocommerce-product-category), .cq-sec:has(+ .wp-block-woocommerce-handpicked-products){ padding-bottom:24px; } /* 11. Pie de pagina con la marca. */ .site-footer, .ast-small-footer, .site-below-footer-wrap{ background:var(--cq-tinta) !important; color:var(--cq-perla) !important; } .site-footer a, .ast-small-footer a, .site-below-footer-wrap a{ color:var(--cq-nude) !important; } .ast-small-footer, .site-below-footer-wrap .ast-builder-grid-row{ border-top:0; } /* 12. El enlace que envuelve la ficha de WooCommerce viene con el azul de fabrica (#046BD2). En escritorio no se notaba porque el titulo pinta su propio color, pero en movil la hoja `woocommerce-smallscreen` gana y el titulo salia azul y subrayado. Se ataca el ancla, no el titulo. */ a.wc-block-grid__product-link, a.wc-block-grid__product-link:visited, .entry-content a.wc-block-grid__product-link, .wc-block-grid__product a, .wc-block-grid__product a:visited{ color:var(--cq-tinta) !important; text-decoration:none !important; } .wc-block-grid__product a.wp-block-button__link, .wc-block-grid__product a.add_to_cart_button{ color:var(--cq-perla) !important; } .wc-block-grid__product-title{ color:var(--cq-tinta) !important; } /* 13. Movil: dos botones de anchos distintos uno debajo del otro se ven desalineados. A partir de aqui ocupan el ancho completo. */ @media (max-width:520px){ .cq-btns{ flex-direction:column; align-items:stretch; } .cq-btn{ width:100%; justify-content:center; } .cq-hero__sello{ left:auto; right:10px; bottom:-12px; font-size:.74rem; padding:9px 15px; } .cq-card__fig--pack{ padding:12px; } .cq-trust__i{ padding:18px 12px; } } /* 14. El carrusel se recorre con el dedo, pero sin foco tambien tiene que recorrerse con el teclado: por eso lleva tabindex y un rotulo. */ .cq-rail:focus-visible{ outline:3px solid var(--cq-oro-txt); outline-offset:4px; border-radius:8px; } /* 15. Banner editable por el cliente. Es una de las dos unicas piezas que el cliente puede tocar, asi que se arma con bloques nativos y el estilo vive aqui: si lo borra y lo vuelve a pegar, se sigue viendo igual. Contraste: perla sobre tinta 9.95:1. */ .cq-banner{ background:var(--cq-tinta); color:var(--cq-perla); padding:11px 20px !important; margin:0 !important; } .cq-banner .cq-banner__txt, .cq-banner p{ margin:0 !important; font-family:var(--cq-sans); font-size:.86rem; letter-spacing:.03em; color:var(--cq-perla); line-height:1.5; } .cq-banner a, .entry-content .cq-banner a{ color:var(--cq-nude) !important; text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; } .cq-banner a:hover{ color:var(--cq-blanco) !important; } @media (max-width:520px){ .cq-banner p{ font-size:.8rem; } } /* 16. Franjas de borde a borde. Astra encajona el contenido, asi que las bandas de color terminaban con margenes perla a los lados y el diseno se veia «metido en una caja». `100vw` incluye la barra de desplazamiento en Windows, asi que sangrar con vw suele abrir scroll horizontal. Se compensa con `overflow-x:clip` en la raiz, que a diferencia de `hidden` NO rompe `position:sticky`. Comprobado midiendo scrollWidth a 390 y a 1440 px. */ html{ overflow-x:clip; } .entry-content > .cq-banner, .entry-content > .cq, .entry-content > .wp-block-woocommerce-handpicked-products, .entry-content > .wp-block-woocommerce-product-category{ margin-inline:calc(50% - 50vw) !important; width:100vw; max-width:100vw; } /* El contenido interno vuelve a centrarse en el ancho de lectura */ .entry-content > .cq-banner .wp-block-group__inner-container, .entry-content > .cq-banner > p{ max-width:var(--cq-ancho); margin-inline:auto !important; } /* 17. El bloque de Woo no genera ningun `.wc-block-grid`: su hijo directo es la lista `.wc-block-grid__products`. Al centrar por la clase que no existe, la rejilla se iba a los 1440 px del sangrado completo mientras el titulo de la seccion se quedaba en 1180. Medido con getBoundingClientRect, no a ojo. */ .wp-block-woocommerce-handpicked-products > .wc-block-grid__products, .wp-block-woocommerce-product-category > .wc-block-grid__products{ max-width:var(--cq-ancho) !important; margin-inline:auto !important; } /* 18. Entre dos franjas del mismo color aparecia una linea perla de 15 px: Astra deja margen inferior a cada hijo del contenido. Medido: fin de seccion 1341, inicio del bloque 1356. Las franjas van pegadas. */ .entry-content > .cq, .entry-content > .cq-banner, .entry-content > .wp-block-woocommerce-handpicked-products, .entry-content > .wp-block-woocommerce-product-category{ margin-block:0 !important; } /* ========================================================================== 19. Cabecera y pie construidos con el constructor de Astra (29-ago). El menu, el carrito y la busqueda se colocaron por la Abilities API; aqui solo va la piel de la marca. ========================================================================== */ /* --- Cabecera ------------------------------------------------------------ */ .ast-primary-header-bar, .site-header, .ast-above-header-bar{ background:var(--cq-perla) !important; border-bottom:1px solid var(--cq-linea); } .main-header-menu > .menu-item > .menu-link, .ast-header-break-point .main-header-menu .menu-link{ font-family:var(--cq-sans) !important; font-size:.94rem; font-weight:400; letter-spacing:.045em; color:var(--cq-tinta) !important; } .main-header-menu > .menu-item > .menu-link:hover{ color:var(--cq-oro-txt) !important; } /* subrayado dorado que crece bajo la entrada activa */ .main-header-menu > .menu-item > .menu-link{ position:relative; } .main-header-menu > .menu-item > .menu-link::after{ content:''; position:absolute; left:14px; right:14px; bottom:8px; height:1.5px; background:var(--cq-oro); transform:scaleX(0); transform-origin:left; transition:transform .22s ease; } .main-header-menu > .menu-item:hover > .menu-link::after, .main-header-menu > .current-menu-item > .menu-link::after, .main-header-menu > .current-menu-ancestor > .menu-link::after{ transform:scaleX(1); } /* submenus */ .main-header-menu .sub-menu{ background:var(--cq-perla); border:1px solid var(--cq-linea); border-radius:10px; box-shadow:var(--cq-sombra); padding:6px 0; overflow:hidden; } .main-header-menu .sub-menu .menu-link{ font-size:.9rem; color:var(--cq-tinta) !important; } .main-header-menu .sub-menu .menu-item:hover > .menu-link{ background:var(--cq-arena); } /* carrito y busqueda */ .ast-header-woo-cart .ast-cart-menu-wrap, .ast-header-search .astra-search-icon{ color:var(--cq-tinta) !important; } .ast-cart-menu-wrap .count, .ast-menu-cart-with-border .ast-cart-menu-wrap{ border-color:var(--cq-oro) !important; color:var(--cq-tinta) !important; } /* --- Pie ----------------------------------------------------------------- */ .site-primary-footer-wrap, .site-below-footer-wrap, .site-above-footer-wrap, .site-footer{ background-color:var(--cq-tinta) !important; color:var(--cq-perla) !important; } .site-footer a, .site-primary-footer-wrap a, .site-below-footer-wrap a{ color:var(--cq-nude) !important; text-decoration:none; } .site-footer a:hover, .site-primary-footer-wrap a:hover{ color:var(--cq-blanco) !important; } .site-primary-footer-wrap{ padding-block:clamp(38px,5vw,62px) !important; } .site-below-footer-wrap{ border-top:1px solid rgba(251,246,240,.14); font-size:.84rem; padding-block:16px !important; } .cq-pie{ font-family:var(--cq-sans); color:var(--cq-perla); } .cq-pie__logo{ width:min(200px, 92%); height:auto; display:block; margin:0 0 16px; /* Sin filtro: aqui va el archivo en NEGATIVO (`logo_negativo.py`). El `brightness(0) invert(1)` de antes ponia blanco tambien el relleno crema del frasco y el logotipo salia como una mancha maciza. */ opacity:.95; } .cq-pie__t{ font-family:var(--cq-serif); font-size:1.18rem; color:var(--cq-perla); margin:0 0 14px; letter-spacing:.01em; } .cq-pie__txt{ font-size:.9rem; line-height:1.65; color:var(--cq-perla); opacity:.82; margin:0 0 14px; max-width:38ch; } .cq-pie__redes{ margin:0 0 10px; font-size:.9rem; letter-spacing:.03em; } .cq-pie__lista{ list-style:none; margin:0; padding:0; display:grid; gap:9px; } .cq-pie__lista a{ font-size:.92rem; opacity:.88; } .cq-pie__lista a:hover{ opacity:1; } .cq-pie__nota{ font-size:.76rem; line-height:1.5; color:var(--cq-nude); opacity:.75; border-left:2px solid var(--cq-oro); padding-left:10px; margin:14px 0 0; } @media (max-width:760px){ .cq-pie{ margin-bottom:26px; } .cq-pie__logo{ width:168px; } } /* ========================================================================== 20. Compuerta responsive del 1-sep. Todo lo de aqui sale de MEDIR con getBoundingClientRect a 390, 430, 768 y 1024 px navegando ANONIMO por la URL publica (`qc_responsive.py`), no de mirar una captura. ========================================================================== */ /* 20.1 El pie se pegaba al canto izquierdo en movil y tablet — el defecto que reporto el usuario. Causa: Astra le da a las dos filas del pie `max-width:1200px; margin-inline:auto`, que centra en escritorio pero por debajo de 1200 px no ata nada y las deja a 0 px del borde, mientras el contenido de la pagina va a 22 px. Medido: pie izq=0 der=0 · `.cq-wrap` del contenido izq=22. `min()` resuelve los dos casos con una sola regla: en escritorio sigue dando 1200 px (el pie NO se mueve, ya estaba aprobado) y por debajo deja exactamente el mismo canal de 22 px que el resto del sitio. */ .site-primary-footer-inner-wrap, .site-below-footer-inner-wrap{ max-width:min(1200px, 100% - 44px) !important; margin-inline:auto !important; } /* 20.2 En movil el parrafo de marca se quedaba en 38ch dentro de una columna ya estrecha: sobraban 41 px a la derecha y parecia descuadrado. Apilado no hace falta limitar la medida. */ @media (max-width:760px){ .cq-pie__txt{ max-width:none; } } /* 20.3 La cabecera movil se salia 8 px de la pantalla: el boton del menu quedaba en 356..398 con la ventana en 390. Causa: la regla movil del logotipo era `.site-header .custom-logo` (0-2-0) y perdia contra `.ast-site-identity img.custom-logo` (0-2-1) de la regla general — la media query NO suma especificidad. El logotipo se pintaba a 240 px y empujaba la fila del constructor a 378 px dentro de una caja de 350. Se iguala la especificidad y se pasa a una medida fluida: en un movil de 320 px el logotipo baja a 144 y sigue cabiendo con el carrito y el menu. */ @media (max-width:600px){ .site-header .custom-logo, .ast-site-identity img.custom-logo{ max-width:min(175px, 45vw) !important; } } /* Y para que no vuelva a pasar con otro logotipo: una fila de rejilla no se encoge por debajo de su contenido salvo que se le diga. */ .ast-primary-header-bar > .ast-builder-grid-row, .ast-primary-header-bar .site-header-section, .ast-primary-header-bar .site-header-primary-section-left{ min-width:0; } /* 20.4 Carrito y finalizar compra: el bloque llega marcado `alignwide` y Astra lo sangra solo por la izquierda — medido izq=0, der=40. Los titulos centrados de dentro heredaban el descuadre y no salian centrados. */ .entry-content > .wp-block-woocommerce-cart, .entry-content > .wp-block-woocommerce-checkout, .entry-content > .wp-block-woocommerce-cart.alignwide, .entry-content > .wp-block-woocommerce-checkout.alignwide{ margin-inline:auto !important; max-width:100% !important; } /* 20.5 Los tiradores del filtro de precio son de 18 px y se centran sobre los extremos de la barra: se salian 8 px por cada lado de la columna. */ .widget_price_filter .price_slider{ margin-inline:9px; } /* 20.6 El carrusel tenia `padding-inline:22px`, pero la primera ficha aparecia pegada al canto: `scroll-snap-align:start` alinea contra el *snapport*, que por defecto es la caja de relleno — el navegador desplazaba el carril 22 px al cargar y se comia el canal. Medido: ficha en izq=0. `scroll-padding` mueve el snapport, y ademas deja el mismo canal en cada parada del deslizamiento, no solo en la primera. */ .cq-rail{ scroll-padding-inline:22px; } /* ========================================================================== 21. Contraste y zonas de toque. Medido el 1-sep con la formula de luminancia relativa de la WCAG sobre el color YA COMPUESTO en el navegador — no sobre lo que dice la hoja de estilo, que es justo lo que escondia los dos fallos de abajo. ========================================================================== */ /* 21.1 EL FALLO GRANDE: el boton principal salia en oro sobre marron, a 1,93:1 — ilegible, y es la llamada a la accion del sitio. Causa: `.cq a{color:var(--cq-oro-txt)}` tiene especificidad (0,1,1) y `.cq-btn--sol{color:var(--cq-perla)}` solo (0,1,0). El boton ES un enlace dentro de `.cq`, asi que ganaba el color de enlace. Lo mismo le pasaba al boton de linea y a los dos estados de hover. Con `a.cq-btn--*` la regla del boton pasa a (0,2,1) y manda. Comprobado: 1,93:1 -> 9,4:1. */ .cq a.cq-btn--sol, .entry-content .cq a.cq-btn--sol{ color:var(--cq-perla); } .cq a.cq-btn--sol:hover, .entry-content .cq a.cq-btn--sol:hover{ color:var(--cq-blanco); } .cq a.cq-btn--linea, .entry-content .cq a.cq-btn--linea{ color:var(--cq-tinta); } .cq a.cq-btn--linea:hover, .entry-content .cq a.cq-btn--linea:hover{ color:var(--cq-tinta); } .cq-sec--tinta a.cq-btn--linea{ color:var(--cq-perla); } .cq-sec--tinta a.cq-btn--sol{ color:var(--cq-tinta); } /* 21.2 Los enlaces del tema venian en el oro claro #DCA54A: 2,05:1. Afecta de lleno a la barra de filtros de la tienda — las categorias y las 42 marcas — que es una lista larga que hay que poder leer de un vistazo. Se pasan a tinta, con el oro legible al pasar por encima. ⚠️ Va acotado a `#secondary`, que es la barra de la tienda. La primera version decia `.widget a` a secas y alcanzo tambien a los widgets del PIE, que son `.widget` igual: los enlaces quedaron tinta sobre el pie tinta, es decir invisibles. Lo canto la medicion —contraste 1,00— no la vista, porque el texto seguia ahi. */ #secondary .widget a, #secondary .ast-woo-sidebar-widget a{ color:var(--cq-tinta) !important; } #secondary .widget a:hover, #secondary .ast-woo-sidebar-widget a:hover{ color:var(--cq-oro-txt) !important; } #secondary .widget .count{ color:var(--cq-tinta); opacity:.6; } /* Y lo mismo, en oro claro ilegible, en la paginacion y el aviso de agotado. */ .woocommerce-pagination .page-numbers, .woocommerce .stock.out-of-stock, .woocommerce div.product .stock{ color:var(--cq-tinta) !important; } .woocommerce-pagination .page-numbers.current{ background:var(--cq-tinta); color:var(--cq-perla) !important; border-radius:999px; } /* La miga de pan venia en gris #777 sobre perla: 4,17:1. */ .woocommerce-breadcrumb, .woocommerce-breadcrumb a, .ast-breadcrumbs-wrapper a{ color:var(--cq-tinta) !important; opacity:.85; } /* 21.3 El enlace «Ir al contenido» solo se ve al tabular, pero cuando se ve salia en oro claro sobre el fondo del sitio. */ .skip-link:focus{ background:var(--cq-tinta) !important; color:var(--cq-perla) !important; padding:12px 20px; border-radius:0 0 8px 0; } /* 21.4 El oro de texto estaba en 4,39:1 sobre la franja arena — por debajo del 4,5:1 que pide la WCAG para texto normal. Se oscurece lo justo: sobre arena 4,98:1 y sobre perla 5,85:1. A la vista es el mismo oro. */ :root{ --cq-oro-txt:#755C2C; } /* 21.5 Zonas de toque. El minimo comodo en movil son 44x44 px. Medido: el boton «Filtrar» del precio daba 71x29, la paginacion 40x40 y el enlace del logotipo solo 23 px de alto —el alto de la linea, no el de la imagen— asi que dos tercios del logotipo no eran pulsables. */ .custom-logo-link{ display:inline-block; line-height:0; } .widget_price_filter .price_slider_amount .button, .woocommerce .widget_price_filter .button{ min-height:44px; padding-inline:20px; border-radius:999px; } .woocommerce-pagination .page-numbers{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } .ast-mobile-menu-trigger-minimal, .ast-header-woo-cart .ast-cart-menu-wrap{ min-width:44px; min-height:44px; } /* 21.6 Consecuencia de subir la especificidad en §21.1: `.cq a.cq-btn--sol` (0,2,1) tambien le gano a `.cq-cierre .cq-btn--sol` (0,2,0), que es la que pinta los botones del bloque de cierre OSCURO (§8). Resultado: perla sobre perla, contraste 1,00 — el boton existia pero no se leia. Se igualan las dos reglas al mismo nivel. Esto es exactamente lo que pasa cuando se sube la especificidad sin repasar quien dependia de la anterior; por eso la medicion se repite despues de cada cambio. */ .cq-cierre a.cq-btn--sol{ background:var(--cq-perla); color:var(--cq-tinta); } .cq-cierre a.cq-btn--sol:hover{ background:var(--cq-blanco); color:var(--cq-tinta-90); } .cq-cierre a.cq-btn--linea{ border-color:var(--cq-oro); color:var(--cq-perla); } .cq-cierre a.cq-btn--linea:hover{ background:var(--cq-oro); color:var(--cq-tinta); } /* 21.7 La paginacion y el aviso de agotado de la tienda seguian en el oro claro del tema, a 2,05:1. La pagina activa iba ademas en perla sobre ese mismo oro. */ ul.page-numbers .page-numbers, .ast-pagination .page-numbers{ color:var(--cq-tinta) !important; } ul.page-numbers .page-numbers.current, .ast-pagination .page-numbers.current{ background:var(--cq-tinta) !important; color:var(--cq-perla) !important; border-radius:999px; } .ast-shop-product-out-of-stock, .woocommerce .ast-shop-product-out-of-stock{ color:var(--cq-perla) !important; background:var(--cq-tinta); padding:4px 10px; border-radius:999px; font-size:.72rem; letter-spacing:.04em; } /* 21.8 Segunda vuelta de la misma leccion. §21.6 no llego a aplicarse porque §21.1 tiene tambien la variante `.entry-content .cq a.cq-btn--sol` (0,3,1), y `.cq-cierre a.cq-btn--sol` solo llega a (0,2,1). Se repite el bloque de cierre al mismo nivel (0,3,1) y despues en el orden. */ .entry-content .cq-cierre a.cq-btn--sol{ background:var(--cq-perla); color:var(--cq-tinta); } .entry-content .cq-cierre a.cq-btn--sol:hover{ background:var(--cq-blanco); color:var(--cq-tinta-90); } .entry-content .cq-cierre a.cq-btn--linea{ border-color:var(--cq-oro); color:var(--cq-perla); } .entry-content .cq-cierre a.cq-btn--linea:hover{ background:var(--cq-oro); color:var(--cq-tinta); } /* 21.9 El aviso «Agotado» conserva el fondo blanco translucido de Astra, que gana al que se puso en §21.7: perla sobre blanco, 1,00:1. */ .ast-shop-product-out-of-stock, .woocommerce .ast-shop-product-out-of-stock{ background:var(--cq-tinta) !important; color:var(--cq-perla) !important; } /* 21.10 Zonas de toque que quedaron por debajo de 44 px en la primera pasada: el enlace «Ver toda la categoria» (171x28), el carrito de la cabecera movil (42x41) y los numeros de pagina (40x44). Los enlaces que van DENTRO de una frase se dejan como estan: la WCAG los exceptua y agrandarlos rompe el interlineado del parrafo. */ .cq-rail-head .cq-link{ padding-block:8px; } a.cart-container, .ast-header-woo-cart a.cart-container{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } ul.page-numbers .page-numbers, .ast-pagination .page-numbers{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } /* 21.11 Ultimos objetivos tactiles por debajo de 44 px, medidos en iPad —donde Astra ya sirve la cabecera de escritorio pero se navega con el dedo: la lupa de busqueda (18x28), la flecha que abre los submenus (20x80) y los numeros de pagina. Ojo con la paginacion: la regla de §21.5 alcanzaba tambien al `