/*
Theme Name: Ojitos3D
Theme URI: https://ojitos3d.com.ar
Author: Vanesa Laurini
Description: Rediseño de marca para Ojitos3D sobre el framework Best Shop. Child theme seguro: no modifica archivos del tema padre.
Template: best-shop
Version: 1.0.0
Text Domain: ojitos3d
*/

:root{
  --violeta:#8B4DBD;
  --celeste:#19ABEE;
  --rosa:#FF5FA8;
  --rosa-claro:#FF8CAF;
  --amarillo:#FFCC33;
  --naranja:#FE9F00;
  --verde-lima:#8FD62E;
  --verde-esmeralda:#2FAF73;
  --negro:#1D1D1D;
  --lavanda:#E7D8F8;
  --celeste-pastel:#D8F4FF;
  --rosa-pastel:#FFE3EF;
  --verde-menta:#DFF7E9;
  --amarillo-vainilla:#FFF7D6;
}

/* ---------- Tipografía general ---------- */
body, button, input, select, textarea{
  font-family:'Nunito', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.site-title, .entry-title, .product_title, .page-title{
  font-family:'Baloo 2', sans-serif !important;
  font-weight:700;
}

a{ color: var(--violeta); }
a:hover{ color: var(--rosa); }

/* ---------- Topbar ---------- */
.topbar{
  background: var(--violeta);
  color:#fff;
  font-size:13px;
  padding:6px 0;
  text-align:center;
  letter-spacing:.2px;
}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:2px solid var(--lavanda);
}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;gap:20px;
}
.logo-mark{display:flex;align-items:center;gap:10px;}
.logo-img, .custom-logo, .site-logo img, .site-branding img{
  max-height:128px !important;
  max-width:260px !important;
  height:auto !important;
  width:auto !important;
  display:block;
}
@media (max-width:720px){
  .logo-img, .custom-logo, .site-logo img, .site-branding img{ max-height:90px !important; }
}
@media (max-width:480px){
  .logo-img, .custom-logo, .site-logo img, .site-branding img{ max-height:64px !important; }
}
.footer-logo{ filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }

nav.main-links{ display:flex; gap:28px; font-weight:700; font-size:15px; align-items:center; }
nav.main-links a{ color:var(--negro); text-decoration:none; }
nav.main-links .has-drop{ position:relative; }
nav.main-links a:hover{ color: var(--rosa) !important; }
.dropdown{
  display:none; position:absolute; top:100%; left:0; background:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.12); border-radius:12px;
  padding:10px; min-width:340px; margin-top:12px;
  columns:2; column-gap:6px; z-index:60;
}
.has-drop:hover .dropdown{ display:block; }
.dropdown a{ display:block; padding:8px 10px; border-radius:8px; font-weight:600; font-size:14px; break-inside:avoid; }
.dropdown a:hover{ background:var(--lavanda); color:var(--violeta) !important; }

.nav-actions{ display:flex; align-items:center; gap:16px; }
.icon-btn{
  width:38px; height:38px; border-radius:50%; background:var(--lavanda);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  color:var(--violeta); position:relative;
}
.cart-count{
  position:absolute; top:-4px; right:-4px; background:var(--rosa); color:#fff;
  font-size:10px; font-weight:800; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.btn-cta{
  background:var(--naranja); color:#fff !important; font-weight:800; font-size:14px;
  padding:11px 20px; border-radius:999px; box-shadow:0 6px 14px rgba(254,159,0,.35);
  transition:transform .15s ease; text-decoration:none;
}
.btn-cta:hover{ transform:translateY(-2px); color:#fff !important; }
.burger{ display:none; font-size:22px; background:none; color:var(--violeta); border:none; }
.nav-actions{ flex-wrap:nowrap; }
@media (max-width:900px){
  nav.main-links{
    display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; gap:0; padding:10px 24px 20px; box-shadow:0 12px 20px rgba(0,0,0,.08);
  }
  header.site.nav-open nav.main-links{ display:flex; }
  nav.main-links a{ padding:10px 0; border-bottom:1px solid #f2f2f2; }
  .dropdown{ position:static; box-shadow:none; columns:1; margin-top:6px; padding:0 0 0 12px; display:none; }
  .has-drop.open .dropdown{ display:block; }
  .burger{ display:block; }
}
@media (max-width:640px){
  .nav{ padding:10px 14px; gap:8px; }
  .nav-actions{ gap:6px; }
  .nav-actions a[aria-label="Facebook"],
  .nav-actions a[aria-label="YouTube"],
  .nav-actions a[aria-label="Instagram"]{ display:none; }
  .icon-btn{ width:32px; height:32px; }
  .btn-cta{ display:none; }
}

/* ---------- Footer ---------- */
footer.site{ background:var(--negro); color:#eee; padding:50px 0 20px; font-size:14px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
footer.site h5{ color:var(--amarillo); font-size:13px; letter-spacing:1px; text-transform:uppercase; margin:0 0 14px; }
footer.site ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
footer.site a{ color:#ddd; text-decoration:none; }
footer.site a:hover{ color:var(--celeste); }
.foot-bottom{
  margin-top:36px; padding-top:20px; border-top:1px solid #333;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:#999;
}
.foot-brand p{ color:#cfcfcf !important; opacity:1; line-height:1.6; max-width:300px; }
.socials{ display:flex; gap:10px; margin-top:14px; }
.socials a{
  width:34px; height:34px; border-radius:50%; background:#2a2a2a; display:flex; align-items:center;
  justify-content:center; font-size:14px;
}
@media (max-width:720px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

/* Carrito / precios destacados (amarillo, como en el manual de marca) */
.cart-contents, .woocommerce-cart-contents, .cart-icon .count{
  background: var(--amarillo) !important;
  color: var(--negro) !important;
}

/* ---------- Botones ---------- */
.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.single_add_to_cart_button{
  background: var(--naranja) !important;
  border-color: var(--naranja) !important;
  color:#fff !important;
  border-radius: 999px !important;
  font-weight:800 !important;
  border:none !important;
  transition: transform .15s ease;
}
.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.single_add_to_cart_button:hover{
  background: var(--rosa) !important;
  transform: translateY(-2px);
}

/* Precio */
.price, .woocommerce-Price-amount{
  color: var(--negro);
  font-weight:800;
}
.woocommerce ul.products li.product .price{
  background: var(--amarillo);
  display:inline-block;
  padding:2px 10px;
  border-radius:8px;
}

/* ---------- Imágenes de producto: tamaño consistente ---------- */
/* Grilla / tienda: contenedor cuadrado fijo, no importa el tamaño real del archivo */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img{
  width:100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  border-radius:14px;
  background: var(--rosa-pastel);
}

.woocommerce ul.products li.product{
  transition: transform .2s ease;
}
.woocommerce ul.products li.product:hover{
  transform: translateY(-4px);
}

/* Página de producto individual: la achicamos, ya no ocupa toda la pantalla */
.woocommerce div.product div.images,
.woocommerce div.product div.images img,
.woocommerce-product-gallery,
.woocommerce-product-gallery__image img{
  max-width: 420px !important;
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  border-radius:16px;
  margin:0 auto;
}
.woocommerce div.product div.images{
  max-width: 420px !important;
}

/* Categorías */
.woocommerce ul.products li.product-category{
  border-radius:18px;
  overflow:hidden;
}
.woocommerce ul.products li.product-category h2{
  background: var(--lavanda);
  padding:10px;
  font-size:15px;
}

/* ---------- Footer ---------- */
.site-footer, #colophon{
  background: var(--negro) !important;
  color:#eee;
}
.site-footer a, #colophon a{ color:#ddd; }
.site-footer a:hover, #colophon a:hover{ color: var(--celeste); }

/* ---------- Sparkles y efectos (usados por ojitos3d-effects.js) ---------- */
.ojitos3d-sparkle{
  position:absolute; pointer-events:none; font-size:20px; opacity:.85;
  animation: ojitos3d-float 4.5s ease-in-out infinite;
}
@keyframes ojitos3d-float{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-14px) rotate(8deg); }
}
.ojitos3d-reveal{
  opacity:0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.ojitos3d-reveal.in-view{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .ojitos3d-sparkle{ animation:none !important; }
  .ojitos3d-reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Home custom (template-home-ojitos.php) ---------- */
.ojitos3d-hero{
  background: linear-gradient(135deg, var(--lavanda) 0%, var(--celeste-pastel) 60%, #fff 100%);
  padding:64px 24px; border-radius:24px; margin:24px 0; position:relative; overflow:hidden;
}
.ojitos3d-hero h1{ font-size:clamp(26px, 5vw, 38px); margin:0 0 16px; line-height:1.15; }
.ojitos3d-hero h1 em{
  font-style:normal; color:var(--rosa);
  text-decoration: wavy underline var(--amarillo); text-decoration-thickness:3px; text-underline-offset:6px;
}
.ojitos3d-hero p{ max-width:520px; font-size:17px; color:#333; }
.ojitos3d-hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.ojitos3d-hero-ctas a{ display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
.ojitos3d-btn-primary{ background:var(--rosa) !important; color:#fff !important; padding:14px 26px !important; border-radius:999px !important; font-weight:800 !important; }
.ojitos3d-btn-secondary{ background:#fff !important; color:var(--violeta) !important; padding:12px 24px !important; border-radius:999px !important; font-weight:800 !important; border:2px solid var(--violeta) !important; }
@media (max-width:400px){
  .ojitos3d-btn-primary, .ojitos3d-btn-secondary{ padding:12px 18px !important; font-size:14px; }
}

.ojitos3d-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
@media (max-width:900px){ .ojitos3d-hero-grid{ grid-template-columns:1fr; } }
.ojitos3d-hero-visual{ position:relative; height:340px; }
@media (max-width:900px){ .ojitos3d-hero-visual{ height:280px; order:-1; } }
.ojitos3d-plancha{
  position:absolute; inset:0; background:#fff; border-radius:24px;
  box-shadow:0 20px 50px rgba(139,77,189,.18);
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:28px;
  transform:rotate(3deg);
}
.ojitos3d-eye-dot{
  aspect-ratio:1; border-radius:50%; background:#fff; border:3px solid var(--negro);
  position:relative; overflow:hidden; animation:ojitos3d-blink 6s infinite;
}
.ojitos3d-eye-dot::after{
  content:""; position:absolute; inset:18%; border-radius:50%; background:var(--pupil,var(--celeste));
}
.ojitos3d-eye-dot::before{
  content:""; position:absolute; width:22%; height:22%; border-radius:50%; background:#fff;
  top:22%; left:26%; z-index:2;
}
.ojitos3d-eye-dot:nth-child(4n+1){ --pupil:var(--celeste); animation-delay:.2s; }
.ojitos3d-eye-dot:nth-child(4n+2){ --pupil:var(--rosa); animation-delay:1.1s; }
.ojitos3d-eye-dot:nth-child(4n+3){ --pupil:var(--verde-esmeralda); animation-delay:2s; }
.ojitos3d-eye-dot:nth-child(4n+4){ --pupil:var(--naranja); animation-delay:2.8s; }
@keyframes ojitos3d-blink{ 0%,90%,100%{ transform:scaleY(1); } 94%{ transform:scaleY(.12); } }
@media (prefers-reduced-motion: reduce){ .ojitos3d-eye-dot{ animation:none !important; } }
.ojitos3d-tracker-eye{ position:absolute; top:-18px; left:-18px; z-index:2; }

.ojitos3d-cats-wrap{ position:relative; margin:40px 0; }
.ojitos3d-cats-wrap .ojitos3d-cats{ margin:0; }
.ojitos3d-cats-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:var(--violeta); font-size:22px; line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center;
}
.ojitos3d-cats-arrow:hover{ background:var(--lavanda); }
.ojitos3d-cats-arrow.left{ left:-10px; }
.ojitos3d-cats-arrow.right{ right:-10px; }
@media (max-width:600px){
  .ojitos3d-cats-arrow{ width:32px; height:32px; font-size:18px; }
}

.ojitos3d-cats{
  display:flex; gap:22px; margin:40px 0;
  overflow-x:auto; overflow-y:visible; padding:6px 4px 16px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.ojitos3d-cats::-webkit-scrollbar{ height:6px; }
.ojitos3d-cats::-webkit-scrollbar-thumb{ background:var(--lavanda); border-radius:10px; }
.ojitos3d-cat-card{ flex:0 0 auto; width:150px; scroll-snap-align:start; }
.ojitos3d-cat-card{ border-radius:20px; padding:10px 10px 4px; text-align:center; text-decoration:none; display:block; transition: transform .2s ease; position:relative; }
.ojitos3d-cat-card:hover{ transform: translateY(-6px); }
.ojitos3d-cat-card .ic{
  width:84px; height:84px; border-radius:50%; background:#fff; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:0 10px 24px rgba(139,77,189,.18), 0 2px 6px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.03);
}
.ojitos3d-cat-card .ic img{ width:46px; height:46px; object-fit:contain; }
.ojitos3d-cat-card h3{ font-size:15px; margin:0 0 4px; color:var(--negro); }
.ojitos3d-cat-card span{ font-size:12px; color:#555; }

/* Star-burst tap effect */
.ojitos3d-star-burst{ position:absolute; inset:0; pointer-events:none; }
.ojitos3d-star-burst .sb-star{
  position:absolute; left:50%; top:50%; font-size:16px;
  transform:translate(-50%,-50%) scale(0) rotate(0deg); opacity:0;
}
.ojitos3d-cat-card.tapped .ojitos3d-star-burst .sb-star{ animation: ojitos3d-sb-pop .6s ease-out forwards; }
.ojitos3d-cat-card.tapped .ojitos3d-star-burst .sb-star:nth-child(1){ --tx:-38px; --ty:-34px; animation-delay:0s; }
.ojitos3d-cat-card.tapped .ojitos3d-star-burst .sb-star:nth-child(2){ --tx:38px; --ty:-34px; animation-delay:.04s; }
.ojitos3d-cat-card.tapped .ojitos3d-star-burst .sb-star:nth-child(3){ --tx:-46px; --ty:10px; animation-delay:.08s; }
.ojitos3d-cat-card.tapped .ojitos3d-star-burst .sb-star:nth-child(4){ --tx:46px; --ty:10px; animation-delay:.02s; }
.ojitos3d-cat-card.tapped .ojitos3d-star-burst .sb-star:nth-child(5){ --tx:0px; --ty:-48px; animation-delay:.06s; }
@keyframes ojitos3d-sb-pop{
  0%{ transform:translate(-50%,-50%) scale(0) rotate(0deg); opacity:1; }
  60%{ opacity:1; }
  100%{ transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.15) rotate(25deg); opacity:0; }
}

@media (max-width: 900px){
}


/* Arreglo espaciado del icono en avisos de WooCommerce (carrito, errores, etc.) */
.woocommerce-error, .woocommerce-message, .woocommerce-info {
	  padding-left: 3.5em !important;
}

/* Fix: sacar el hueco entre Tienda y el desplegable para que el hover no se corte */
header.site nav.main-links .has-drop .dropdown.dropdown {
	margin-top: 0 !important;
	padding-top: 12px !important;
}

/* Espacio lateral en la ficha de producto para que la imagen no quede pegada al borde en celular */
@media (max-width: 600px){
	.woocommerce div.product{
		padding: 0 16px;
	}
	.woocommerce div.product div.images,
	  .woocommerce-product-gallery,
	.woocommerce-product-gallery__image img{
		max-width: 100% !important;
	}
}

/* Margen lateral en la ficha de producto para cualquier tamao de pantalla (la imagen quedaba pegada al borde) */
.woocommerce div.product{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

/* El cuadrado 1:1 debe ser solo para la imagen, no para el contenedor completo (apretaba las miniaturas) */
.woocommerce-product-gallery{
	aspect-ratio: auto !important;
	height: auto !important;
	margin-bottom: 16px;
}

/* Separar la foto principal de las miniaturas de abajo (estaban pegadas) */
.woocommerce-product-gallery .flex-control-thumbs{
	margin-top: 12px !important;
	display: flex;
	gap: 8px;
}