/*
Theme Name: GATITOS Tienda
Description: Tema propio de la tienda GATITOS (WooCommerce). Paleta morado/dorado/lavanda, portada con hero, catálogo, beneficios y programa de referidos en 3 niveles.
Author: GATITOS
Version: 1.0.0
Text Domain: gatitos-tienda
*/

:root{
  --purple:#4B1E6B;
  --purple-dark:#33144a;
  --purple-light:#7E57C2;
  --purple-tint:#F5F1FA;
  --green:#22C55E;
  --green-tint:#EAFBF1;
  --border-soft:#ECECEC;
  --gold:#E5B84B;
  --lavender:#B79FE0;
  --yellow:#F5D800;
  --white:#FFFFFF;
  --ink:#231433;

  /* Alias semanticos de jerarquia (2026-08-05): mismos colores de marca
     de arriba, con nombres que dejan explicito CUANDO usar cada uno --
     se usan en el Checkout (ver seccion "Jerarquia cromatica"), sin
     tocar los usos existentes de --purple/--ink en el resto del sitio
     para no arriesgar una regresion visual fuera de esa pagina. */
  --brand:var(--purple);
  --brand-hover:var(--purple-dark);
  --text-primary:#2F2F3A;
  --text-secondary:#6B7280;
  --text-muted:#9CA3AF;
  --success:var(--green);
  --warning:#F4B400;
  --surface:var(--white);
  --background:#FAFAFC;
  --border:var(--border-soft);
}
*{margin:0;padding:0;box-sizing:border-box;}
/* ===== SVG ICON SYSTEM (reemplaza emoji usados como ícono funcional) =====
   Los íconos heredan tamaño del font-size del elemento contenedor (1em) y
   color del texto (currentColor), igual que hacían los emoji que reemplazan
   -- así no hace falta tocar el font-size ya definido en cada contexto
   (.trust-item .ico, .feature-card .ico, .badge, botones, etc). */
.gatitos-icon{
  width:1em;
  height:1em;
  display:inline-block;
  vertical-align:-0.15em;
  flex-shrink:0;
  stroke:currentColor;
}
.hero-eyebrow .gatitos-icon{
  width:1.15em;
  height:1.15em;
}
.avatar .gatitos-icon{
  width:1.3em;
  height:1.3em;
}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-weight:700;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
.logo{
  display:flex;
  align-items:center;
}
/* Selector reforzado (.logo .logo-img, no solo .logo-img): WooCommerce trae
   su propia regla ".woocommerce-page img { height:auto; max-width:100% }"
   en woocommerce-layout.css (activa en carrito/checkout/tienda, cualquier
   pagina con la clase body .woocommerce-page). Esa regla tiene MAS
   especificidad CSS que un simple ".logo-img" (clase+etiqueta le gana a
   una sola clase), asi que ganaba ella sin importar el orden de carga --
   el logo se veia a tamano completo (168px) en vez de 56px en esas
   paginas. Anidar con el padre ".logo" sube la especificidad lo suficiente
   para ganarle, sin necesitar !important. */
.logo .logo-img{
  height:56px;
  width:auto;
  display:block;
}
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
.btn{
  display:inline-block;
  padding:14px 32px;
  border-radius:50px;
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  border:none;
  transition:all .25s ease;
}
.btn-primary{
  background:var(--purple);
  color:var(--white);
  box-shadow:0 8px 20px rgba(75,30,107,.25);
}
.btn-primary:hover{
  background:var(--gold);
  color:var(--purple-dark);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(229,184,75,.4);
}
.btn-outline{
  background:transparent;
  border:2px solid var(--white);
  color:var(--white);
}
.btn-outline:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--purple-dark);
  /* translateY(-2px) + sombra (2026-08-07, brief de micro-animaciones:
     "Botones: translateY(-2px), shadow++") -- mismo patrón que
     .btn-primary:hover ya tenía, por consistencia entre los 2 botones
     del hero. */
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(229,184,75,.4);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--yellow);
  color:var(--purple-dark);
  font-weight:700;
  font-size:.75rem;
  padding:6px 14px;
  border-radius:50px;
  letter-spacing:.03em;
}

/* ===== TOP BAR ===== */
.topbar{
  background:var(--purple-dark);
  color:var(--yellow);
  text-align:center;
  font-size:.85rem;
  font-weight:600;
  padding:8px 12px;
  letter-spacing:.02em;
}

/* ===== HEADER =====
   Escopado a "body > header" (no a header a secas): WooCommerce usa un
   <header> semantico propio dentro de cada bloque de Direccion
   (.woocommerce-Address-title), y el selector generico "header{}" se lo
   pisaba con el fondo morado del nav del sitio -- texto blanco sobre
   morado ilegible encima del titulo de la direccion. */
body > header{
  background:linear-gradient(135deg,var(--purple) 0%,#5c2585 100%);
  position:sticky;
  top:0;
  z-index:100;
}
/* Header flotando sobre el Hero -- home y sedes (2026-08-07, brief de
   diseño) -- "body.home" es la clase que body_class() de WordPress
   agrega automáticamente solo en la portada; "body.page-template-page-sedes-php"
   es la que agrega automáticamente cuando la página usa la plantilla
   page-sedes.php (2026-08-10, pedido explícito: "acá sí podés dejar el
   translúcido"). Ninguna otra página queda tocada. Se queda
   position:sticky (mismo comportamiento al hacer scroll que el resto del
   sitio) pero con fondo semitransparente + blur en vez de sólido -- y el
   hero de cada página (.hero / .sedes-hero) tiene un margin-top negativo
   que lo sube exactamente el alto del header, para que su fondo morado
   se vea DETRÁS del header en vez de empezar debajo.
   2026-08-10: se probó extender esto a TODAS las páginas, pero en las de
   fondo blanco (Quiénes Somos, Contáctanos) el contraste del texto
   blanco del menú caía a 3.34:1 (bajo el mínimo AA de 4.5:1) -- revertido
   ahí. Sedes es seguro porque .sedes-hero usa el mismo degradado morado
   oscuro que .hero del home (contraste ya probado). */
body.home > header,
body.page-template-page-sedes-php > header{
  background:rgba(75,30,107,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.navwrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
}
.navlinks{
  display:flex;
  gap:32px;
  align-items:center;
}
.navlinks a{
  color:var(--white);
  font-weight:600;
  font-size:.95rem;
  opacity:.9;
  transition:opacity .2s;
}
.navlinks a:hover{opacity:1;color:var(--gold);}
.nav-icons{display:flex;gap:18px;align-items:center;}
.nav-icons a{color:var(--white);font-size:1.2rem;cursor:pointer;position:relative;}
/* El icono de "Mi cuenta" (carita de gato) no se identifica solo sin
   texto -- se agrega la etiqueta visible al lado, mismo criterio que
   "Carrito". Se oculta en mobile angosto (el titulo del link sigue
   sirviendo de tooltip/accesibilidad ahi, y el header ya esta apretado
   con el boton de menu). */
.nav-icon-link{display:flex;align-items:center;gap:6px;}
.nav-icon-label{font-size:.85rem;font-weight:600;white-space:nowrap;}
@media(max-width:600px){
  .nav-icon-label{display:none;}
}
.cart-count{
  position:absolute;
  top:-8px;right:-10px;
  background:var(--gold);
  color:var(--purple-dark);
  font-size:.65rem;
  font-weight:800;
  min-width:16px;
  height:16px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px;
}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--white);cursor:pointer;}

/* ===== HERO ===== */
.hero{
  /* 2026-08-07, 3ra vuelta de feedback ("no rediseñes el Hero desde cero
     -- vuelve a un grid de 2 columnas"): la foto full-bleed de la vuelta
     anterior competía demasiado con el texto. El fondo morado sigue
     siendo el mismo de siempre (ocupa TODO el ancho de la sección, eso
     no cambió) -- lo que cambió es que el CONTENIDO (.hero-grid, más
     abajo) vuelve a estar contenido dentro de un ancho máximo, no
     estirado a la pantalla completa.
     padding-top generoso (140px, no 90px): el header flota TRANSPARENTE
     encima del hero en esta página (ver "body.home > header" en HEADER
     más abajo) -- sin este espacio extra, el título quedaría tapado por
     el header al cargar. */
  background:radial-gradient(circle at 75% 30%, #6b34a0 0%, var(--purple) 55%, var(--purple-dark) 100%);
  color:var(--white);
  position:relative;
  overflow:hidden;
  padding:140px 24px 90px;
}
/* Sube el hero para que quede DETRÁS del header flotante (2026-08-07,
   ver "body.home > header" en HEADER) -- el valor se midió contra el
   alto real renderizado del header+topbar en vivo, no es un número al
   ojo. Solo en home: en el resto de las páginas el header sigue sólido
   y en flujo normal, sin nada debajo que necesite este ajuste. */
body.home .hero{margin-top:-92px;}
/* Mismo truco para Sedes (2026-08-10) -- .sedes-hero normalmente arranca
   con padding-top:70px (ver esa regla, sección SEDES más abajo); acá se
   compensa a 162px (92px del header+topbar que ahora queda encima + los
   70px originales) para que el H1 conserve el mismo aire visual que
   tenía antes de flotar el header sobre el degradado. */
body.page-template-page-sedes-php .sedes-hero{
  margin-top:-92px;
  padding-top:162px;
}
.hero::before{
  content:"";
  position:absolute;
  width:520px;height:520px;
  background:radial-gradient(circle, rgba(183,159,224,.35) 0%, transparent 70%);
  top:-120px; right:-100px;
  border-radius:50%;
  z-index:0;
}
/* Grid de 2 columnas, contenido -- no full-bleed (2026-08-07, brief:
   "Mantener un Grid de dos columnas... Nunca usar una imagen ocupando
   el 100% del Hero"). max-width:1400px (pedido explícito, más ancho que
   el .wrap de 1200px que usa el resto del sitio -- este Hero es el único
   lugar con ese tope distinto) + padding-inline:48px (pedido explícito,
   más generoso que el padding lateral de 24px del resto del sitio).
   gap:56px (pedido: "40-60px" entre texto e imagen). align-items:center
   centra ambas columnas verticalmente entre sí -- ninguna estira a la
   otra. min-height:680px (pedido explícito) le da al Hero un alto
   mínimo garantizado independiente de cuánto texto tenga hero-copy. */
.hero-grid{
  /* Sin foto (2026-08-07, pedido explícito: "quita la imagen del hero")
     -- pasa de grid 42fr/58fr a 1 sola columna. min-height baja de
     680px (pensado para darle presencia a la foto) a 420px, ya no hay
     nada que "llenar" a esa altura, solo el bloque de texto. */
  max-width:1450px;
  margin:0 auto;
  padding-inline:48px;
  min-height:420px;
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  position:relative;
  z-index:2;
}
/* 2026-08-14: columna extra para el gráfico decorativo del mascota
   (.hero-mascot) -- .has-mascot es un modificador aparte de .hero-grid
   base para no reactivar la foto lifestyle vieja (.hero-visual/
   .hero-photo, que sigue en 1 sola columna arriba) ni tocar ningún otro
   uso de .hero-grid. */
.hero-grid.has-mascot{
  /* 2026-08-14 (ajuste tras feedback "el gato es muy pequeño y está
     demasiado a la derecha"): antes era "1fr 340px" -- la columna de
     texto (1fr) crecía hasta llenar todo el espacio disponible dentro
     de los 1450px del grid, mucho más de lo que hero-copy realmente usa
     (max-width:560px), dejando un hueco vacío grande entre el texto y
     el gato, empujado así al borde derecho. Con minmax(0,560px) la
     columna de texto ya no crece de más -- coincide con el ancho real
     de hero-copy -- y el gato pasa a ocupar el resto del espacio (1fr),
     quedando más cerca del texto en vez de pegado al extremo derecho. */
  grid-template-columns:minmax(0,560px) 1fr;
  gap:40px;
}
.hero-mascot{
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-mascot img{
  width:100%;
  max-width:440px;
  height:auto;
  display:block;
}
.hero-copy{
  /* max-width (brief: "el título debe seguir siendo el elemento visual
     más importante" / "nunca permitir que la fotografía tenga más peso
     visual que el título") -- el texto no se estira a ocupar toda su
     columna del 42%, se queda en un ancho de lectura cómodo (560px,
     pedido explícito), pero el h1 (ver más abajo) mantiene su tamaño
     completo sin reducir. */
  max-width:560px;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(229,184,75,.5);
  color:var(--gold);
  font-weight:600;
  font-size:.8rem;
  padding:7px 16px;
  border-radius:50px;
  margin-bottom:22px;
}
.hero h1{
  font-size:3.1rem;
  line-height:1.15;
  margin-bottom:20px;
}
.hero h1 span{color:var(--gold);}
.hero p{
  font-size:1.1rem;
  color:#eee0ff;
  max-width:480px;
  margin-bottom:32px;
}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;}
.hero-trust-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:28px;
  margin-bottom:0;
  color:#d9c3f7;
  font-size:.85rem;
  font-weight:600;
}
.hero-trust-line .gatitos-icon{width:1.1em;height:1.1em;}
/* Foto lifestyle del hero -- dentro de la columna derecha del grid, NO
   full-bleed (2026-08-07, 4ta vuelta). Sigue sin ser una tarjeta --
   .hero-visual no tiene background, border, border-radius NI box-shadow
   propios (brief: "eliminar cualquier card/border/radius/shadow/
   background independiente").
   margin-right negativo (brief: "debe sobresalir ligeramente hacia el
   borde derecho... nunca quedar encerrada dentro de un cuadro") -- CSS
   Grid no recorta a sus hijos por defecto, así que un margen negativo
   deja que la foto se salga un poco del track de su columna (y por lo
   tanto del max-width:1450px de .hero-grid) sin salirse del viewport en
   anchos de escritorio normales; .hero (la sección completa) sigue con
   overflow:hidden como red de seguridad si el viewport fuera más angosto
   que 1450px + este margen. */
.hero-visual{
  position:relative;
  overflow:hidden; /* defensivo (zoom de hover), no decorativo */
  margin-right:-56px;
}
.hero-photo{
  /* object-fit:cover, con object-position ajustado para no recortar
     ningún producto (brief mismo: "reposicionar la imagen si es
     necesario" para que no se recorte gato/Bentonita/Maíz/Tofu/arenera)
     -- el archivo YA es un recorte panorámico pensado para esta
     proporción exacta (aspect-ratio:99/65, verificado con previews
     reales en vueltas anteriores), 45% es la posición que muestra los 5
     elementos completos. */
  width:100%;
  height:auto; /* explícito -- ver el comentario en front-page.php sobre el conflicto con atributos HTML width/height */
  aspect-ratio:99/65;
  object-fit:cover;
  object-position:45% center;
  display:block;
  transition:transform .3s ease;
}
/* Hover, único movimiento permitido en la foto (brief: scale(1.015),
   300ms) -- sin animación de entrada al cargar la página. */
.hero-visual:hover .hero-photo{transform:scale(1.015);}
/* Fusión con el fondo morado -- degradado CORTO (brief: "solo degradar
   aproximadamente el primer 18-22% de la fotografía... NO usar una capa
   morada encima de TODA la imagen"), a diferencia de la vuelta anterior
   que se desvanecía hasta el 100% del ancho. Valores rgb y stops tal
   cual el ejemplo del brief (muy cercano a var(--purple) #4B1E6B):
   prácticamente opaco hasta ~20%, transparente del todo a partir de 44%
   -- el resto de la foto (más de la mitad) queda con sus colores
   originales, sin ninguna capa encima. */
.hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(74,27,126,1) 0%,
    rgba(74,27,126,.94) 12%,
    rgba(74,27,126,.72) 20%,
    rgba(74,27,126,.38) 28%,
    rgba(74,27,126,.1) 36%,
    rgba(74,27,126,0) 44%
  );
  pointer-events:none;
  z-index:1;
}
/* Iluminación cálida (brief: "contraste, profundidad, sombras suaves,
   sensación premium" -- "no modificar los productos", por eso NO se usa
   un filter de saturación/contraste que alteraría los colores reales del
   empaque, solo overlays de luz que se SUMAN encima). Resplandor dorado
   suave sobre las 3 bolsas (no una sombra, luz) + una viñeta muy sutil en
   los bordes para dar profundidad, como una foto de campaña real y no
   una foto plana recortada. */
.hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 55% 50%, rgba(229,184,75,.2) 0%, transparent 55%),
    radial-gradient(ellipse at center, transparent 60%, rgba(20,8,35,.14) 100%);
  mix-blend-mode:soft-light;
  pointer-events:none;
  z-index:1;
}
/* Badge de comisión flotando sobre la foto -- glassmorphism (brief:
   backdrop blur, shadow suave, radius 22px). Reemplaza a los 2
   float-badge genéricos ("Premium"/"Club de Embajadores") de vueltas
   anteriores por UNO solo, con el dato que más vende (12.5%) -- coincide
   con la jerarquía pedida (título > botón > foto > comisión >
   estadísticas). "No tocar la fotografía": va superpuesto, sin afectar
   el object-position ni el recorte de la imagen debajo. */
.hero-badge-commission{
  position:absolute;
  top:24px;
  right:24px;
  z-index:2; /* encima de ::before/::after de .hero-visual */
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.35);
  border-radius:22px;
  padding:12px 20px;
  box-shadow:0 12px 32px rgba(20,8,35,.28);
  color:var(--white);
  text-align:right;
  line-height:1.3;
}
.hero-badge-commission strong{
  display:block;
  font-size:1rem;
  font-weight:800;
  color:var(--gold);
}
.hero-badge-commission span{
  display:block;
  font-size:.72rem;
  color:rgba(255,255,255,.85);
}

/* ===== TRUST STRIP ===== */
.trust{
  background:var(--white);
  padding:28px 24px;
  border-bottom:1px solid #f0eaf7;
}
.trust-grid{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:.9rem;
  color:var(--purple);
}
.trust-item span.ico{font-size:1.4rem;}

/* ===== SECTION HEADINGS ===== */
.section{padding:90px 24px;}
.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 56px;
}
.section-head .badge{margin-bottom:16px;}
.section-head h2{
  font-size:2.4rem;
  color:var(--purple);
  margin-bottom:14px;
}
.section-head p{color:#6a5c7d;font-size:1.05rem;}

/* Lista corta "por qué elegir GATITOS" dentro de la sección breve de
   Quiénes Somos en el Home -- reusa tarjeta blanca + radios/sombra ya
   establecidos (mismo lenguaje visual que .feature-card), sin crear un
   componente nuevo. */
.home-why-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  max-width:900px;
  margin:0 auto;
}
.home-why-item{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--white);
  border-radius:14px;
  padding:16px 20px;
  box-shadow:0 2px 10px rgba(75,30,107,.06);
  color:var(--ink);
  font-weight:600;
  font-size:.95rem;
}
.home-why-item .gatitos-icon{width:1.3em;height:1.3em;color:var(--purple);flex-shrink:0;}

/* ===== PRODUCTS ===== */
.products-bg{background:#faf7fd;}
.product-grid{
  /* flexbox, no grid (2026-08-06): con repeat(4,1fr) fijo, los 3 productos
     reales de hoy quedaban pegados a la izquierda con un 4to hueco vacío.
     Con CSS Grid + auto-fit, un ÚLTIMO item solo en su fila (p.ej. el 3ro
     de 3 en pantallas angostas de 2 columnas) queda igual pegado a la
     izquierda -- justify-content de un grid centra las COLUMNAS del
     layout, no un item huérfano dentro de su propia fila. flex-wrap +
     justify-content:center sí centra cada fila individualmente, huérfano
     incluido, sin importar cuántos productos reales haya ni el ancho de
     pantalla. */
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:28px;
}
/* Columnas deterministas por breakpoint (2026-08-06, brief de conversión):
   flex-basis calculado con la fórmula real (100% - gaps) / columnas, no un
   ancho fijo eyeballed -- así entran EXACTO 3/2/1 por fila en
   desktop/tablet/mobile sin importar el ancho preciso del viewport, no
   "lo que alcance a entrar". max-width evita que una sola tarjeta se vea
   gigante en pantallas ultra anchas (mantiene proporción premium).
   flex-grow:0 (el "1" de "flex:1 1") -- CRÍTICO: con grow:1, una tarjeta
   huérfana sola en su fila (p.ej. la 3ra en tablet, 2 por fila) se estira
   para llenar el espacio sobrante y queda más ancha/alta que sus 2
   hermanas -- rompe "misma altura para todas las tarjetas" (bug real
   visto en captura, viewport 768px). Con grow:0, cada tarjeta se queda
   exactamente en su flex-basis sin importar cuántas compartan la fila;
   justify-content:center en .product-grid la centra igual. */
.product-grid .product-card{
  flex:0 1 calc((100% - 56px) / 3); /* desktop: 3 por fila (2 gaps de 28px) */
  max-width:380px;
  min-width:240px;
}
@media(max-width:980px){
  .product-grid .product-card{ flex-basis:calc((100% - 28px) / 2); } /* tablet: 2 por fila */
}
@media(max-width:600px){
  .product-grid .product-card{ flex-basis:100%; max-width:380px; } /* mobile: 1 por fila */
}
.product-card{
  /* 20px, no 24px (2026-08-06, brief de diseño: "bordes redondeados de
     18-20px"). display:flex column para que .product-body reparta el
     espacio disponible parejo y las 3 tarjetas terminen exactamente a la
     misma altura sin trucos de min-height adicionales por fuera del h3. */
  background:var(--white);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(75,30,107,.07);
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex;
  flex-direction:column;
  position:relative;
}
.product-card:hover{
  /* 6-8px de elevación + sombra un poco más marcada (brief) -- sin mover
     la imagen por separado, el zoom sutil de la foto vive en
     .product-media-img (ver más abajo), disparado por el mismo :hover. */
  transform:translateY(-7px);
  box-shadow:0 20px 40px rgba(75,30,107,.16);
}
.product-media{
  /* aspect-ratio 7/9 (2026-08-06, rediseño de tarjetas -- ver el brief de
     diseño completo en el commit): las fotos ahora usadas (ids 815/816/817)
     son recortes PHOTO-ONLY -- el panel de texto/beneficios que traían los
     gráficos originales del dueño ya se quitó server-side (ver
     front-page.php), esta caja ya no necesita recortar nada más. object-fit
     pasa a contain (ver .product-media-img): la foto se muestra COMPLETA
     -- empaque, gato, arenera y contexto -- sin zoom ni recorte, tal como
     se pidió explícitamente.
     7/9 (≈0.778) es el promedio de la proporción real de los 3 recortes
     (0.777/0.793/0.764, todas muy parecidas entre sí) -- con una sola
     proporción compartida (necesaria para que las 3 tarjetas midan igual,
     independientemente del nombre del producto) el margen de contain es
     mínimo, unos pocos px por lado como mucho.
     Fondo blanco, no degradado lavanda (2026-08-06, feedback del dueño):
     con object-fit:contain, ese margen mínimo dejaba ver franjas moradas
     alrededor de la foto -- se notaban como un "recorte" raro en vez de
     leerse como fondo de tarjeta. Blanco (igual que .product-card) hace
     que cualquier margen del contain sea invisible, se funde con el
     resto de la tarjeta. */
  background:var(--white);
  aspect-ratio:7/9;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
/* Emoji de respaldo (2026-08-06): antes CADA producto usaba esto -- ahora
   solo se ve para un producto sin foto subida en WooCommerce todavía (ver
   front-page.php, $producto->get_image_id()). font-size vive acá, no en
   .product-media, para no afectar el tamaño de la <img> real de abajo. */
.product-media-emoji{font-size:4.5rem;}
.product-media-img{
  /* contain, no cover (2026-08-06, rediseño de tarjetas): la foto tiene
     que verse COMPLETA -- pedido explícito del dueño, "no hacer zoom ni
     recortar la imagen". Con .product-media ya proporcionada casi exacto
     a la foto (ver ese comentario), contain no deja banda visible en la
     práctica, pero sigue siendo la garantía correcta (nunca recorta,
     pase lo que pase con la proporción real de una foto futura).
     width/height:100% (no max-width/max-height): la CAJA del <img> tiene
     que llenar siempre la tarjeta -- si se deja en max-width/max-height,
     el navegador encoge la caja misma al tamaño natural del thumbnail en
     vez de la tarjeta completa (bug real visto en captura, 2026-08-06).
     transition+scale (brief): zoom de 2% en 250ms al pasar el mouse por
     LA TARJETA (no solo la imagen, ver .product-card:hover de abajo) --
     scale() no recorta ni deforma la foto (mismo aspect-ratio, solo la
     agranda), y .product-media ya tiene overflow:hidden para contener el
     desborde mínimo de ese 2%. */
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .25s ease;
}
.product-card:hover .product-media-img{transform:scale(1.02);}
.product-tag{
  position:absolute;
  top:16px;left:16px;
  background:var(--yellow);
  color:var(--purple-dark);
  font-weight:700;
  font-size:.72rem;
  padding:5px 12px;
  border-radius:50px;
}
/* Padding/márgenes reducidos en todo .product-body (2026-08-06, rediseño):
   22px -> 16px, y el margen del h3 (14px -> 6px) para hacer espacio a
   .product-features sin agrandar la tarjeta más de lo estrictamente
   necesario por el contenido nuevo. flex:1 + flex column (ver
   .product-card) empuja .price-row al fondo de forma pareja entre
   tarjetas, en vez de depender solo de alturas fijas. */
.product-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.product-body h3{
  font-size:1.05rem;
  color:var(--purple-dark);
  margin-bottom:6px;
  line-height:1.3;
  /* Máximo 2 líneas + ellipsis (brief) -- -webkit-line-clamp (soportado en
     todos los navegadores modernos, Safari incluido, aunque tenga el
     prefijo) trunca el TEXTO real si excede 2 líneas, en vez de solo
     reservar una altura mínima -- así un nombre de producto futuro más
     largo que 2 líneas no rompe la altura uniforme de la tarjeta. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
}
/* Beneficios del producto, en HTML real -- no parte de la foto (2026-08-06,
   rediseño de tarjetas): antes vivían como texto dibujado dentro del
   gráfico de marketing; ahora son íconos+texto reales para que sean
   "perfectamente legibles" a cualquier tamaño de tarjeta, como pidió el
   dueño. Grid 2 columnas x 2 filas fijo (máximo 4 características por
   producto, ver front-page.php) -- nunca más de 2 filas sin importar
   cuántas se agreguen, por diseño de la grilla misma. */
.product-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 10px;
  list-style:none;
  margin:0 0 12px;
  padding:0;
}
.product-features li{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--text-secondary);
  font-size:.72rem;
  line-height:1.2;
  min-width:0; /* permite que el <span> trunque en vez de desbordar la columna */
}
.product-features .gatitos-icon{
  /* 14px (brief: "iconos de 14px") -- antes 15px. */
  width:14px;
  height:14px;
  flex-shrink:0;
  color:var(--purple-light);
}
.product-features li span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto; /* junto con .product-body{flex:1}, ancla precio+botón al fondo parejo */
}
.price{
  /* Más peso y tamaño (brief: "debe ser el segundo elemento que más llama
     la atención después de la fotografía") -- 800->900, 1.2rem->1.35rem,
     y --purple-dark en vez de --purple para más contraste sobre blanco.
     Mismo color de marca, ninguno nuevo. */
  font-weight:900;
  font-size:1.35rem;
  color:var(--purple-dark);
  letter-spacing:-.01em;
}
.price del{
  font-weight:500;
  font-size:.8rem;
  color:#b3a4c4;
  margin-right:6px;
}
.price ins{text-decoration:none;}
.add-btn{
  background:var(--purple);
  color:var(--white);
  border:none;
  width:42px;height:42px;
  border-radius:50%;
  font-size:1.2rem;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
/* Hover: amarillo corporativo + escala ligera + sombra suave (brief) --
   nada exagerado, mismo timing que el resto de micro-interacciones de la
   tarjeta (.2s). */
.add-btn:hover{
  background:var(--gold);
  color:var(--purple-dark);
  transform:scale(1.08);
  box-shadow:0 6px 16px rgba(229,184,75,.45);
}
/* Foco visible por teclado (accesibilidad, brief) -- el navegador no
   dibuja un outline propio sobre un <a> con border-radius:50%, hay que
   darlo explícito. */
.add-btn:focus-visible{
  outline:2px solid var(--purple-dark);
  outline-offset:3px;
}

/* ===== FEATURES ===== */
.features{
  background:var(--purple);
  color:var(--white);
  padding:90px 24px;
  position:relative;
  overflow:hidden;
}
.features::after{
  content:"";
  position:absolute;
  width:400px;height:400px;
  background:radial-gradient(circle, rgba(229,184,75,.15), transparent 70%);
  bottom:-150px;left:-100px;
  border-radius:50%;
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  position:relative;
  z-index:2;
}
.feature-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:32px 24px;
  text-align:center;
}
.feature-card .ico{
  font-size:2.4rem;
  margin-bottom:16px;
}
.feature-card h3{font-size:1.05rem;margin-bottom:8px;color:var(--gold);}
.feature-card p{font-size:.85rem;color:#e3d3fa;}

/* ===== REFERRAL PROGRAM ===== */
.referral{
  background:var(--white);
  padding:100px 24px;
}
.referral-wrap{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:center;
}
.referral-visual{
  background:linear-gradient(160deg,var(--lavender), #cbb8ea);
  border-radius:28px;
  padding:40px;
  position:relative;
  overflow:hidden;
}
/* Huella grande como marca de agua -- toque "gatuno" en la caja de
   niveles, sutil (10% opacidad) para no competir con las tarjetas. */
.referral-visual::after{
  content:"";
  position:absolute;
  right:-30px; bottom:-30px;
  width:160px; height:160px;
  background:var(--purple-dark);
  opacity:.1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='15.5' r='4.4'/%3E%3Ccircle cx='5.8' cy='9.4' r='1.9'/%3E%3Ccircle cx='9.7' cy='5' r='1.9'/%3E%3Ccircle cx='14.3' cy='5' r='1.9'/%3E%3Ccircle cx='18.2' cy='9.4' r='1.9'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='15.5' r='4.4'/%3E%3Ccircle cx='5.8' cy='9.4' r='1.9'/%3E%3Ccircle cx='9.7' cy='5' r='1.9'/%3E%3Ccircle cx='14.3' cy='5' r='1.9'/%3E%3Ccircle cx='18.2' cy='9.4' r='1.9'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events:none;
}
.tier-card{
  background:var(--white);
  border-radius:18px;
  padding:20px 22px;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 10px 22px rgba(75,30,107,.15);
}
.tier-card:last-child{margin-bottom:0;}
.tier-left{display:flex;align-items:center;gap:14px;}
.tier-icon{
  width:44px;height:44px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  background:var(--lavender);
}
.tier-icon.gold{background:var(--gold);}
.tier-icon.purple{background:var(--purple);color:var(--white);}
.tier-name{font-weight:700;color:var(--purple-dark);font-size:.95rem;}
.tier-sub{font-size:.75rem;color:#8a7a9c;}
.tier-pct{font-weight:800;color:var(--purple);font-size:1.1rem;}

.referral-content h2{
  font-size:2.2rem;
  color:var(--purple);
  margin-bottom:18px;
}
.referral-content > p{
  color:#6a5c7d;
  margin-bottom:32px;
  font-size:1.02rem;
}
.ref-steps{display:flex;flex-direction:column;gap:20px;margin-bottom:32px;}
.ref-step{display:flex;gap:16px;align-items:flex-start;}
.ref-step .num{
  background:var(--gold);
  color:var(--white);
  font-weight:800;
  width:36px;height:36px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ref-step h4{color:var(--purple-dark);font-size:1rem;margin-bottom:4px;}
.ref-step p{color:#7c6b90;font-size:.88rem;}

/* ===== TESTIMONIALS (placeholder) ===== */
.testimonials{background:#faf7fd;padding:90px 24px;}
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.testi-card{
  background:var(--white);
  border-radius:20px;
  padding:30px;
  box-shadow:0 10px 26px rgba(75,30,107,.08);
}
.stars{color:var(--gold);font-size:1rem;margin-bottom:14px;}
.testi-card p{color:#5c4d70;font-size:.92rem;margin-bottom:20px;font-style:italic;}
.testi-user{display:flex;align-items:center;gap:12px;}
.avatar{
  width:42px;height:42px;
  border-radius:50%;
  background:var(--lavender);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
}
.testi-user strong{display:block;font-size:.88rem;color:var(--purple-dark);}
.testi-user span{font-size:.75rem;color:#a091b5;}

/* ===== CTA BAND ===== */
.cta-band{
  background:linear-gradient(120deg,var(--gold), #f0c766);
  padding:60px 24px;
}
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
}
.cta-inner h2{color:var(--purple-dark);font-size:1.7rem;}
.cta-inner p{color:#5c3d0f;font-size:.95rem;}

/* ===== FOOTER ===== */
footer{
  background:var(--purple-dark);
  color:#d9c3f7;
  padding:70px 24px 24px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-grid h4{color:var(--white);font-size:1rem;margin-bottom:18px;}
.footer-grid ul li{margin-bottom:10px;font-size:.88rem;}
.footer-grid ul li a:hover{color:var(--gold);}

/* Columnas del footer como acordeon en movil (details/summary nativo --
   sin JS para el toggle en si, accesible por teclado gratis). En
   desktop siguen expandidas via el atributo "open" del HTML; el JS de
   script.js les quita ese atributo en pantallas angostas al cargar. */
.footer-grid .footer-accordion summary{
  color:var(--white);
  font-size:1rem;
  font-weight:600;
  margin-bottom:18px;
  cursor:pointer;
  list-style:none;
}
.footer-grid .footer-accordion summary::-webkit-details-marker{display:none;}
.footer-grid .footer-accordion summary::after{
  content:"▾";
  float:right;
  transition:transform .2s ease;
}
.footer-grid .footer-accordion[open] summary::after{transform:rotate(180deg);}
@media(max-width:780px){
  .footer-grid .footer-accordion summary{
    padding:14px 0;
    margin-bottom:0;
    border-bottom:1px solid rgba(255,255,255,.1);
    min-height:20px;
  }
  .footer-grid .footer-accordion ul{padding:14px 0 4px;}
}
.footer-about p{font-size:.88rem;margin:16px 0 20px;color:#c4aee3;}
/* Redes sociales -- movidas acá desde la sección "Síguenos" de
   /contactanos/ (2026-08-10, pedido explícito) para que aparezcan en
   todo el sitio, no solo en esa página. "Síguenos" reusa el mismo h4 que
   los demás encabezados de columna del footer (.footer-grid h4, ver
   arriba). 2026-08-10, segunda vuelta: de círculos-ícono a píldoras con
   ícono+etiqueta visible (Instagram/TikTok/Facebook), pedido explícito
   con una captura de referencia -- blanco sobre el morado oscuro del
   footer para que resalten, dorado al pasar el mouse (mismo acento que
   el resto del sitio). */
.footer-about h4{margin-top:0;font-weight:600;}
/* 2026-08-10, tercera vuelta: de fila con wrap a columna -- "1 en 1",
   una píldora por línea, en vez de que se acomoden 2-3 por fila según
   el ancho disponible. */
.footer-social{display:flex;flex-direction:column;gap:10px;}
.footer-social a{
  display:inline-flex;align-items:center;gap:8px;
  width:fit-content;
  background:var(--white);
  color:var(--purple-dark);
  border-radius:50px;
  padding:8px 18px;
  font-weight:600;
  font-size:.85rem;
  transition:background .2s ease, color .2s ease;
}
.footer-social a:hover{background:var(--gold);color:var(--purple-dark);}
.footer-social .gatitos-icon{width:15px;height:15px;color:var(--purple);}
.footer-bottom{
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:.8rem;
  color:#a891c4;
}

/* ===== WooCommerce: Mi Cuenta (dashboard, pedidos, direcciones, Mi red) ===== */
.woocommerce-MyAccount-navigation ul{
  list-style:none;
  padding:0;
  margin:0 0 24px;
  border:1px solid #e4d9f5;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.woocommerce-MyAccount-navigation li{
  border-bottom:1px solid #f0eaf7;
}
.woocommerce-MyAccount-navigation li:last-child{border-bottom:none;}
.woocommerce-MyAccount-navigation li a{
  display:block;
  padding:12px 16px; /* 2026-08-10: 14px 20px -> 12px 16px, sidebar "ligeramente más compacto" (pedido explícito) */
  color:var(--purple);
  font-weight:600;
  font-size:.88rem;
  transition:background .15s;
}
.woocommerce-MyAccount-navigation li a:hover{background:#faf7fd;}
.woocommerce-MyAccount-navigation li.is-active a{
  background:var(--purple) !important;
  color:#fff !important;
}
.gatitos-menu-contador{
  background:var(--gold);
  color:var(--purple-dark);
  font-size:.7rem;
  font-weight:800;
  padding:2px 7px;
  border-radius:50px;
  margin-left:6px;
}
.woocommerce-MyAccount-content h1,
.site-main h1.entry-title,
.site-main .entry-header h1{
  color:var(--purple);
  font-size:2rem;
  margin-bottom:24px;
}
.woocommerce-MyAccount-content table.shop_table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid #e4d9f5;
  border-radius:12px;
  overflow:hidden;
}
.woocommerce-MyAccount-content table.shop_table th{
  background:#faf7fd;
  color:var(--purple);
  text-align:left;
  padding:12px 16px;
  font-size:.85rem;
}
.woocommerce-MyAccount-content table.shop_table td{
  padding:12px 16px;
  border-top:1px solid #f0eaf7;
  font-size:.9rem;
}
.woocommerce-MyAccount-content .woocommerce-form-row label{
  color:#6a5c7d;
  font-size:.85rem;
}
.woocommerce-notices-wrapper .woocommerce-message{
  background:#f3edfb;
  border-top-color:var(--purple);
  color:var(--purple-dark);
}
.woocommerce-notices-wrapper .woocommerce-error{
  border-top-color:#dc2626;
}

/* Contenido de cada pestaña (Detalles de la cuenta, Direcciones, Pedidos...)
   en su propia tarjeta -- mismo lenguaje que Mi Cuenta (login/registro):
   tarjeta blanca con borde lavanda, radio 20px, sombra suave, sobre el
   fondo lavanda que ya pone body.woocommerce-account main. Sin esto la
   pagina se veia como texto+inputs sueltos flotando en blanco. */
body.woocommerce-account .woocommerce-MyAccount-content{
  background:var(--white);
  border:1px solid #e4d9f5;
  border-radius:20px;
  padding:32px;
  box-shadow:0 6px 24px rgba(75,30,107,.08);
}
body.woocommerce-account .woocommerce-MyAccount-content input.input-text,
body.woocommerce-account .woocommerce-MyAccount-content select,
body.woocommerce-account .woocommerce-MyAccount-content textarea{
  width:100%;
  max-width:420px;
  border:1px solid #e4d9f5;
  border-radius:10px;
  padding:11px 14px;
  font-family:inherit;
  font-size:.92rem;
  color:var(--ink);
  background:#fff;
}
body.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus-visible,
body.woocommerce-account .woocommerce-MyAccount-content select:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
  border-color:var(--purple);
}
body.woocommerce-account .woocommerce-MyAccount-content p{
  margin-bottom:18px;
}
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
body.woocommerce-account .woocommerce-MyAccount-content a.button{
  display:inline-block;
  background:var(--purple);
  color:var(--white);
  border:none;
  border-radius:10px;
  padding:12px 28px;
  font-size:.92rem;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s;
}
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
body.woocommerce-account .woocommerce-MyAccount-content a.button:hover{
  background:var(--purple-dark);
}

/* --- Direcciones: cada tarjeta de dirección (envío/facturación) ---
   Decisión del dueño (2026-08-02): una debajo de otra siempre, no lado a
   lado -- una sola columna en vez del grid de 2 columnas que se probó
   antes. */
body.woocommerce-account .woocommerce-Addresses.col2-set{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
body.woocommerce-account .woocommerce-Addresses.col2-set .woocommerce-Address{
  width:100%;
  grid-column:1;
}
body.woocommerce-account .woocommerce-Address{
  border:1px solid #e4d9f5;
  border-radius:16px;
  padding:24px;
  background:#faf7fd;
}
body.woocommerce-account .woocommerce-Address-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3{
  color:var(--purple-dark);
  font-size:1.05rem;
}
body.woocommerce-account .woocommerce-Address-title a{
  color:var(--purple);
  font-size:.85rem;
  font-weight:600;
  white-space:nowrap;
}
body.woocommerce-account .woocommerce-Address address{
  font-style:normal;
  color:#6a5c7d;
  font-size:.9rem;
  line-height:1.6;
}

/* ===== WooCommerce (tienda/producto/carrito/checkout) =====
   Estas 4 páginas usaban casi por completo el markup/CSS por defecto de
   WooCommerce. Se extiende esta sección (sin tocar otras) para que compartan
   paleta, radios de borde (pill 50px en botones, 16-20px en tarjetas) y
   sombras con el resto del tema. Los grises de texto secundario (#6a5c7d)
   se eligieron porque pasan WCAG AA 4.5:1 sobre blanco/#faf7fd; el gris más
   claro que ya existía en otras partes del tema (#8a7a9c) NO pasa AA sobre
   blanco (~3.9:1) así que no se reutiliza acá para texto. Los focus-visible
   usan var(--purple) en vez de var(--gold) sobre fondos claros porque el
   dorado por sí solo no llega al 3:1 de contraste no-textual sobre blanco. */

/* --- Tienda: barra de resultados y orden --- */
.woocommerce-result-count,
.woocommerce-ordering{
  font-size:.88rem;
  color:#6a5c7d;
}
.woocommerce-ordering select{
  border:1px solid #e4d9f5;
  border-radius:8px;
  padding:8px 12px;
  color:var(--ink);
  background:#fff;
  font-size:.88rem;
}
.woocommerce-ordering select:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
}

/* --- Tienda: grid de productos ---
   WooCommerce le pone width:22%/float:left a cada li.product (su sistema
   clasico de columnas, vive en woocommerce.css con selectores tipo
   "ul.products[class*=columns-] li.product" -- misma especificidad que la
   nuestra, así que sin este reset ganaba por ir DESPUES en el cascade en
   algunos casos). float ya no importa dentro de un grid, pero width:22%
   SI seguia aplicando -- cada tarjeta quedaba angosta adentro de su celda
   de 1fr, con un hueco enorme al lado. Reset explicito abajo. */
.woocommerce ul.products{
  display:grid;
  /* auto-fit en vez de un numero fijo de columnas + breakpoints: se
     ajusta solo al ancho real disponible (nunca deja una tarjeta sola
     en su fila con hueco de sobra al lado, que era el bug reportado --
     con repeat(3,1fr) + un breakpoint fijo a 980px, un contenedor de
     ~850px ya caia a 2 columnas aunque entraban 3 comodas). */
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:28px;
  list-style:none;
}
/* Causa real del bug (encontrada en vivo): WooCommerce trae su propio
   clearfix clasico ".woocommerce ul.products::before{content:' ';
   display:table;}" para el layout viejo de float -- pero un
   pseudo-elemento con contenido real en un contenedor grid SE CUENTA
   COMO UN ITEM DE GRID MAS (spec de CSS Grid), ocupando el primer
   lugar de forma invisible y corriendo los 3 productos reales una
   celda, dejando el ultimo solo en una fila nueva. Con grid ya no
   hace falta ningun clearfix (no hay floats que limpiar). */
.woocommerce ul.products::before{content:none;display:none;}
.woocommerce ul.products li.product{
  width:auto !important;
  float:none !important;
  margin:0 !important;
  background:var(--white);
  border-radius:20px;
  padding:0 0 22px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(75,30,107,.08);
  transition:transform .3s ease, box-shadow .3s ease;
  text-align:center;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(75,30,107,.16);
}
.woocommerce ul.products li.product a:not(.button){color:inherit;}
.woocommerce ul.products li.product a img{
  border-radius:20px 20px 0 0;
  margin-bottom:16px;
  background:linear-gradient(160deg,var(--lavender) 0%,#dccdf2 100%);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1.02rem;
  font-weight:700;
  color:var(--purple-dark);
  padding:0 18px;
  margin-bottom:8px;
}
.woocommerce ul.products li.product .price{
  color:var(--purple);
  font-weight:800;
  font-size:1.1rem;
  display:block;
  margin-bottom:14px;
}
.woocommerce ul.products li.product .price del{
  color:#6a5c7d;
  font-weight:500;
  font-size:.85rem;
  opacity:1;
}
.woocommerce ul.products li.product .price ins{
  text-decoration:none;
  color:var(--purple);
}
.woocommerce ul.products li.product .star-rating{
  margin:0 auto 10px;
  color:var(--gold);
}
.woocommerce span.onsale{
  background:var(--yellow);
  color:var(--purple-dark);
  font-weight:700;
  font-size:.72rem;
  padding:5px 12px;
  border-radius:50px;
  top:16px;
  left:16px;
  right:auto;
  min-height:0;
  min-width:0;
  line-height:1.6;
}

/* --- Botones (añadir al carrito, ver producto, checkout, etc) ---
   Los selectores .alt se repiten a propósito: WooCommerce trae su propio
   ".button.alt" (usado por single_add_to_cart_button, checkout, etc.) con
   mayor especificidad que ".button" solo, así que sin esto el morado propio
   perdía contra el violeta por defecto de WooCommerce (#7f54b3). */
.woocommerce a.button, .woocommerce button.button,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce #respond input#submit, .woocommerce #respond input#submit.alt,
.woocommerce input.button, .woocommerce input.button.alt,
.woocommerce #place_order{
  background:var(--purple);
  color:var(--white);
  border-radius:50px;
  padding:12px 28px;
  border:none;
  font-weight:600;
  font-size:.92rem;
  cursor:pointer;
  transition:all .25s ease;
  box-shadow:0 8px 20px rgba(75,30,107,.2);
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover, .woocommerce #respond input#submit.alt:hover,
.woocommerce input.button:hover, .woocommerce input.button.alt:hover,
.woocommerce #place_order:hover{
  background:var(--gold);
  color:var(--purple-dark);
  /* !important: .add_to_cart_button (uno de los botones que matchea
     este grupo) tambien anima "transform" (gatitos-wa-pulse, agregado
     2026-08-05) -- sin !important esa animacion le gana al transform
     del hover y el "levantarse" queda invisible. */
  transform:translateY(-2px) !important;
  box-shadow:0 10px 24px rgba(229,184,75,.4) !important;
}
.woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible,
.woocommerce a.button.alt:focus-visible, .woocommerce button.button.alt:focus-visible,
.woocommerce #respond input#submit:focus-visible, .woocommerce #respond input#submit.alt:focus-visible,
.woocommerce input.button:focus-visible, .woocommerce input.button.alt:focus-visible,
.woocommerce #place_order:focus-visible{
  outline:2px solid var(--purple-dark);
  outline-offset:3px;
}
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover{
  background:var(--purple);
  color:var(--white);
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.woocommerce a.added_to_cart{
  color:var(--purple);
  font-weight:600;
  font-size:.85rem;
  margin-top:8px;
  display:inline-block;
}
.woocommerce a.added_to_cart:hover{color:var(--purple-dark);text-decoration:underline;}

.woocommerce span.price, .woocommerce ins{color:var(--purple);font-weight:700;text-decoration:none;}
.woocommerce del{color:#6a5c7d;}

/* --- Página de producto individual --- */
.woocommerce div.product{padding:20px 0 60px;}
.woocommerce div.product .product_title{
  color:var(--purple);
  font-size:2rem;
  margin-bottom:12px;
}
.woocommerce div.product p.price, .woocommerce div.product span.price{
  font-size:1.6rem;
  color:var(--purple);
  font-weight:800;
  margin-bottom:18px;
  display:block;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:#5c4d70;
  font-size:.98rem;
  margin-bottom:24px;
}
.woocommerce div.images img{border-radius:24px;}
.woocommerce div.product form.cart{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.woocommerce .quantity .qty{
  width:70px;
  padding:12px;
  border:1px solid #e4d9f5;
  border-radius:12px;
  text-align:center;
  font-size:1rem;
  color:var(--ink);
}
.woocommerce .quantity .qty:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
  border-color:var(--purple);
}
.woocommerce div.product .woocommerce-tabs{
  margin-top:40px;
  border-top:1px solid #e4d9f5;
  padding-top:24px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;
  gap:8px;
  list-style:none;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:#faf7fd;
  border-radius:50px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;
  padding:10px 22px;
  color:var(--purple);
  font-weight:600;
  font-size:.9rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
  border-radius:50px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--purple);}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--white);}
.woocommerce div.product .woocommerce-tabs .panel{
  color:#5c4d70;
  font-size:.95rem;
  line-height:1.7;
}
.woocommerce .related.products{margin-top:60px;}
.woocommerce .related.products > h2{
  color:var(--purple);
  font-size:1.6rem;
  margin-bottom:28px;
}

/* --- Carrito --- */
.woocommerce table.shop_table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid #e4d9f5;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:24px;
}
.woocommerce table.shop_table th{
  background:#faf7fd;
  color:var(--purple);
  text-align:left;
  padding:14px 16px;
  font-size:.85rem;
  font-weight:700;
}
.woocommerce table.shop_table td{
  padding:16px;
  border-top:1px solid #f0eaf7;
  font-size:.92rem;
  color:var(--ink);
}
.woocommerce table.shop_table td.product-name a{
  color:var(--purple-dark);
  font-weight:600;
}
.woocommerce table.shop_table td.product-name a:hover{color:var(--purple);}
.woocommerce table.shop_table td.product-remove a.remove{
  background:#f4e6e6;
  color:#dc2626;
  border-radius:50%;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  line-height:1;
  transition:.2s;
}
.woocommerce table.shop_table td.product-remove a.remove:hover{background:#dc2626;color:#fff;}
.woocommerce table.shop_table td.product-remove a.remove:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
}
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal{
  color:var(--purple);
  font-weight:700;
}
.woocommerce-cart-form .coupon{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.woocommerce-cart-form .coupon input#coupon_code{
  border:1px solid #e4d9f5;
  border-radius:50px;
  padding:12px 20px;
  font-size:.9rem;
}
.woocommerce-cart-form .coupon input#coupon_code:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
  border-color:var(--purple);
}
.cart-collaterals .cart_totals{
  background:#faf7fd;
  border:1px solid #e4d9f5;
  border-radius:20px;
  padding:24px;
}
.cart-collaterals .cart_totals h2{
  color:var(--purple);
  font-size:1.3rem;
  margin-bottom:16px;
}
.cart-collaterals .cart_totals table th{
  color:#6a5c7d;
  font-weight:600;
  padding:10px 0;
}
.cart-collaterals .cart_totals table td{
  padding:10px 0;
  text-align:right;
  color:var(--ink);
}
.cart-collaterals .cart_totals .order-total td,
.cart-collaterals .cart_totals .order-total th{
  color:var(--purple);
  font-size:1.15rem;
  font-weight:800;
  border-top:1px solid #e4d9f5;
  padding-top:14px;
}
.wc-proceed-to-checkout a.checkout-button{
  width:100%;
  text-align:center;
  display:block;
  padding:16px;
  font-size:1rem;
}

/* --- Carrito y Checkout: WooCommerce Blocks -----------------------------
   Verificado en el navegador: /cart/ y /checkout/ en este sitio NO usan el
   shortcode clásico de arriba (no hay table.shop_table ni form.checkout en
   el DOM) -- WooCommerce 10.9 las sirve como bloques (wc-block-cart /
   wc-block-checkout). Las reglas de abajo son las que realmente pintan esas
   2 páginas; se dejan las clásicas igual por si algún día se cambia de
   vuelta al shortcode (p.ej. tabla de pedidos en Mi Cuenta ya la usa). */
/* --- Rediseño premium del Carrito (2026-08-05, pedido del dueño) --------
   No se puede reescribir el HTML del bloque (es React interactivo -- ver
   docblock arriba), asi que el "layout de 2 columnas" que se pidio ya
   viene gratis de WooCommerce (.wc-block-components-sidebar-layout es
   flex-row en desktop, flex-column en mobile via el media query de mas
   abajo) -- lo que se rediseña acá es la piel visual completa sobre esa
   estructura real, con las clases confirmadas en el navegador (algunas,
   como .wc-block-components-totals-fees__descuento-embajador, las genera
   WooCommerce solo a partir del NOMBRE del fee -- ver
   Gatitos_Wallet_Spending::apply_wallet_discount() /
   Gatitos_Self_Purchase_Discount, asi que si el nombre del fee cambia
   algun dia, este selector deja de coincidir). */

.wc-block-cart .wc-block-components-sidebar-layout{gap:32px;align-items:flex-start;}

/* Tarjeta de cada producto */
.wc-block-cart-items__row{
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:26px;
  margin-bottom:16px;
  box-shadow:0 2px 10px rgba(75,30,107,.05);
  transition:box-shadow .3s ease, transform .3s ease;
}
.wc-block-cart-item__product{padding-left:20px !important;}
.wc-block-components-quantity-selector{margin-top:14px;}
.wc-block-cart-items__row:hover{
  box-shadow:0 8px 24px rgba(75,30,107,.1);
  transform:translateY(-2px);
}
/* El contenedor real es un <td> (layout de tabla nativo del bloque) --
   sin fijar SU ancho, el algoritmo de layout de tabla lo achica para
   hacerle lugar a las demas columnas, sin importar el width del <img> de
   adentro (encontrado probando en vivo: img quedaba en 72px de ancho
   pese al width:120px !important, porque el <td> padre medía 88px). */
.wc-block-cart-item__image{
  width:120px !important;
  min-width:120px !important;
  padding:0 !important;
}
.wc-block-cart-item__image img{
  border-radius:12px !important;
  width:120px !important;
  height:120px !important;
  aspect-ratio:1/1 !important;
  object-fit:cover;
}
.wc-block-cart-item__wrap a{
  color:var(--ink);
  font-weight:700;
  font-size:1.25rem;
  transition:color .3s ease;
}
.wc-block-cart-item__wrap a:hover{color:var(--purple);}
.wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-components-product-price .price{
  color:var(--purple);
  font-weight:800;
  font-size:1.15rem;
}

/* Selector de cantidad moderno */
.wc-block-components-quantity-selector{
  border:1.5px solid var(--purple-light);
  border-radius:50px;
  overflow:hidden;
  transition:box-shadow .3s ease;
}
.wc-block-components-quantity-selector:hover{box-shadow:0 2px 10px rgba(75,30,107,.12);}
.wc-block-components-quantity-selector__button{
  color:var(--purple);
  transition:all .25s ease;
}
.wc-block-components-quantity-selector__button:hover{
  background:var(--purple);
  color:var(--white);
}
.wc-block-components-quantity-selector__button:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:-2px;
}
.wc-block-cart-item__remove-link{
  color:#dc2626 !important;
  transition:color .3s ease;
}
.wc-block-cart-item__remove-link:hover{color:#a91b1b !important;}
.wc-block-cart-item__remove-link:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
}

/* Tarjeta flotante del resumen -- sticky para que acompañe el scroll */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar{
  position:sticky;
  top:24px;
}
.wc-block-components-totals-wrapper,
.wc-block-components-panel{
  border:1px solid var(--border-soft);
  border-radius:20px;
  background:var(--white);
}
.wc-block-cart__sidebar > *:not(.wc-block-components-notices__snackbar):not(.wc-block-components-notices):not(.wc-block-cart__payment-options),
.wc-block-checkout__sidebar > *:not(.wc-block-components-notices__snackbar):not(.wc-block-components-notices):not(.wc-block-cart__payment-options){
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:20px;
  box-shadow:0 8px 30px rgba(75,30,107,.08);
  padding:24px;
}
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper{
  border:none;
  box-shadow:none;
  padding:0;
}

/* --- Unificar "Totales del carrito" + boton en UNA sola tarjeta ---------
   (2026-08-05, pedido del dueño). En el DOM real son 2 bloques hermanos
   distintos (wp-block-woocommerce-cart-order-summary-block y
   wp-block-woocommerce-proceed-to-checkout-block dentro de
   .wc-block-cart__submit) -- no se pueden fusionar en un solo nodo sin
   tocar el React del bloque, asi que se fusionan VISUALMENTE: el
   contenedor .wc-block-cart__sidebar pasa a ser la tarjeta real (fondo,
   borde, sombra, radio, padding), y sus hijos quedan "planos" por dentro,
   separados solo por una linea divisoria sutil. Esto SOLO aplica al
   Carrito -- el Checkout no comparte este problema (su boton vive en la
   columna del formulario, no en el sidebar) y sigue con la regla
   original de arriba. */
.wc-block-cart__sidebar{
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:20px;
  box-shadow:0 8px 30px rgba(75,30,107,.08);
  padding:24px;
}
.wc-block-cart__sidebar > *:not(.wc-block-components-notices__snackbar):not(.wc-block-components-notices):not(.wc-block-cart__payment-options){
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  padding:0;
}
.wc-block-cart__sidebar .wc-block-cart__submit{
  margin-top:20px !important;
  padding-top:20px !important;
  border-top:1px solid var(--border-soft) !important;
}
.wc-block-cart__totals-title, .wc-block-components-title{
  color:var(--purple-dark);
  font-size:1.25rem;
  font-weight:800;
}
.wc-block-components-totals-item__label{font-size:1rem;color:var(--ink);}
.wc-block-components-totals-item__value{color:var(--ink);font-weight:700;}

/* Fila del Total: el elemento mas grande de todo el resumen */
.wc-block-components-totals-footer-item{
  border-top:1.5px solid var(--border-soft);
  margin-top:12px;
  padding-top:16px;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  color:var(--purple);
  font-size:1.6rem;
  font-weight:800;
}
.wc-block-components-order-summary-item{border-bottom:1px solid var(--border-soft);}

/* Descuentos/fees (embajador, monedero): resaltados en verde con check --
   antes casi no se notaban. Selector generado por WooCommerce a partir
   del texto del fee, ver nota arriba de este bloque. */
.wc-block-components-totals-fees{
  background:var(--green-tint);
  border-radius:10px;
  padding:8px 12px !important;
  margin:4px 0;
}
.wc-block-components-totals-fees .wc-block-components-totals-item__label,
.wc-block-components-totals-fees .wc-block-components-totals-item__value{
  color:var(--green) !important;
  font-weight:700;
}
.wc-block-components-totals-fees .wc-block-components-totals-item__label::before{
  content:"✓ ";
  font-weight:800;
}

/* Botones de bloques (Finalizar compra, Pagar pedido, +/- de cantidad
   quedan afuera porque no llevan la clase .wc-block-components-button) */
.wc-block-components-button.wp-element-button{
  background:var(--purple) !important;
  color:var(--white) !important;
  border-radius:16px !important;
  font-weight:700 !important;
  font-size:1.05rem !important;
  transition:all .3s ease !important;
  box-shadow:0 8px 20px rgba(75,30,107,.2);
}
.wc-block-components-button.wp-element-button:hover{
  /* Amarillo corporativo (2026-08-06, feedback del dueño: "no cambia a
     amarillo") -- antes cambiaba a var(--purple-dark), inconsistente con
     el resto de los CTA del sitio (Añadir al carrito de la tienda ya usa
     var(--gold) en hover). Mismo patrón: fondo dorado + texto
     purple-dark para contraste, en vez de blanco sobre dorado. */
  background:var(--gold) !important;
  color:var(--purple-dark) !important;
  /* !important en transform/box-shadow: el shimmer/pulso nuevo
     (2026-08-05, animation:gatitos-wa-pulse) tambien anima "transform"
     en este mismo boton -- una CSS Animation le gana en prioridad a un
     :hover normal para esa propiedad, asi que sin !important el
     "levantarse" del hover quedaba invisible (bug real reportado por
     el dueño: "no cambia cuando paso el mouse" en Finalizar compra).
     animation-play-state:paused (ver mas abajo) congela el pulso en
     hover, pero el valor congelado seguia ganando sin este !important. */
  transform:translateY(-2px) !important;
  box-shadow:0 12px 28px rgba(229,184,75,.4) !important; /* sombra dorada, no morada -- a tono con el nuevo fondo */
}
.wc-block-components-button.wp-element-button:focus-visible{
  outline:2px solid var(--purple-dark);
  outline-offset:3px;
}
.wc-block-cart__submit-button.wp-element-button{
  width:100%;
  height:60px;
  font-size:1.1rem !important;
  margin-top:16px;
}

/* Tarjeta "Saldo de Embajador" en el Carrito (Gatitos_Wallet_Spending::
   append_cart_wallet_widget()) -- ya no un formulario suelto, mismo
   lenguaje de tarjeta premium que el resto del carrito. */
.gatitos-cart-wallet-widget{
  margin-top:32px;
  padding:24px;
  background:var(--purple-tint);
  border:1px solid #e4d9f5;
  border-radius:20px;
  box-shadow:0 8px 24px rgba(75,30,107,.06);
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.gatitos-cw-icon{
  font-size:2rem;
  line-height:1;
  background:var(--white);
  border-radius:14px;
  padding:12px;
  box-shadow:0 4px 10px rgba(75,30,107,.1);
}
.gatitos-cw-body{flex:1;min-width:0;}
.gatitos-cw-body h3{
  margin:0 0 12px;
  color:var(--purple-dark);
  font-size:1.15rem;
  font-weight:800;
}
.gatitos-cw-disponible{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0 0 4px;
}
.gatitos-cw-disponible-label{color:#6b5c7d;font-size:.9rem;}
.gatitos-cw-disponible-monto{color:var(--purple);font-size:1.4rem;font-weight:800;}
.gatitos-cw-minimo{margin:0 0 14px;color:#6b5c7d;font-size:.85rem;}
.gatitos-cw-aplicado{
  color:var(--green);
  font-weight:700;
  background:var(--green-tint);
  border-radius:10px;
  padding:10px 14px;
  margin:0 0 14px;
}
.gatitos-cw-form label{display:block;margin-bottom:8px;font-weight:600;color:var(--ink);}
.gatitos-cw-input-row{display:flex;gap:10px;flex-wrap:wrap;}
.gatitos-cw-input-row input[type=number]{
  flex:1;
  min-width:160px;
  padding:12px 14px;
  border:1.5px solid #e4d9f5;
  border-radius:12px;
  font-size:1rem;
  background:var(--white);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.gatitos-cw-input-row input[type=number]:focus{
  outline:none;
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(75,30,107,.1);
}
.gatitos-cw-btn{
  background:var(--purple);
  color:var(--white);
  border:none;
  border-radius:12px;
  padding:12px 22px;
  font-weight:700;
  cursor:pointer;
  transition:all .3s ease;
  white-space:nowrap;
}
.gatitos-cw-btn:hover{background:var(--purple-dark);transform:translateY(-2px);}
.gatitos-cw-btn-outline{
  background:var(--white);
  color:var(--purple);
  border:1.5px solid var(--purple);
}
.gatitos-cw-btn-outline:hover{background:var(--purple);color:var(--white);}

/* Badges de confianza debajo del monedero -- redundante desde 2026-08-05:
   page.php ahora agrega ".gatitos-checkout-trust" para TODOS los
   visitantes del Carrito (antes esta era la UNICA fila de confianza, y
   solo la veian embajadores logueados con saldo; los invitados nunca la
   veian). Se oculta para no duplicarla en la sesion de un embajador. */
.gatitos-cart-trust-badges{display:none;}

@media(max-width:780px){
  .gatitos-cart-wallet-widget{flex-direction:column;padding:18px;}
  .gatitos-cart-trust-badges{gap:12px;padding:12px 4px;}
}

/* Formulario de checkout (contacto, dirección, envío) */
.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.wc-block-components-select select{
  border:1px solid #e4d9f5 !important;
  border-radius:10px !important;
  color:var(--ink);
}
.wc-block-components-text-input input:focus-visible,
.wc-block-components-textarea textarea:focus-visible,
.wc-block-components-address-form select:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
}
.wc-block-components-text-input label,
.wc-block-components-address-form label{color:#4a3d5c;}
.wc-block-components-radio-control__option{
  border:1px solid #e4d9f5;
  border-radius:12px;
}
.wc-block-components-radio-control__option:focus-visible,
.wc-block-components-radio-control__input:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
}
.wc-block-checkout__main, .wc-block-checkout__sidebar{margin-top:8px;}

@media(max-width:780px){
  .wc-block-cart .wc-block-components-sidebar-layout{flex-direction:column;gap:20px;}
  /* Sticky solo tiene sentido con 2 columnas -- apilado en mobile, el
     resumen debe quedar despues de los productos, no flotando. */
  .wc-block-cart__sidebar, .wc-block-checkout__sidebar{position:static;}
  .wc-block-cart-items__row{padding:18px;}
  .wc-block-cart-item__product{padding-left:14px !important;}
  .wc-block-cart-item__image, .wc-block-cart-item__image img{
    width:90px !important;
    height:90px !important;
  }
  .wc-block-cart__sidebar > *:not(.wc-block-components-notices__snackbar):not(.wc-block-components-notices):not(.wc-block-cart__payment-options), .wc-block-checkout__sidebar > *:not(.wc-block-components-notices__snackbar):not(.wc-block-components-notices):not(.wc-block-cart__payment-options){padding:18px;}
}

/* --- Checkout Blocks: pulido visual (2026-08-03) ------------------------
   El checkout se veía "rústico" -- secciones sin agrupar visualmente,
   inputs planos, radio de método de pago con borde negro duro. Cada paso
   (contacto/envío/pago/nota) se convierte en una tarjeta propia, mismo
   lenguaje visual que el resto del sitio (radius 16-20px, sombra suave,
   borde lila claro -- ver .gatitos-pasos-pago / tarjetas de Direcciones). */
.wc-block-components-form .wc-block-components-checkout-step{
  background:var(--white);
  border:1px solid #ece3f7;
  border-radius:18px;
  padding:24px 28px;
  margin-bottom:20px;
  box-shadow:0 4px 16px rgba(75,30,107,.06);
  transition:box-shadow .25s ease, transform .25s ease;
}
.wc-block-components-form .wc-block-components-checkout-step:hover{
  box-shadow:0 10px 28px rgba(75,30,107,.1);
  transform:translateY(-3px);
}
.wc-block-components-checkout-step__heading-container{
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid #f0eaf7;
}
.wc-block-components-checkout-step__title{
  color:var(--text-primary) !important;
  font-size:1.375rem !important;
  font-weight:700 !important;
}
.wc-block-components-checkout-step__description{color:var(--text-secondary);}

/* Inputs: sombra sutil al enfocar en vez de solo outline seco. NO tocar
   padding/font-size/line-height del input ni del label -- WooCommerce
   Blocks usa un "floating label" cuya posición (label.is-active con
   top:6px + transform:scale(.82)) está calculada contra la altura fija de
   50px y el padding:16px 12px del input por defecto. Cambiar cualquiera de
   esos dos valores desalinea el label y lo deja superpuesto sobre el texto
   escrito -- bug real visto en la propia verificación (screenshot del
   usuario, 2026-08-03), corregido quitando el override de padding/font. */
.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.wc-block-components-select select{
  background:#fdfcfe !important;
  border-radius:12px !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-address-form select:focus{
  border-color:var(--purple) !important;
  box-shadow:0 0 0 3px rgba(75,30,107,.1);
}

/* Método de pago: reemplaza el recuadro negro grueso por el mismo
   lenguaje lila con estado seleccionado destacado. El padding-left:48px
   por defecto le hace espacio al círculo del radio (posicionado absoluto)
   -- pisarlo con un valor uniforme deja el texto tapando el círculo (bug
   real visto en la propia verificación), por eso se preserva ese valor. */
.wc-block-components-radio-control__option{
  border:1.5px solid #e4d9f5 !important;
  border-radius:14px !important;
  padding:16px 18px 16px 48px !important;
  margin-bottom:10px;
  transition:border-color .2s ease, background .2s ease;
}
.wc-block-components-radio-control__option:last-child{margin-bottom:0;}
.wc-block-components-radio-control__option:hover{
  border-color:var(--purple) !important;
}
.wc-block-components-radio-control__option[aria-checked="true"],
.wc-block-components-radio-control__option-checked{
  border-color:var(--purple) !important;
  background:var(--purple-tint);
  box-shadow:0 4px 12px rgba(75,30,107,.08);
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.wc-block-components-radio-control__input{accent-color:var(--purple);}
.wc-block-components-radio-control-accordion-option{
  border:1.5px solid #e4d9f5 !important;
  border-radius:14px !important;
}

/* Tarjeta de resumen del pedido: mismo trato que los pasos de la izquierda */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-order-summary{
  border-radius:18px !important;
  box-shadow:0 4px 16px rgba(75,30,107,.06);
}
.wc-block-components-checkout-order-summary__title-text{
  color:var(--text-primary) !important;
  font-weight:700 !important;
}

/* --- Refinamiento premium del resumen (2026-08-05, segunda pasada) ------
   El componente mas importante de toda la pagina: radius/padding/sombra
   mas generosos + fade-in al montar. Reusa las custom properties ya
   definidas (--purple*, --border-soft) en vez de hex sueltos. */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block{
  border-radius:24px !important;
  padding:30px !important;
  box-shadow:0 12px 40px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04) !important;
  transition:box-shadow .25s ease, transform .25s ease;
  animation:gatitos-checkout-fade-in .4s ease both;
}
@keyframes gatitos-checkout-fade-in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
@media(prefers-reduced-motion:reduce){
  .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block{animation:none;}
}

/* Producto dentro del resumen: mas legible, menos texto de relleno */
.wc-block-components-order-summary-item__image{width:64px;min-width:64px;}
.wc-block-components-order-summary-item__image img{
  width:64px !important;
  height:64px !important;
  max-width:64px !important;
  border-radius:12px;
  object-fit:cover;
}
.wc-block-components-order-summary-item{
  border-bottom:1px solid var(--border-soft);
  padding-bottom:16px;
  margin-bottom:16px;
}
.wc-block-components-order-summary-item:last-child{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:0;
}
.wc-block-components-product-name{
  font-size:1.05rem !important;
  font-weight:700 !important;
  color:var(--text-primary);
}
.wc-block-components-order-summary-item__individual-price,
.wc-block-cart-item__total-price-and-sale-badge-wrapper{
  font-size:1.35rem !important;
  color:var(--purple) !important;
  font-weight:800 !important;
}
/* La descripcion larga del producto ("Cama tipo donut, suave y...") no
   aporta nada en un resumen de compra que el cliente ya arma en el
   Carrito -- se quita para dejar solo nombre + cantidad + precio. */
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description{display:none;}

/* Total: elemento dominante de la tarjeta, con divisoria y tipografia
   mas marcada. El texto real ("Total estimado") lo controla WooCommerce
   -- text-transform es puramente visual, no cambia el string real. */
.wc-block-components-totals-footer-item{border-top:2px solid var(--border-soft) !important;}
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  letter-spacing:.02em;
  text-transform:uppercase;
}
/* "Impuestos incluidos": nota puramente decorativa (::after, no es texto
   real ni afecta al calculo de impuestos de WooCommerce), mismo recurso
   ya usado para el candado del boton y el check de metodo seleccionado. */
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item{
  padding-bottom:8px;
  border-bottom:2px solid var(--border-soft) !important;
  flex-wrap:wrap;
}
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item::after{
  content:"Impuestos incluidos";
  flex-basis:100%;
  text-transform:none;
  letter-spacing:normal;
  font-size:.78rem;
  font-weight:500;
  color:var(--text-muted);
}

@media(max-width:780px){
  .wc-block-components-form .wc-block-components-checkout-step{padding:18px 16px;}
}

/* --- Rediseño premium del Checkout (2026-08-05, pedido del dueño) -------
   Mismo enfoque que el rediseño del Carrito (ver docblock arriba, linea
   ~1128): no se puede reescribir el HTML del bloque de React, asi que se
   rediseña la piel visual sobre la estructura real ya confirmada en el
   navegador. El color primario se mantiene como el morado real de la
   marca (var(--purple) = #4B1E6B) en vez del tono que traia el prompt de
   diseño (#5B2487) -- mismo criterio ya aplicado en el Carrito. */

.gatitos-checkout-header{margin-bottom:8px;}
.gatitos-checkout-header h1{
  color:var(--purple-dark);
  font-size:2.5rem;
  font-weight:800;
  margin-bottom:6px;
}
.gatitos-checkout-header p{color:var(--text-secondary);font-size:1rem;margin-bottom:24px;}

/* Barra de progreso: decorativa a proposito. Este checkout no es un
   wizard con pasos navegables (todos los campos estan a la vista en una
   sola pantalla), asi que no hay estado real que reflejar -- "Datos"
   siempre queda marcado como el paso actual. */
.gatitos-checkout-progress{
  display:flex;
  align-items:center;
  list-style:none;
  margin:0 0 32px;
  padding:0;
  font-size:.85rem;
  font-weight:600;
  color:var(--text-muted);
}
.gatitos-checkout-progress li{display:flex;align-items:center;gap:8px;}
.gatitos-checkout-progress li:not(:last-child)::after{
  content:"";
  width:32px;
  height:2px;
  background:var(--border-soft);
  margin:0 8px;
}
.gatitos-checkout-progress__dot{
  width:22px;height:22px;
  border-radius:50%;
  border:2px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;
  color:var(--white);
  flex-shrink:0;
}
.gatitos-checkout-progress li.is-done .gatitos-checkout-progress__dot{background:var(--green);border-color:var(--green);}
.gatitos-checkout-progress li.is-done{color:var(--green);}
.gatitos-checkout-progress li.is-current .gatitos-checkout-progress__dot{background:var(--purple);border-color:var(--purple);}
.gatitos-checkout-progress li.is-current{color:var(--purple);}

/* Grid 68/32 -- en el Carrito se dejo el reparto natural del flexbox
   porque el listado de productos necesita mas ancho; aca el formulario es
   lo dominante. Flexbox (no hay grid real posible, ver nota de arriba),
   flex-shrink por defecto evita overflow por el gap. */
.wc-block-checkout .wc-block-components-sidebar-layout{gap:40px;align-items:flex-start;flex-wrap:nowrap;}
.wc-block-checkout__main{flex-basis:calc(64% - 20px);}
.wc-block-checkout__sidebar{flex-basis:calc(36% - 20px);}

/* Tarjetas de paso: mas aire que la version anterior (2026-08-03) */
.wc-block-components-form .wc-block-components-checkout-step{
  border-radius:20px;
  padding:28px;
  margin-bottom:32px;
}

/* Metodo de pago: icono + confirmacion de seleccionado. El id del gateway
   es estable (Gatitos_Gateway_QR_Bancolombia::get_id() =
   "gatitos_qr_bancolombia"), asi que esto no se rompe si cambia el texto
   visible del metodo de pago. */
label[for="radio-control-wc-payment-method-options-gatitos_qr_bancolombia"] .wc-block-components-radio-control__label span::before{
  content:"🏦 ";
}
label[for="radio-control-wc-payment-method-options-gatitos_llave"] .wc-block-components-radio-control__label span::before{
  content:"🔑 ";
}
.wc-block-components-radio-control__option[aria-checked="true"] .wc-block-components-radio-control__label-group::after,
.wc-block-components-radio-control__option-checked .wc-block-components-radio-control__label-group::after{
  content:"✔ Método seleccionado";
  display:block;
  color:var(--green);
  font-size:.8rem;
  font-weight:700;
  margin-top:4px;
}

/* Total: el elemento mas grande del resumen */
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  font-size:2.5rem;
}

/* Boton "Realizar el pedido": WooCommerce Blocks lo ubica en la columna
   del formulario (main), no en el sidebar del resumen -- es la plantilla
   por defecto del bloque Checkout, no algo de este sitio. Moverlo de
   columna requeriria reordenar el arbol de bloques del propio Checkout
   (React lo controla), lo cual arriesga romper el submit real -- se
   descarta por el mismo criterio de "no tocar la logica/el proceso de
   compra" del pedido. En su lugar queda grande y premium al pie del
   formulario, mismo patron que usan Shopify/Stripe en su propio checkout
   (el boton de pago tambien vive al final del formulario, no flotando en
   el resumen). No se toca el texto real del boton (lo controla
   WooCommerce) -- solo se antepone un candado visualmente. */
.wc-block-components-checkout-place-order-button{
  width:100%;
  height:60px;
  margin-top:16px;
  border-radius:16px !important;
}
.wc-block-components-checkout-place-order-button::before{content:"🔒 ";}
.wc-block-components-checkout-place-order-button:hover{
  box-shadow:0 18px 35px rgba(75,30,107,.3) !important;
}
.wc-block-components-checkout-place-order-button:focus-visible{
  outline:2px solid var(--purple-dark) !important;
  outline-offset:3px;
}

/* --- Mismo efecto premium del boton de WhatsApp en los 3 CTA morados
   principales del sitio (2026-08-05, pedido del dueño con capturas):
   "Añadir al carrito" (Shop), "Finalizar compra" (Carrito) y "Realizar
   el pedido" (Checkout, ya tenia hover/focus, se le suma el shimmer).
   Reusa las MISMAS @keyframes que ya definio el boton de WhatsApp
   (gatitos-wa-shimmer/gatitos-wa-pulse, mas abajo en el archivo) --
   sin duplicar la animacion. Se usa ::after (no ::before) porque el
   boton de Checkout ya usa ::before para el candado. */
.add_to_cart_button,
.wc-block-cart__submit-button.wp-element-button,
.wc-block-components-checkout-place-order-button{
  position:relative;
  overflow:hidden;
}
.add_to_cart_button::after,
.wc-block-cart__submit-button.wp-element-button::after,
.wc-block-components-checkout-place-order-button::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform:translateX(-120%);
  pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
  .add_to_cart_button::after,
  .wc-block-cart__submit-button.wp-element-button::after,
  .wc-block-components-checkout-place-order-button::after{
    animation:gatitos-wa-shimmer 5s ease-in-out infinite;
  }
  .add_to_cart_button,
  .wc-block-cart__submit-button.wp-element-button,
  .wc-block-components-checkout-place-order-button{
    animation:gatitos-wa-pulse 5s ease-in-out infinite;
  }
}
.add_to_cart_button:hover, .add_to_cart_button:active,
.wc-block-cart__submit-button.wp-element-button:hover, .wc-block-cart__submit-button.wp-element-button:active,
.wc-block-components-checkout-place-order-button:hover, .wc-block-components-checkout-place-order-button:active{
  animation-play-state:paused;
}

/* --- Pulido pixel-perfect (2026-08-05, cuarta pasada) -------------------
   Ajustes de detalle sobre lo ya construido, sin nueva funcionalidad. */

/* Tarjetas del formulario: el padding:28px uniforme ya quedo aplicado en
   el rediseño de la segunda pasada (arriba, ~linea 1700) -- esta pasada
   solo confirma consistencia y afina el separador del resumen. */
.wc-block-components-order-summary-item{border-bottom-color:#f1f1f1;}

/* Cupon: WooCommerce ya lo renderiza como acordeon nativo
   (aria-expanded + icono, .wc-block-components-panel__button) -- no hace
   falta reconstruirlo, solo bajarle el protagonismo visual para que no
   compita con el Total. Mismo tratamiento en Carrito y Checkout. */
.wc-block-checkout__sidebar .wc-block-components-totals-coupon,
.wc-block-cart__sidebar .wc-block-components-totals-coupon{
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}
.wc-block-checkout__sidebar .wc-block-components-panel__button,
.wc-block-cart__sidebar .wc-block-components-panel__button{
  font-size:.85rem;
  color:var(--text-muted);
  font-weight:500;
  transition:color .2s ease;
}
.wc-block-checkout__sidebar .wc-block-components-panel__button:hover,
.wc-block-cart__sidebar .wc-block-components-panel__button:hover{color:var(--brand);}
.wc-block-checkout__sidebar .wc-block-components-panel__content,
.wc-block-cart__sidebar .wc-block-components-panel__content{
  animation:gatitos-checkout-fade-in .2s ease both;
}

/* Cantidad del producto como badge de marca en vez del numero suelto que
   trae WooCommerce por defecto. */
.wc-block-components-order-summary-item__quantity{
  background:var(--purple) !important;
  color:var(--white) !important;
  font-size:.7rem;
  font-weight:700;
  border-radius:999px !important;
  min-width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
}

/* Subtotal y demas filas (todo lo que no es el Total): un escalon mas
   chico y en gris medio -- el morado queda reservado para el Total,
   asi la jerarquia cromatica hace el trabajo en vez de repetir el
   mismo morado en cada fila. */
.wc-block-checkout__sidebar .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__label,
.wc-block-checkout__sidebar .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__value{
  font-size:.9375rem;
  color:var(--text-secondary);
}

/* Indicadores de confianza debajo del resumen -- agregados via
   the_content en page.php (mismo patron que la tarjeta de monedero del
   Carrito: el bloque de React no se puede editar desde PHP, asi que se
   agrega como contenido aparte inmediatamente despues). */
.gatitos-checkout-trust{
  display:flex;
  flex-wrap:wrap;
  gap:16px 28px;
  justify-content:center;
  margin-top:32px;
  padding:20px;
  font-size:.85rem;
  color:var(--text-secondary);
  font-weight:600;
}

@media(max-width:1100px) and (min-width:781px){
  .wc-block-checkout__main{flex-basis:calc(60% - 20px);}
  .wc-block-checkout__sidebar{flex-basis:calc(40% - 20px);}
}
@media(max-width:780px){
  .wc-block-checkout__main, .wc-block-checkout__sidebar{flex-basis:auto;}
  .gatitos-checkout-header h1{font-size:1.6rem;}
  .gatitos-checkout-progress{font-size:.68rem;}
  .gatitos-checkout-progress li{gap:4px;}
  .gatitos-checkout-progress li:not(:last-child)::after{width:14px;margin:0 4px;}
  .gatitos-checkout-progress__dot{width:18px;height:18px;font-size:.6rem;}
  .gatitos-checkout-trust{gap:12px 16px;padding:16px;}
  .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block{padding:20px !important;}

  /* FIX (2026-08-05, sexta pasada): WooCommerce Blocks inserta el
     resumen DOS VECES en el DOM en pantallas angostas -- la del
     sidebar (acordeon real, con boton .wc-block-components-checkout-
     order-summary__title + precio + flechita, la que se colapsa via
     checkout-mobile.js mas abajo) Y OTRA COPIA, siempre expandida y
     sin boton de colapsar, que WooCommerce inserta aparte dentro de
     .wc-block-checkout__actions (justo antes del boton "Realizar el
     pedido"). Es comportamiento nativo del bloque pensado para
     mostrar el resumen otra vez antes de confirmar, pero en este
     checkout de un solo tramo largo se ve como el pedido duplicado
     (confirmado en vivo: ambas copias visibles al mismo tiempo). Se
     oculta la copia de .wc-block-checkout__actions, quedando el
     acordeon del sidebar como unica fuente de verdad. */
  .wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper{
    display:none !important;
  }
}

/* --- Botón flotante de WhatsApp (2026-08-14, footer.php, todo el sitio) ---
   Circular, verde oficial de WhatsApp, ícono blanco -- combina con el
   resto de botones morado/lavanda del sitio sin copiar esa paleta (el
   verde es la marca reconocible de WhatsApp, no un color de GATITOS).
   z-index:45, por debajo de .gatitos-mobile-paybar (z-index:60, más
   abajo) que es el único otro elemento fixed del sitio -- pero además
   se oculta del todo en checkout (ver regla body.woocommerce-checkout
   más abajo) para no competir en absoluto con esa barra ni con "Realizar
   el pedido". Solo hover:scale(1.05), sin rebotes ni parpadeos. */
.gatitos-whatsapp-float{
  position:fixed;
  bottom:24px;
  right:24px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  border:2px solid #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  z-index:45;
  transition:transform .2s ease, box-shadow .2s ease;
}
.gatitos-whatsapp-float:hover{
  transform:scale(1.05);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.gatitos-whatsapp-float .gatitos-icon{
  width:28px;
  height:28px;
  color:#fff;
}
@media(max-width:780px){
  .gatitos-whatsapp-float{
    width:54px;
    height:54px;
    bottom:18px;
    right:18px;
  }
  /* 2026-08-14: en la Home movil el hero ya tiene su propio boton
     "Hablar por WhatsApp" en el primer viewport -- el flotante ahi
     seria redundante (y se solapaba con "Envios a todo Colombia").
     Oculto por defecto, whatsapp-float-home.js (solo encolado en
     is_front_page(), ver functions.php) agrega/quita .is-visible segun
     scroll. Solo afecta body.home Y solo dentro de este media query --
     desktop y el resto de paginas quedan exactamente igual que antes. */
  body.home .gatitos-whatsapp-float{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(8px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  }
  body.home .gatitos-whatsapp-float.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
}
/* Checkout es el único lugar del sitio con otro elemento fixed
   (.gatitos-mobile-paybar, ver abajo) -- se oculta acá en vez de
   reposicionarlo, para no tocar ni el checkout ni esa barra. */
body.woocommerce-checkout .gatitos-whatsapp-float{
  display:none;
}

/* --- Barra flotante de pago (2026-08-05, quinta pasada -- solo movil) ---
   Aparece cuando el boton real de WooCommerce ("Realizar el pedido") sale
   de la pantalla (checkout-mobile.js con IntersectionObserver) y
   desaparece automaticamente al volver a verse -- nunca coexisten los
   dos, evitando duplicar la accion de enviar el pedido. El boton de aca
   es un PROXY visual: su click() dispara el click() del boton real, no
   reimplementa el submit. Oculta por defecto (display:none) y en
   desktop, donde no tiene sentido -- fuera de tab order hasta que se
   muestra, sin necesidad de tabindex manual. */
.gatitos-mobile-paybar{
  display:none;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  background:var(--white);
  padding:14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -8px 24px rgba(0,0,0,.1);
  align-items:center;
  justify-content:space-between;
  gap:16px;
  transform:translateY(100%);
  transition:transform .25s ease;
}
@media(max-width:780px){
  .gatitos-mobile-paybar{display:flex;}
  .gatitos-mobile-paybar.is-visible{transform:translateY(0);}
}
.gatitos-mobile-paybar__total{display:flex;flex-direction:column;line-height:1.2;}
.gatitos-mobile-paybar__label{font-size:.7rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
.gatitos-mobile-paybar__value{font-size:1.3rem;font-weight:800;color:var(--purple);}
.gatitos-mobile-paybar__btn{
  background:var(--purple);
  color:var(--white);
  border:none;
  border-radius:14px;
  padding:14px 22px;
  font-size:.95rem;
  font-weight:700;
  min-height:48px;
  white-space:nowrap;
  transition:background .2s ease, transform .2s ease;
}
.gatitos-mobile-paybar__btn:active{transform:scale(.97);}
.gatitos-mobile-paybar__btn:focus-visible{
  outline:2px solid var(--purple-dark);
  outline-offset:2px;
}

/* --- Checkout --- */
.woocommerce-checkout #customer_details{
  background:#faf7fd;
  border:1px solid #e4d9f5;
  border-radius:20px;
  padding:28px;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading{
  color:var(--purple);
  font-size:1.2rem;
  margin-bottom:18px;
}
.woocommerce-checkout .form-row label{
  color:#4a3d5c;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:4px;
  display:block;
}
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea{
  width:100%;
  border:1px solid #e4d9f5;
  border-radius:10px;
  padding:11px 14px;
  font-size:.92rem;
  color:var(--ink);
  background:#fff;
}
.woocommerce-checkout .form-row .input-text:focus-visible,
.woocommerce-checkout .form-row select:focus-visible,
.woocommerce-checkout .form-row textarea:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
  border-color:var(--purple);
}
#order_review{
  background:#fff;
  border:1px solid #e4d9f5;
  border-radius:20px;
  padding:24px;
  margin-top:24px;
}
#order_review table.shop_table{border:none;}
.woocommerce-checkout-payment{
  background:#faf7fd;
  border-radius:16px;
  padding:16px;
  margin-top:16px;
}
.woocommerce-checkout-payment ul.payment_methods{list-style:none;}
.woocommerce-checkout-payment ul.payment_methods li{
  padding:10px 0;
  border-bottom:1px solid #e4d9f5;
}
.woocommerce-checkout-payment ul.payment_methods li:last-child{border-bottom:none;}
.woocommerce-checkout-payment ul.payment_methods li label{
  color:var(--purple-dark);
  font-weight:600;
  font-size:.92rem;
}
#place_order{width:100%;padding:16px;font-size:1rem;margin-top:16px;}
.woocommerce-checkout input[type="checkbox"]:focus-visible,
.woocommerce-checkout input[type="radio"]:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
}

/* --- Avisos dentro de estas 4 páginas (validación, cupón, etc) --- */
.woocommerce-error, .woocommerce-info{
  background:#f3edfb;
  border-top-color:var(--purple);
  color:var(--purple-dark);
  border-radius:12px;
  padding:14px 20px;
  list-style:none;
}
.woocommerce-error{border-top-color:#dc2626;}

@media(max-width:980px){
  /* Tablet (brief: "45/55"): sigue en 2 columnas -- NO apilar todavía
     (eso es solo mobile, ver el breakpoint de 700px más abajo). */
  .hero-grid{grid-template-columns:45fr 55fr; gap:36px;}
  .hero-visual{margin-right:-28px;} /* mismo espíritu del bleed de desktop, la mitad de sobresalida en una pantalla más chica */
  /* .hero-grid.has-mascot tiene más especificidad que .hero-grid a secas
     (ver la regla base más arriba) -- sin este override, seguiría
     ganando la de escritorio (1fr 340px) también acá adentro del media
     query. Mismo valor que la línea de arriba, solo que declarado con
     especificidad suficiente para no perder contra la regla de desktop. */
  .hero-grid.has-mascot{grid-template-columns:45fr 55fr; gap:36px;}
  .hero-copy{max-width:100%;}
  .hero h1{font-size:2.4rem;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .referral-wrap{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .navlinks{display:none;}
  .navlinks.is-open{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--purple-dark);
    padding:20px 24px;
    gap:18px;
    box-shadow:0 12px 24px rgba(0,0,0,.25);
  }
  .menu-toggle{display:block;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  /* .product-grid ya no se toca acá -- 2026-08-06, es flex (no grid) desde
     el rediseño de tarjetas, con sus propias columnas deterministas por
     breakpoint definidas junto a .product-grid .product-card, arriba. */
}
@media(max-width:700px){
  /* Mobile (brief): texto arriba, foto debajo -- .hero-copy ya va primero
     en el DOM, así que 1 sola columna la apila naturalmente ahí, sin
     order ni flex-direction extra. Mismo aspect-ratio:99/65 (no un height
     fijo distinto): el encuadre verificado (gato+3 bolsas+arenera) no
     cambia solo por cambiar de ancho. Reduce la altura TOTAL del hero
     (brief: "reducir altura del Hero") porque un ancho de pantalla
     angosto da, con la misma proporción, un alto en px bastante menor
     que en desktop. Sigue sin bordes redondeados ni tarjeta. */
  .hero{padding:56px 20px 32px;}
  .hero-grid{grid-template-columns:1fr; gap:28px; min-height:0;}
  /* Mismo motivo que el override de la línea equivalente en el media
     query de 980px de arriba: .has-mascot tiene más especificidad que
     .hero-grid a secas. */
  .hero-grid.has-mascot{grid-template-columns:1fr; gap:28px; min-height:0;}
  /* Sin bleed en mobile (brief: "la imagen mantiene toda la composición,
     no cortar productos") -- el margin-right negativo de desktop/tablet
     es puramente estético (sobresalir del contenedor hacia la pantalla
     ancha); en 1 columna angosta no aporta nada y solo desperdicia unos
     px de un ancho ya escaso. */
  .hero-visual{margin-right:0;}
  /* La foto ya no está al lado del morado sino DEBAJO del texto -- un
     degradado horizontal ya no tiene sentido acá. Vertical, mismo
     espíritu (que la foto "emerja" del morado en vez de cortar en
     seco), fundiendo desde arriba. */
  .hero-visual::before{
    background:linear-gradient(180deg,
      rgba(74,27,126,.85) 0%,
      rgba(74,27,126,.4) 12%,
      rgba(74,27,126,0) 28%
    );
  }
  .hero-badge-commission{top:14px;right:14px;padding:9px 14px;border-radius:16px;}
  .hero-badge-commission strong{font-size:.85rem;}
  .hero-badge-commission span{font-size:.65rem;}
  /* Mascota más chica en mobile para no competir con el texto ni
     empujar el alto total del Hero -- mismo criterio que ".hero-visual"
     arriba en este bloque (reducir presencia visual de la imagen en
     pantallas angostas). */
  .hero-mascot img{max-width:220px;}
}
@media(max-width:600px){
  .feature-grid{grid-template-columns:1fr;}
  .cta-inner{flex-direction:column;text-align:center;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-stats{flex-wrap:wrap;}
  .woocommerce ul.products{grid-template-columns:1fr;}
}

/* ===== SEDES (nuestras sedes fisicas) -- layout tipo laika.com.co/tiendas:
   buscador + lista a la izquierda, UN mapa interactivo (Leaflet) a la
   derecha con las 6 sedes marcadas. ===== */
.sedes-hero{
  background:radial-gradient(circle at 75% 30%, #6b34a0 0%, var(--purple) 55%, var(--purple-dark) 100%);
  color:var(--white);
  padding:70px 24px 60px;
  text-align:center;
}
.sedes-hero h1{font-size:2.4rem;margin-bottom:12px;}
.sedes-hero p{color:#eee0ff;font-size:1.05rem;}
.sedes-hero .hero-eyebrow{margin-bottom:18px;}
.sedes-list{padding:48px 24px 80px;background:#faf7ff;}
.sedes-panel{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:0;
  background:var(--white);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(75,30,107,.1);
  min-height:600px;
}
.sedes-sidebar{
  display:flex;
  flex-direction:column;
  border-right:1px solid rgba(75,30,107,.1);
  max-height:640px;
}
.sedes-buscador{
  position:relative;
  padding:20px 20px 12px;
  flex-shrink:0;
}
.sedes-buscador input{
  width:100%;
  padding:12px 40px 12px 16px;
  border:1px solid rgba(75,30,107,.2);
  border-radius:12px;
  font-family:inherit;
  font-size:.9rem;
  color:var(--ink);
}
.sedes-buscador input:focus{outline:none;border-color:var(--purple);}
.sedes-buscador .gatitos-icon{
  position:absolute;
  right:34px;
  top:32px;
  color:#b0a5c2;
  pointer-events:none;
}
.sedes-items{
  overflow-y:auto;
  padding:4px 12px 20px;
  flex:1;
}
.sede-item{
  padding:16px 12px;
  border-radius:14px;
  cursor:pointer;
  border-bottom:1px solid rgba(75,30,107,.08);
  transition:background .15s ease;
}
.sede-item:hover,
.sede-item.is-activo{background:rgba(229,184,75,.12);}
.sede-item h3{color:var(--purple);font-size:1rem;margin-bottom:6px;}
.sede-item .sede-direccion{color:var(--ink);font-size:.85rem;margin-bottom:6px;line-height:1.5;}
.sede-item .sede-horario{color:#6b6577;font-size:.75rem;margin-bottom:14px;}
.sede-item .sede-acciones{display:flex;gap:8px;flex-wrap:wrap;}
.sedes-sin-resultados{color:#6b6577;font-size:.85rem;text-align:center;padding:24px 12px;}
/* z-index:1 explicito (no solo position:relative) es lo que crea un
   contexto de apilamiento propio para este contenedor -- sin esto, los
   panes internos de Leaflet (que traen su propio z-index de hasta 800:
   tile-pane 200, marker-pane 600, popup-pane 700, controles 800) compiten
   en el MISMO contexto de apilamiento que el resto de la pagina, y como
   el header solo tiene z-index:100, el mapa terminaba pintandose por
   ENCIMA del menu al hacer scroll. Con este contexto propio, esos
   z-index de Leaflet quedan atrapados adentro y nunca superan al header. */
.sedes-mapa-wrap{position:relative;z-index:1;background:#e9e4f2;min-height:600px;}
#sedes-mapa{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.sede-pin-logo{filter:drop-shadow(0 3px 6px rgba(35,20,51,.45));}
.btn-sede{padding:9px 18px;font-size:.8rem;}
.btn-outline-dark{
  background:transparent;
  border:2px solid var(--purple);
  color:var(--purple);
}
.btn-outline-dark:hover{
  background:var(--purple);
  color:var(--white);
}
@media (max-width:900px){
  .sedes-panel{grid-template-columns:1fr;min-height:auto;}
  .sedes-sidebar{max-height:400px;border-right:none;border-bottom:1px solid rgba(75,30,107,.1);}
  .sedes-mapa-wrap{height:360px;}
  #sedes-mapa{position:static;height:100%;}
}
@media (max-width:640px){
  .sedes-hero h1{font-size:1.9rem;}
}

/* ===== Mi Cuenta (login/registro) — WooCommerce templates por defecto,
   sin markup propio del tema. Mismo lenguaje visual que el resto del sitio
   (tarjeta blanca, borde/lavanda #e4d9f5, radios 16-20px, foco morado) que
   ya se usa en checkout (ver .woocommerce-checkout arriba), en vez del HTML
   de fábrica de WooCommerce sin ningún estilo. ===== */
body.woocommerce-account main{
  background:#faf7fd;
  padding:48px 20px;
}
body.woocommerce-account .woocommerce{
  max-width:1200px; /* 2026-08-10: 1040px -> 1200px (mismo max-width que
    .wrap en el resto del sitio) -- el sidebar+contenido de Mi Cuenta usaba
    el layout de 2 columnas por defecto de WooCommerce (float:left 26% /
    float:right 73%), que a 1040px totales dejaba el contenido en ~760px
    reales. Se reemplaza por grid con sidebar fijo (ver reglas de abajo),
    y se ensancha el contenedor para que el contenido quede realmente
    amplio (pedido explícito del dueño: "el sidebar está comprimiendo todo
    el contenido en una columna excesivamente estrecha"). */
  margin:0 auto;
}
/* Sidebar fijo + contenido flexible en vez del layout float 26%/73% de
   WooCommerce core -- .woocommerce-MyAccount-navigation y
   .woocommerce-MyAccount-content son hijos directos de .woocommerce (ver
   los templates PHP de la carpeta woocommerce/myaccount), así que el grid
   aplica directo sin tocar ningún template. float:none/width:auto
   neutralizan las reglas float de WooCommerce core sin necesidad de
   !important (mayor especificidad por el selector con
   body.woocommerce-account). */
body.woocommerce-account .woocommerce{
  display:grid;
  /* minmax(0,1fr), no solo 1fr -- un track 1fr sin esto tiene un ancho
     mínimo implícito basado en el max-content de su contenido; si algo
     adentro de .woocommerce-MyAccount-content (tabla ancha, texto largo
     sin salto) pide más de lo que le toca, puede terminar apretando el
     sidebar de 240px en vez de sólo desbordar (2026-08-10, reportado por
     el dueño: sidebar y contenido con anchos invertidos en producción). */
  grid-template-columns:240px minmax(0,1fr);
  gap:32px;
  align-items:start;
}
/* 2026-08-11: cuando el usuario NO está logueado (pantalla de
   Acceder/Registrarse), el template de WooCommerce no imprime
   .woocommerce-MyAccount-navigation -- #customer_login queda como hijo
   DIRECTO de .woocommerce, sin ninguna columna de grid asignada. Sin esta
   regla, el auto-placement de CSS Grid lo mete en la primera celda del
   grid de arriba (la de 240px pensada para el sidebar), dejando las
   tarjetas de Acceder/Registrarse apretadas en esos 240px y todo el resto
   del ancho (la columna 1fr) vacío. grid-column:1/-1 lo hace ocupar las
   DOS columnas -- no afecta en nada cuando sí hay sidebar, porque en ese
   caso ni siquiera se renderiza #customer_login. */
body.woocommerce-account .woocommerce > #customer_login{
  grid-column:1 / -1;
}
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content{
  /* !important -- hay 2 reglas reales de WooCommerce core compitiendo acá
     (woocommerce-layout.css: float:left/right + width:30%/68%, y
     woocommerce-smallscreen.css: float:none + width:100% sin estar
     encerrada en @media pese al nombre del archivo). La especificidad ya
     les gana (body.woocommerce-account son 2 clases + 1 elemento, más que
     las de WooCommerce), pero !important lo deja blindado ante cualquier
     eventualidad de orden de carga entre stylesheets. */
  float:none !important;
  width:auto !important;
}
/* 2026-08-10: bug real encontrado en producción (reportado por el dueño
   con capturas + verificado en vivo con DevTools) -- con solo 2 columnas
   explícitas y 2 items sin grid-column/grid-row propios, el auto-placement
   de Chrome los estaba mandando cada uno a SU PROPIA fila en vez de
   ponerlos lado a lado en la misma fila (nav en fila 1 con el ancho de la
   fr grande, contenido en fila 2 con el ancho fijo chico -- ver
   comentario largo de más arriba). Asignar la columna/fila explícita a
   cada uno saca cualquier ambigüedad del auto-placement y lo resuelve. */
body.woocommerce-account .woocommerce-MyAccount-navigation{
  grid-column:1;
  grid-row:1;
}
body.woocommerce-account .woocommerce-MyAccount-content{
  grid-column:2;
  grid-row:1;
}
body.woocommerce-account main > h1{
  text-align:center;
  color:var(--purple-dark);
  margin-bottom:32px;
}
#customer_login{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
/* WooCommerce core CSS pone width:46% en .col2-set .col-1/.col-2 (pensado
   para floats de dos columnas, no para grid) -- eso hacia que la tarjeta
   ocupara solo ~46% de su celda del grid en vez de llenarla. width:100%
   con este prefijo le gana en especificidad. */
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2{
  width:100%;
  background:var(--white);
  border:1px solid #e4d9f5;
  border-radius:20px;
  padding:40px;
  box-shadow:0 6px 24px rgba(75,30,107,.08);
}
/* Auto-placement del grid se comportaba mal en ciertos anchos intermedios
   (~900-1040px): la tarjeta "Acceder" terminaba en la columna 2 y
   "Registrarse" se caia sola a una segunda fila, en vez de quedar las dos
   en la misma fila. Se fuerza la posicion de cada una explicitamente para
   que no dependa del auto-placement. */
body.woocommerce-account #customer_login .u-column1{
  grid-column:1;
  grid-row:1;
}
body.woocommerce-account #customer_login .u-column2{
  grid-column:2;
  grid-row:1;
}
#customer_login h2{
  color:var(--purple-dark);
  font-size:1.15rem;
  margin-bottom:20px;
}
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row{
  margin-bottom:16px;
}
.woocommerce-form-login label,
.woocommerce-form-register label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
}
body.woocommerce-account .woocommerce-form-login .form-row .woocommerce-Input,
body.woocommerce-account .woocommerce-form-register .form-row .woocommerce-Input{
  width:100%;
  border:1px solid #e4d9f5;
  border-radius:10px;
  padding:12px 14px;
  font-size:.92rem;
  font-family:inherit;
  color:var(--ink);
  background:#fff;
}
body.woocommerce-account .woocommerce-form-login .form-row .woocommerce-Input:focus-visible,
body.woocommerce-account .woocommerce-form-register .form-row .woocommerce-Input:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
  border-color:var(--purple);
}
.woocommerce-form-login .woocommerce-form-login__rememberme{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  color:var(--ink);
  margin:4px 0 16px;
}
.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"]{
  width:100%;
  background:var(--purple);
  color:var(--white);
  border:none;
  border-radius:10px;
  padding:14px;
  font-size:.95rem;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:background .2s;
}
.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-register button[type="submit"]:hover{
  background:var(--purple-dark);
}
.woocommerce-form-login .woocommerce-LostPassword{
  text-align:center;
  margin-top:16px;
  font-size:.85rem;
}
.woocommerce-form-login .woocommerce-LostPassword a{
  color:var(--purple);
}
.woocommerce-form-register p:not(.form-row){
  font-size:.8rem;
  color:#6b6178;
  margin-bottom:16px;
}
.woocommerce-form-register p:not(.form-row) a{
  color:var(--purple);
}
@media (max-width:900px){
  #customer_login{grid-template-columns:1fr;}
  body.woocommerce-account #customer_login .u-column1,
  body.woocommerce-account #customer_login .u-column2{
    grid-column:1;
    grid-row:auto;
  }
}
@media (max-width:480px){
  #customer_login .u-column1,
  #customer_login .u-column2{padding:24px;}
}

/* Sidebar de Mi Cuenta -- tablet: sidebar más angosto en vez de 240px fijo,
   el contenido sigue quedándose con el resto. Mobile: se apila arriba del
   contenido (comportamiento ya usado en el resto del sitio para navs, sin
   scroll horizontal), full width. */
@media (max-width:900px){
  body.woocommerce-account .woocommerce{
    grid-template-columns:200px minmax(0,1fr);
    gap:24px;
  }
}
@media (max-width:780px){
  body.woocommerce-account .woocommerce{
    grid-template-columns:1fr;
    gap:20px;
  }
  /* grid-column:1 en los dos -- acá solo hay UNA columna explícita; sin
     este reset, el content seguía pidiendo la columna 2 (regla de
     escritorio de más arriba) y el navegador le creaba una columna
     implícita, rompiendo el apilado y volviendo a angostar todo. */
  body.woocommerce-account .woocommerce-MyAccount-navigation{
    grid-column:1;
    grid-row:1;
  }
  body.woocommerce-account .woocommerce-MyAccount-content{
    grid-column:1;
    grid-row:2;
  }
}

/* --- Pantalla de "Gracias" (order-received): pasos de pago QR Bancolombia
   + reseña de Google -- ver includes/checkout-thank-you.php. Mismo
   lenguaje visual que el resto del sitio (tarjeta blanca, borde/lavanda,
   radio 20px, sombra suave). --- */
.gatitos-pasos-pago,
.gatitos-resena-google{
  max-width:640px;
  margin:32px auto 0;
  background:var(--white);
  border:1px solid #e4d9f5;
  border-radius:20px;
  padding:28px;
  box-shadow:0 6px 24px rgba(75,30,107,.08);
}
.gatitos-pasos-pago h2{
  color:var(--purple-dark);
  font-size:1.25rem;
  margin-bottom:20px;
}
.gatitos-pasos-lista{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:34px;
}
.gatitos-pasos-lista li{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.gatitos-paso-num{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--purple);
  color:var(--white);
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gatitos-paso-contenido strong{
  display:block;
  color:var(--purple-dark);
  margin-bottom:6px;
}
.gatitos-paso-contenido p{
  color:#6a5c7d;
  font-size:.9rem;
  margin-bottom:8px;
}

/* Monto a pagar: el dato mas importante del paso 2, nunca debe pasar
   desapercibido -- ~50% mas grande que un texto normal de parrafo. */
.gatitos-monto-destacado{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  margin:6px 0 10px;
  padding:14px 18px;
  background:var(--purple-tint);
  border:1.5px solid var(--brand);
  border-radius:14px;
}
.gatitos-monto-destacado__label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--brand);
}
.gatitos-monto-destacado__valor{
  font-size:2.1rem;
  font-weight:800;
  color:var(--brand);
  line-height:1.2;
}
.gatitos-qr-img{
  width:180px;
  height:180px;
  border-radius:12px;
  border:1px solid #e4d9f5;
  margin-top:8px;
}
.gatitos-qr-placeholder{
  width:180px;
  height:180px;
  border-radius:12px;
  border:2px dashed #e4d9f5;
  background:#faf7fd;
  color:#a891c4;
  font-size:.8rem;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  padding:12px;
}
.gatitos-btn-whatsapp-comprobante{
  display:inline-block;
  background:#25D366;
  color:var(--white);
  border:none;
  border-radius:50px;
  padding:12px 24px;
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  transition:transform .2s;
}
.gatitos-btn-whatsapp-comprobante:hover{transform:translateY(-2px);}
.gatitos-resena-google{
  text-align:center;
}
.gatitos-resena-titulo{
  color:var(--purple-dark);
  font-weight:800;
  font-size:1.1rem;
  margin-bottom:8px;
}
.gatitos-resena-google > p:not(.gatitos-resena-titulo){
  color:#6a5c7d;
  margin-bottom:16px;
}
.gatitos-btn-resena{
  display:inline-block;
  background:var(--gold);
  color:var(--purple-dark);
  border:none;
  border-radius:50px;
  padding:12px 28px;
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  text-decoration:none;
  transition:transform .2s;
}
.gatitos-btn-resena:hover{transform:translateY(-2px);}
.gatitos-btn-resena:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

/* --- Postcompra premium (2026-08-05, pedido del dueño) ------------------
   Encabezado calido + estado del pedido + timeline + QR protagonico +
   bloque de ayuda, todo sobre la pantalla real de "Pedido recibido"
   (includes/checkout-thank-you.php). Reusa variables ya definidas
   (--purple*, --text-*, --border-soft) -- ningun color nuevo suelto. */

.gatitos-thankyou-header{max-width:640px;margin:0 auto 8px;text-align:center;}
.gatitos-thankyou-header h1{
  color:var(--purple-dark);
  font-size:2.2rem;
  font-weight:800;
  margin-bottom:8px;
}
.gatitos-thankyou-header p{color:var(--text-secondary);font-size:1.05rem;margin-bottom:2px;}
.gatitos-thankyou-header__sub{color:var(--brand);font-weight:700;}

/* El aviso nativo de WooCommerce ("Gracias. Tu pedido ha sido recibido.")
   queda redundante con el encabezado de arriba -- se oculta solo
   visualmente, sin remove_action(), para no arriesgar que algun otro
   codigo dependa de que ese nodo exista en el DOM. */
.woocommerce-thankyou-order-received{display:none;}

/* Numero/fecha/total/metodo de pago: el dueño pidio sacarlas
   (2026-08-05) -- se ocultan por CSS, no se toca el hook nativo de
   WooCommerce que las genera. */
.woocommerce-order-overview{display:none !important;}

/* Estado del pedido: badge reutilizable, el color lo decide el
   modificador (--pendiente/--confirmado/--cancelado/--info) para poder
   sumar estados futuros sin escribir CSS nuevo cada vez. */
.gatitos-estado-pedido{
  max-width:max-content;
  margin:16px auto 0;
  padding:8px 18px;
  border-radius:50px;
  font-weight:700;
  font-size:.85rem;
  background:#fff8e1;
  color:#8a6d00;
}
.gatitos-estado-pedido--confirmado{background:var(--green-tint);color:#166534;}
.gatitos-estado-pedido--cancelado{background:#fdecec;color:#991b1b;}
.gatitos-estado-pedido--info{background:var(--purple-tint);color:var(--purple-dark);}

/* Timeline vertical: linea conectando los pasos, iconos en vez de
   numeros. Reusa .gatitos-pasos-lista (ya tenia display:flex column). */
.gatitos-timeline{position:relative;padding-left:4px;}
.gatitos-timeline li{position:relative;}
.gatitos-timeline li:not(:last-child)::before{
  content:"";
  position:absolute;
  left:19px;
  top:44px;
  bottom:-34px;
  width:2px;
  background:var(--border-soft);
}
.gatitos-paso-num{font-size:1.15rem;background:var(--purple);}
/* Icono de la Llave: mas grande que el resto de los pasos -- es el
   primer elemento que el usuario debe reconocer como "pagar por Llave". */
.gatitos-paso-num--llave{width:40px;height:40px;font-size:1.5rem;}

/* Llave destacada: protagonista del paso 1, mismo lenguaje visual que
   .gatitos-monto-destacado (fondo lila, borde de marca). */
.gatitos-llave-destacada{
  margin:10px 0;
  padding:16px 18px;
  background:var(--purple-tint);
  border:1.5px solid var(--brand);
  border-radius:14px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 12px;
}
.gatitos-llave-destacada__banco{
  grid-column:1 / -1;
  grid-row:1;
  font-size:.78rem;
  font-weight:700;
  color:var(--text-secondary);
  margin-bottom:4px;
}
.gatitos-llave-destacada__label{
  grid-column:1;
  grid-row:2;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--brand);
  align-self:end;
}
.gatitos-llave-destacada__valor{
  grid-column:1;
  grid-row:3;
  font-size:1.8rem;
  font-weight:800;
  color:var(--brand);
  line-height:1.15;
}
.gatitos-copy-btn--llave{
  grid-column:2;
  grid-row:2 / span 2;
  align-self:center;
  height:36px !important;
  padding:0 16px !important;
}

/* Mismo patron visual que .gatitos-llave-destacada__label/__valor
   (etiqueta chica arriba, valor mas grande abajo) para que "Titular"
   quede alineado a la izquierda igual que "Llave", en vez de una linea
   corrida con la etiqueta y el valor pegados. */
.gatitos-titular-verificado{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:6px !important;
}
.gatitos-titular-verificado__label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--brand);
}
.gatitos-titular-verificado__valor{
  font-size:.95rem;
  font-weight:700;
  color:var(--text-primary);
}
/* Dentro de la tarjeta de la Llave: fila propia de ancho completo,
   separada del numero/boton por una linea sutil. */
.gatitos-llave-destacada .gatitos-titular-verificado{
  grid-column:1 / -1;
  grid-row:4;
  margin:10px 0 0 !important;
  padding-top:10px;
  border-top:1px solid rgba(75,30,107,.15);
}
/* QR protagonico: mas grande, centrado, borde punteado (estilo pedido
   por el dueño con captura de referencia, 2026-08-05), con leyenda. */
.gatitos-qr-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;}
.gatitos-qr-img,
.gatitos-qr-placeholder{
  width:305px;
  height:305px;
  margin:12px 0 0;
  border:2px dashed var(--brand);
  border-radius:12px;
  padding:8px;
  box-sizing:border-box;
  box-shadow:0 4px 16px rgba(75,30,107,.08);
}
.gatitos-qr-caption{
  margin-top:10px !important;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
}

/* Datos de cuenta para transferencia manual -- filas con divisoria,
   label a la izquierda / valor a la derecha, boton de copiar en los
   campos que hace falta pegar en la app bancaria (mismo patron que la
   referencia que paso el dueño). */
.gatitos-datos-cuenta{
  margin-top:20px;
  width:100%;
  max-width:340px;
  text-align:left;
}
.gatitos-datos-cuenta__titulo{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:6px !important;
}
.gatitos-datos-cuenta dl{margin:0;}
.gatitos-datos-cuenta dl > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--border-soft);
  font-size:.88rem;
}
.gatitos-datos-cuenta dl > div:last-child{border-bottom:none;}
.gatitos-datos-cuenta dt{color:var(--brand);}
.gatitos-datos-cuenta dd{
  margin:0;
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  color:var(--text-primary);
}
.gatitos-copy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:30px;
  padding:0 12px;
  background:var(--surface);
  border:1.5px solid var(--border-soft);
  border-radius:8px;
  color:var(--brand);
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  flex-shrink:0;
}
.gatitos-copy-btn .gatitos-icon{width:.9em;height:.9em;}
.gatitos-copy-btn:hover{background:var(--purple-tint);color:var(--brand-hover);border-color:var(--brand);transform:translateY(-1px);}
.gatitos-copy-btn:active{transform:translateY(0) scale(.97);}
.gatitos-copy-btn:focus-visible{outline:2px solid var(--purple-dark);outline-offset:2px;}
.gatitos-copy-btn.is-copied{background:var(--green-tint);color:var(--success);border-color:var(--success);}

/* Boton de WhatsApp como CTA principal -- ancho completo, mas alto, con
   microinteraccion (shimmer + pulso + glow en reposo, elevacion al
   hover, reduccion + estado de carga al click). Solo transform/opacity/
   box-shadow animados -- nunca width/height/left, para no afectar CLS.
   El texto real (label) y el estado de carga son 2 <span> superpuestos
   dentro del boton (ver checkout-thank-you.php); JS (thankyou-whatsapp-btn.js)
   solo agrega/quita la clase .is-loading, el link real sigue navegando
   normal (target="_blank"), nunca se intercepta. */
.gatitos-btn-whatsapp-comprobante{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  overflow:hidden;
  text-align:center;
  border-radius:16px;
  padding:16px 24px;
  font-size:1rem;
  margin-top:10px;
  box-shadow:0 8px 20px rgba(37,211,102,.25), 0 0 0 4px rgba(37,211,102,.08);
  transition:box-shadow .2s ease, transform .2s ease;
}
.gatitos-btn-whatsapp-comprobante:hover{
  /* !important: mismo motivo que .wc-block-components-button.wp-element-button:hover
     mas arriba -- este boton tambien anima "transform" (gatitos-wa-pulse),
     que sin !important le gana al transform del hover. */
  transform:translateY(-2px) !important;
  box-shadow:0 12px 28px rgba(37,211,102,.35), 0 0 0 6px rgba(37,211,102,.12);
}
.gatitos-btn-whatsapp-comprobante:active{transform:scale(.97) !important;}
.gatitos-btn-whatsapp-comprobante:focus-visible{
  outline:2px solid var(--purple-dark);
  outline-offset:3px;
}

/* Shimmer: franja de brillo que cruza el boton cada 5s -- overlay
   independiente del texto, solo transform (translateX) + opacity. */
.gatitos-btn-whatsapp-comprobante__shimmer{
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform:translateX(-120%);
  pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
  .gatitos-btn-whatsapp-comprobante__shimmer{
    animation:gatitos-wa-shimmer 5s ease-in-out infinite;
  }
  .gatitos-btn-whatsapp-comprobante{
    animation:gatitos-wa-pulse 5s ease-in-out infinite;
  }
}
@keyframes gatitos-wa-shimmer{
  0%{transform:translateX(-120%);}
  16%{transform:translateX(120%);}
  100%{transform:translateX(120%);}
}
/* El pulso ocurre justo despues del shimmer (que tarda ~800ms en cruzar,
   0-16% de un ciclo de 5s) -- 100% -> 103% -> 100% en ~300ms. */
@keyframes gatitos-wa-pulse{
  0%, 16%{transform:scale(1);}
  19%{transform:scale(1.03);}
  22%, 100%{transform:scale(1);}
}
.gatitos-btn-whatsapp-comprobante:hover,
.gatitos-btn-whatsapp-comprobante:active{animation-play-state:paused;}

.gatitos-btn-whatsapp-comprobante__label,
.gatitos-btn-whatsapp-comprobante__loading{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:opacity .15s ease;
}
.gatitos-btn-whatsapp-comprobante__loading{
  position:absolute;
  inset:0;
  align-items:center;
  opacity:0;
}
.gatitos-btn-whatsapp-comprobante.is-loading .gatitos-btn-whatsapp-comprobante__label{opacity:0;}
.gatitos-btn-whatsapp-comprobante.is-loading .gatitos-btn-whatsapp-comprobante__loading{opacity:1;}
.gatitos-btn-whatsapp-comprobante__spinner{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:var(--white);
}
@media(prefers-reduced-motion:no-preference){
  .gatitos-btn-whatsapp-comprobante__spinner{animation:gatitos-wa-spin .7s linear infinite;}
}
@keyframes gatitos-wa-spin{to{transform:rotate(360deg);}}
.gatitos-confirmacion-nota{
  text-align:center;
  color:var(--text-muted) !important;
  font-size:.8rem !important;
  margin-top:10px !important;
  margin-bottom:0 !important;
}

/* Reseña de Google: invitacion amigable, menos protagonismo que el pago */
.gatitos-resena-google{
  max-width:480px;
  padding:20px;
  box-shadow:none;
  border-style:dashed;
}
.gatitos-resena-titulo{font-size:1rem;}
.gatitos-resena-google > p:not(.gatitos-resena-titulo){font-size:.85rem;}

@media(max-width:600px){
  .gatitos-thankyou-header h1{font-size:1.7rem;}
  .gatitos-qr-img, .gatitos-qr-placeholder{width:250px;height:250px;}
  /* Filas con valor + boton "Copiar": si no entran en una linea (nombres
     largos en pantallas angostas), pasan el valor a su propia linea en
     vez de comprimir el boton. */
  .gatitos-datos-cuenta dl > div{flex-wrap:wrap;}
  .gatitos-datos-cuenta dd{flex-basis:100%;justify-content:flex-end;}
}

/* ===== QUIÉNES SOMOS (page-quienes-somos.php) =====
   Página institucional, NO una landing/Home. Deliberadamente NO reutiliza
   .hero/.trust/.cta-band/.badge/.section (esos son los componentes de venta
   del Home) -- reutilizar esas clases hacía que esta página SE VIERA como
   un segundo Home, aunque el archivo del Home nunca se tocó. Todo selector
   de este bloque vive bajo el único prefijo .gatitos-quienes-somos, así
   queda imposible que una regla de acá alcance a header/footer/Home/otras
   páginas, y viceversa.
   2026-08-09, ajuste de ancho/tipografía: el contenedor pasó de 820px a
   ~1120px (pedido explícito -- "aprovechar 70-80% del ancho útil"), pero el
   TEXTO sigue limitado a un ancho de lectura cómodo (.qs-reading /
   .qs-reading-wide) para no terminar con líneas de 100+ caracteres --
   ese ancho de lectura vive en clases aparte, no en el contenedor general,
   así la grilla de tarjetas y el bloque de cobertura sí pueden usar el
   ancho completo cuando corresponde. */
.gatitos-quienes-somos{
  max-width:1120px;
  margin:0 auto;
  padding:72px 40px 100px;
}
.gatitos-quienes-somos h1{
  color:var(--purple);
  font-size:2.75rem;
  line-height:1.2;
  margin-bottom:26px;
}
.gatitos-quienes-somos h2{
  color:var(--purple);
  font-size:1.85rem;
  line-height:1.3;
  margin-bottom:22px;
}
.gatitos-quienes-somos h3{
  color:var(--purple-dark);
  font-size:1.15rem;
  margin-bottom:10px;
}
/* 2026-08-09, cuarta pasada de color: texto principal pasa de un gris
   con tinte morado (#5c4d70) a un oscuro elegante casi-negro (#17132A,
   pedido explícito -- "no negro puro") para que la página dependa menos
   del morado para leerse "de marca" y gane contraste real. Los títulos
   (h1/h2/h3 arriba) siguen en morado -- la jerarquía pedida es
   "H1/H2 morado, texto principal oscuro". */
.gatitos-quienes-somos p{
  color:#17132a;
  font-size:1rem;
  line-height:1.7;
  margin-bottom:16px;
}

/* Badge amarillo -- misma lógica visual que .badge del Home (fondo
   amarillo, texto morado oscuro, pastilla redondeada) pero NO reutiliza
   esa clase global: es su propia regla acotada a .gatitos-quienes-somos,
   así ambas quedan aisladas entre sí. Solo 2 usos en toda la página
   (sobre el H1 y sobre "Dónde estamos"), tal como se pidió -- "no poner
   amarillo en todos los títulos". */
.gatitos-quienes-somos .qs-badge{
  display:inline-flex;
  align-items:center;
  background:var(--yellow);
  color:var(--purple-dark);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:50px;
  margin-bottom:16px;
}
.gatitos-quienes-somos section{
  margin-top:68px;
}
.gatitos-quienes-somos section:first-of-type{margin-top:0;}

/* Anchos de lectura -- aplicados por sección vía clase en el PHP, nunca al
   contenedor general. .qs-reading (intro, compromiso, embajadores): ancho
   de lectura clásico. .qs-reading-wide (Qué hacemos): algo más ancho, ese
   texto puede "ocupar un ancho mayor" (pedido explícito). Nuestra
   especialidad y Dónde estamos NO llevan ninguna de las dos -- deben
   aprovechar el ancho completo del contenedor. */
.gatitos-quienes-somos .qs-reading{max-width:860px;}
.gatitos-quienes-somos .qs-reading-wide{max-width:950px;}

/* 3 tarjetas de tipo de arena -- bloques informativos (no tarjetas
   comerciales de producto: sin precio, sin CTA), ahora en grid real de 3
   columnas para aprovechar el ancho del contenedor.
   2026-08-09, corrección de balance de color: fondo BLANCO (antes
   --purple-tint sólido en las 3 tarjetas era el principal responsable de
   "demasiado morado" en la página) -- el morado queda solo como acento
   chico en el círculo del ícono y en el título (h3), igual que las
   tarjetas de Contáctanos. */
.gatitos-quienes-somos .qs-sand-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  margin-top:30px;
}
.gatitos-quienes-somos .qs-sand-card{
  background:var(--white);
  border:1px solid #f0eaf7;
  box-shadow:0 6px 20px rgba(75,30,107,.06);
  border-radius:18px;
  padding:28px 26px;
}
.gatitos-quienes-somos .qs-sand-card .ico{
  position:relative;
  width:44px;height:44px;
  margin-bottom:14px;
  border-radius:50%;
  background:var(--purple-tint);
  color:var(--purple);
  display:flex;align-items:center;justify-content:center;
}
.gatitos-quienes-somos .qs-sand-card .ico .gatitos-icon{width:22px;height:22px;}
/* Detalle amarillo discreto (pedido explícito, sección 5) -- un punto
   chico en la esquina del círculo del ícono, no un fondo ni un borde
   completo. "El amarillo debe servir para dirigir la mirada": marca las
   3 tarjetas como un set relacionado sin competir con el morado del
   título. */
.gatitos-quienes-somos .qs-sand-card .ico::after{
  content:"";
  position:absolute;
  bottom:-2px;right:-2px;
  width:11px;height:11px;
  background:var(--gold);
  border:2px solid var(--white);
  border-radius:50%;
}
.gatitos-quienes-somos .qs-sand-card h3{margin-bottom:8px;}
.gatitos-quienes-somos .qs-sand-card p{font-size:.94rem;margin-bottom:0;line-height:1.6;}
@media(max-width:900px){
  .gatitos-quienes-somos .qs-sand-grid{grid-template-columns:repeat(2, 1fr);}
}
@media(max-width:640px){
  .gatitos-quienes-somos .qs-sand-grid{grid-template-columns:1fr;}
}

/* Bloque informativo de cobertura -- una línea destacada con padding
   generoso, no una tarjeta protagonista tipo trust-strip de Home.
   2026-08-09, corrección de balance de color: fondo BLANCO (antes
   --purple-tint sólido) -- el acento ahora es solo el borde izquierdo
   dorado + el "Envíos a todo Colombia" en morado, nunca un bloque
   completo de color. */
.gatitos-quienes-somos .qs-coverage-box{
  margin-top:24px;
  border-left:4px solid var(--gold);
  border-top:1px solid #f0eaf7;
  border-right:1px solid #f0eaf7;
  border-bottom:1px solid #f0eaf7;
  padding:22px 28px;
  background:var(--white);
  border-radius:0 14px 14px 0;
  font-size:1rem;
  line-height:1.6;
  color:#17132a;
}
.gatitos-quienes-somos .qs-coverage-box strong{color:var(--purple);}

/* Club de Embajadores -- deliberadamente el bloque más discreto de la
   página: sin tarjeta, sin fondo de color, tipografía más chica y ancho
   de lectura corto (.qs-reading), para que quede claramente por debajo
   de la información corporativa principal. 2026-08-10: se quitó el link
   "Conocer más en tu cuenta" (pedido explícito), la sección queda solo
   con título + párrafo. */
.gatitos-quienes-somos .qs-section-secondary h2{
  font-size:1.25rem;
  color:var(--purple-dark);
}
.gatitos-quienes-somos .qs-section-secondary p{font-size:.94rem;}

/* Cierre "¿Hablamos?" -- caja CONTENIDA en morado (única excepción de
   fondo morado sólido en toda la página, pedido explícito: "puede
   utilizar morado porque es el cierre"). max-width + border-radius, NO
   una banda a todo el ancho de viewport como .cta-band de Home -- sigue
   siendo una tarjeta, no un hero. Botón forzado a dorado (el .btn-primary
   global es morado, que se perdería sobre este fondo) -- override
   acotado a este contenedor, no toca el .btn global del resto del sitio. */
.gatitos-quienes-somos .qs-closing{
  max-width:860px;
  margin-top:68px;
  padding:36px 40px;
  border-radius:18px;
  background:linear-gradient(120deg,var(--purple), var(--purple-dark));
  text-align:center;
}
.gatitos-quienes-somos .qs-closing h2{color:var(--white);margin-bottom:10px;}
.gatitos-quienes-somos .qs-closing p{color:#e3d3fa;font-size:1.02rem;}
.gatitos-quienes-somos .qs-closing .btn{
  background:var(--gold);
  color:var(--purple-dark);
  padding:16px 36px;
  font-size:1rem;
}

@media(max-width:640px){
  .gatitos-quienes-somos{padding:48px 20px 64px;}
  .gatitos-quienes-somos h1{font-size:2.15rem;}
  .gatitos-quienes-somos h2{font-size:1.55rem;}
  .gatitos-quienes-somos p{font-size:.98rem;}
  .gatitos-quienes-somos section{margin-top:52px;}
  .gatitos-quienes-somos .qs-closing{padding:28px 24px;}
}

/* ===== CONTÁCTANOS (page-contactanos.php) =====
   Página institucional, inspirada en la estructura de una página de
   contacto de referencia pero con la identidad visual de GATITOS. NO
   reutiliza .hero/.trust/.cta-band/.badge/.section del Home. Todo selector
   vive bajo .gatitos-contactanos, aislado del resto del sitio. */
.gatitos-contactanos{
  max-width:1120px;
  margin:0 auto;
  padding:72px 40px 100px;
}
.gatitos-contactanos h1{
  color:var(--purple);
  font-size:2.75rem;
  line-height:1.2;
  margin-bottom:18px;
}
.gatitos-contactanos h2{
  color:var(--purple);
  font-size:1.5rem;
  line-height:1.3;
  margin-bottom:14px;
}
.gatitos-contactanos p{
  color:#5c4d70;
  font-size:1rem;
  line-height:1.7;
  margin-bottom:12px;
}
.gatitos-contactanos section,
.gatitos-contactanos .contacto-closing{
  margin-top:64px;
}
.gatitos-contactanos .contacto-intro{
  margin-top:0;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.gatitos-contactanos .contacto-intro h1{margin-bottom:16px;}
.gatitos-contactanos .contacto-intro p{margin-bottom:0;color:#6a5c7d;}

/* 3 tarjetas de contacto -- WhatsApp / Correo / Sedes. Las 2 primeras son
   la tarjeta completa como enlace clickeable; la de Sedes usa botón propio
   porque el brief lo pide explícito ("Ver nuestras sedes"). */
.gatitos-contactanos .contacto-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.gatitos-contactanos .contacto-card{
  display:block;
  background:var(--white);
  border:1px solid #f0eaf7;
  border-radius:18px;
  padding:28px 26px;
  box-shadow:0 6px 20px rgba(75,30,107,.06);
  transition:transform .25s ease, box-shadow .25s ease;
  text-align:left;
}
.gatitos-contactanos a.contacto-card{color:inherit;text-decoration:none;}
.gatitos-contactanos a.contacto-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(75,30,107,.12);
}
.gatitos-contactanos .contacto-card .ico{
  width:44px;height:44px;
  margin-bottom:16px;
  border-radius:50%;
  background:var(--purple-tint);
  color:var(--purple);
  display:flex;align-items:center;justify-content:center;
}
.gatitos-contactanos .contacto-card .ico .gatitos-icon{width:22px;height:22px;}
.gatitos-contactanos .contacto-card h2{font-size:1.15rem;margin-bottom:8px;}
.gatitos-contactanos .contacto-card p{font-size:.92rem;margin-bottom:12px;}
.gatitos-contactanos .contacto-card-link{
  display:inline-block;
  color:var(--purple);
  font-weight:600;
  font-size:.9rem;
}
.gatitos-contactanos .contacto-card-btn{margin-top:4px;}
@media(max-width:900px){
  .gatitos-contactanos .contacto-cards{grid-template-columns:1fr;}
}

/* Horario -- tarjeta horizontal destacada, discreta. Fondo BLANCO con
   borde (2026-08-09: antes tenía fondo --purple-tint de pared a pared;
   "demasiado morado en el contenido central" -- el morado queda como
   acento chico, solo en el círculo del ícono). */
.gatitos-contactanos .contacto-horario{
  display:flex;
  align-items:center;
  gap:22px;
  background:var(--white);
  border:1px solid #f0eaf7;
  border-radius:18px;
  padding:26px 30px;
  box-shadow:0 6px 20px rgba(75,30,107,.06);
}
.gatitos-contactanos .contacto-horario .ico{
  width:48px;height:48px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--purple-tint);
  color:var(--purple);
  display:flex;align-items:center;justify-content:center;
}
.gatitos-contactanos .contacto-horario .ico .gatitos-icon{width:24px;height:24px;}
.gatitos-contactanos .contacto-horario h2{font-size:1.15rem;margin-bottom:4px;}
.gatitos-contactanos .contacto-horario p{margin-bottom:0;font-size:.95rem;color:#5c4d70;}

/* ¿En qué podemos ayudarte? -- 3 opciones informativas, blancas con borde,
   mismo lenguaje visual que .contacto-card pero sin ser enlaces (son
   puramente informativas, no un catálogo ni CTAs). */
.gatitos-contactanos .contacto-ayuda-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:24px;
}
.gatitos-contactanos .contacto-ayuda-item{
  background:var(--white);
  border:1px solid #f0eaf7;
  border-radius:18px;
  padding:26px 24px;
}
.gatitos-contactanos .contacto-ayuda-item .ico{
  width:40px;height:40px;
  margin-bottom:14px;
  border-radius:50%;
  background:var(--purple-tint);
  color:var(--purple);
  display:flex;align-items:center;justify-content:center;
}
.gatitos-contactanos .contacto-ayuda-item .ico .gatitos-icon{width:20px;height:20px;}
.gatitos-contactanos .contacto-ayuda-item h3{color:var(--purple-dark);font-size:1.05rem;margin-bottom:8px;}
.gatitos-contactanos .contacto-ayuda-item p{font-size:.92rem;margin-bottom:0;}
@media(max-width:900px){
  .gatitos-contactanos .contacto-ayuda-grid{grid-template-columns:1fr;}
}

/* Antes de escribirnos -- secundaria y compacta, ancho de lectura corto. */
.gatitos-contactanos .contacto-secondary{
  max-width:760px;
}
.gatitos-contactanos .contacto-secondary h2{font-size:1.25rem;}
.gatitos-contactanos .contacto-secondary p{font-size:.94rem;}

/* Cierre "Estamos para ayudarte" -- tarjeta contenida en morado, NO un
   hero ni una banda de ancho completo (mismo criterio que .qs-closing en
   Quiénes Somos, solo que acá el brief pide fondo morado con contraste). */
.gatitos-contactanos .contacto-closing{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  padding:44px 40px;
  border-radius:20px;
  background:linear-gradient(120deg,var(--purple), var(--purple-dark));
  color:var(--white);
}
.gatitos-contactanos .contacto-closing .ico{
  width:48px;height:48px;
  margin:0 auto 16px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
}
.gatitos-contactanos .contacto-closing .ico .gatitos-icon{width:24px;height:24px;}
.gatitos-contactanos .contacto-closing h2{color:var(--white);margin-bottom:10px;}
.gatitos-contactanos .contacto-closing p{color:#e3d3fa;margin-bottom:22px;}

@media(max-width:640px){
  .gatitos-contactanos{padding:48px 20px 64px;}
  .gatitos-contactanos h1{font-size:2.15rem;}
  .gatitos-contactanos h2{font-size:1.3rem;}
  .gatitos-contactanos p{font-size:.98rem;}
  .gatitos-contactanos section,
  .gatitos-contactanos .contacto-closing{margin-top:48px;}
  .gatitos-contactanos .contacto-horario{flex-direction:column;text-align:center;}
  .gatitos-contactanos .contacto-closing{padding:32px 24px;}
}

/* ===== TÉRMINOS Y CONDICIONES (page-terminos-y-condiciones.php) =====
   Página legal/institucional -- NO landing, NO tarjetas, NO bloques
   morados grandes. Un solo ancho de lectura cómodo en toda la página
   (a diferencia de Quiénes Somos, acá no hay secciones que necesiten
   más ancho -- es texto legal corrido). Deliberadamente NO usa .hero,
   .trust, .cta-band, .badge ni las clases qs- o contacto- de otras
   páginas. Todo selector vive bajo .gatitos-terminos, aislado del resto
   del sitio.
   NOTA para quien edite este archivo: un asterisco pegado a una barra
   dentro del TEXTO de un comentario CSS cierra el comentario a mitad de
   frase (es el mismo delimitador que abre el bloque) -- todo lo que
   sigue se parsea como CSS real, rompiendo en silencio la siguiente
   regla sin ningún error visible. Así se perdió el max-width de este
   mismo contenedor la primera vez que se escribió este bloque
   (2026-08-10, causa: un patrón tipo "prefijo-asterisco-barra" en esta
   misma nota). Evitar esa combinación de caracteres en cualquier
   comentario, separándolos con un espacio si hace falta escribirlos. */
.gatitos-terminos{
  max-width:820px;
  margin:0 auto;
  padding:72px 24px 100px;
}
.gatitos-terminos h1{
  color:var(--purple);
  font-size:2.5rem;
  line-height:1.2;
  margin-bottom:10px;
}
.gatitos-terminos h2{
  color:var(--purple);
  font-size:1.4rem;
  line-height:1.3;
  margin-bottom:16px;
}
.gatitos-terminos p{
  color:#17132a;
  font-size:1rem;
  line-height:1.75;
  margin-bottom:16px;
}
/* :not(.btn) -- sin esto, este selector (clase+etiqueta, más específico
   que .btn-primary de una sola clase) le ganaba el color al botón de
   WhatsApp del cierre: texto morado sobre fondo morado, invisible.
   Bug real visto en producción 2026-08-10, corregido acá y en los otros
   3 selectores hermanos de este mismo archivo (faq-item, privacy,
   delivery). */
.gatitos-terminos a:not(.btn){
  color:var(--purple);
  text-decoration:underline;
  text-underline-offset:2px;
}
.gatitos-terminos a:not(.btn):hover{color:var(--gold);}

/* Badge amarillo -- mismo lenguaje que .qs-badge de Quiénes Somos, pero
   con su propia regla (aislamiento entre páginas). Un solo uso en toda
   la página, arriba del H1. */
.gatitos-terminos .gt-badge{
  display:inline-flex;
  align-items:center;
  background:var(--yellow);
  color:var(--purple-dark);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:50px;
  margin-bottom:16px;
}
.gatitos-terminos .gt-updated{
  color:#6a5c7d;
  font-size:.88rem;
  margin-bottom:24px;
}
.gatitos-terminos .gt-intro{margin-bottom:8px;}
.gatitos-terminos .gt-intro p:last-child{
  font-size:1.05rem;
  margin-bottom:0;
}

/* Separación clara entre secciones (pedido explícito: "los H2 deben
   estar claramente separados") -- línea sutil arriba de cada una, sin
   ser un bloque de color. La primera sección no lleva línea/margen
   extra, ya viene después del intro. */
.gatitos-terminos section{
  margin-top:56px;
  padding-top:32px;
  border-top:1px solid #f0eaf7;
}
.gatitos-terminos header.gt-intro + section{
  margin-top:40px;
}

/* Placeholder editorial [FALTA CONFIRMAR] -- acento amarillo discreto
   (pedido: "pequeños acentos amarillos") que además cumple una función:
   marca visualmente los datos legales que el dueño todavía tiene que
   confirmar (razón social, NIT), en vez de perderse en el texto normal. */
.gatitos-terminos .gt-todo{
  background:rgba(245,216,0,.22);
  color:var(--purple-dark);
  font-weight:600;
  font-size:.92em;
  padding:1px 6px;
  border-radius:4px;
}

/* Cierre -- botones institucionales normales (.btn ya existente), sin
   caja morada ni banda de ancho completo. */
.gatitos-terminos .gt-closing-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:20px;
}

@media(max-width:640px){
  .gatitos-terminos{padding:48px 20px 64px;}
  .gatitos-terminos h1{font-size:2rem;}
  .gatitos-terminos h2{font-size:1.2rem;}
  .gatitos-terminos p{font-size:.98rem;}
  .gatitos-terminos section{margin-top:44px;padding-top:24px;}
}

/* ===== PREGUNTAS FRECUENTES (page-preguntas-frecuentes.php) =====
   Página FAQ institucional, no landing. Reusa el mismo acordeón nativo
   (details/summary, sin JS) que ya existe en footer.php -- ningún
   componente nuevo. Todo selector vive bajo .gatitos-faq, aislado del
   resto del sitio.
   Recordatorio de seguridad para quien edite este bloque: nunca escribir
   un asterisco pegado a una barra dentro del TEXTO de un comentario CSS
   (ese carácter doble es el delimitador que cierra el comentario) --
   cierra el bloque a mitad de frase y rompe en silencio la siguiente
   regla, sin ningún error visible. Ver la nota completa en el bloque de
   Términos y Condiciones más arriba. */
.gatitos-faq{
  max-width:820px;
  margin:0 auto;
  padding:72px 24px 100px;
}
.gatitos-faq h1{
  color:var(--purple);
  font-size:2.5rem;
  line-height:1.2;
  margin-bottom:10px;
}
.gatitos-faq h2{
  color:var(--purple);
  font-size:1.4rem;
  line-height:1.3;
  margin-bottom:20px;
}
.gatitos-faq .faq-badge{
  display:inline-flex;
  align-items:center;
  background:var(--yellow);
  color:var(--purple-dark);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:50px;
  margin-bottom:16px;
}
.gatitos-faq .faq-intro p{
  color:#17132a;
  font-size:1.05rem;
  line-height:1.7;
  margin-bottom:0;
}
.gatitos-faq section{
  margin-top:56px;
  padding-top:32px;
  border-top:1px solid #f0eaf7;
}
.gatitos-faq header.faq-intro + section{
  margin-top:40px;
}

/* Cada pregunta -- fila con borde sutil, sin sombra, sin fondo de color:
   deliberadamente NO una tarjeta comercial, solo delimita cada acordeón. */
.gatitos-faq .faq-item{
  background:var(--white);
  border:1px solid #f0eaf7;
  border-radius:14px;
  padding:18px 22px;
  margin-bottom:14px;
}
.gatitos-faq .faq-item summary{
  color:var(--purple);
  font-weight:600;
  font-size:1.02rem;
  line-height:1.4;
  cursor:pointer;
  list-style:none;
}
.gatitos-faq .faq-item summary::-webkit-details-marker{display:none;}
.gatitos-faq .faq-item summary::after{
  content:"+";
  float:right;
  color:var(--gold);
  font-weight:700;
  font-size:1.3rem;
  line-height:1;
  transition:transform .2s ease;
}
.gatitos-faq .faq-item[open] summary::after{transform:rotate(45deg);}
.gatitos-faq .faq-item p{
  color:#17132a;
  font-size:.98rem;
  line-height:1.7;
  margin:14px 0 0;
}
/* :not(.btn) -- mismo bug/fix que en Términos y Condiciones (ver esa
   nota): sin esto, el botón "Ver nuestras sedes" dentro del acordeón de
   Sedes perdía su color de botón normal. */
.gatitos-faq .faq-item a:not(.btn){
  color:var(--purple);
  text-decoration:underline;
  text-underline-offset:2px;
}
.gatitos-faq .faq-item a:not(.btn):hover{color:var(--gold);}
.gatitos-faq .faq-inline-btn{
  margin-top:14px;
  display:inline-block;
}

.gatitos-faq .faq-closing p{
  color:#17132a;
  margin-bottom:16px;
}

@media(max-width:640px){
  .gatitos-faq{padding:48px 20px 64px;}
  .gatitos-faq h1{font-size:2rem;}
  .gatitos-faq h2{font-size:1.2rem;}
  .gatitos-faq .faq-intro p{font-size:1rem;}
  .gatitos-faq section{margin-top:44px;padding-top:24px;}
  .gatitos-faq .faq-item{padding:16px 18px;}
}

/* ===== POLÍTICA DE PRIVACIDAD (page-politicas-de-privacidad.php) =====
   Página legal, no landing. Mismo lenguaje que Términos y Condiciones:
   un solo ancho de lectura, sin tarjetas, sin iconos decorativos, sin
   bloques morados grandes. Todo selector vive bajo .gatitos-privacy,
   aislado del resto del sitio.
   Recordatorio de seguridad para quien edite este bloque: nunca escribir
   un asterisco pegado a una barra dentro del TEXTO de un comentario CSS
   -- cierra el comentario a mitad de frase y rompe en silencio la
   siguiente regla, sin ningún error visible (ver la nota completa en el
   bloque de Términos y Condiciones más arriba). */
.gatitos-privacy{
  max-width:820px;
  margin:0 auto;
  padding:72px 24px 100px;
}
.gatitos-privacy h1{
  color:var(--purple);
  font-size:2.5rem;
  line-height:1.2;
  margin-bottom:10px;
}
.gatitos-privacy h2{
  color:var(--purple);
  font-size:1.4rem;
  line-height:1.3;
  margin-bottom:16px;
}
.gatitos-privacy p{
  color:#17132a;
  font-size:1rem;
  line-height:1.75;
  margin-bottom:16px;
}
.gatitos-privacy ul{
  margin:0 0 16px;
  padding-left:22px;
}
.gatitos-privacy ul li{
  color:#17132a;
  font-size:1rem;
  line-height:1.75;
  margin-bottom:8px;
}
/* :not(.btn) -- mismo bug/fix que en Términos y Condiciones (ver esa
   nota): sin esto, el botón de WhatsApp del cierre quedaba invisible
   (texto morado sobre fondo morado). */
.gatitos-privacy a:not(.btn){
  color:var(--purple);
  text-decoration:underline;
  text-underline-offset:2px;
}
.gatitos-privacy a:not(.btn):hover{color:var(--gold);}

.gatitos-privacy .gp-badge{
  display:inline-flex;
  align-items:center;
  background:var(--yellow);
  color:var(--purple-dark);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:50px;
  margin-bottom:16px;
}
.gatitos-privacy .gp-updated{
  color:#6a5c7d;
  font-size:.88rem;
  margin-bottom:24px;
}
.gatitos-privacy .gp-intro p:last-child{
  font-size:1.05rem;
  margin-bottom:0;
}

.gatitos-privacy section{
  margin-top:56px;
  padding-top:32px;
  border-top:1px solid #f0eaf7;
}
.gatitos-privacy header.gp-intro + section{
  margin-top:40px;
}

/* Placeholder editorial [FALTA CONFIRMAR] -- mismo acento amarillo que
   en Términos y Condiciones, marca visualmente el dato legal que el
   dueño todavía tiene que confirmar. */
.gatitos-privacy .gp-todo{
  background:rgba(245,216,0,.22);
  color:var(--purple-dark);
  font-weight:600;
  font-size:.92em;
  padding:1px 6px;
  border-radius:4px;
}

.gatitos-privacy .gp-closing-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:20px;
}

@media(max-width:640px){
  .gatitos-privacy{padding:48px 20px 64px;}
  .gatitos-privacy h1{font-size:2rem;}
  .gatitos-privacy h2{font-size:1.2rem;}
  .gatitos-privacy p, .gatitos-privacy ul li{font-size:.98rem;}
  .gatitos-privacy section{margin-top:44px;padding-top:24px;}
}

/* ===== POLÍTICAS DE ENTREGA (page-politicas-de-entrega.php) =====
   Página institucional/legal, no landing. Mismo lenguaje que Términos y
   Condiciones y Política de Privacidad: un solo ancho de lectura, sin
   tarjetas, sin imágenes, sin bloques morados grandes. Todo selector
   vive bajo .gatitos-delivery, aislado del resto del sitio.
   Recordatorio de seguridad para quien edite este bloque: nunca escribir
   un asterisco pegado a una barra dentro del TEXTO de un comentario CSS
   -- cierra el comentario a mitad de frase y rompe en silencio la
   siguiente regla, sin ningún error visible (ver la nota completa en el
   bloque de Términos y Condiciones más arriba). */
.gatitos-delivery{
  max-width:820px;
  margin:0 auto;
  padding:72px 24px 100px;
}
.gatitos-delivery h1{
  color:var(--purple);
  font-size:2.5rem;
  line-height:1.2;
  margin-bottom:10px;
}
.gatitos-delivery h2{
  color:var(--purple);
  font-size:1.4rem;
  line-height:1.3;
  margin-bottom:16px;
}
.gatitos-delivery p{
  color:#17132a;
  font-size:1rem;
  line-height:1.75;
  margin-bottom:16px;
}
/* :not(.btn) -- mismo bug/fix que en Términos y Condiciones (ver esa
   nota): sin esto, el botón de WhatsApp del cierre y "Ver nuestras
   sedes" quedaban con el color de link en vez del color de botón. */
.gatitos-delivery a:not(.btn){
  color:var(--purple);
  text-decoration:underline;
  text-underline-offset:2px;
}
.gatitos-delivery a:not(.btn):hover{color:var(--gold);}

.gatitos-delivery .gd-badge{
  display:inline-flex;
  align-items:center;
  background:var(--yellow);
  color:var(--purple-dark);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:50px;
  margin-bottom:16px;
}
.gatitos-delivery .gd-updated{
  color:#6a5c7d;
  font-size:.88rem;
  margin-bottom:0;
}

.gatitos-delivery section{
  margin-top:56px;
  padding-top:32px;
  border-top:1px solid #f0eaf7;
}
.gatitos-delivery header.gd-intro + section{
  margin-top:40px;
}

.gatitos-delivery .gd-inline-btn{
  margin-top:8px;
  display:inline-block;
}

@media(max-width:640px){
  .gatitos-delivery{padding:48px 20px 64px;}
  .gatitos-delivery h1{font-size:2rem;}
  .gatitos-delivery h2{font-size:1.2rem;}
  .gatitos-delivery p{font-size:.98rem;}
  .gatitos-delivery section{margin-top:44px;padding-top:24px;}
}