/*
Theme Name: YoLoCoJo
Theme URI: https://yolocojo.com
Author: YoLoCoJo
Description: Tema de bloques (FSE) de YoLoCoJo — recepcion atendida por IA para autonomos y pymes. Direccion visual "Panel": verde profundo, acento lima, tipografia rotunda. Compatible con WooCommerce.
Version: 1.2.3
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yolocojo
Tags: full-site-editing, block-patterns, business, one-column, wide-blocks, custom-colors, custom-menu
*/

/* Los estilos base viven en theme.json. Aqui solo lo que el editor no cubre. */

.yolo-nav-dark .wp-block-navigation a:hover { opacity: .78; }
.yolo-nav-dark a { color: inherit; }

.yolo-strip { letter-spacing: -0.01em; }

.yolo-card { transition: transform .18s ease, box-shadow .18s ease; }
.yolo-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -22px rgba(19,21,19,.45); }

.wp-block-button__link { transition: opacity .15s ease; }
.wp-block-button__link:hover { opacity: .88; }

/* WooCommerce: alinear con la marca sin pelearse con sus estilos */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price { color: #12312A; font-weight: 700; }
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: #12312A; color: #EDF6F1; border-radius: 10px;
  font-weight: 700; padding: 14px 22px; line-height: 1.2;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: #0E2A22; color: #EDF6F1; }
.woocommerce .single_add_to_cart_button.button.alt { background: #9BE55F; color: #0E2A22; }
.woocommerce .single_add_to_cart_button.button.alt:hover { background: #8AD94E; color: #0E2A22; }
.woocommerce-message, .woocommerce-info { border-top-color: #9BE55F; }
.woocommerce-message::before, .woocommerce-info::before { color: #12312A; }

/* ==========================================================================
   MOVIL Y TABLET
   Los bloques de WordPress solo apilan por debajo de 782px. Entre 782 y 1100
   una fila de 3 o 4 columnas se queda sin sitio, y ahi es donde flojeaba.
   ========================================================================== */

/* --- Tablet / portatil estrecho: 3 y 4 columnas pasan a 2 --- */
@media (min-width: 782px) and (max-width: 1100px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap !important; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: calc(50% - 0.5rem) !important;
    flex-grow: 0;
  }
}

/* --- Movil --- */
@media (max-width: 781px) {

  /* Margenes laterales mas humanos */
  body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { }
  .wp-block-group[style*="padding-left"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Titulares: que no se corten ni hagan viudas raras */
  h1, h2 { letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
  h1 { line-height: 1.06; }

  /* El hero terminaba pegado a la franja lima */
  .yolo-hero { padding-bottom: 2.5rem !important; }
  .yolo-hero .wp-block-image { margin-top: 2rem; }

  /* Cifras del hero: en fila de tres, no en tres lineas */
  .yolo-hero-cifras { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .yolo-hero-cifras > .wp-block-column { flex-basis: auto !important; margin: 0 !important; }

  /* Botones: a ancho completo, que el texto es largo */
  .yolo-hero .wp-block-buttons,
  .yolo-cta .wp-block-buttons { flex-direction: column; align-items: stretch; }
  .yolo-hero .wp-block-buttons .wp-block-button,
  .yolo-cta .wp-block-buttons .wp-block-button { width: 100%; }
  .yolo-hero .wp-block-button__link,
  .yolo-cta .wp-block-button__link { display: block; text-align: center; }

  /* Franja lima: rejilla, no fila apretada */
  .yolo-strip .wp-block-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.25rem;
  }

  /* Precios: precio grande sin desbordar */
  #precios h3 { font-size: 2.125rem !important; }
  #precios .wp-block-column { margin-bottom: 0.25rem; }

  /* Foto de la banda humana: alto util */
  .wp-block-media-text.is-image-fill > .wp-block-media-text__media { min-height: 300px; }
  .wp-block-media-text { grid-template-columns: 100% !important; }
  .wp-block-media-text__content { padding: 1.5rem 0 0 !important; }

  /* Cabecera: logo + hamburguesa, sin apreturas */
  .yolo-nav-dark > .wp-block-group { flex-wrap: nowrap; gap: 0.75rem; }
  .yolo-nav-dark .wp-block-site-title { font-size: 1.25rem; }

  /* Tarjetas un poco mas compactas */
  .wp-block-group.is-style-yolo-card { padding: 1.25rem 1.125rem; }

  /* Pasos y listas: aire suficiente para el dedo */
  .wp-block-list.is-style-yolo-check li { padding-top: 0.85rem; padding-bottom: 0.85rem; }
  .wp-block-details summary { padding: 0.35rem 0; }
}

/* --- Movil estrecho --- */
@media (max-width: 520px) {
  .yolo-strip .wp-block-group { grid-template-columns: 1fr; }
  .yolo-hero-cifras { grid-template-columns: 1fr 1fr; }
  /* El CTA de la cabecera estorba a 360px: el hero ya tiene el suyo */
  .yolo-nav-dark .wp-block-buttons { display: none; }
}

/* Capturas del panel: marco para que no se pierdan sobre el verde */
.wp-block-image img[src*="panel-"] { box-shadow: 0 24px 48px -24px rgba(0,0,0,.55); }

/* Nada se sale de la pantalla */
img, figure, .wp-block-image img { max-width: 100%; height: auto; }
.wp-block-group, .wp-block-columns { min-width: 0; }

/* ==========================================================================
   REJILLA DE PRODUCTOS WOOCOMMERCE (shortcode [products] y archivo de tienda)
   ========================================================================== */
.yolo-planes .woocommerce ul.products,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2.25rem 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: #fff;
  border: 1px solid #E1E5E1;
  border-radius: 14px;
  padding: 1.125rem 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -22px rgba(19,21,19,.45);
}
.woocommerce ul.products li.product a img {
  margin: 0 0 .75rem !important;
  border-radius: 10px;
  background: #F2F4F1;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.3125rem !important;
  font-weight: 700;
  letter-spacing: -.02em;
  padding: 0 !important;
  margin: 0 !important;
  color: #131513;
}
.woocommerce ul.products li.product .price {
  font-size: 1.75rem !important;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #131513 !important;
  margin: 0 0 .5rem !important;
}
.woocommerce ul.products li.product .price del { opacity: .5; font-weight: 500; }
.woocommerce ul.products li.product .button {
  margin-top: auto !important;
  width: 100%;
  text-align: center;
  border-radius: 9px;
}
.woocommerce ul.products li.product .onsale {
  background: #9BE55F; color: #0E2A22; font-weight: 700;
  border-radius: 999px; padding: .25rem .6rem; min-height: 0; line-height: 1.4;
  top: 1rem; right: 1rem; margin: 0;
}
@media (max-width: 1100px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* Ficha de producto: alinear con la marca */
.woocommerce div.product .product_title { letter-spacing: -.035em; }
.woocommerce div.product p.price { font-size: 2.25rem; font-weight: 800; letter-spacing: -.03em; }
.woocommerce div.product div.images img { border-radius: 12px; }
.woocommerce-tabs .tabs { border-bottom: 1px solid #E1E5E1; }

/* ==========================================================================
   CABECERA EN TRES ZONAS: marca | menu centrado | acciones
   ========================================================================== */
.yolo-nav-dark > .wp-block-group { align-items: center; }
.yolo-brand { flex: 0 0 auto; align-items: center; }
.yolo-brand .wp-block-site-title a { text-decoration: none; }
.yolo-mark { flex: 0 0 13px; width: 13px; height: 13px; }

/* El menu ocupa el centro real, no se pega al boton ni al borde */
.yolo-nav-mid { flex: 1 1 auto; min-width: 0; justify-content: center; }
.yolo-nav-mid .wp-block-navigation { width: 100%; justify-content: center; }
.yolo-nav-mid .wp-block-navigation__container { justify-content: center; }
.yolo-nav-mid .wp-block-navigation-item__content { padding: .35rem 0; white-space: nowrap; }

.yolo-nav-end { flex: 0 0 auto; align-items: center; }

/* El menu es lo primero que sacrifica sitio al estrecharse */
@media (min-width: 1101px) and (max-width: 1320px) {
  .yolo-nav-mid .wp-block-navigation { --wp--style--block-gap: 1.25rem; }
  .yolo-nav-mid .wp-block-navigation__container { gap: 1.25rem !important; }
}
@media (min-width: 782px) and (max-width: 1100px) {
  .yolo-nav-mid { justify-content: flex-end; padding-right: .5rem; }
  .yolo-nav-mid .wp-block-navigation__container { gap: 1rem !important; }
  .yolo-nav-mid .wp-block-navigation { font-size: .875rem; }
  .yolo-nav-end p { display: none; }
}

/* Movil: marca a la izquierda, hamburguesa a la derecha, con aire */
@media (max-width: 781px) {
  .yolo-nav-dark { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .yolo-nav-mid { flex: 0 0 auto; }
  .yolo-nav-mid .wp-block-navigation { width: auto; }
  .yolo-nav-end p { display: none; }
  .yolo-nav-dark > .wp-block-group { gap: .75rem !important; }
  .yolo-nav-dark .wp-block-navigation__responsive-container-open { padding: .35rem; }
  .yolo-nav-dark .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem 1.25rem; }
  .yolo-nav-dark .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1rem; font-size: 1.25rem; }
}
@media (max-width: 520px) {
  .yolo-nav-end .wp-block-buttons { display: none; }
}

/* ==========================================================================
   REJILLA DE PRODUCTOS RESPONSIVE — LOS TRES MARKUPS DE WOOCOMMERCE
   1) clasico: ul.products > li.product
   2) bloques antiguos: .wc-block-grid__products
   3) bloques nuevos: Product Collection / Product Template (is-flex-container)
   Woo y el nucleo fijan anchos en linea, asi que aqui hace falta !important.
   ========================================================================== */

/* --- 1) clasico --- */
.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  float: none !important;
}
.woocommerce ul.products > li.product,
ul.products > li.product {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* --- 2) bloques antiguos (.wc-block-grid) --- */
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  margin: 2.25rem 0 0 !important;
  padding: 0 !important;
}
.wc-block-grid__product {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 1.125rem !important;
  background: #fff;
  border: 1px solid #E1E5E1;
  border-radius: 14px;
  text-align: left !important;
}

/* --- 3) bloques nuevos (Product Collection / Product Template) --- */
.wp-block-woocommerce-product-template,
.wc-block-product-template,
.wp-block-post-template.is-flex-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  padding: 0 !important;
  list-style: none !important;
}
.wp-block-woocommerce-product-template > li,
.wc-block-product-template > li,
.wp-block-post-template.is-flex-container > li {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex-basis: auto !important;
}

/* --- ESCALONES: 4 -> 2 -> 1 --- */
@media (max-width: 1100px) {
  .woocommerce ul.products,
  ul.products,
  .woocommerce ul.products.columns-1,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6,
  .wc-block-grid__products,
  .wp-block-woocommerce-product-template,
  .wc-block-product-template,
  .wp-block-post-template.is-flex-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  .woocommerce ul.products,
  ul.products,
  .woocommerce ul.products.columns-1,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6,
  .wc-block-grid__products,
  .wp-block-woocommerce-product-template,
  .wc-block-product-template,
  .wp-block-post-template.is-flex-container {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .woocommerce ul.products > li.product { padding: 1rem !important; }
  .woocommerce ul.products li.product a img { aspect-ratio: 16 / 10; }
}

/* Que ninguna imagen ni precio fuerce el ancho de la columna */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.wp-block-woocommerce-product-template > li { min-width: 0 !important; }
.woocommerce ul.products li.product img,
.wc-block-grid__product img { max-width: 100% !important; height: auto !important; }

/* Red de seguridad: un item de menu con etiqueta larga (o una URL pegada como
   etiqueta) no debe reventar la cabecera. */
@media (min-width: 782px) {
  .yolo-nav-mid .wp-block-navigation-item__content {
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* Y si algun item trae una URL como texto, al menos que no desborde en movil */
.yolo-nav-dark .wp-block-navigation-item__content { overflow-wrap: anywhere; }