/* CholloPrinting · Sistema visual unificado · v1.0.9
 * Capa de contrato visual temporal hasta integrar el Theme final de Figma.
 */

.cp-visual-coherence{
  --cp-ui-control-h:46px;
  --cp-ui-radius-control:12px;
  --cp-ui-radius-card:16px;
  --cp-ui-radius-section:24px;
  --cp-ui-space-1:8px;
  --cp-ui-space-2:12px;
  --cp-ui-space-3:16px;
  --cp-ui-space-4:24px;
  --cp-ui-space-5:32px;
  --cp-ui-space-6:48px;
}

/* 1. BOTONES: primario rosa, secundario blanco, WhatsApp como secundario semántico. */
.cp-visual-coherence :where(
  .cp-premium-btn,
  .cp-btn,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .wp-element-button,
  input[type="submit"]
){
  min-height:var(--cp-ui-control-h)!important;
  border-radius:var(--cp-ui-radius-control)!important;
  padding:0 18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  font-weight:750!important;
  line-height:1.15!important;
  text-decoration:none!important;
  border:1px solid var(--cpv-border)!important;
  box-shadow:none!important;
}

.cp-visual-coherence :where(
  .cp-premium-btn.is-primary,
  .cp-premium-btn.is-dark,
  .single_add_to_cart_button,
  .checkout-button,
  #place_order,
  .cp-group-step-actions button,
  .cp-review-submit,
  button[name="cp_request_review"]
){
  background:var(--cpv-primary)!important;
  border-color:var(--cpv-primary)!important;
  color:#fff!important;
}
.cp-visual-coherence :where(
  .cp-premium-btn.is-primary,
  .cp-premium-btn.is-dark,
  .single_add_to_cart_button,
  .checkout-button,
  #place_order,
  .cp-group-step-actions button,
  .cp-review-submit,
  button[name="cp_request_review"]
):hover:not(:disabled){
  background:var(--cpv-primary-hover)!important;
  border-color:var(--cpv-primary-hover)!important;
  color:#fff!important;
}

.cp-visual-coherence :where(
  .cp-premium-btn.is-ghost,
  .woocommerce a.button:not(.alt):not(.checkout-button),
  .woocommerce button.button:not(.alt):not(.single_add_to_cart_button),
  .cp-back-link,
  .cp-pp-backbar a
){
  background:#fff!important;
  border-color:var(--cpv-border)!important;
  color:var(--cpv-text)!important;
}
.cp-visual-coherence :where(
  .cp-premium-btn.is-ghost,
  .woocommerce a.button:not(.alt):not(.checkout-button),
  .woocommerce button.button:not(.alt):not(.single_add_to_cart_button),
  .cp-back-link,
  .cp-pp-backbar a
):hover{
  background:var(--cpv-primary-soft)!important;
  border-color:var(--cpv-primary)!important;
  color:var(--cpv-primary)!important;
}

/* WhatsApp: misma geometría que cualquier CTA, solo cambia el significado cromático. */
.cp-visual-coherence .cp-premium-text-link[href*="wa.me"],
.cp-visual-coherence :where(.cp-whatsapp-button,.cp-btn-whatsapp,.cp-whatsapp-cta){
  min-height:var(--cp-ui-control-h)!important;
  padding:0 18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  border:1px solid #B7E8CA!important;
  border-radius:var(--cp-ui-radius-control)!important;
  background:#fff!important;
  color:#168A53!important;
  font-weight:750!important;
  line-height:1.15!important;
  text-decoration:none!important;
  box-shadow:none!important;
}
.cp-visual-coherence .cp-premium-text-link[href*="wa.me"]:hover,
.cp-visual-coherence :where(.cp-whatsapp-button,.cp-btn-whatsapp,.cp-whatsapp-cta):hover{
  background:var(--cpv-success-soft)!important;
  border-color:var(--cpv-success)!important;
  color:#117744!important;
}
.cp-visual-coherence .cp-premium-text-link[href*="wa.me"] svg{width:19px!important;height:19px!important;flex:0 0 19px!important}

/* El cierre de Home usa exactamente dos CTAs hermanos. */
.cp-visual-coherence .cp-premium-final>div:last-child{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:12px!important;
  align-items:stretch!important;
}
.cp-visual-coherence .cp-premium-final>div:last-child>a{width:100%!important;min-width:0!important}

/* 2. TARJETAS: una única gramática para superficies públicas. */
.cp-visual-coherence :where(
  .cp-premium-shortcuts a,
  .cp-premium-print-card,
  .cp-premium-case,
  .cp-premium-catalog,
  .cp-premium-product,
  .cp-premium-real-card,
  .cp-premium-benefits>div>span,
  .cp-card,.cp-panel,.cp-print-card,.cp-product-card,.cp-collection-card,.cp-catalog-card,
  .cp-catalog-item,.cp-collection-item,
  .cp-review-contact,.cp-pp
){
  border:1px solid var(--cpv-border)!important;
  border-radius:var(--cp-ui-radius-card)!important;
  background:#fff!important;
  box-shadow:var(--cpv-shadow-sm)!important;
}
.cp-visual-coherence :where(
  .cp-premium-shortcuts a,
  .cp-premium-print-card,
  .cp-premium-case,
  .cp-premium-catalog,
  .cp-premium-product,
  .cp-premium-real-card,
  .cp-print-card,.cp-product-card,.cp-collection-card,.cp-catalog-card
):hover{
  border-color:#CCD4E0!important;
  box-shadow:var(--cpv-shadow-md)!important;
}

/* 3. CHIPS / ELECCIONES: mismo radio y mismo estado seleccionado. */
.cp-visual-coherence :where(
  .cp-chip,.cp-tag,.cp-choice-chip,.cp-size-chip,.cp-color-option,.cp-size-option,
  .cp-pack-choice-card,.cp-pp__methods span
){
  border-radius:10px!important;
  border-color:var(--cpv-border)!important;
}
.cp-visual-coherence :where(
  .cp-chip,.cp-choice-chip,.cp-size-chip,.cp-color-option,.cp-size-option,.cp-pack-choice-card
).is-selected{
  border-color:var(--cpv-primary)!important;
  box-shadow:0 0 0 2px rgba(239,47,124,.10)!important;
}

/* 4. FORMULARIOS: misma etiqueta, altura y foco. */
.cp-visual-coherence :where(label>span,.form-row label,.cp-field-label){
  color:var(--cpv-body)!important;
  font-size:13px!important;
  font-weight:700!important;
}

/* Las tarjetas de método seleccionadas usan fondo rosa: preservar texto legible. */
.cp-visual-coherence .cp-pp__methods input:checked + span{
  color:#fff!important;
}
.cp-visual-coherence :where(
  input[type="text"],input[type="email"],input[type="tel"],input[type="search"],
  input[type="number"],input[type="password"],select,textarea
){
  border-radius:var(--cp-ui-radius-control)!important;
}

/* 5. NAVEGACIÓN CONTEXTUAL: siempre una pastilla discreta. */
.cp-visual-coherence :where(.cp-back-link,.cp-pp-backbar a){
  min-height:40px!important;
  padding:0 13px!important;
  gap:7px!important;
  border-radius:999px!important;
  margin-bottom:16px!important;
  font-size:13px!important;
  font-weight:750!important;
}

/* 6. JERARQUÍA DE TEXTO: mismas reglas en familias, producto y Home. */
.cp-visual-coherence :where(.cp-premium-kicker,.cp-eyebrow){
  color:var(--cpv-primary)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
}
.cp-visual-coherence :where(
  .cp-premium-section-head h2,.cp-premium-catalog-intro h2,.cp-premium-benefits h2,
  .cp-premium-final h2,.cp-print-index-hero h1,.woocommerce div.product .product_title
){
  color:var(--cpv-text)!important;
  letter-spacing:-.035em!important;
}

/* 7. CTA de tarjeta: siempre rosa, misma fuerza y separación. */
.cp-visual-coherence :where(
  .cp-premium-print-copy em,.cp-premium-case-copy em,.cp-premium-catalog em,
  .cp-premium-product-copy em,.cp-premium-real-card em,
  .cp-premium-section-head>a,.cp-premium-catalog-all
){
  color:var(--cpv-primary)!important;
  font-style:normal!important;
  font-weight:800!important;
  text-decoration:none!important;
}

/* 8. SECCIONES: ritmo vertical fijo y sin agujeros accidentales. */
.cp-visual-coherence .cp-premium-home :where(
  .cp-premium-print,.cp-premium-cases,.cp-premium-shop,.cp-premium-real
){
  margin-top:0!important;
  margin-bottom:0!important;
}
.cp-visual-coherence .cp-premium-final{
  border:1px solid #F7D6E5!important;
  background:var(--cpv-primary-soft)!important;
  border-radius:var(--cp-ui-radius-section)!important;
}

/* 9. Cabecera móvil: MENÚ es un control secundario del mismo sistema. */
.cp-visual-coherence .cp-menu-toggle{
  border:1px solid var(--cpv-border)!important;
  border-radius:var(--cp-ui-radius-control)!important;
  background:#fff!important;
  color:var(--cpv-text)!important;
  box-shadow:none!important;
}
.cp-visual-coherence .cp-menu-toggle:hover,
.cp-visual-coherence .cp-menu-toggle:focus-visible{
  border-color:var(--cpv-primary)!important;
  color:var(--cpv-primary)!important;
  background:var(--cpv-primary-soft)!important;
}

/* 10. Footer: links homogéneos y discretos. */
.cp-visual-coherence .cp-site-footer a{
  color:rgba(255,255,255,.88)!important;
  text-decoration:none!important;
}
.cp-visual-coherence .cp-site-footer a:hover{color:#fff!important;text-decoration:underline!important}

@media(max-width:760px){
  .cp-visual-coherence{--cp-ui-control-h:46px;--cp-ui-radius-card:14px;--cp-ui-radius-section:18px}

  .cp-visual-coherence .cp-premium-final{
    padding:26px 20px!important;
  }
  .cp-visual-coherence .cp-premium-final>div:last-child{
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:22px!important;
  }
  .cp-visual-coherence .cp-premium-final>div:last-child>a{
    width:100%!important;
    min-height:48px!important;
  }

  .cp-visual-coherence :where(
    .cp-premium-print,.cp-premium-cases,.cp-premium-shop,.cp-premium-real
  ){
    padding-top:32px!important;
    padding-bottom:32px!important;
  }

  .cp-visual-coherence .cp-premium-catalogs{
    margin-top:8px!important;
    margin-bottom:8px!important;
  }

  .cp-visual-coherence :where(.cp-back-link,.cp-pp-backbar a){
    min-height:38px!important;
    font-size:12px!important;
  }

  /* Carrito del menú móvil: el texto existe en el DOM; se fuerza su visibilidad. */
  .cp-visual-coherence .cp-nav-links .cp-nav-utilities .cp-cart-link{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:46px!important;
    padding:0 14px!important;
    background:var(--cpv-text)!important;
    border:1px solid var(--cpv-text)!important;
    border-radius:var(--cp-ui-radius-control)!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1.2!important;
    letter-spacing:0!important;
    text-indent:0!important;
    opacity:1!important;
    visibility:visible!important;
    overflow:visible!important;
    -webkit-text-fill-color:#fff!important;
  }
}