/*
Theme Name: Astra Child
Template: astra
Text Domain: astra-child
Version: 1.0.0
Description: Child theme de Astra.
Author: Luis
*/


:root{
  /* Paleta corporativa */
  --c-primary: #014132;
  --c-cream:   #F2F2E9;
  --c-accent:  #FFA722;
  --c-sec-1:   #A1D1B1;
  --c-sec-2:   #A10C52;
  --c-white:   #FFFFFF;
  --c-black:   #000000;

  /* Tipografías */
  --ff-primary: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-secondary: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html, body{
  font-family: var(--ff-primary);
  color: var(--c-cream);
  background: var(--c-primary);
}

/* Utilidad para forzar Poppins cuando se requiera */
.font-secondary{ font-family: var(--ff-secondary); }

/* ===== HOME (hero) sin tarjeta — igual que mascotas ===== */
/* === Forzar fondo verde SOLO en Home === */

body.home .wp-site-blocks {
  background-color: var(--c-primary) !important;
}

/* Asegurar que el hero también sea verde y a todo el ancho */
.home-hero{
  background-color: var(--c-primary) !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* quita bordes, radio y sombra de la “tarjeta” */
.home-hero .tilt-card{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  isolation: auto;
  transition: transform .14s linear; /* mantenemos solo el tilt */
}

/* elimina el glow decorativo */
.home-hero .tilt-card::after{ content: none; }

/* la imagen se comporta como las mascotas */
.home-hero .tilt-img{
  width: clamp(390px, 54vw, 1020px); /* ajusta aquí el tamaño que prefieras */
  height: clamp(260px, 36vw, 680px);;
  object-fit: contain;
  transform: translateZ(40px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 24px 48px rgba(1,65,50,.22)); /* sombra suave opcional */
}

/* el glare ya no hereda esquinas redondeadas */
.home-hero .tilt-glare{ border-radius: 0; }

/* estado idle conservado */
.tilt-scene.is-idle .tilt-card{
  transform: rotateX(0) rotateY(0) scale(1);
}

/* ============ NOSOTROS (sin tarjetas, títulos sin degradado) ============ */
:root{
  --c-primary:#014132; --c-cream:#F2F2E9; --c-accent:#FFA722;
  --c-sec-1:#A1D1B1;  /* verde claro (franja) */
  --c-sec-2:#A10C52;  /* berry (franja)    */
  --c-white:#FFFFFF; --c-black:#000000;
  --ff-primary:"Quicksand",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ff-secondary:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* fondo general de la página */
.about-page{ background: var(--c-sec-1); color: var(--c-primary); }

/* bloques con menos alto total */
.about-section{
  padding: clamp(36px, 7vh, 84px) 0;
  background:
    radial-gradient(60% 60% at 18% 12%, color-mix(in oklab, var(--c-sec-2) 14%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(161,209,177,.10), rgba(255,255,255,0) 40%),
    var(--c-cream);
}
.about-section.alt{
  background:
    radial-gradient(60% 60% at 82% 14%, color-mix(in oklab, var(--c-sec-1) 10%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(1,65,50,.05), rgba(255,255,255,0) 40%),
    var(--c-white);
}

/* ===== Franjas directas (aplícalas por clase en el <section>) */
.about-section.band-green{  background: var(--c-sec-1); color: var(--c-primary); }
.about-section.band-berry{
  background: var(--c-sec-2);
  color: var(--c-white);
}
.about-section.band-berry .about-eyebrow,
.about-section.band-berry .about-heading,
.about-section.band-berry .about-copy,
.about-section.band-berry .about-copy strong{ color: var(--c-white); }
.about-section.band-berry .about-keyline{
  background: linear-gradient(90deg, var(--c-white), var(--c-white));
}

/* layout */
.about-wrap{
  max-width: 1200px; margin:0 auto;
  padding: 0 clamp(16px,3.5vw,28px);
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3.4vw, 42px); align-items:center;
}
.about-section.alt .about-wrap{ grid-template-columns: .95fr 1.05fr; }

/* tipografías */
.about-eyebrow{
  margin:0 0 .75rem 0;
  font: 700 2.2rem/1 var(--ff-secondary);
  letter-spacing:.22em; text-transform:uppercase;
  color: var(--c-primary);
}
.about-heading{
  margin:0 0 .35rem 0;
  font: 800 clamp(2.4rem, 5vw, 3.6rem)/1.08 var(--ff-primary);
  letter-spacing:.4px;
  color: var(--c-primary);           /* ← sólido, sin degradado */
}
.about-keyline{
  width: 120px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary));
  margin: .35rem 0 1.15rem;
}
.about-copy{
  font-family: var(--ff-secondary);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.9;
  letter-spacing: .15px;
  color: color-mix(in oklab, var(--c-primary) 85%, black);
}
.about-copy p{ margin: 0 0 1.1rem; }
.about-copy p:last-child{ margin-bottom: 0; }
.about-copy strong{ font-weight:700; color: var(--c-primary); }

/* MASCOTAS — imagen con tilt */
.tilt-scene{ perspective: 1200px; display:grid; place-items:center; }
.tilt-target{ transform-style:preserve-3d; will-change:transform; transition: transform .14s linear, filter .25s ease; }
.mascot-img{
  width: clamp(220px, 24vw, 360px);
  height:auto; display:block; object-fit:contain;
  border-radius: 28px;
  transform: translateZ(40px);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  filter: drop-shadow(0 20px 40px rgba(1,65,50,.22));
}
.tilt-glare{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transform: translateZ(60px);
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen; transition:opacity .12s linear;
}
.tilt-scene.is-idle .tilt-target{ transform: rotateX(0) rotateY(0) scale(1); }

/* encabezado */
.about-hero{
  padding: clamp(44px, 8vh, 96px) 0;
  background:
    radial-gradient(60% 60% at 18% 18%, color-mix(in oklab, var(--c-sec-1) 18%, transparent), transparent 60%),
    var(--c-sec-1);
}

/* responsive */
@media (max-width: 980px){
  .about-wrap{ grid-template-columns:1fr; gap: clamp(12px, 3.2vw, 28px); }
  .about-section.alt .about-wrap{ grid-template-columns:1fr; }
  .about-heading{ text-align:center; }
  .about-keyline{ margin-inline:auto; }
}
@media (prefers-reduced-motion: reduce){
  .tilt-target,.tilt-glare{ transition:none !important; }
  .tilt-target{ transform:none !important; }
}


/* =================== PRODUCTOS =================== */
:root{
  --c-primary:#014132; --c-cream:#F2F2E9; --c-accent:#FFA722;
  --c-sec-1:#A1D1B1; --c-sec-2:#A10C52; --c-white:#FFFFFF; --c-black:#000000;
  --ff-primary:"Quicksand",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ff-secondary:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.products-page{ background: var(--c-cream); color: var(--c-primary); }

/* Encabezados premium con degradado */
.prod-eyebrow{
  margin:0 0 .6rem; font:700 3rem/1 var(--ff-secondary);
  letter-spacing:.22em; text-transform:uppercase; opacity:.9;
}
/* 1) Títulos sin degradado */
.prod-heading{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--c-primary) !important;      /* verde oscuro sólido */
  font: 700 5rem var(--ff-primary);
}
.prod-keyline{
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary)) !important;
}

.prod-lead{
  font:500 clamp(1.05rem,1.6vw,1.2rem)/1.85 var(--ff-secondary);
  color: color-mix(in oklab, var(--c-primary) 85%, black);
}
/* 2) Franjas listas para usar en cada sección */
.products-section.band-accent{             /* Naranja #FFA722 con texto blanco */
  background: var(--c-accent) !important;
  color: var(--c-white);
}
.products-section.band-green{              /* Verde claro #A1D1B1 con texto verde primario */
  background: var(--c-sec-1) !important;
  color: var(--c-primary);
}

/* 3) Ajuste de colores dentro de la franja naranja (texto blanco) */
.products-section.band-accent .prod-eyebrow,
.products-section.band-accent .prod-heading,
.products-section.band-accent .prod-lead{
  color: var(--c-white) !important;
}
.products-section.band-accent .prod-keyline{
  background: linear-gradient(90deg, var(--c-white), var(--c-white)) !important;
}
.prod-title{
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  color: var(--c-primary);
}
.products-section.band-accent .prod-title{ color: var(--c-white); }
/* Secciones */
.products-section{
  padding: clamp(40px,7vh,90px) 0;
  background:
    radial-gradient(60% 60% at 18% 14%, color-mix(in oklab, var(--c-sec-1) 12%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(1,65,50,.05), rgba(255,255,255,0) 40%),
    var(--c-cream);
}
.products-section.alt{
  background:
    radial-gradient(60% 60% at 82% 12%, color-mix(in oklab, var(--c-accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,167,34,.06), rgba(255,255,255,0) 40%),
    var(--c-white);
}
.products-head{
  max-width:1200px; margin:0 auto; padding:0 clamp(16px,3.5vw,28px);
  display:grid; grid-template-columns: 1.05fr .95fr; gap:clamp(18px,3.2vw,44px); align-items:center;
}
.products-section.alt .products-head{ grid-template-columns: .95fr 1.05fr; }

/* Mascotas con tilt (reutiliza el patrón sin tarjeta) */
.tilt-scene{ perspective: 1200px; display:grid; place-items:center; }
.tilt-target{ transform-style:preserve-3d; will-change:transform; transition: transform .14s linear; }
.mascot-img{
  width: clamp(220px, 28vw, 420px); height:auto; object-fit:contain; display:block;
  transform: translateZ(40px);
  filter: drop-shadow(0 20px 40px rgba(1,65,50,.22));
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.tilt-glare{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transform: translateZ(60px);
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen; transition:opacity .12s linear;
}
.tilt-scene.is-idle .tilt-target{ transform: rotateX(0) rotateY(0) scale(1); }

/* ===== Galería de productos ===== */
.products-grid{
  max-width:1200px; margin: clamp(18px,3.5vw,36px) auto 0;
  padding: 0 clamp(16px,3.5vw,28px);
  display:grid; gap: clamp(12px,1.6vw,20px);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width:1100px){ .products-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:820px){ .products-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:520px){ .products-grid{ grid-template-columns: 1fr; } }

.prod-card{
  position:relative; border-radius:18px;
  border:1px solid color-mix(in oklab, var(--c-primary) 16%, transparent);
  background:
    linear-gradient(180deg, rgba(1,65,50,.04), rgba(255,167,34,.04));
  overflow:hidden; isolation:isolate;
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
}
.prod-card:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--c-accent) 36%, var(--c-primary));
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

/* botón que ocupa toda la tarjeta */
.prod-hit{
  appearance:none; border:0; background:transparent; cursor:pointer; width:100%; text-align:left;
  display:grid; gap:.85rem; padding: clamp(14px,1.8vw,18px);
}
.prod-media{
  width:100%; aspect-ratio: 1 / 1; background: var(--c-white);
  border-radius:12px; display:grid; place-items:center; overflow:hidden;
  border:1px solid color-mix(in oklab, var(--c-primary) 10%, transparent);
}
.prod-img{ width:100%; height:100%; object-fit:contain; transition: transform .18s ease; }
.prod-card:hover .prod-img{ transform: scale(1.03); }

.prod-title{
  display:block; font: 800 clamp(1.05rem,1.6vw,1.25rem)/1.2 var(--ff-primary);
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== Modal de producto ===== */
.product-modal{
  position:fixed; inset:0; display:grid; place-items:center;
  opacity:0; pointer-events:none; transition: opacity .2s ease;
  z-index:9999;
}
.product-modal.open{ opacity:1; pointer-events:auto; }
.product-modal .modal-backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
}
.product-modal .modal-dialog{
  position:relative; width: min(1080px, 94vw); max-height: 90vh;
  background: var(--c-cream); border-radius:22px;
  border:1px solid color-mix(in oklab, var(--c-primary) 14%, transparent);
  box-shadow: 0 28px 64px rgba(0,0,0,.45);
  display:grid; grid-template-columns: 1.05fr .95fr; overflow:hidden;
}
@media (max-width:900px){ .product-modal .modal-dialog{ grid-template-columns:1fr; } }

.modal-media{
  background:
    radial-gradient(60% 60% at 20% 20%, color-mix(in oklab, var(--c-sec-1) 16%, transparent), transparent 60%),
    var(--c-white);
  display:grid; place-items:center; min-height:280px;
}
.modal-media img{ width:min(520px, 88%); height:auto; object-fit:contain; }

.modal-body{ padding: clamp(16px,2.4vw,28px); overflow:auto; }
.modal-title{
  margin:.2rem 0 .4rem; font:800 clamp(1.6rem,3vw,2.2rem)/1.15 var(--ff-primary);
  color: var(--c-primary);
}
.modal-sub{ margin:0 0 .6rem; font:600 1rem/1.5 var(--ff-secondary); color: color-mix(in oklab, var(--c-primary) 78%, black); }
.modal-list{ margin:.6rem 0 0 1.1rem; padding:0; font:400 1rem/1.8 var(--ff-secondary); }
.modal-list li{ margin:.15rem 0; }

.modal-close{
  position:absolute; top:10px; right:10px; width:36px; height:36px;
  border-radius:999px; border:1px solid color-mix(in oklab, var(--c-primary) 20%, transparent);
  background: var(--c-white); color: var(--c-primary);
  display:grid; place-items:center; font-size:18px; cursor:pointer;
  transition: transform .12s ease, background .12s ease;
}
.modal-close:hover{ transform: scale(1.05); background: color-mix(in oklab, var(--c-accent) 12%, var(--c-white)); }

@media (prefers-reduced-motion: reduce){
  .prod-card,.prod-img,.tilt-target,.tilt-glare,.product-modal{ transition:none !important; }
}