/* Estilos de la parte dinámica de Hipercash. Reutiliza las variables del diseño. */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.seccion { padding: clamp(36px, 6vw, 72px) 0; }
.seccion-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: 28px; }
.seccion-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 36px); color: var(--ink); margin:0; }
.seccion-head a { color: var(--navy); font-weight:600; text-decoration:none; }

/* Nota: la rejilla de categorías (.cat-grid/.cat-card) la define el diseño en
   styles.css. Antes aquí había una versión simple para la home dinámica antigua
   que pisaba el maquetado del diseño; se eliminó al adoptar el diseño completo. */

/* "Precio PRO solo con tarjeta" en tarjetas */
.price-row .unit { color: var(--paprika); font-weight:600; }

/* ===== Ficha de producto ===== */
.ficha { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items:start; }
@media (max-width: 820px){ .ficha { grid-template-columns: 1fr; } }
.ficha-img { aspect-ratio: 4/3; border:1px solid var(--line); border-radius: var(--radius-lg); background: var(--cream-soft); display:flex; align-items:center; justify-content:center; color: var(--muted); }
.ficha h1 { font-family: var(--display); font-weight:800; font-size: clamp(24px, 3.4vw, 38px); color:var(--ink); margin:6px 0 4px; }
.ficha .brand { color: var(--navy); font-weight:600; }

.precio-box { border:1px solid var(--line); border-radius: var(--radius-lg); padding:20px; margin:20px 0; background:var(--paper); }
.precio-box .fila { display:flex; align-items:baseline; justify-content:space-between; padding:8px 0; }
.precio-box .fila + .fila { border-top:1px dashed var(--line); }
.precio-box .etq { color: var(--muted); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.precio-box .val { font-family: var(--display); font-weight:800; font-size:24px; color:var(--ink); }
.precio-box .pro .val { color: var(--navy); }
.precio-box .pro.oferta .val { color: var(--paprika); }
.precio-box .bloqueado .val { font-size:14px; font-weight:600; color: var(--paprika); }
.precio-box .bloqueado a { color: var(--navy); }

.ficha-info { margin-top: 40px; }
.ficha-info h3 { font-family: var(--display); font-weight:700; font-size:18px; border-bottom:2px solid var(--ink); padding-bottom:6px; margin: 26px 0 12px; }
.nutri { width:100%; border-collapse:collapse; font-size:14px; }
.nutri td, .nutri th { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); }
.aviso-sin-stock { display:inline-block; background: var(--paprika); color:#fff; padding:4px 10px; border-radius: var(--radius); font-size:13px; font-weight:600; }

/* Cabecera en dos filas: arriba logo + botones; debajo el menú a lo ancho
   (así el menú de 7 entradas cabe en una sola línea y no se parte). */
.header .container { display: block; min-height: 0; }
.header .header-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.header .header-claim { flex: 1; text-align: center; font-family: var(--serif); font-style: italic; font-size: 22px; color: rgba(255,255,255,0.78); letter-spacing: 0.01em; white-space: nowrap; }
.header .nav { justify-content: center; flex-wrap: nowrap; gap: 2px; padding-bottom: 12px; }
.header .nav-item > a.active::after { bottom: -6px; }

.paginacion { margin-top: 28px; }
/* Producto EN OFERTA: el cuerpo (nombre + precios) resaltado en azul */
.oferta.en-oferta { border-color: var(--navy); }
.oferta.en-oferta .oferta-body { background: var(--navy); }
.oferta.en-oferta .oferta-body h4 { color: #fff; }
.oferta.en-oferta .oferta-body .brand { color: rgba(255,255,255,0.7); }
.oferta.en-oferta .oferta-body .price { color: #fff; }
.oferta.en-oferta .oferta-body .price-old { color: rgba(255,255,255,0.6); }
.oferta.en-oferta .oferta-body .unit { color: rgba(255,255,255,0.75); }
.oferta.en-oferta .oferta-body .tag { color: #fff; border-color: rgba(255,255,255,0.4); }

/* Imagen real de producto (tarjeta y ficha): rellena el contenedor sin recortar */
.oferta-img.has-img, .ficha-img.has-img { background: #fff; padding: 0; }
.oferta-img.has-img img, .ficha-img.has-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.paginacion-nav { margin-top: 36px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.pag-info { font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }
.pag-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.pag-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.pag-btn:hover { border-color: var(--navy); color: var(--navy); }
.pag-btn.active { background: var(--paprika); border-color: var(--paprika); color: #fff; }
.pag-btn.disabled { opacity: .4; pointer-events: none; }
.pag-dots { padding: 0 6px; color: var(--muted); }

/* ===== Acceso, cuenta y formularios ===== */
.wrap-estrecho { max-width: 560px; }
.auth-titulo { font-family: var(--display); font-weight:800; font-size: clamp(26px,3.4vw,38px); color:var(--ink); margin:0 0 6px; }
.auth-sub { color: var(--muted); margin:0 0 22px; }
.form-auth { display:flex; flex-direction:column; gap:16px; }
.campo { display:flex; flex-direction:column; gap:6px; }
.campo label { font-weight:600; font-size:14px; color:var(--ink); }
.campo input, .campo select { font-family: var(--body); font-size:15px; padding:11px 13px; border:1px solid var(--line-strong); border-radius: var(--radius); background:var(--paper); color:var(--ink); }
.campo input:focus, .campo select:focus { outline:2px solid var(--navy); border-color:var(--navy); }
.campo-fila { display:flex; gap:14px; }
.campo-fila .campo { flex:1; }
.campo-pequeno { max-width:130px; flex:0 0 130px; }
.campo-check { display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--muted); }
.form-auth .btn { align-self:flex-start; margin-top:4px; }
.auth-pie { margin-top:20px; color:var(--muted); }
.auth-pie a, .campo-check a { color:var(--navy); font-weight:600; }

.alerta { padding:13px 16px; border-radius: var(--radius); margin-bottom:18px; font-size:14px; }
.alerta-error { background:#FBE9E5; border:1px solid var(--paprika); color: var(--paprika-700); }
.alerta-ok { background:#E9F3EA; border:1px solid var(--olive); color:#3c5a2e; }
.alerta ul { margin:6px 0 0 18px; }

.banner-pendiente { background: var(--navy); color:#fff; text-align:center; font-size:14px; padding:9px 16px; }
.banner-pendiente a { color:#fff; text-decoration:underline; }

.estado-cuenta { padding:16px 18px; border-radius: var(--radius-lg); border:1px solid var(--line); background:var(--paper); }
.estado-cuenta.estado-aprobado { border-color: var(--olive); background:#F0F6EF; }
.estado-cuenta.estado-pendiente { border-color: var(--navy-300); background:#EEF4FB; }
.estado-cuenta.estado-rechazado { border-color: var(--paprika); background:#FBE9E5; }

.datos-cuenta { width:100%; border-collapse:collapse; font-size:14px; margin-top:10px; }
.datos-cuenta th { text-align:left; color:var(--muted); font-weight:600; width:150px; padding:8px 10px 8px 0; vertical-align:top; }
.datos-cuenta td { padding:8px 0; border-bottom:1px solid var(--line); }
.utility-auth a { margin-left:14px; }

/* ===== Empleo ===== */
.campo textarea { font-family: var(--body); font-size:15px; padding:11px 13px; border:1px solid var(--line-strong); border-radius: var(--radius); background:var(--paper); color:var(--ink); resize:vertical; }
.campo textarea:focus { outline:2px solid var(--navy); border-color:var(--navy); }
.empleo-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:18px; }
.empleo-card { display:block; padding:22px; border:1px solid var(--line); border-radius: var(--radius-lg); background:var(--paper); text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s; }
.empleo-card:hover { border-color: var(--navy); transform: translateY(-2px); }
.empleo-card h3 { font-family: var(--display); font-weight:700; font-size:19px; margin:0 0 6px; }
.empleo-tipo { display:inline-block; font-size:12px; font-weight:600; color: var(--navy); background:#EEF4FB; padding:3px 9px; border-radius:999px; margin-bottom:10px; }
.empleo-card p { color: var(--muted); font-size:14px; margin:6px 0 14px; }
.empleo-cta { color: var(--paprika); font-weight:600; font-size:14px; }
.empleo-sub { font-family: var(--display); font-weight:700; font-size:18px; border-bottom:2px solid var(--ink); padding-bottom:6px; margin:28px 0 12px; }
.empleo-sub2 { font-family: var(--display); font-weight:700; font-size:16px; margin:22px 0 4px; color: var(--navy); }
.opciones { display:flex; flex-direction:column; gap:8px; padding:4px 0; }
.op-check, .op-radio { display:flex; align-items:center; gap:9px; font-size:15px; color:var(--ink); font-weight:400; }

/* Fix: puente invisible sobre el hueco de 10px (margin-top) de los desplegables
   del menú. Sin esto, al bajar el ratón del botón al panel se pierde el :hover
   y el desplegable se cierra antes de poder clicar una categoría. */
.nav-dropdown::before,
.nav-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}