*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --yellow: #F5C800; --yellow-dark: #d4ab00; --black: #111111; --steel: #1a1a1a; --steel2: #2a2a2a; --cream: #F5F0E8; --radius: 4px; --nav-h: 62px; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

.skip-link { position: absolute; top: -40px; left: 0; background: var(--yellow); color: #000; padding: 8px 16px; z-index: 9999; text-decoration: none; font-weight: bold; }
.skip-link:focus { top: 0; }

body { font-family: 'Inter', sans-serif; background: var(--black); color: var(--cream); overflow-x: hidden; }

.app-error { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 2000; background: #c0392b; color: #fff; padding: .7rem 1.4rem; border-radius: var(--radius); font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .25s; }
.app-toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; }
.app-toast { background: var(--steel); color: var(--cream); border: 1px solid #333; padding: .7rem 1.2rem; border-radius: var(--radius); font-size: .9rem; opacity: 0; transform: translateY(8px); transition: all .25s; }
.app-toast.show { opacity: 1; transform: translateY(0); }
.app-toast--success { border-left: 3px solid #27ae60; }
.app-toast--error { border-left: 3px solid #c0392b; }

.cat-card--skeleton { pointer-events: none; }
.cat-img-placeholder--skeleton { background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.skeleton-line { height: 12px; background: #222; border-radius: 4px; }
.skeleton-line--title { width: 70%; height: 16px; margin-bottom: .6rem; }
.skeleton-line--text { width: 100%; margin-bottom: .4rem; }
.skeleton-line--tag { width: 40%; height: 10px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #0b0b0b; border-bottom: 2px solid var(--yellow); display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; height: var(--nav-h); }
.navbar-logo { display: flex; align-items: center; font-weight: bold; color: var(--yellow); font-size: 1.2rem; font-family: 'Barlow Condensed', sans-serif; }
.navbar-logo img { height: 44px; width: 44px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.navbar-logo .logo-text { margin-left: .65rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.navbar-menu { display: flex; gap: 25px; margin-left: auto; margin-right: auto; }
.menu-link { color: #fff; text-decoration: none; font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-family: 'Barlow Condensed', sans-serif; padding: .5rem 0; transition: color .2s; }
.menu-link:hover { color: var(--yellow); }
.menu-link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.menu-link.active { color: var(--yellow); }
.navbar-actions { display: flex; align-items: center; gap: 10px; }
.btn-contact-nav { background: var(--black); color: var(--cream); border: 1px solid var(--cream); padding: .55rem 1.1rem; font: 800 .8rem/1 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--radius); cursor: pointer; transition: all .2s; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.btn-contact-nav:hover { filter: invert(1); }
.btn-contact-nav:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.btn-contact-nav .contact-icon { color: #e74c3c; }
.btn-admin { background: transparent; color: #fff; border: 1px solid #fff; padding: .55rem 1.1rem; font: 800 .8rem/1 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--radius); cursor: pointer; transition: background .2s, color .2s; }
.btn-admin:hover { background: #fff; color: #000; }
.btn-admin:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--cream); transition: all .2s; }
.hamburger:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }

.hero-badge { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); background: #111; border-left: 5px solid var(--yellow); padding: 1.5rem 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; z-index: 2; }
.hero-badge-number { font: 900 4rem/1 'Barlow Condensed', sans-serif; color: var(--yellow); letter-spacing: .02em; }
.hero-badge-text { font: 700 .85rem/1.3 sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #ddd; }

.photo-strip { margin-top: var(--nav-h); overflow: hidden; }
.photo-strip-img { width: 100%; }
.photo-strip-img img { width: 100%; height: auto; display: block; }
/* En móvil la franja 1284x560 no debe estirarse a todo el ancho (queda
   gigante) ni deformarse: se recorta con object-fit:cover y un alto fijo. */
@media (max-width: 768px) {
  .photo-strip-img { height: 200px; }
  .photo-strip-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
}

/* Hero: se usa aspect-ratio en vez de min-height fija en px para que el
   recorte del contenido sea predecible y consistente a cualquier ancho.
   Desktop mantiene proporción ancha (21/9); se ajusta por breakpoint abajo. */
.hero { background: var(--steel); position: relative; overflow: hidden; display: flex; align-items: center; min-height: 720px; aspect-ratio: 21/9; width: 100%; max-width: 100%; box-sizing: border-box; }
.hero::before { content: ''; position: absolute; top: -10%; right: -5%; width: 52%; height: 130%; background: var(--yellow); transform: skewX(-8deg); z-index: 0; }
.hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 28px 28px; z-index: 0; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg-left { position: absolute; inset: 0; background: var(--steel); }
.hero-bg-right { position: absolute; top: 0; right: 0; width: 45%; height: 100%; background: var(--yellow); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%); }
.hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 5rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.hero-eyebrow { font: 600 .9rem/1.2 'Barlow Condensed', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); margin-bottom: 1rem; }
.hero-title { font: 900 clamp(3rem,6vw,5.5rem)/.95 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--cream); margin-bottom: 1.5rem; }
.hero-title em { color: var(--yellow); font-style: normal; }
.hero-desc { font-size: 1rem; line-height: 1.65; color: #bbb; max-width: 420px; margin-bottom: 2.5rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-stats { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.5rem; }
.stat-card { background: var(--black); border-left: 4px solid var(--yellow); padding: 1.2rem 1.6rem; border-radius: var(--radius); }
.stat-number { font: 900 3rem/1 'Barlow Condensed', sans-serif; color: var(--yellow); }
.stat-label { font-size: .82rem; color: #aaa; text-transform: uppercase; letter-spacing: .1em; margin-top: .2rem; }
/* Texto de fondo gigante (marca). Queda dentro del hero (que ya tiene
   overflow:hidden) para que no se corte "TAC" en pantallas angostas.
   max-width + position relativa al flujo evitan el desborde por la derecha. */
.hero-logo-bg { position: absolute; bottom: 30px; left: 40px; right: 0; max-width: calc(100% - 40px); white-space: nowrap; font: 900 7rem/1 'Barlow Condensed', sans-serif; color: var(--cream); opacity: 0.03; z-index: 1; pointer-events: none; letter-spacing: .08em; text-transform: uppercase; }

section { padding: 5rem 2rem; }
.container { max-width: 1200px; margin: 0 auto; }
.section-label { font: 600 .8rem/1.2 'Barlow Condensed', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--yellow); margin-bottom: .5rem; }
.section-title { font: 900 clamp(2rem,4vw,3.2rem)/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--cream); margin-bottom: 2.5rem; }
.section-title span { color: var(--yellow); }
.divider { width: 48px; height: 3px; background: var(--yellow); margin-bottom: 2.5rem; }

#productos { background: var(--steel); }
.cat-tools { display: grid; grid-template-columns: 1fr 220px 120px; gap: .8rem; align-items: center; margin: 0 0 1.8rem; }
.cat-search {
  width: 100%;
  background: var(--black);
  border: 2px solid #333;
  border-radius: 8px;
  padding: .85rem 1rem .85rem 2.8rem;
  color: var(--cream);
  font-size: .95rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F5C800' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: .8rem center;
  background-size: 18px;
}
.cat-search:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(245,200,0,.15); }
.cat-search::placeholder { color: #666; }
.cat-filter {
  width: 100%;
  background: var(--black);
  border: 2px solid #333;
  border-radius: 8px;
  padding: .85rem 2.2rem .85rem 1rem;
  color: var(--cream);
  font-size: .92rem;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F5C800' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.cat-filter:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(245,200,0,.15); }
.cat-filter option { background: var(--black); color: var(--cream); }
.cat-clear {
  width: 100%;
  background: transparent;
  color: #aaa;
  border: 2px solid #444;
  border-radius: 8px;
  font: 700 .92rem/1 'Barlow Condensed', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85rem 1rem;
  cursor: pointer;
  transition: all .2s;
}
.cat-clear:hover { border-color: var(--yellow); color: var(--yellow); background: rgba(245,200,0,.05); }
.cat-clear:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
@media (max-width: 768px) { .cat-tools { grid-template-columns: 1fr; } }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cat-grid { grid-template-columns: 1fr; gap: 16px; } }
.cat-card { background: var(--black); border: 1px solid #2a2a2a; border-radius: var(--radius); overflow: hidden; transition: border-color .15s, box-shadow .15s; display: flex; flex-direction: column; cursor: pointer; height: 100%; }
.cat-card:hover { border-color: var(--yellow); box-shadow: 0 8px 28px rgba(245,200,0,.12); }
.cat-card:focus-within { border-color: var(--yellow); outline: 2px solid var(--yellow); outline-offset: 2px; }
.cat-img-placeholder { width: 100%; aspect-ratio: 1/1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 16px; font-size: 3.5rem; position: relative; overflow: hidden; flex-shrink: 0; }
.cat-img-placeholder--noimg { font-size: 2.2rem; }
.cat-icon-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cat-img-placeholder img { width: auto; height: auto; max-width: 85%; max-height: 85%; object-fit: contain; background: #fff; }
.cat-variants { display: flex; gap: 0; border-top: 1px solid #2a2a2a; overflow-x: auto; flex-shrink: 0; }
.cat-variants img { width: 60px; height: 60px; object-fit: cover; border-right: 1px solid #2a2a2a; flex-shrink: 0; cursor: pointer; opacity: .8; transition: opacity .2s; }
.cat-variants img:hover { opacity: 1; }
.cat-body { padding: 1.2rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.cat-name { font: 700 1.25rem/1.2 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--cream); margin-bottom: .4rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cat-desc { font-size: .85rem; color: #bbb; line-height: 1.55; white-space: pre-line; }
.cat-specs { font-size: .8rem; color: #bbb; line-height: 1.5; margin-top: .5rem; padding: .5rem; background: #111; border-radius: 4px; border-left: 2px solid var(--yellow); }
.cat-card-footer { margin-top: auto; padding-top: .8rem; }
.cat-tag { display: inline-block; background: var(--yellow); color: #000; font: 700 .75rem/1 'Barlow Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 2px; }
.cat-card-hint { font-size: .75rem; color: #888; margin-top: .5rem; display: flex; align-items: center; gap: .4rem; }

.cat-empty { grid-column: 1/-1; text-align: center; padding: 4rem 2rem; color: #666; font: 1.2rem/1.2 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.cat-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.cat-page-btn { background: var(--steel); color: var(--cream); border: 1px solid #333; border-radius: var(--radius); padding: .6rem 1.2rem; cursor: pointer; font: 700 .9rem/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .06em; transition: all .2s; }
.cat-page-btn:hover:not(:disabled) { border-color: var(--yellow); color: var(--yellow); }
.cat-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.cat-page-info { font-size: .9rem; color: #bbb; }
.prod-total-display { text-align: center; padding: .8rem; color: #bbb; font-size: .9rem; }
.prod-count-bar { color: #888; font-size: .82rem; margin-bottom: .8rem; }

#ventajas { background: var(--black); }
.vent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2rem; }
.vent-item { border-top: 2px solid var(--yellow); padding-top: 1.2rem; }
.vent-icon { font-size: 2rem; margin-bottom: .8rem; }
.vent-title { font: 700 1.1rem/1.2 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--cream); margin-bottom: .4rem; }
.vent-desc { font-size: .85rem; color: #bbb; line-height: 1.6; }

#info { background: var(--steel); }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.info-block { display: flex; flex-direction: column; gap: 1.5rem; }
.info-item { display: flex; gap: 1rem; align-items: flex-start; }
.info-icon { width: 42px; height: 42px; flex-shrink: 0; background: var(--yellow); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.info-text-label { font: 600 .75rem/1.2 'Barlow Condensed', sans-serif; letter-spacing: .15em; text-transform: uppercase; color: #999; margin-bottom: .2rem; }
.info-text-value { font-size: .95rem; color: var(--cream); line-height: 1.5; }
.info-text-value a { color: var(--yellow); text-decoration: none; }
.map-wrap { width: 100%; border-radius: var(--radius); border: 2px solid #2a2a2a; overflow: hidden; display: flex; flex-direction: column; position: relative; z-index: 1; }
#leaflet-map { width: 100%; height: 300px; position: relative; z-index: 1; border: 2px solid var(--yellow); border-radius: 10px; overflow: hidden; }
.leaflet-container { z-index: 1 !important; }
.leaflet-pane { z-index: 2 !important; }
.map-open-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; background: var(--yellow); color: #000; font: 700 1rem/1 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: .75rem 1rem; text-decoration: none; transition: background .2s; }
.map-open-btn:hover { background: var(--yellow-dark); }

#contacto { background: var(--yellow); }
#contacto .section-label { color: var(--black); opacity: .6; }
#contacto .section-title { color: var(--black); }
#contacto .divider { background: var(--black); opacity: .25; }
.cta-inner { max-width: 700px; }
.cta-desc { font-size: 1rem; color: #333; margin-bottom: 2rem; line-height: 1.7; }
.btn-wa { background: #25D366; color: #fff; font: 700 1.1rem/1 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 1rem 2.2rem; border: none; border-radius: var(--radius); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; transition: background .2s; }
.btn-wa:hover { background: #1ebc57; }
.btn-wa-icon { font-size: 1.2em; }
.btn-tel { background: transparent; color: var(--black); font: 700 1.1rem/1 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 1rem 2rem; border: 2px solid var(--black); border-radius: var(--radius); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; transition: background .2s; }
.btn-tel:hover { background: rgba(0,0,0,.08); }
.cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

footer { background: #0a0a0a; border-top: 2px solid #1a1a1a; padding: 2.5rem 2rem; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; align-items: start; }
.footer-brand { display: flex; flex-direction: column; gap: .6rem; }
.footer-logo { font: 900 1.4rem/1.2 'Barlow Condensed', sans-serif; color: var(--cream); display: flex; align-items: center; gap: .5rem; }
.footer-logo span { color: var(--yellow); }
.footer-logo-img, .footer-logo img { height: 36px; width: 36px; object-fit: contain; border-radius: 3px; }
.footer-tagline { font-size: .82rem; color: #777; font-style: italic; }
.footer-col-title { font: 700 .8rem/1.2 'Barlow Condensed', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); margin-bottom: .8rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.footer-links a { font-size: .85rem; color: #666; text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--cream); }
.footer-bottom { max-width: 1200px; margin: 2rem auto 0; padding-top: 1.2rem; border-top: 1px solid #1a1a1a; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.footer-copy { font-size: .78rem; color: #444; }
.footer-copy strong { color: var(--yellow); }
.footer-actions { display: flex; align-items: center; gap: 2.5rem; }
.wa-float-footer { display: inline-flex; align-items: center; gap: .3rem; background: #25D366; color: #fff; font-size: .75rem; font-weight: 600; padding: .35rem .8rem; border-radius: var(--radius); text-decoration: none; transition: all .2s; letter-spacing: .04em; }
.wa-float-footer:hover { background: #1ebc57; transform: translateY(-1px); }
.admin-trigger { background: none; border: none; color: #2a2a2a; font-size: .7rem; cursor: pointer; padding: .2rem .5rem; transition: color .2s; }
.admin-trigger:hover { color: #555; }

.admin-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.85); backdrop-filter: blur(6px); align-items: center; justify-content: center; }
.admin-overlay.open { display: flex; }
.admin-login-box { background: var(--steel); border: 1px solid #333; border-top: 3px solid var(--yellow); border-radius: 6px; padding: 2.5rem; width: 90%; max-width: 380px; }
.admin-login-box h2 .hl { color: var(--yellow); }
.admin-login-box h2 .hl { color: var(--yellow); }
.admin-login-box p { font-size: .82rem; color: #666; margin-bottom: 2rem; }
.admin-field { margin-bottom: 1.2rem; }
.admin-field label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: #888; margin-bottom: .4rem; }
.admin-field input { width: 100%; background: var(--black); border: 1px solid #333; border-radius: var(--radius); padding: .65rem .9rem; color: var(--cream); font-size: .95rem; outline: none; transition: border-color .2s; }
.admin-field input:focus { border-color: var(--yellow); }
.admin-error { color: #e74c3c; font-size: .82rem; margin-bottom: 1rem; display: none; }
.btn-admin-login { width: 100%; background: var(--yellow); color: var(--black); font: 700 1.05rem/1 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: .75rem; border: none; border-radius: var(--radius); cursor: pointer; transition: background .2s; }
.btn-admin-login:hover { background: var(--yellow-dark); }
.btn-cancel { width: 100%; background: transparent; color: #666; font-size: .85rem; border: none; padding: .5rem; cursor: pointer; margin-top: .8rem; transition: color .2s; }
.btn-cancel:hover { color: var(--cream); }

.admin-panel { display: none; position: fixed; inset: 0; z-index: 999; background: #0d0d0d; overflow-y: auto; }
.admin-panel.open { display: block; }
.admin-topbar { background: var(--black); border-bottom: 2px solid var(--yellow); padding: 0 2rem; height: 58px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
.offline-indicator { color: #e74c3c; font-size: .82rem; margin-right: 1rem; font-weight: 600; }
.unsaved-indicator { color: #e74c3c; font-size: .82rem; margin-right: 1rem; font-weight: 600; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.admin-topbar-title { font: 900 1.3rem/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--cream); }
.admin-topbar-title span { color: var(--yellow); }
.btn-logout { background: transparent; color: #888; border: 1px solid #333; border-radius: var(--radius); padding: .35rem 1rem; font-size: .82rem; cursor: pointer; transition: all .2s; }
.btn-logout:hover { color: var(--cream); border-color: #666; }
.admin-body { max-width: 960px; margin: 0 auto; padding: 2rem; }
.admin-tabs { display: flex; gap: .5rem; margin-bottom: 2rem; border-bottom: 1px solid #222; flex-wrap: wrap; }
.admin-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .6rem 1.2rem; color: #666; font: 700 1rem/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; transition: all .2s; }
.admin-tab.active { color: var(--yellow); border-bottom-color: var(--yellow); }
.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; }

.admin-prod-toolbar { display: flex; gap: .8rem; margin-bottom: 1.2rem; flex-wrap: wrap; align-items: center; }
#prod-count-bar { color: #888; font-size: .82rem; margin-bottom: .8rem; }
.admin-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.admin-prod-card { background: var(--steel); border: 1px solid #2a2a2a; border-radius: 6px; overflow: hidden; }
.admin-prod-card--warn { border-color: #e67e22; }
.admin-prod-card--error { border-color: #e74c3c; }
.admin-input--error { border-color: #e74c3c !important; }
.admin-input--error:focus { border-color: #ff6b6b !important; }
.admin-prod-card-header { background: var(--black); padding: .8rem 1rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #2a2a2a; }
.admin-prod-card-title { font: 700 1rem/1.2 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--yellow); }
.admin-prod-card-body { padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.admin-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #999; display: block; margin-bottom: .25rem; }
.admin-input { width: 100%; background: var(--black); border: 1px solid #333; border-radius: var(--radius); padding: .5rem .7rem; color: var(--cream); font-size: .88rem; outline: none; transition: border-color .2s; }
.admin-input:focus { border-color: var(--yellow); }
.admin-textarea { width: 100%; background: var(--black); border: 1px solid #333; border-radius: var(--radius); padding: .5rem .7rem; color: var(--cream); font-size: .85rem; outline: none; resize: vertical; min-height: 70px; transition: border-color .2s; font-family: inherit; }
.admin-textarea:focus { border-color: var(--yellow); }
.admin-search { background: var(--black); border: 1px solid #333; border-radius: var(--radius); padding: .5rem .7rem; color: var(--cream); font-size: .88rem; outline: none; min-width: 200px; transition: border-color .2s; }
.admin-search:focus { border-color: var(--yellow); }
.btn-del { background: none; border: none; color: #e74c3c; cursor: pointer; font-size: 1rem; padding: .2rem .4rem; transition: color .2s; }
.btn-del:hover { color: #ff6b6b; }
.btn-add { background: var(--steel2); color: var(--cream); font: 700 .9rem/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: .5rem 1.2rem; border: 1px solid #333; border-radius: var(--radius); cursor: pointer; transition: all .2s; }
.btn-add:hover { border-color: var(--yellow); color: var(--yellow); }
.btn-add--admin { background: #1a5f2a; border-color: #27ae60; }
.btn-add--admin:hover { border-color: #27ae60; color: #27ae60; }
.img-preview-wrap { position: relative; width: 100%; height: 120px; background: var(--black); border: 1px dashed #333; border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s; }
.img-preview-wrap:hover { border-color: var(--yellow); }
.img-preview-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img-preview-label { font-size: .72rem; color: #555; text-align: center; margin-top: .25rem; }
.file-input-hidden { display: none; }
.admin-save-bar { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #222; }
.btn-save { background: var(--yellow); color: var(--black); font: 700 1rem/1 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: .65rem 1.8rem; border: none; border-radius: var(--radius); cursor: pointer; transition: background .2s; }
.btn-save:hover { background: var(--yellow-dark); }
.btn-save--mt { margin-top: 1rem; }
.btn-save--sm { margin-left: .5rem; }
.admin-search--wide { min-width: 220px; }
.save-msg { font-size: .85rem; color: #4caf50; display: none; }
.save-msg.show { display: inline; }

.bulk-overlay { display: none; position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.88); backdrop-filter: blur(6px); align-items: center; justify-content: center; }
.bulk-overlay.open { display: flex; }
.bulk-box { background: var(--steel); border: 1px solid #333; border-top: 3px solid var(--yellow); border-radius: 6px; padding: 2.5rem; width: 100%; max-width: 560px; }
.bulk-box h3 { font: 900 1.5rem/1.1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--cream); margin-bottom: .4rem; }
.bulk-box p { font-size: .88rem; color: #888; margin-bottom: 1.5rem; }
.bulk-drop { background: var(--black); border: 2px dashed #333; border-radius: var(--radius); padding: 2.5rem; text-align: center; color: #aaa; cursor: pointer; transition: border-color .2s; }
.bulk-drop:hover { border-color: var(--yellow); color: var(--cream); }
.bulk-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.bulk-item { background: var(--steel2); border: 1px solid #333; border-radius: var(--radius); padding: .4rem .7rem; font-size: .82rem; color: var(--cream); }
.bulk-item--processing { border-color: #666; color: #aaa; }
.bulk-item--success { border-color: #27ae60; color: #27ae60; }
.bulk-item--error { border-color: #e74c3c; color: #e74c3c; }
.bulk-progress-text { font-size: .8rem; color: #888; margin-top: .4rem; }
.bulk-bar-wrap { width: 100%; height: 6px; background: var(--black); border-radius: 3px; margin-top: 1rem; overflow: hidden; }
.bulk-bar { height: 100%; background: var(--yellow); width: 0%; transition: width .3s; }
.bulk-names-label { margin-top: .8rem; font-size: .9rem; color: #ccc; display: block; }

.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.color-field { display: flex; align-items: center; gap: .8rem; background: var(--steel); border: 1px solid #2a2a2a; border-radius: var(--radius); padding: .8rem 1rem; }
.color-field input[type="color"] { width: 40px; height: 40px; border: none; border-radius: 4px; cursor: pointer; background: none; padding: 0; }
.color-field-info { flex: 1; }
.color-field-name { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: #888; }
.color-field-hex { font-family: monospace; font-size: .9rem; color: var(--cream); }

.btn-restore-colors { background: var(--steel2); color: #aaa; border: 1px solid #333; border-radius: 4px; padding: .6rem 1.2rem; cursor: pointer; font-size: .9rem; transition: all .2s; }
.btn-restore-colors:hover { color: var(--cream); border-color: #666; }

.config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.config-field-full { grid-column: 1 / -1; }
.admin-mb { margin-bottom: 1rem; }
.config-field { display: flex; flex-direction: column; gap: .3rem; }
.admin-section { margin-bottom: 2rem; }
.admin-section-header { font: 900 1rem/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--yellow); letter-spacing: .12em; border-bottom: 1px solid #222; padding-bottom: .5rem; margin-bottom: 1rem; margin-top: 3rem; }
.admin-section-header:first-of-type { margin-top: 0; }

.admin-desc { color: #888; font-size: .9rem; margin-bottom: 1.5rem; }

.trans-list { max-height: 500px; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; }
.trans-item { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; background: #0a0a0a; padding: .7rem; border-radius: 4px; border: 1px solid #222; }
.trans-item label { font-size: .7rem; color: #888; text-transform: uppercase; }
.trans-item input { font-size: .85rem; }
.trans-key { grid-column: 1/-1; font-size: .75rem; color: #aaa; margin-top: .3rem; }
.admin-history { max-height: 300px; overflow-y: auto; background: #0a0a0a; border: 1px solid #222; border-radius: 4px; padding: 1rem; }
.admin-empty { color: #666; font-size: .85rem; }

.ventaja-card { background: var(--black); border-left: 3px solid var(--yellow); padding: 1rem; border-radius: 4px; margin-bottom: 1rem; }
.ventaja-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.ventaja-card-num { font-weight: bold; color: var(--yellow); }
.btn-remove-card { background: #c0392b; color: #fff; border: none; padding: .3rem .6rem; border-radius: 4px; cursor: pointer; font-size: .8rem; }
.btn-remove-card:hover { background: #e74c3c; }

.wysiwyg-toolbar { display: flex; gap: .3rem; margin-bottom: .3rem; flex-wrap: wrap; }
.wysiwyg-btn { background: var(--steel); border: 1px solid #333; color: var(--cream); padding: .3rem .6rem; border-radius: var(--radius); cursor: pointer; font-size: .8rem; transition: all .2s; }
.wysiwyg-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.wysiwyg { min-height: 70px; line-height: 1.5; }
.wysiwyg:focus { border-color: var(--yellow); outline: none; }

.btn-lang { background: var(--steel2); color: var(--cream); border: 1px solid #333; border-radius: var(--radius); padding: .4rem .8rem; font: 700 .85rem/1 'Barlow Condensed', sans-serif; letter-spacing: .06em; cursor: pointer; transition: all .2s; }
.btn-lang:hover { border-color: var(--yellow); color: var(--yellow); }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.dash-card { background: var(--steel); border: 1px solid #2a2a2a; border-radius: var(--radius); padding: 1.2rem; text-align: center; }
.dash-value { font: 900 2.5rem/1 'Barlow Condensed', sans-serif; color: var(--yellow); }
.dash-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: #aaa; margin-top: .3rem; }
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.chart-box { background: var(--steel); border: 1px solid #2a2a2a; border-radius: var(--radius); padding: 1.2rem; }
.chart-box h3 { font: 700 1.1rem/1.2 'Barlow Condensed', sans-serif; text-transform: uppercase; margin-bottom: 1rem; color: var(--cream); }

.product-modal { visibility: hidden; opacity: 0; position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.85); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 1rem; transition: opacity .2s, visibility .2s; }
.product-modal.open { visibility: visible; opacity: 1; }
.product-modal-content { background: var(--steel); border: 1px solid #333; border-top: 3px solid var(--yellow); border-radius: 6px; width: 100%; max-width: 800px; max-height: 90vh; overflow-y: auto; position: relative; transform: translateY(10px); transition: transform .2s; }
.product-modal.open .product-modal-content { transform: translateY(0); }
.product-modal-close { position: absolute; top: .8rem; right: .8rem; background: var(--black); border: 1px solid #333; color: var(--cream); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; z-index: 2; }
.product-modal-body { display: grid; grid-template-columns: 1fr 1fr; }
.product-modal-image { background: #0a0a0a; min-height: 260px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-modal-image img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; }
.product-modal-info { padding: 1.8rem; display: flex; flex-direction: column; gap: .8rem; }
.product-modal-tag { background: var(--yellow); color: var(--black); font: 700 .75rem/1 'Barlow Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 2px; width: fit-content; }
.product-modal-name { font: 900 1.6rem/1.1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--cream); }
.product-modal-desc { font-size: .95rem; color: #bbb; line-height: 1.6; }
.product-modal-actions { display: flex; gap: .8rem; margin-top: .5rem; flex-wrap: wrap; }
.product-modal-image picture { width: 100%; height: 100%; }
.product-modal-image picture img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; }
.product-modal-specs { background: #111; border-left: 2px solid var(--yellow); padding: .8rem 1rem; border-radius: 4px; }
.product-modal-specs-title { font: 700 .75rem/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--yellow); letter-spacing: .08em; margin-bottom: .3rem; }
.product-modal-specs-text { font-size: .85rem; color: #ccc; line-height: 1.55; white-space: pre-line; }
@media (max-width: 768px) {
  .product-modal-body { grid-template-columns: 1fr; }
  .product-modal-image { min-height: 220px; }
  .navbar-menu, .btn-admin { display: none; }
  /* En mobile mantenemos visible el botón de contacto (WhatsApp) y el de
     idioma dentro del navbar; solo se oculta ADMIN. El menú hamburguesa
     abre la navegación principal. */
  .navbar-actions { display: flex; }
  .hamburger { display: flex; }
  .navbar { padding: 12px 16px; height: var(--nav-h); --nav-h: 58px; }
  .navbar-actions { gap: 8px; }
  .btn-contact-nav { padding: .5rem .7rem; font-size: .7rem; letter-spacing: .08em; }
  .btn-lang { padding: .4rem .6rem; font-size: .75rem; }
  /* Mobile/tablet chica: proporción más alta (16/9) para que el hero no
     quede ni muy alto ni muy achatado; el texto de fondo baja de tamaño
     y se mantiene dentro del contenedor (sin desborde ni "TAC" cortado). */
  .hero { aspect-ratio: 16/9; min-height: 480px; }
  .hero-content { grid-template-columns: 1fr; padding: 3rem 1.5rem; }
  .hero-bg-right { width: 100%; clip-path: none; }
  /* Mobile: las tarjetas de stats se apilan en columna y el texto interno
     hace wrap para no forzar scroll horizontal (el overflow venía de
     .stat-label/.stat-number midiendo ~365px). */
  .hero-stats { flex-direction: column; flex-wrap: nowrap; gap: 1rem; justify-content: flex-start; }
  .stat-card { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; }
  .stat-number, .stat-label { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
  .hero-logo-bg { font-size: 4rem; bottom: 20px; left: 20px; right: auto; max-width: calc(100% - 20px); }
  .info-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-actions { justify-content: center; }
  .color-grid, .config-grid { grid-template-columns: 1fr; }
  .admin-prod-grid { grid-template-columns: 1fr; }
  .navbar-menu.open { display: flex; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0; background: #0b0b0b; border-bottom: 2px solid var(--yellow); padding: 1rem 16px; gap: 1.2rem; }
  .map-wrap { min-height: 280px; }
}
/* Tablet (769px a 1024px): proporción intermedia (16/10) para balancear
   altura/anchura sin achatarse como en 21/9. */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero { aspect-ratio: 16/10; min-height: 560px; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .admin-prod-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-body { padding: 1.5rem; }
}

.backToTop { transition: opacity .2s, transform .2s; }
.backToTop:hover { transform: translateY(-2px); }