/*
 Theme Name: Astra Child
 Template: astra
 Version: 1.0
 author: Estudio Diablo
 author URI: https://estudiodiablo.com.ar
 Description: Astra Child Theme
 
*/

/* animaciones personalizadas para AOS */

/* animación personalizada para fade */
[data-aos="fade"] {
  opacity: 0;
  transform: translateY(30px); /* animación personalizada */
  transition-property: opacity, transform;
}

[data-aos="fade"].aos-animate {
  opacity: 1;
  transform: translateY(0); /* final del efecto */
}

/* animación personalizada para zoom */
[data-aos="zoom-out"] {
  opacity: 0;
  transform: scale(1.03); /* animación personalizada */
  transition-property: opacity, transform;
}

[data-aos="zoom-out"].aos-animate {
  opacity: 1;
  transform: scale(1); /* final del efecto */
}

/* ========== Bento Grid – Responsive Cenergia ========== */

/* Base */
.bento-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: minmax(160px, auto);
  gap: 20px;
  font-family: 'Inter', sans-serif;
}

.bento-card{
  border-radius: 4px;
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.bento-card h4{
  font-size: 1.35em;
  margin: 0 0 12px;
  font-weight: 600;
}

.bento-card p{
  font-size: 1.15em;
  margin: 0;
  line-height: 1.4;
}

.bento-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Tamaños variables (desktop por defecto) */
.card-lg{ grid-column: span 2; grid-row: span 2; }
.card-wide{ grid-column: span 2; }
.card-tall{ grid-row: span 2; position: relative; }

/* Imágenes base */
.bento-card img{ max-width: 100%; height: auto; display: block; }
.wp-image-1873{ position: relative; z-index: 99; } /* termotanque ilustrado */

/* Fondo patrón celeste */
.fondo-patron-celeste{
  position: absolute;
  left: -20%;
  bottom: -20%;
  transform: rotate(-90deg);
  width: 100%;
  height: auto;
  z-index: 1;
}

/* Fade vars (desktop) */
:root{
  --fade-top:   440px;
  --fade-right: 420px;
}

/* Máscaras */
.fade-top{
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0.65) calc(var(--fade-top) * 0.6),
    rgba(0,0,0,1) var(--fade-top)
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0.65) calc(var(--fade-top) * 0.6),
    rgba(0,0,0,1) var(--fade-top)
  );
}

.fade-right{
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(
    to left,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0.65) calc(var(--fade-right) * 0.6),
    rgba(0,0,0,1) var(--fade-right)
  );
  mask-image: linear-gradient(
    to left,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0.65) calc(var(--fade-right) * 0.6),
    rgba(0,0,0,1) var(--fade-right)
  );
}

/* Logo YPF Solar con máscara */
.ypfsolar{
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  --fade: min(22vh, 200px);
  --s1: calc(var(--fade) * 0.30);
  --s2: calc(var(--fade) * 0.70);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) var(--s1),
    rgba(0,0,0,0.65) var(--s2),
    rgba(0,0,0,1) var(--fade)
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) var(--s1),
    rgba(0,0,0,0.65) var(--s2),
    rgba(0,0,0,1) var(--fade)
  );
}

/* ===== Accesibilidad / UX móvil ===== */

/* En pantallas táctiles, desactivar "salto" en hover */
@media (hover: none) and (pointer: coarse){
  .bento-card:hover{ transform: none; box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
}

/* ====== BREAKPOINTS ====== */

/* Tablet grande: 1024px ↓ — reducimos spans muy altos */
@media (max-width: 1024px){
  .bento-grid{
    gap: 16px;
    grid-auto-rows: auto;
  }
  /* Evitar celdas demasiado altas en tablets */
  .card-lg{ grid-column: span 2; grid-row: span 1; }
  .card-tall{ grid-row: span 1; }
  /* Ajustes de máscaras (menos agresivas) */
  :root{
    --fade-top: 320px;
    --fade-right: 320px;
  }
  /* Imagen del termotanque un poco más contenida */
  .wp-image-1873{
    max-width: 70%;
    margin-left: auto;
  }
}

/* Tablet / phablet: 768px ↓ — 2 columnas limpias sin spans */
@media (max-width: 768px){
  .bento-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  /* Quitar spans para que todo fluya en dos columnas */
  .bento-card,
  .card-lg,
  .card-wide,
  .card-tall{
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* Texto más cómodo */
  .bento-card h4{ font-size: 1.2em; }
  .bento-card p{ font-size: 1.05em; }
  /* Máscaras aún más suaves */
  :root{
    --fade-top: 220px;
    --fade-right: 220px;
  }
  .ypfsolar{ --fade: 140px; }
  /* Termotanque ilustrado pasa a flujo y se centra */
  .wp-image-1873{
    position: static;
    max-width: 60%;
    margin: 10px 0 0 auto; /* se pega a la derecha dentro de la card */
  }
  /* Fondo patrón se limita para no tapar texto */
  .fondo-patron-celeste{
    left: -10%;
    bottom: -10%;
    transform: rotate(-90deg) scale(0.9);
    opacity: .6;
  }
}

/* Móvil: 560px ↓ — 1 columna, tipografías y espacios óptimos */
@media (max-width: 560px){
  .bento-grid{
    grid-template-columns: 1fr; /* una sola columna */
    gap: 12px;
  }
  .bento-card{ padding: 18px; }
  .bento-card h4{ font-size: 1.1em; margin-bottom: 10px; }
  .bento-card p{ font-size: 1em; }
  /* Variables de máscara muy suaves en móvil */
  :root{
    --fade-top: 160px;
    --fade-right: 160px;
  }
  .ypfsolar{ --fade: 110px; }
  /* El termotanque no debe dominar la card */
  .wp-image-1873{
    max-width: 58%;
    margin: 8px 0 0 auto;
  }
  /* Si prefieres ocultar el patrón en pantallas muy chicas, descomenta: */
  /* .fondo-patron-celeste{ display:none; } */
}

/* ==== FIX RESPONSIVE IMÁGENES EN BENTO GRID ==== */
@media (max-width: 768px) {

  .fondo-patron-celeste {
    opacity: 1 !important;
    transform: none !important;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
  }

  /* 2. Imagen del termotanque: sin transparencia, centrada y por encima */
  .wp-image-1873 {
    position: relative !important;
    z-index: 2 !important;
    opacity: 1 !important;
    max-width: 80%;
    margin: 0 auto;
    display: block;
  }

  /* 3. Imagen YPF Solar: sin máscara ni superposición */
  .ypfsolar {
    position: static !important;
    width: 60%;
    margin: 12px auto 0;
    display: block;
  }

  /* 4. Aseguramos que el texto siempre quede visible encima */
  .bento-card h4,
  .bento-card p {
    position: relative;
    z-index: 3;
  }

  /* 5. Si las cards con imagen quedan demasiado grandes, reducimos padding */
  .bento-card {
    padding: 16px;
  }
}


.documentacion-producto {
  padding: 1em 0;
}

.documentacion-producto h2 {
  font-size: 1.5em;
  margin-bottom: 1em;
}

.documentos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.documento {
  flex: 1 1 200px;
  min-width: 160px;
  text-align: center;
  background: #f8f8f8;
  padding: 1em;
  border-radius: 4px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  transition: background 0.2s ease;
}

.documento:hover {
  background: #eef6ff;
  color: var(--ast-global-color-0);
}

.documento small {
  font-weight: normal;
  font-size: 0.85em;
  color: #666;
}

/* Cambiar color del texto de la información meta (SKU, etiquetas) */
.woocommerce div.product .product_meta a {
  color: var(--ast-global-color-1);
}

/* Ocultar SKU en la página de producto */
.woocommerce div.product .product_meta .sku_wrapper {
    display: none;
}




/* ====== colores en Tienda y Categorías ====== */
/* Scope + variables (fácil de ajustar en un solo lugar) */
:is(body.woocommerce-shop, body.tax-product_cat) {
  --ce-archive-title: #000;      /* Título H1 */
  --ce-pg-bg: transparent;       /* Fondo paginación (idle) */
  --ce-pg-active-bg: #000;       /* Fondo activo/hover */
  --ce-pg-active-text: #fff;     /* Texto activo/hover */
}

/* Título de la tienda / categoría */
:is(body.woocommerce-shop, body.tax-product_cat)
  .woocommerce-products-header__title {
  color: var(--ce-archive-title);
}