.page { display: none; }
.page.active { display: block; }
@keyframes splashLogo { from{opacity:0;transform:scale(0.82) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes splashFill { from{width:0%} to{width:100%} }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:#f9f9f9}
::-webkit-scrollbar-thumb{background:#000}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24}
h1,h2,h3,.font-headline{font-family:'Noto Serif',serif}
body{font-family:'Manrope',sans-serif;background:#f9f9f9;color:#1a1c1c;}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.5s ease;}
.hero-slide.active{opacity:1}
.madre-panel,.padrillo-panel{display:none}
.madre-panel.active,.padrillo-panel.active{display:block}
.lightbox{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.95);align-items:center;justify-content:center}
.lightbox.open{display:flex}
.modal-arbol{display:none;position:fixed;inset:0;z-index:3000;background:rgba(60,45,30,0.55);align-items:center;justify-content:center;padding:2rem}
.modal-arbol.open{display:flex}
.nav-group { position: relative; }
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 1px solid #e5e5e5;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  min-width: 195px;
  z-index: 200;
}
.nav-dropdown.open { display: block; }
.nav-dropdown a {
  display: block;
  padding: 9px 18px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #474747;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { background: #f3f3f4; color: #000; }
.nav-dropdown .dropdown-label {
  display: block;
  padding: 8px 18px 4px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #aaa;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}
.rep-hero{display:flex;min-height:70vh;margin-bottom:4rem;border:1px solid #e5e5e5;overflow:hidden}
.rep-hero--madre{min-height:unset;align-items:flex-start}
@media(max-width:768px){
  .rep-hero{flex-direction:column;min-height:unset;margin-left:-1.5rem;margin-right:-1.5rem;border-left:none;border-right:none}
  .rep-hero--madre{align-items:stretch}
  .rep-hero-photo{min-height:280px}
  .rep-hero--madre .rep-hero-photo{min-height:unset}
  .rep-hero-info{padding:1.5rem !important}
  .rep-hero-title{font-size:2rem !important}
}
.crias-grid{display:grid;gap:2rem}
@media(max-width:768px){.crias-grid{grid-template-columns:1fr !important;max-width:420px !important;margin-left:auto !important;margin-right:auto !important}}
@media(max-width:500px){
  .modal-arbol>div{padding:1.5rem 0.75rem !important}
  .arbol-wrap{font-size:0.8em}
}
/* ── Gallery strip responsive ── */
.gallery-strip { display:grid; grid-template-columns:repeat(4,1fr); height:320px; }
@media(max-width:640px){ .gallery-strip{ grid-template-columns:repeat(2,1fr); height:240px; } }

/* ── Footer responsive ── */
@media(max-width:768px){
  .footer-inner{ padding:3rem 1.5rem 2rem !important; }
  .footer-grid{ grid-template-columns:1fr !important; gap:2rem !important; padding-top:2rem !important; padding-bottom:2rem !important; }
}

/* ── Contacto info+form responsive ── */
@media(max-width:768px){
  .contacto-grid{ grid-template-columns:1fr !important; }
}

/* ── Genética logo watermark ── */
@media(min-width:768px){ .genetica-logo-bg { display:block !important; } }

/* ── Genética grid responsive ── */
.genetica-grid { display:grid; grid-template-columns:1fr; gap:2rem; margin-top:1rem; }
@media(min-width:768px){ .genetica-grid { grid-template-columns:1fr 1fr; gap:4rem; align-items:end; } }

/* ── Pensionado grid responsive ── */
.pensionado-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:768px){ .pensionado-grid { grid-template-columns:1fr 1fr; gap:4rem; align-items:start; } }

/* ── Page padding responsive ── */
#page-servicio, #page-contacto { padding-top:0 !important; }
@media(max-width:640px){
  [id^="page-"]:not(#page-inicio):not(#page-servicio):not(#page-contacto){ padding-top:80px !important; }
}

/* ── Large page titles responsive ── */
@media(max-width:480px){
  .text-6xl{ font-size:2.8rem !important; }
  .text-5xl{ font-size:2.2rem !important; }
}

/* ── CTA section padding responsive ── */
@media(max-width:768px){
  .py-40{ padding-top:5rem !important; padding-bottom:5rem !important; }
  .py-24{ padding-top:3.5rem !important; padding-bottom:3.5rem !important; }
}

/* ── Hero logo responsive ── */
@media(max-width:480px){
  .hero-logo{ height:70px !important; }
}

/* ── Servicio sections responsive ── */
@media(max-width:640px){
  .servicio-intro-grid{ grid-template-columns:1fr !important; }
}

/* ── Rep hero tablet fix ── */
@media(max-width:900px) and (min-width:769px){
  .rep-hero{ flex-direction:column; min-height:unset; }
  .rep-hero--madre{ align-items:stretch; }
  .rep-hero-photo{ min-height:320px; }
}

@media(max-width:768px){
  .mobile-menu{display:none}
  .mobile-menu.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:white;border-bottom:1px solid #e5e5e5;box-shadow:0 4px 20px rgba(0,0,0,0.1);z-index:49;max-height:80vh;overflow-y:auto}
  .mobile-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:#474747;border-bottom:1px solid #f0f0f0;cursor:pointer}
  .mobile-section-header:hover{color:#000;background:#fafafa}
  .mobile-section-children{display:none;background:#f9f9f9}
  .mobile-section-children.open{display:block}
  .mobile-section-children a{display:block;padding:9px 32px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:#666;border-bottom:1px solid #f0f0f0;cursor:pointer}
  .mobile-section-children a:hover{color:#000;background:#f0f0f0}
  .mobile-direct{padding:12px 24px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:#474747;border-bottom:1px solid #f0f0f0;cursor:pointer;display:block}
  .mobile-direct:hover{color:#000;background:#fafafa}
}

/* ── Nav active state ── */
.nav-link.nav-active { color: #000 !important; }
.nav-link.nav-active::after { content:''; display:block; height:2px; background:#000; margin-top:3px; }

/* ── Skeleton loader ── */
@keyframes skelPulse { 0%,100%{opacity:1} 50%{opacity:0.45} }

/* ── Filter bar collapsible on mobile ── */
.filter-toggle-btn { display:none; }
@media(max-width:640px){
  .filter-toggle-btn { display:block; width:100%; text-align:left; background:none; border:1px solid #e5e5e5; padding:10px 14px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.12em; cursor:pointer; margin-bottom:0.5rem; }
  .filter-inputs-wrap { display:none !important; }
  .filter-inputs-wrap.open { display:flex !important; flex-direction:column; }
}

/* ── Back to top ── */
#backToTop:hover { background:#333 !important; }

/* ── Ventas selector ── */
.ventas-selector { display:flex; gap:0; margin-top:1rem; overflow:hidden; }
.ventas-card { flex:1; min-height:340px; cursor:pointer; padding:3rem 3rem 2.5rem; position:relative; overflow:hidden; transition:box-shadow 0.2s; }
.ventas-card--light { background:white; border:1px solid #e8e8e8; }
.ventas-card--dark  { background:#0f0f0f; border:1px solid #0f0f0f; }
.ventas-card-num { position:absolute; bottom:-1rem; right:1.5rem; font-family:'Noto Serif',serif; font-size:10rem; font-weight:900; line-height:1; pointer-events:none; user-select:none; }
.ventas-card-title { font-family:'Noto Serif',serif; font-size:3.5rem; font-weight:900; letter-spacing:-0.04em; text-transform:uppercase; line-height:1; margin-bottom:1.25rem; }
@media(max-width:900px) and (min-width:641px){
  .ventas-card { padding:2rem 2rem 1.75rem; }
  .ventas-card-title { font-size:2.4rem; }
}
@media(max-width:640px){
  .ventas-selector { flex-direction:column; }
  .ventas-card { min-height:260px; padding:2rem 1.5rem 1.75rem; }
  .ventas-card-title { font-size:2.4rem; }
}

/* ── YouTube branding cover ── */
@keyframes ytCover { 0%,85%{opacity:1} 100%{opacity:0} }
.yt-cover { position:absolute;inset:0;background:#000;z-index:3;pointer-events:none;animation:ytCover 7s ease-out forwards; }

/* ── YouTube banner iframe scaling ── */
.yt-banner-iframe { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600%;height:600%;border:none;pointer-events:none; }

/* ── Hero dots ── */
.hero-dot { width:8px; height:8px; border-radius:50%; border:none; cursor:pointer; background:white; padding:0; transition:opacity 0.3s, transform 0.3s; }
.hero-dot.dot-active { opacity:1 !important; transform:scale(1.25); }