/* ===============================================================
   LÍNEA DISEÑO · "CORPORATIVO"
   Contadores, abogados, distribuidoras, librerías, mayoristas.
   Sirve para la tienda y para la página profesional.
   Copiá este archivo como tema.css (en la carpeta principal).
   Para cambiar los colores, tocá --acento (azul) y --detalle (verde).
   =============================================================== */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root {
  --bg: #F4F6F9;
  --bg-header: #12305A;
  --surface: #FFFFFF;
  --nude: #E8EDF3;
  --rosa: #CBD6E3;
  --acento: #12305A;
  --acento-osc: #0B2140;
  --sobre-acento: #FFFFFF;
  --detalle: #0F8A7E;
  --texto: #18222F;
  --suave: #5A6676;
  --borde: #D8DFE8;
  --radio: 6px;
  --radio-btn: 6px;
  --radio-campo: 6px;
  --sombra: none;
  --f-titulo: "IBM Plex Sans", system-ui, sans-serif;
  --f-texto: "IBM Plex Sans", system-ui, sans-serif;
  --peso-titulo: 600;
  --titulo-espaciado: -.01em;
  --titulo-escala: 1;
  --aviso-bg: #E9B949;
  --aviso-texto: #18222F;
}

/* ---------- comunes ---------- */
a { color: var(--detalle); }
header.top { border-bottom: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.top .marca { color: #FFFFFF; font-size: 1.3rem; font-weight: 700; }
.top .btn.sec, .btn-carrito { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); color: #FFFFFF; }
.top .btn.sec:hover { background: rgba(255, 255, 255, .16); }
.top .btn:not(.sec) { background: var(--detalle); }
.contador { background: var(--detalle); }
.btn:not(.sec):not(.btn-wa):hover { background: var(--acento-osc); }
.pie { background: #0E2443; color: #AFC0D4; border-top: none; }
.pie a, .pie-marca { color: #FFFFFF; }
.btn-arrepentimiento { border-color: #FFFFFF; color: #FFFFFF !important; }
.btn-arrepentimiento:hover { background: #FFFFFF; color: #0E2443 !important; }
.pie-copy { border-top-color: rgba(255, 255, 255, .12); }
.detalle .cat { text-transform: none; letter-spacing: 0; color: var(--detalle); font-weight: 500; font-size: .88rem; }
.talle.activo { background: var(--acento); border-color: var(--acento); color: #FFFFFF; }

/* ---------- tienda ---------- */
.hero { text-align: left; background: var(--acento); box-shadow: 0 0 0 100vmax var(--acento); clip-path: inset(-2px -100vmax 0); padding: 28px 0 40px; }
.hero .sobre { text-transform: none; letter-spacing: 0; color: #9FD8D1; font-size: .95rem; font-weight: 500; }
.hero h1 { color: #FFFFFF; font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.08; max-width: 20ch; }
.hero #hero-lema { color: #C9D6E6; max-width: 56ch; margin-top: 10px; }
.filtros { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 0; margin: 0; border-bottom: 1px solid var(--borde); scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.chip { border: none; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 14px 16px 11px; font-weight: 500; color: var(--suave); white-space: nowrap; }
.chip.activo { background: none; color: var(--acento); border-bottom-color: var(--detalle); }
.chip-oferta:not(.activo) { color: var(--error); border-color: transparent; }
.buscador { margin: 18px 0 22px; max-width: 420px; border-radius: var(--radio-campo); }

.grilla { gap: 10px; }
@media (min-width: 700px) { .grilla { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } }
.card { border: 1px solid var(--borde); }
@media (hover: hover) { .card:hover { transform: none; border-color: var(--acento); } }
.card .foto { aspect-ratio: 1; border-bottom: 1px solid var(--borde); }
.card-cat { text-transform: none; letter-spacing: 0; color: var(--detalle); font-weight: 500; font-size: .8rem; }
.card h3 { font-size: 1.02rem; line-height: 1.3; }
.precio { color: var(--texto); font-weight: 700; }
.card .precio { font-size: 1.15rem; }
.card .sin-imp { margin-bottom: 10px; }
.card .info > .btn { width: 100%; margin-top: auto; }
.etiqueta { border-radius: 4px; font-weight: 600; }
.etiqueta.destacado { background: var(--detalle); color: #FFFFFF; }

/* ---------- página profesional ---------- */
.nav-pro a { color: #DCE5F0; }
.nav-pro a:hover { color: #FFFFFF; }
.hero-pro { background: var(--acento); border-bottom: none; padding: 52px 0 56px; }
.hero-texto .sobre { text-transform: none; letter-spacing: 0; color: #9FD8D1; font-size: 1rem; font-weight: 500; }
.hero-texto h1 { color: #FFFFFF; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.08; }
.hero-lema { color: #C9D6E6; }
.matricula { color: #9DB0C7; }
.hero-pro .btn:not(.sec) { background: var(--detalle); }
.hero-pro .btn.sec { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .35); }
.hero-pro .btn.sec:hover { background: rgba(255, 255, 255, .1); }
.hero-foto { width: min(240px, 46vw); }
.hero-foto img, .iniciales { border-radius: 10px; border: none; box-shadow: none; }
.iniciales { background: #1D4478; color: #FFFFFF; }
.seccion.alt { background: var(--surface); }
.servicio { border-top: 3px solid var(--detalle); }
.servicio .precio { font-size: 1.1rem; }
.link-turno { color: var(--detalle); }
.destacados-pro li::before { border-color: var(--detalle); }
.faq summary::after { color: var(--detalle); }