/*
Theme Name: YoLoCoJo
Theme URI: https://yolocojo.com
Author: YoLoCoJo
Description: Tema de bloques (FSE) de YoLoCoJo. Solo identidad y presentacion: layout, color, tipografia, responsive y estilos. El contenido vive en WordPress, el catalogo en WooCommerce y el SEO en su plugin. Direccion visual "Panel": verde profundo, acento lima, tipografia rotunda.
Version: 1.5.2
Requires at least: 6.6
Tested up to: 7.1
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, block-styles, editor-style, e-commerce, one-column, custom-colors, custom-menu, featured-images, translation-ready
*/

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

/* Titulo accesible de las plantillas que no lo pintan (una h1 por pagina). */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
}

.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: solo en las secciones de primer nivel,
     no en cualquier grupo anidado que lleve padding en linea. */
  main.wp-block-group > .wp-block-group[style*="padding-left"],
  main.wp-block-group > section.wp-block-group[style*="padding-left"],
  header .yolo-nav-dark {
    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;
  }

  /* 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; }
}

/* Captura de pantalla sobre fondo oscuro: marco para que no se pierda.
   Se aplica por clase (is-style / className "yolo-shot") y no por nombre de
   fichero: el tema no debe conocer como se llaman las imagenes del contenido. */
.yolo-shot img { 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; }

/* ==========================================================================
   CATALOGO DE WOOCOMMERCE — SOLO PRESENTACION
   El tema no decide que productos hay ni cuantos: solo como se ven.
   Dos marcados posibles, ambos de WooCommerce:
     1) bucle clasico  ul.products > li.product   (archivo de tienda,
        relacionados y upsells de la ficha de producto, que WooCommerce sigue pintando
        con su plantilla clasica)
     2) Product Collection  .wp-block-woocommerce-product-template > li
        (paginas de marketing). Su rejilla responsive la gestiona
        WooCommerce con shrinkColumns; aqui solo se pinta la tarjeta.
   ========================================================================== */

/* --- 1) bucle clasico: rejilla derivada de la columna que declare Woo --- */
.woocommerce ul.products,
ul.products {
  --yolo-cols: 4;
  display: grid !important;
  grid-template-columns: repeat(var(--yolo-cols), minmax(0, 1fr)) !important;
  gap: 1rem !important;
  margin: 2.25rem 0 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none;
}
.woocommerce ul.products.columns-1, ul.products.columns-1 { --yolo-cols: 1; }
.woocommerce ul.products.columns-2, ul.products.columns-2 { --yolo-cols: 2; }
.woocommerce ul.products.columns-3, ul.products.columns-3 { --yolo-cols: 3; }
.woocommerce ul.products.columns-4, ul.products.columns-4 { --yolo-cols: 4; }
.woocommerce ul.products.columns-5, ul.products.columns-5 { --yolo-cols: 5; }
.woocommerce ul.products.columns-6, ul.products.columns-6 { --yolo-cols: 6; }
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }

/* --- Tarjeta: comun a los dos marcados --- */
.woocommerce ul.products > li.product,
.wp-block-woocommerce-product-template > li.wc-block-product {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
  clear: 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,
.wp-block-woocommerce-product-template > li.wc-block-product:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -22px rgba(19,21,19,.45);
}
.woocommerce ul.products li.product a img,
.wp-block-woocommerce-product-template > li.wc-block-product img {
  margin: 0 0 .75rem !important;
  border-radius: 10px;
  background: #F2F4F1;
  max-width: 100% !important;
  height: auto !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wp-block-woocommerce-product-template > li.wc-block-product .wp-block-post-title {
  font-size: 1.3125rem !important;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  padding: 0 !important;
  margin: 0 !important;
  color: #131513;
}
.wp-block-woocommerce-product-template > li.wc-block-product .wp-block-post-title a { text-decoration: none; color: inherit; }
.wp-block-woocommerce-product-template > li.wc-block-product .wp-block-post-title a:hover { text-decoration: underline; }
.woocommerce ul.products li.product .price,
.wp-block-woocommerce-product-template > li.wc-block-product .wc-block-components-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,
.wp-block-woocommerce-product-template > li.wc-block-product .wp-block-read-more {
  margin-top: auto !important;
  width: 100%;
  text-align: center;
  border-radius: 9px;
}

/* El CTA de la tarjeta es core/read-more (nucleo): enlaza al permalink del
   producto. El tema solo le da aspecto de boton; el texto y el destino los
   ponen el bloque y WordPress. */
.wp-block-woocommerce-product-template > li.wc-block-product .wp-block-read-more {
  display: block;
  box-sizing: border-box;
  padding: .8rem 1.1rem;
  background: #12312A;
  color: #EDF6F1;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background .15s ease;
}
.wp-block-woocommerce-product-template > li.wc-block-product .wp-block-read-more:hover {
  background: #0E2A22;
  color: #EDF6F1;
  text-decoration: none;
}
.woocommerce ul.products li.product .onsale,
.wp-block-woocommerce-product-template .wc-block-components-product-sale-badge {
  background: #9BE55F; color: #0E2A22; font-weight: 700;
  border-radius: 999px; padding: .25rem .6rem; min-height: 0; line-height: 1.4;
  margin: 0;
}
.woocommerce ul.products li.product .onsale { top: 1rem; right: 1rem; }

/* --- Escalones del bucle clasico: la cuenta que diga Woo -> 2 -> 1 --- */
@media (max-width: 1100px) {
  .woocommerce ul.products, ul.products { --yolo-cols: 2; }
}
@media (max-width: 600px) {
  .woocommerce ul.products, ul.products { --yolo-cols: 1; }
  .woocommerce ul.products > li.product { padding: 1rem !important; }
}

/* 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; }
}

/* 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; }