/*
Theme Name: Cerámica Leonesa Child
Theme URI: https://ceramicaleonesa.com.mx
Description: Child theme custom de Flatsome para Cerámica Leonesa — paleta tierra, tipografía editorial Cormorant + Inter, catálogo institucional con cotización por WhatsApp.
Author: Diginova
Author URI: https://diginova.design
Template: flatsome
Version: 1.1.0
Text Domain: ceramica-leonesa
*/

/* ========================================================================
   1. DESIGN TOKENS
   ======================================================================== */
:root {
  --cl-clay-900: #3B2418;
  --cl-clay-700: #6B4128;
  --cl-clay-500: #A0623C;
  --cl-clay-300: #C68C68;
  --cl-sand-100: #E8DFD2;
  --cl-sand-50:  #F2EBDF;
  --cl-stone-200: #D6CCB8;
  --cl-ink-900: #1C1611;
  --cl-white:   #FBF8F2;
  --cl-whatsapp: #25D366;

  --cl-font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --cl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --cl-section-y-mobile: 80px;
  --cl-section-y-desktop: 160px;
  --cl-container-pad: clamp(24px, 5vw, 64px);

  --cl-track-eyebrow: 0.18em;
  --cl-track-button: 0.12em;

  --cl-bottomnav-h: 64px;
}

/* ========================================================================
   2. RESET & BASE
   ======================================================================== */
body {
  font-family: var(--cl-font-sans);
  font-weight: 400;
  color: var(--cl-ink-900);
  background-color: var(--cl-sand-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--cl-font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--cl-clay-900);
}

.cl-display {
  font-family: var(--cl-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.cl-eyebrow {
  font-family: var(--cl-font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--cl-track-eyebrow);
  text-transform: uppercase;
  color: var(--cl-clay-700);
}

.cl-italic-accent {
  font-style: italic;
  color: var(--cl-clay-500);
}

/* ========================================================================
   3. ORNAMENTOS EDITORIALES
   ======================================================================== */
.cl-section-title {
  text-align: center;
  position: relative;
  margin: 0 auto 48px;
  max-width: 720px;
}
.cl-section-title h2 {
  font-family: var(--cl-font-display);
  font-style: italic;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 32px;
}
.cl-section-title h2::before,
.cl-section-title h2::after {
  content: '';
  width: 64px;
  height: 1px;
  background: var(--cl-clay-500);
  flex-shrink: 0;
}
.cl-section-title p.cl-subtitle {
  font-family: var(--cl-font-sans);
  font-weight: 400;
  font-size: 16px;
  color: var(--cl-clay-700);
  margin-top: 12px;
}

/* ========================================================================
   4. BOTONES
   ======================================================================== */
.cl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--cl-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--cl-track-button);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--cl-clay-700);
  background: var(--cl-clay-700);
  color: var(--cl-white);
  transition: all 0.25s ease;
  cursor: pointer;
}
.cl-btn:hover {
  background: var(--cl-clay-900);
  border-color: var(--cl-clay-900);
  color: var(--cl-white);
  transform: translateY(-1px);
}
.cl-btn--ghost,
.cl-btn--outline {
  background: transparent;
  color: var(--cl-clay-700);
}
.cl-btn--ghost:hover,
.cl-btn--outline:hover {
  background: var(--cl-clay-700);
  color: var(--cl-white);
}
.cl-btn--primary {
  background: var(--cl-clay-700);
  border-color: var(--cl-clay-700);
  color: var(--cl-white);
}
.cl-btn--primary:hover {
  background: var(--cl-clay-900);
  border-color: var(--cl-clay-900);
}
.cl-btn--dark {
  background: var(--cl-clay-900);
  border-color: var(--cl-clay-900);
  color: var(--cl-white);
}
.cl-btn--dark:hover {
  background: var(--cl-ink-900);
  border-color: var(--cl-ink-900);
}

/* ========================================================================
   5. HERO
   ======================================================================== */
.cl-hero h1 em { font-style: italic; }

/* ========================================================================
   6. GRIDS
   ======================================================================== */
.cl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cl-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 768px) {
  .cl-grid-3, .cl-grid-2 { grid-template-columns: 1fr; gap: 16px; }
}

/* ========================================================================
   7. PRODUCTO — botón Cotizar WhatsApp + ocultar precios
   ======================================================================== */
.woocommerce div.product form.cart .button,
.woocommerce-page div.product form.cart .button {
  display: none !important;
}
.cl-quote-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--cl-whatsapp);
  color: var(--cl-white) !important;
  font-family: var(--cl-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--cl-track-button);
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s ease;
  border-radius: 0;
}
.cl-quote-btn:hover {
  background: #128C7E;
  color: var(--cl-white) !important;
  transform: translateY(-1px);
}
.cl-quote-btn svg { width: 18px; height: 18px; }
.cl-quote-btn--small { padding: 10px 20px; font-size: 12px; }

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.product-page-price,
.price-wrapper,
.woocommerce-Price-amount {
  display: none !important;
}

/* ========================================================================
   8. CATÁLOGO INSTITUCIONAL — ocultar carrito, login, top bar
   ======================================================================== */
#top-bar,
.header-top.show-on-scroll,
.header-top:not(.hide-for-sticky),
.account-item,
.header-account-link,
.header-cart-link,
.cart-item,
.cart-icon,
li.account-item,
li.cart-item,
li.html.custom.html-1,
.nav-cart,
.account-dropdown,
.menu-item a[href*="/cart/"],
.menu-item a[href*="/checkout/"],
.menu-item a[href*="/my-account/"],
.menu-item a[href*="/mi-cuenta/"] {
  display: none !important;
}

/* ========================================================================
   8.4 ICONOS SVG — siempre tamaño fijo (Flatsome resetea SVG a 100%)
   ======================================================================== */
.cl-mobile-actions svg,
.cl-desktop-actions svg,
.cl-bottom-nav svg,
.cl-footer svg,
.cl-quote-btn svg {
  width: 22px !important;
  height: 22px !important;
  display: inline-block;
  flex-shrink: 0;
  max-width: 22px;
  max-height: 22px;
}
.cl-quote-btn svg { width: 18px !important; height: 18px !important; max-width: 18px; max-height: 18px; }
.cl-footer svg { width: 16px !important; height: 16px !important; max-width: 16px; max-height: 16px; }

/* Asegurar que cl-mobile-actions NO aparece en desktop (forzado total) */
@media (min-width: 850px) {
  body .cl-mobile-actions,
  html body .cl-mobile-actions,
  body div.cl-mobile-actions { display: none !important; visibility: hidden !important; }
}

/* ========================================================================
   8.5 HEADER DESKTOP — estilo Vivián (logo centrado, search izq, íconos der, menú abajo)
   ======================================================================== */
@media (min-width: 850px) {
  /* Logo centrado en el header_main (estilo Vivián) */
  .header-main .flex-row {
    position: relative;
  }
  .header-main .flex-row .logo,
  .header-main .flex-row .flex-col.logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 5;
  }
  .header-main .flex-col.flex-left {
    flex: 1;
  }
  .header-main .flex-col.flex-right {
    flex: 1;
    justify-content: flex-end;
    display: flex;
  }

  /* Search más limpio en el header */
  .header-main .header-search-form,
  .header-main .header-icon .icon-search { color: var(--cl-clay-700); }
  .header-search-form-wrapper input { font-family: var(--cl-font-sans); }

  /* Iconos del header right */
  .cl-desktop-actions {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .cl-desktop-actions a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cl-clay-700);
    font-family: var(--cl-font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--cl-track-eyebrow);
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .cl-desktop-actions a:hover { color: var(--cl-clay-500); }
  .cl-desktop-actions a.cl-icon-whatsapp { color: var(--cl-whatsapp); }
  .cl-desktop-actions a.cl-icon-whatsapp:hover { color: #128C7E; }
  .cl-desktop-actions svg { flex-shrink: 0; }

  /* Header bottom — barra del menú principal con fondo tierra */
  .header-bottom {
    background: var(--cl-clay-700) !important;
    border: none !important;
  }
  .header-bottom .nav > li > a {
    color: var(--cl-white) !important;
    font-family: var(--cl-font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: var(--cl-track-eyebrow);
    padding: 16px 20px;
    transition: background 0.25s ease;
  }
  .header-bottom .nav > li > a:hover,
  .header-bottom .nav > li.current-menu-item > a,
  .header-bottom .nav > li.current_page_item > a {
    background: var(--cl-clay-900) !important;
    color: var(--cl-clay-300) !important;
  }
  .header-bottom .nav > li > a::after { display: none; }

  /* Quitar línea inferior del header main */
  .header-main { border-bottom: 1px solid var(--cl-stone-200); }
}

/* En mobile el header bottom no se muestra (lo controla theme_mod hide-for-medium) */
@media (max-width: 849px) {
  .header-bottom { display: none !important; }
}

/* ========================================================================
   9. HEADER MOBILE — íconos estilo Vivián (WhatsApp, Mapa, Lupa)
   ======================================================================== */
.cl-mobile-actions { display: none; }

@media (max-width: 849px) {
  .cl-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 999;
    background: rgba(251,248,242,0.95);
    backdrop-filter: blur(8px);
    border-radius: 24px;
    padding: 4px 8px;
    box-shadow: 0 2px 12px rgba(28,22,17,0.08);
    pointer-events: auto;
  }
  .cl-mobile-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--cl-clay-700);
    transition: color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
  }
  .cl-mobile-actions a:hover,
  .cl-mobile-actions a:focus {
    color: var(--cl-clay-500);
    transform: scale(1.08);
  }
  .cl-mobile-actions a.cl-icon-whatsapp { color: var(--cl-whatsapp); }
  .cl-mobile-actions svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
  }

}

/* ========================================================================
   10. BOTTOM NAV — fija en mobile (Catálogo · Proyectos · Inspira)
   ======================================================================== */
.cl-bottom-nav {
  display: none;
}
@media (max-width: 849px) {
  .cl-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--cl-bottomnav-h);
    background: var(--cl-clay-700);
    z-index: 998;
    box-shadow: 0 -2px 12px rgba(28,22,17,0.15);
  }
  .cl-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--cl-sand-50);
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 8px 4px;
  }
  .cl-bottom-nav a:hover,
  .cl-bottom-nav a.is-active {
    color: var(--cl-clay-300);
    background: var(--cl-clay-900);
  }
  .cl-bottom-nav svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
  }
  .cl-bottom-nav span {
    font-family: var(--cl-font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  /* Padding al body para que el contenido no quede tapado */
  body { padding-bottom: var(--cl-bottomnav-h); }
}

/* ========================================================================
   11. FOOTER CUSTOM — reemplaza el de Flatsome
   ======================================================================== */
/* Ocultar TODO el footer default de Flatsome (mantenemos solo el .cl-footer custom) */
#footer.footer-wrapper,
.footer-wrapper,
#footer,
.absolute-footer,
.footer-secondary,
.footer-primary,
.payment-icons,
.footer-credits,
#colophon .absolute-footer,
#colophon .footer-wrapper,
.absolute-footer.dark.medium-text-center.small-text-center {
  display: none !important;
}
/* El cl-footer sí se mantiene */
footer.cl-footer,
.cl-footer { display: block !important; }

.cl-footer {
  background: var(--cl-clay-900);
  color: var(--cl-sand-50);
  padding: 80px var(--cl-container-pad) 32px;
  font-family: var(--cl-font-sans);
}
.cl-footer__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(251,248,242,0.12);
}
.cl-footer__brand p {
  font-family: var(--cl-font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--cl-sand-50);
  margin: 16px 0 24px;
  max-width: 380px;
}
.cl-footer__brand .cl-footer__tagline {
  font-family: var(--cl-font-sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: var(--cl-track-eyebrow);
  text-transform: uppercase;
  color: var(--cl-clay-300);
  margin: 0;
}
.cl-footer__brand img {
  max-width: 200px;
  filter: brightness(0) invert(1) opacity(0.95);
  margin-bottom: 8px;
}
.cl-footer h4 {
  font-family: var(--cl-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--cl-track-eyebrow);
  text-transform: uppercase;
  color: var(--cl-clay-300);
  margin: 0 0 20px;
}
.cl-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cl-footer ul li { margin-bottom: 12px; }
.cl-footer ul li a {
  color: var(--cl-sand-50);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}
.cl-footer ul li a:hover { color: var(--cl-clay-300); }

.cl-footer__contact .cl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--cl-sand-50);
  text-decoration: none;
}
.cl-footer__contact .cl-row svg {
  width: 16px;
  height: 16px;
  fill: var(--cl-clay-300);
  flex-shrink: 0;
}
.cl-footer__contact a:hover { color: var(--cl-clay-300); }

.cl-footer__socials {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.cl-footer__socials a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(251,248,242,0.2);
  color: var(--cl-sand-50);
  border-radius: 50%;
  transition: all 0.25s ease;
}
.cl-footer__socials a:hover {
  background: var(--cl-clay-700);
  border-color: var(--cl-clay-700);
}
.cl-footer__socials svg { width: 16px; height: 16px; fill: currentColor; }

.cl-footer__bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(251,248,242,0.6);
  letter-spacing: 0.05em;
}
.cl-footer__bottom a {
  color: rgba(251,248,242,0.8);
  text-decoration: none;
  margin-left: 24px;
}
.cl-footer__bottom a:hover { color: var(--cl-sand-50); }

@media (max-width: 849px) {
  .cl-footer { padding: 56px 24px 24px; }
  .cl-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .cl-footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .cl-footer__bottom a { margin: 0 12px; }
  /* En mobile el footer va con padding extra inferior por el bottom nav */
  .cl-footer { padding-bottom: calc(24px + var(--cl-bottomnav-h)); }
}

/* ========================================================================
   12. FORMULARIO CF7 — estilos paleta tierra
   ======================================================================== */
.wpcf7-form .cl-form-row {
  margin-bottom: 20px;
}
.wpcf7-form .cl-form-row label {
  display: block;
  font-family: var(--cl-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--cl-track-eyebrow);
  text-transform: uppercase;
  color: var(--cl-clay-700);
  margin-bottom: 8px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--cl-font-sans);
  font-size: 15px;
  color: var(--cl-ink-900);
  background: var(--cl-white);
  border: 1px solid var(--cl-stone-200);
  border-radius: 0;
  transition: border-color 0.2s ease;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--cl-clay-700);
}
.wpcf7-form textarea { resize: vertical; min-height: 120px; }
.wpcf7-form input[type="submit"] {
  background: var(--cl-clay-700);
  color: var(--cl-white);
  border: none;
  padding: 14px 32px;
  font-family: var(--cl-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--cl-track-button);
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}
.wpcf7-form input[type="submit"]:hover {
  background: var(--cl-clay-900);
  transform: translateY(-1px);
}
.wpcf7 .wpcf7-response-output {
  border-color: var(--cl-clay-500);
  color: var(--cl-clay-900);
  margin-top: 24px;
}
.wpcf7-not-valid-tip {
  color: var(--cl-clay-500);
  font-size: 12px;
}

/* ========================================================================
   12.5 OVERRIDE BOTONES FLATSOME/WOO — todo tierra (no azul)
   ======================================================================== */
.button.primary,
.button[class*="is-outline"]:not(.cl-quote-btn):not(.cl-btn--ghost):hover,
button.primary,
.btn-primary,
.wp-block-button__link,
input[type="submit"].button,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.button.alt,
.button.checkout,
.added_to_cart,
.product .button {
  background-color: var(--cl-clay-700) !important;
  border-color: var(--cl-clay-700) !important;
  color: var(--cl-white) !important;
}
.button.primary:hover,
button.primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.product .button:hover {
  background-color: var(--cl-clay-900) !important;
  border-color: var(--cl-clay-900) !important;
  color: var(--cl-white) !important;
}

/* Botón "Ver colección" en página de colecciones (es <button color=primary>) */
.button-style-default {
  background-color: var(--cl-clay-700) !important;
  color: var(--cl-white) !important;
}

/* ========================================================================
   12.6 PRODUCTOS — fondo transparente con mix-blend-mode, sin "Vista rápida"
   ======================================================================== */
.product-small .box-image,
.product-small.box .box-image,
ul.products .product .box-image,
.woocommerce ul.products li.product .box-image {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Fundir el fondo blanco de las fotos con el sand-100 del listing */
.product-small .box-image img,
.product-small img,
.woocommerce ul.products li.product img,
ul.products li.product img {
  background: transparent !important;
  mix-blend-mode: multiply;
}

/* En la página de producto individual también */
.woocommerce div.product .woocommerce-product-gallery img,
.product-images img {
  mix-blend-mode: multiply;
}

/* Quitar "Vista rápida" overlay azul */
.quick-view-button,
.quick-view,
a.quick-view,
.product-small .quick-view-button,
.box-image .quick-view {
  display: none !important;
}

/* Texto del producto (categoría, nombre) */
.product-small .name,
.product-small .name a,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--cl-font-display) !important;
  font-style: italic !important;
  font-size: 22px !important;
  color: var(--cl-clay-900) !important;
  font-weight: 400 !important;
}
.product-small .category,
.product-small .product-category {
  font-family: var(--cl-font-sans) !important;
  font-size: 11px !important;
  letter-spacing: var(--cl-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--cl-clay-700) !important;
}

/* ========================================================================
   12.7 BOTÓN COTIZAR (cl-quote-btn) — texto blanco visible siempre
   ======================================================================== */
.cl-quote-btn,
.cl-quote-btn:link,
.cl-quote-btn:visited,
a.cl-quote-btn {
  background: var(--cl-whatsapp) !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.cl-quote-btn span,
.cl-quote-btn * {
  color: #FFFFFF !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* ========================================================================
   12.8 DROPDOWNS Y INPUTS — texto legible
   ======================================================================== */
#cl-mapa-estado,
#cl-mapa-search,
.cl-mapa-search-wrap input,
.cl-mapa-search-wrap select {
  color: var(--cl-ink-900) !important;
  background-color: var(--cl-white) !important;
}
#cl-mapa-estado option,
.cl-mapa-search-wrap select option {
  color: var(--cl-ink-900);
  background: var(--cl-white);
}

/* ========================================================================
   12.9 BLOQUE FAQ (cl-faq)
   ======================================================================== */
.cl-faq {
  max-width: 820px;
  margin: 0 auto;
}
.cl-faq__item {
  border-bottom: 1px solid var(--cl-stone-200);
  padding: 24px 0;
}
.cl-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--cl-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  color: var(--cl-clay-900);
  position: relative;
  padding-right: 32px;
}
.cl-faq__item summary::-webkit-details-marker { display: none; }
.cl-faq__item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--cl-font-sans);
  font-size: 28px;
  font-weight: 300;
  color: var(--cl-clay-500);
  transition: transform 0.25s ease;
}
.cl-faq__item[open] summary::after {
  content: '−';
  transform: rotate(0);
}
.cl-faq__a {
  padding: 16px 32px 0 0;
  font-family: var(--cl-font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--cl-ink-900);
}
.cl-faq__a p { margin: 0; }

/* ========================================================================
   13. RESPONSIVE — ajustes finos en mobile
   ======================================================================== */
@media (max-width: 768px) {
  .cl-section-title h2 {
    font-size: 28px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .cl-section-title h2::before,
  .cl-section-title h2::after { width: 32px; }

  /* Hero: bajar tamaño en mobile */
  .ux_banner h1,
  section h1 {
    font-size: 44px !important;
    line-height: 1.05;
  }

  /* Padding lateral más cómodo */
  section, .section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Footer columns ya manejado arriba */
}