/*
Theme Name:   Yuupi Pets
Theme URI:    https://yuupipets.com
Description:  Tema hijo de Yuupi Pets. Los colores y la escala tipográfica están medidos del arte impreso del pouch y del sello circular, no de documentación. La paleta vive en theme.json; aquí solo va lo que los bloques no cubren.
Author:       Yuupi Pets
Template:     twentytwentyfive
Version:      1.1.7
Requires PHP: 7.4
Text Domain:  yuupi
*/

/* Los tokens también como variables CSS, para el CSS que no pasa por bloques
   (WooCommerce trae plantillas propias que no leen theme.json). */
:root {
  --yuupi-forest:      #183C30;
  --yuupi-forest-up:   #20483A;
  --yuupi-moss:        #2F6B52;
  --yuupi-sage:        #A8B98C;
  --yuupi-sage-pale:   #DCE4CC;
  --yuupi-olive:       #7E8A5E;
  --yuupi-mist:        #F2F6EF;
  --yuupi-cream:       #FAF0DF;
  --yuupi-cream-2:     #FFFBF2;
  --yuupi-sand:        #F7F3E8;
  --yuupi-clay:        #E6D5C3;
  --yuupi-rule:        #C9BFA8;
  --yuupi-rule-soft:   #F1E7D6;
  --yuupi-ink:         #241F16;
  --yuupi-ink-2:       #55503F;
  --yuupi-ink-3:       #8A8271;
  --yuupi-ink-4:       #A9A08C;
  --yuupi-amber:       #A0662C;
  --yuupi-amber-wash:  #FBF3EC;
}

/* --- WooCommerce ------------------------------------------------------- */

.woocommerce-page,
.woocommerce-page .woocommerce { color: var(--yuupi-ink); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--yuupi-forest);
}

.woocommerce div.product .product_title {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--yuupi-forest);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt {
  background: var(--yuupi-forest);
  color: var(--yuupi-cream);
  border: 1px solid var(--yuupi-forest);
  border-radius: 2px;
  padding: 16px 34px;
  min-height: 52px;
  font-size: 15px;
  letter-spacing: 0.05em;
  font-weight: 400;
  transition: background 0.15s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover {
  background: var(--yuupi-moss);
  color: var(--yuupi-cream);
  border-color: var(--yuupi-moss);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
  background: var(--yuupi-clay);
  border-color: var(--yuupi-clay);
  color: var(--yuupi-ink-3);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  background: var(--yuupi-cream);
  border: 1px solid var(--yuupi-rule);
  border-radius: 2px;
  padding: 13px 14px;
  min-height: 52px;
  font-size: 16px; /* 16px evita que iOS haga zoom al enfocar */
  color: var(--yuupi-ink);
}

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row select:focus-visible,
.woocommerce a:focus-visible,
.woocommerce button:focus-visible {
  outline: 2px solid var(--yuupi-moss);
  outline-offset: 2px;
}

/* Avisos: el "todavía no llegamos ahí" no puede parecer un error del sistema.
   Es una respuesta de la marca, y se ve como tal. */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  background: var(--yuupi-mist);
  border-top: none;
  border-left: 3px solid var(--yuupi-moss);
  border-radius: 2px;
  color: var(--yuupi-ink);
  padding: 20px 22px;
  line-height: 1.6;
}

.woocommerce-error {
  background: var(--yuupi-amber-wash);
  border-left-color: var(--yuupi-amber);
}

.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before { content: none; }

.woocommerce .woocommerce-error li { list-style: none; margin: 0; }

/* Precio */
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  color: var(--yuupi-forest);
  font-weight: 400;
}

/* Insignias de estado */
.yuupi-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--yuupi-sage);
  border-radius: 100px;
  padding: 7px 15px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yuupi-moss);
}

.yuupi-badge--pendiente {
  border-color: var(--yuupi-rule);
  color: var(--yuupi-ink-3);
}

.yuupi-eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--yuupi-ink-3);
}

/* =======================================================================
   Diseño de la tienda — traducción del canvas a CSS.
   Los valores de color no se eligen aquí: salen de las variables de arriba,
   que a su vez se midieron del arte impreso.
   ======================================================================= */

/* --- Base ------------------------------------------------------------- */

.yuupi-eyebrow {
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--yuupi-ink-3);
  margin: 0 0 18px;
  line-height: 1.4;
}
.yuupi-eyebrow--claro { color: var(--yuupi-sage); }

.yuupi-lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--yuupi-ink-2);
  max-width: 30em;
  /* En un contenedor "constrained" WordPress centra por su cuenta cualquier hijo
     más estrecho. Sin esto, la entradilla de las páginas salía centrada y el
     resto del texto alineado a la izquierda. */
  margin-inline: 0;
}

.yuupi-seccion { padding-block: clamp(56px, 8vw, 118px); }

.yuupi-encabezado { margin-bottom: clamp(34px, 4vw, 56px); }

.yuupi-pendiente {
  color: var(--yuupi-ink-3);
  font-style: italic;
  border-left: 2px solid var(--yuupi-clay);
  padding-left: 16px;
}

.yuupi-enlace-flecha a,
.yuupi-enlace-suave a {
  border-bottom: 1px solid var(--yuupi-rule);
  padding-bottom: 3px;
}
.yuupi-enlace-flecha a::after { content: " \2192"; }
.yuupi-enlace-flecha a:hover,
.yuupi-enlace-suave a:hover { border-bottom-color: var(--yuupi-moss); }
.yuupi-enlace-suave { font-size: 14px; margin: 0; }

/* --- Cabecera --------------------------------------------------------- */

.yuupi-cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--yuupi-cream) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--yuupi-rule-soft);
  padding-block: 0;
}
.yuupi-cabecera__fila {
  min-height: 74px;
  gap: 24px;
  flex-wrap: nowrap;
}
.yuupi-marca { display: flex; align-items: center; gap: 11px; }
.yuupi-marca__img {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.yuupi-marca__txt {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 21px;
  letter-spacing: -.01em;
  color: var(--yuupi-forest);
}
.yuupi-nav { display: flex; gap: 30px; font-size: 15px; }
.yuupi-nav a { color: var(--yuupi-ink-2); padding-block: 6px; }
.yuupi-nav a:hover { color: var(--yuupi-forest); }
.yuupi-bolsa {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  border: 1px solid var(--yuupi-rule);
  border-radius: 999px;
  padding: 9px 17px;
  color: var(--yuupi-forest);
  white-space: nowrap;
}
.yuupi-bolsa:hover { border-color: var(--yuupi-forest); }
.yuupi-bolsa__n {
  background: var(--yuupi-forest);
  color: var(--yuupi-cream);
  border-radius: 999px;
  min-width: 19px; height: 19px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px;
}

/* --- Hero ------------------------------------------------------------- */

.yuupi-hero { padding-block: clamp(48px, 7vw, 104px) clamp(40px, 5vw, 76px); }
.yuupi-hero__titulo { margin-bottom: 26px; }
.yuupi-hero__acciones { margin-top: 38px; gap: 14px; align-items: center; }
.yuupi-hero__img { margin: 0; position: relative; }
.yuupi-hero__img::before {
  content: "";
  position: absolute;
  inset: -6% -4% -2% -4%;
  background: radial-gradient(circle at 55% 45%, var(--yuupi-sage-pale), transparent 68%);
  border-radius: 50%;
  z-index: 0;
}
.yuupi-hero__img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 4px;
  mix-blend-mode: multiply;
}

/* Botón secundario: contorno discreto, no un segundo botón sólido que compita. */
.yuupi-boton-texto .wp-block-button__link {
  background: transparent;
  color: var(--yuupi-forest);
  border: 1px solid var(--yuupi-rule);
}
.yuupi-boton-texto .wp-block-button__link:hover {
  background: transparent;
  border-color: var(--yuupi-forest);
}
.yuupi-boton-pequeno .wp-block-button__link {
  padding: 11px 22px;
  font-size: 14px;
}

/* --- Tira de sellos --------------------------------------------------- */

.yuupi-sellos {
  background: var(--yuupi-mist);
  border-block: 1px solid var(--yuupi-sage-pale);
  padding-block: 22px;
}
.yuupi-sellos__fila { gap: 0 46px; row-gap: 10px; }
.yuupi-sello {
  font-size: 12px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--yuupi-moss);
  margin: 0;
  position: relative;
}
.yuupi-sello + .yuupi-sello::before {
  content: "";
  position: absolute;
  left: -25px; top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--yuupi-sage);
}

/* --- Dónde repartimos ------------------------------------------------- */

.yuupi-reparto__cols { gap: clamp(30px, 5vw, 74px); }

/* --- La gama ---------------------------------------------------------- */

.yuupi-tarjetas { gap: 26px; }
.yuupi-tarjeta {
  background: var(--yuupi-cream-2);
  border: 1px solid var(--yuupi-rule-soft);
  border-radius: 4px;
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
}
.yuupi-tarjeta--espera { background: transparent; border-style: dashed; border-color: var(--yuupi-rule); }
.yuupi-tarjeta__img { margin: 0 0 20px; }
.yuupi-tarjeta__img img {
  width: 100%; height: 250px;
  object-fit: contain;
  background: var(--yuupi-mist);
  border-radius: 3px;
  padding: 14px;
}
.yuupi-tarjeta__hueco {
  height: 250px;
  margin-bottom: 20px;
  border-radius: 3px;
  background: repeating-linear-gradient(45deg, var(--yuupi-sand), var(--yuupi-sand) 9px, var(--yuupi-cream) 9px, var(--yuupi-cream) 18px);
  display: flex; align-items: center; justify-content: center;
}
.yuupi-tarjeta__hueco-txt {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 34px;
  color: var(--yuupi-ink-4);
  margin: 0;
}
.yuupi-etiqueta {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--yuupi-ink-3);
  margin: 0 0 10px;
}
.yuupi-etiqueta--activa { color: var(--yuupi-moss); }
.yuupi-tarjeta__texto { font-size: 15.5px; margin-top: 8px; }
.yuupi-tarjeta__pie {
  margin-top: auto;
  padding-top: 22px;
  gap: 14px;
}
.yuupi-precio {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 25px;
  color: var(--yuupi-forest);
  margin: 0;
}
.yuupi-precio--vacio {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 14px;
  color: var(--yuupi-ink-3);
}
.yuupi-precio .woocommerce-Price-amount { font-size: inherit; color: inherit; }

/* --- Los nueve ingredientes ------------------------------------------- */

.yuupi-ingredientes {
  background: var(--yuupi-forest);
  color: var(--yuupi-sage-pale);
}
.yuupi-ingredientes__cols { gap: clamp(34px, 5vw, 80px); }
.yuupi-titulo-claro { color: var(--yuupi-cream) !important; }
.yuupi-texto-claro { color: var(--yuupi-sage-pale) !important; max-width: 30em; }
.yuupi-ingredientes__sello { margin: 40px 0 0; }
.yuupi-ingredientes__sello img {
  width: 156px;
  height: auto;
  /* El sello viene sobre fondo negro. Con "screen" el negro desaparece contra el
     verde y queda solo la ilustración, sin recortar un disco a mano. */
  mix-blend-mode: screen;
}
.yuupi-lista__fila {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(250, 240, 223, .13);
}
.yuupi-lista__fila:first-child { border-top: 1px solid rgba(250, 240, 223, .13); }
.yuupi-lista__n {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--yuupi-sage);
}
.yuupi-lista__nombre {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 19px;
  color: var(--yuupi-cream);
  line-height: 1.35;
}
.yuupi-lista__rol {
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--yuupi-sage);
  text-align: right;
}

/* --- Historia --------------------------------------------------------- */

.yuupi-historia__cols { gap: clamp(30px, 5vw, 74px); }
.yuupi-historia__img { margin: 0; }
.yuupi-historia__img img {
  width: 100%; height: auto;
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Franja mayorista ------------------------------------------------- */

.yuupi-mayorista { padding-block: 0 clamp(56px, 7vw, 96px); }
.yuupi-mayorista__caja {
  background: var(--yuupi-sage-pale);
  border-radius: 4px;
  padding: clamp(28px, 4vw, 46px);
  gap: 26px;
}
.yuupi-mayorista__texto { flex: 1 1 380px; }
.yuupi-mayorista__linea {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.35;
  color: var(--yuupi-forest) !important;
  margin: 0;
  max-width: 24em;
}

/* --- Pie -------------------------------------------------------------- */

.yuupi-pie {
  background: var(--yuupi-forest);
  color: var(--yuupi-sage-pale);
  padding-block: clamp(48px, 6vw, 76px) 30px;
}
.yuupi-pie .yuupi-eyebrow { color: var(--yuupi-sage); }
.yuupi-pie a { color: var(--yuupi-cream); display: block; padding: 5px 0; font-size: 15px; }
.yuupi-pie a:hover { color: var(--yuupi-sage); }
.yuupi-pie__rejilla {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.yuupi-pie__titulo {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 26px;
  color: var(--yuupi-cream);
  margin: 0 0 12px;
}
.yuupi-pie__texto { color: var(--yuupi-sage-pale); max-width: 24em; font-size: 15px; }
.yuupi-pie__pendiente {
  margin-top: 22px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--yuupi-sage);
  opacity: .78;
}
.yuupi-pie__barra {
  margin-top: clamp(38px, 5vw, 62px);
  padding-top: 22px;
  border-top: 1px solid rgba(250, 240, 223, .14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--yuupi-sage);
}
.yuupi-pie__legal { display: flex; gap: 24px; }
.yuupi-pie__legal a { display: inline; padding: 0; font-size: 13px; }

/* --- Producto --------------------------------------------------------- */

.yuupi-producto { padding-block: clamp(28px, 4vw, 52px) clamp(48px, 6vw, 84px); }
.yuupi-producto .woocommerce-breadcrumb { font-size: 13px; color: var(--yuupi-ink-3); margin-bottom: 26px; }
.yuupi-producto div.product .product_title { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; }
.yuupi-producto div.product p.price { font-family: 'Newsreader', Georgia, serif; font-size: 30px; color: var(--yuupi-forest); }
.yuupi-producto div.product .woocommerce-product-details__short-description { font-size: 17px; color: var(--yuupi-ink-2); }
.yuupi-pagina { padding-block: clamp(40px, 5vw, 72px); }

/* --- Móvil ------------------------------------------------------------ */

@media (max-width: 900px) {
  .yuupi-pie__rejilla { grid-template-columns: 1fr 1fr; gap: 30px; }

  /* La navegación NO se esconde en móvil. Sin menú hamburguesa construido, un
     display:none dejaría el teléfono sin forma de llegar a Wholesale o a la
     historia. Baja a una segunda fila que se desplaza si no cabe. */
  .yuupi-cabecera__fila {
    min-height: 0;
    flex-wrap: wrap;
    padding-block: 10px;
    row-gap: 8px;
  }
  .yuupi-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    gap: 22px;
    font-size: 13.5px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .yuupi-nav::-webkit-scrollbar { display: none; }
  .yuupi-nav a { white-space: nowrap; }
  .yuupi-marca__txt { font-size: 19px; }
  .yuupi-lista__fila { grid-template-columns: 34px 1fr; }
  .yuupi-lista__rol { grid-column: 2; text-align: left; padding-top: 4px; }
}
@media (max-width: 600px) {
  .yuupi-pie__rejilla { grid-template-columns: 1fr; }
  .yuupi-hero__acciones { flex-direction: column; align-items: stretch; }
  .yuupi-hero__acciones .wp-block-button { width: 100%; }
  .yuupi-hero__acciones .wp-block-button__link { display: block; text-align: center; }
  .yuupi-sellos__fila { gap: 8px; flex-direction: column; align-items: center; }
  .yuupi-sello + .yuupi-sello::before { display: none; }
}