/* ==========================================================
   DIRECCIONARIO — Estilos generales v2
   Paleta ampliada: azul petróleo + naranja + coral + teal
   Con gradientes, glassmorphism, animaciones y micro-interacciones
   ========================================================== */

:root{
  --azul-900: #16303b;
  --azul-800: #1f4552;
  --azul-700: #2c6070;
  --azul-600: #3a7d8e;
  --azul-500: #4f9db0;
  --azul-100: #e7f3f5;

  --naranja-700: #d67a0f;
  --naranja-600: #e88f1f;
  --naranja-500: #f5a623;
  --naranja-400: #ffb84d;
  --naranja-100: #fdf1de;

  --coral-500: #ff6b6b;
  --coral-100: #ffe8e8;
  --teal-500: #17b696;
  --teal-100: #e3faf3;
  --violeta-500: #8b6bf0;
  --violeta-100: #efe9fe;

  --gris-900: #171b1d;
  --gris-700: #4b5559;
  --gris-400: #8a9598;
  --gris-200: #e4e9ea;
  --gris-100: #f5f7f8;
  --blanco: #ffffff;
  --rojo: #d64545;
  --verde: #2fa66a;

  --radio: 18px;
  --radio-sm: 10px;
  --sombra: 0 4px 20px rgba(22,48,59,.08);
  --sombra-hover: 0 16px 40px rgba(22,48,59,.18);
  --sombra-color: 0 10px 30px rgba(245,166,35,.25);
  --fuente: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --grad-hero: linear-gradient(135deg, #16303b 0%, #1f4552 35%, #2c6070 65%, #3a7d8e 100%);
  --grad-naranja: linear-gradient(135deg, #f5a623 0%, #ff8a3d 100%);
  --grad-naranja-boton: linear-gradient(135deg, #c96b0d 0%, #a8560a 100%);
  --grad-coral: linear-gradient(135deg, #ff6b6b 0%, #f5a623 100%);
  --grad-teal: linear-gradient(135deg, #17b696 0%, #4f9db0 100%);
  --grad-violeta: linear-gradient(135deg, #8b6bf0 0%, #ff6b6b 100%);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--fuente);
  color: var(--gris-900);
  background: var(--gris-100);
  line-height:1.5;
  overflow-x:hidden;
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:1180px; margin:0 auto; padding:0 20px; position:relative; }

::selection{ background: var(--naranja-400); color:#fff; }

/* ---------------- Scroll reveal ---------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.visible{ opacity:1; transform:translateY(0); }
.reveal-stagger.visible > *{ animation:fadeUp .6s ease forwards; }
@keyframes fadeUp{ from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }

/* ---------------- Header ---------------- */
.site-header{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid var(--gris-200);
  position: sticky; top:0; z-index:100;
  transition: box-shadow .2s ease;
}
.site-header.con-sombra{ box-shadow:0 6px 24px rgba(22,48,59,.08); }
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; padding-bottom:12px; gap:20px;
}
.logo img{ height:38px; width:auto; transition: transform .25s ease; }
.logo:hover img{ transform: scale(1.05) rotate(-1deg); }
.nav-principal{ display:flex; align-items:center; gap:22px; }
.nav-principal a:not(.btn){
  font-weight:500; font-size:.95rem; color: var(--azul-800);
  position:relative; padding:4px 0;
}
.nav-principal a:not(.btn)::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background: var(--grad-naranja); border-radius:2px; transition:width .25s ease;
}
.nav-principal a:not(.btn):hover{ color: var(--naranja-600); }
.nav-principal a:not(.btn):hover::after{ width:100%; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:999px; font-weight:600; font-size:.9rem;
  border:none; transition: all .22s cubic-bezier(.2,.8,.3,1); position:relative; overflow:hidden;
}
.btn-primario{ background: var(--grad-naranja-boton); color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.2); box-shadow:0 6px 16px rgba(169,86,10,.35); }
.btn-primario:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 12px 28px rgba(245,166,35,.45); }
.btn-primario:active{ transform:translateY(0) scale(.98); }
.btn-outline{ background:transparent; border:1.5px solid var(--azul-700); color:var(--azul-700); }
.btn-outline:hover{ background:var(--azul-700); color:#fff; transform:translateY(-2px); }
.btn-secundario{ background: var(--grad-teal); color:#fff; box-shadow:0 6px 16px rgba(23,182,150,.3); }
.btn-secundario:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(23,182,150,.4); }
.btn-peligro{ background:linear-gradient(135deg,#ff6b6b,#d64545); color:#fff; }
.btn-peligro:hover{ transform:translateY(-2px); }
.btn-sm{ padding:7px 16px; font-size:.82rem; }
.menu-toggle{ display:none; background:none; border:none; font-size:1.6rem; color:var(--azul-800); }

/* Ripple effect on buttons */
.btn .ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.5);
  transform:scale(0); animation:ripple .55s ease-out; pointer-events:none;
}
@keyframes ripple{ to{ transform:scale(3); opacity:0; } }

/* ---------------- Hero / búsqueda ---------------- */
.hero{
  background: var(--grad-hero);
  color:#fff; padding:74px 0 110px; position:relative; overflow:hidden;
}
.hero .blob{
  position:absolute; border-radius:50%; filter:blur(2px); opacity:.5;
  animation: flotar 9s ease-in-out infinite;
}
.hero .blob-1{ width:280px; height:280px; right:-60px; top:-80px; background:radial-gradient(circle, rgba(245,166,35,.55), transparent 70%); }
.hero .blob-2{ width:220px; height:220px; left:-70px; bottom:-60px; background:radial-gradient(circle, rgba(23,182,150,.4), transparent 70%); animation-delay:-3s; }
.hero .blob-3{ width:160px; height:160px; right:20%; bottom:20%; background:radial-gradient(circle, rgba(139,107,240,.35), transparent 70%); animation-delay:-6s; }
@keyframes flotar{ 0%,100%{transform:translateY(0) translateX(0);} 50%{transform:translateY(-22px) translateX(14px);} }

.hero .badge-nuevo{
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3); padding:6px 16px; border-radius:999px;
  font-size:.8rem; font-weight:600; margin-bottom:18px; backdrop-filter:blur(6px);
}
.hero .badge-nuevo i{ color: var(--naranja-400); }
.hero h1{ font-size:2.6rem; font-weight:700; margin:0 0 12px; max-width:640px; position:relative; z-index:2; }
.hero h1 .resaltado{
  background: var(--grad-naranja); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ font-size:1.12rem; opacity:.92; max-width:560px; margin:0 0 32px; position:relative; z-index:2; }
.buscador-hero{
  background:rgba(255,255,255,.97); border-radius:var(--radio); padding:14px; box-shadow:var(--sombra-hover);
  display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:2; max-width:820px;
}
.buscador-hero input, .buscador-hero select{
  flex:1; min-width:160px; border:1.5px solid var(--gris-200); border-radius:var(--radio-sm);
  padding:12px 14px; font-size:.95rem; color:var(--gris-900); background:var(--gris-100);
  transition:border-color .2s ease, background .2s ease;
}
.buscador-hero input:focus, .buscador-hero select:focus{ border-color:var(--naranja-500); background:#fff; }
.buscador-hero button{
  background: var(--grad-naranja-boton); color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.2); border:none; border-radius:var(--radio-sm);
  padding:12px 28px; font-weight:600; white-space:nowrap; transition:transform .2s ease, box-shadow .2s ease;
}
.buscador-hero button:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(245,166,35,.4); }
.cerca-mio{
  margin-top:16px; display:inline-flex; align-items:center; gap:8px; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  padding:9px 18px; border-radius:999px; font-size:.85rem; position:relative; z-index:2;
  transition:all .2s ease;
}
.cerca-mio:hover{ background:rgba(255,255,255,.26); transform:translateY(-1px); }
.cerca-mio i{ color:var(--naranja-400); animation:pulso 1.8s ease-in-out infinite; }
@keyframes pulso{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.18);} }

/* ---------------- Buscador grande (home) ---------------- */
.buscador-grande{ padding:10px; gap:8px; }
.buscador-input-wrap{
  flex:2; min-width:220px; position:relative; display:flex; align-items:center;
  background:var(--gris-100); border-radius:var(--radio-sm); transition:box-shadow .25s ease, background .25s ease;
}
.buscador-input-wrap:focus-within{ background:#fff; box-shadow:0 0 0 4px var(--naranja-100), 0 4px 14px rgba(245,166,35,.18); }
.buscador-icono{ position:absolute; left:16px; color:var(--naranja-500); font-size:1.05rem; pointer-events:none; }
.buscador-input-principal{
  width:100%; border:none; background:transparent; padding:15px 16px 15px 44px; font-size:1.02rem; font-weight:500;
  color:var(--gris-900);
}
.buscador-input-principal:focus{ outline:none; }
.buscador-input-principal::placeholder{ color:var(--gris-400); font-weight:400; }

.buscador-pistas{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; position:relative; z-index:2;
  font-size:.85rem; color:rgba(255,255,255,.85);
}
.pista-tipo{
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  padding:6px 14px; border-radius:999px; font-weight:600; backdrop-filter:blur(4px);
}
.pista-tipo i{ color:var(--naranja-400); }
.pista-separador{ opacity:.6; font-weight:700; }
.pista-ejemplos{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; opacity:.9; }
.pista-chip{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:999px;
  padding:4px 12px; font-size:.82rem; font-weight:600; cursor:pointer; transition:all .18s ease;
}
.pista-chip:hover{ background:var(--naranja-500); border-color:var(--naranja-500); transform:translateY(-2px); }
@media(max-width:640px){ .buscador-pistas{ font-size:.78rem; } }

/* ---------------- Combo de autocompletado instantáneo ---------------- */
.combo-buscador{ position:relative; flex:1; min-width:130px; }
.combo-buscador input[type="text"]{ width:100%; }
.combo-dropdown{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border-radius:var(--radio-sm);
  box-shadow:var(--sombra-hover); max-height:260px; overflow-y:auto; z-index:50; display:none;
  border:1px solid var(--gris-200);
}
.combo-dropdown.abierto{ display:block; }
.combo-opcion{
  padding:10px 14px; font-size:.88rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  transition:background .12s ease;
}
.combo-opcion:hover, .combo-opcion.resaltada{ background:var(--naranja-100); }
.combo-opcion small{ color:var(--gris-400); font-size:.76rem; }
.combo-vacio{ padding:12px 14px; font-size:.85rem; color:var(--gris-400); }

/* ---------------- Rubros grid ---------------- */
.seccion{ padding:64px 0; }
.seccion-titulo{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:28px; }
.seccion-titulo h2{ font-size:1.7rem; margin:0; color:var(--azul-900); position:relative; display:inline-block; }
.seccion-titulo h2::after{
  content:''; position:absolute; left:0; bottom:-8px; width:46px; height:4px; border-radius:4px;
  background: var(--grad-naranja);
}
.seccion-titulo a{ color:var(--naranja-600); font-weight:600; font-size:.9rem; transition:transform .2s ease; display:inline-block; }
.seccion-titulo a:hover{ transform:translateX(4px); }

.rubros-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:18px;
}
.rubro-card{
  background:#fff; border-radius:var(--radio); padding:26px 16px; text-align:center;
  box-shadow:var(--sombra); transition: all .25s cubic-bezier(.2,.8,.3,1); border:1px solid transparent;
  position:relative; overflow:hidden;
}
.rubro-card::before{
  content:''; position:absolute; inset:0; background:var(--grad-naranja); opacity:0;
  transition:opacity .25s ease; z-index:0;
}
.rubro-card:hover{ box-shadow:var(--sombra-color); transform:translateY(-6px) scale(1.02); }
.rubro-card:hover::before{ opacity:.06; }
.rubro-card .icono{
  width:58px; height:58px; border-radius:50%; background:var(--naranja-100); color:var(--naranja-600);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:1.5rem;
  position:relative; z-index:1; transition: all .3s ease;
}
.rubro-card:nth-child(2n) .icono{ background:var(--teal-100); color:var(--teal-500); }
.rubro-card:nth-child(3n) .icono{ background:var(--violeta-100); color:var(--violeta-500); }
.rubro-card:nth-child(4n) .icono{ background:var(--coral-100); color:var(--coral-500); }
.rubro-card:hover .icono{ transform:rotate(-8deg) scale(1.12); }
.rubro-card span{ font-weight:600; color:var(--azul-800); font-size:.92rem; position:relative; z-index:1; }

/* ---------------- Cards de empresa ---------------- */
.empresas-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:22px;
}
.empresa-card{
  background:#fff; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra);
  transition: all .28s cubic-bezier(.2,.8,.3,1); display:flex; flex-direction:column;
}
.empresa-card:hover{ box-shadow:var(--sombra-hover); transform:translateY(-6px); }
.empresa-card .imagen{
  height:175px; background:var(--gris-200) center/cover no-repeat; position:relative; overflow:hidden;
}
.empresa-card .imagen::after{
  content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(22,48,59,.45) 100%);
}
.empresa-card:hover .imagen img, .empresa-card:hover .imagen{ background-size:112%; }
.empresa-card .imagen{ transition: background-size .4s ease; }
.empresa-card .badge-rubro{
  position:absolute; top:12px; left:12px; background:rgba(255,255,255,.92); color:var(--azul-800);
  font-size:.72rem; padding:5px 12px; border-radius:999px; font-weight:700; z-index:2;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.empresa-card .contenido{ padding:18px 20px; flex:1; display:flex; flex-direction:column; gap:7px; }
.empresa-card h3{ margin:0; font-size:1.08rem; color:var(--azul-900); }
.empresa-card .ubicacion{ font-size:.82rem; color:var(--gris-700); display:flex; gap:6px; align-items:center; }
.empresa-card .ubicacion i{ color:var(--naranja-500); }
.empresa-card .estrellas{ color:var(--naranja-500); font-size:.85rem; }
.empresa-card .distancia{ font-size:.78rem; color:var(--teal-500); font-weight:700; display:flex; align-items:center; gap:5px; }
.empresa-card .ver-mas{
  margin-top:auto; padding-top:10px; font-weight:600; color:var(--naranja-600); font-size:.85rem;
  display:flex; align-items:center; gap:6px; transition:gap .2s ease;
}
.empresa-card:hover .ver-mas{ gap:10px; }

/* ---------------- Ficha de empresa ---------------- */
.ficha-header{
  background: var(--grad-hero);
  color:#fff; padding:44px 0 66px; position:relative; overflow:hidden;
}
.ficha-header::before{
  content:''; position:absolute; width:260px; height:260px; border-radius:50%; right:-60px; top:-100px;
  background:radial-gradient(circle, rgba(245,166,35,.4), transparent 70%);
}
.ficha-header .breadcrumb{ font-size:.82rem; opacity:.8; margin-bottom:14px; position:relative; }
.ficha-header h1{ font-size:2.1rem; margin:0 0 8px; position:relative; }
.ficha-header .meta{ display:flex; flex-wrap:wrap; gap:18px; font-size:.9rem; opacity:.95; margin-top:12px; position:relative; }
.ficha-header .meta span{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.1); padding:6px 14px; border-radius:999px; }

.ficha-body{ margin-top:-40px; }
.ficha-grid{ display:grid; grid-template-columns:2fr 1fr; gap:26px; align-items:start; }
@media(max-width:900px){ .ficha-grid{ grid-template-columns:1fr; } }

.card-blanca{
  background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); padding:26px; margin-bottom:22px;
  transition: box-shadow .25s ease;
}
.card-blanca:hover{ box-shadow:var(--sombra-hover); }
.galeria{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:8px; border-radius:var(--radio); overflow:hidden; height:340px; }
.galeria img{ width:100%; height:100%; object-fit:cover; cursor:pointer; transition:transform .4s ease; }
.galeria a{ overflow:hidden; display:block; }
.galeria a:hover img{ transform:scale(1.08); }
.galeria a:first-child img{ grid-row:1/3; }
@media(max-width:640px){ .galeria{ grid-template-columns:1fr 1fr; height:auto; } .galeria a:first-child img{ grid-column:1/3; height:220px; } }

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  background:var(--azul-100); color:var(--azul-800); font-size:.82rem; padding:7px 15px; border-radius:999px;
  font-weight:600; transition:transform .18s ease;
}
.chip:hover{ transform:translateY(-2px); }
.chip-pago{ background:var(--teal-100); color:var(--teal-500); }
.chip-quitable{ display:inline-flex; align-items:center; gap:8px; }
.chip-quitar{ background:none; border:none; color:inherit; opacity:.6; cursor:pointer; padding:0; display:inline-flex; }
.chip-quitar:hover{ opacity:1; }

.contacto-lista{ display:flex; flex-direction:column; gap:10px; }
.contacto-item{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--radio-sm); background:var(--gris-100);
  transition: all .2s ease;
}
.contacto-item:hover{ background:var(--naranja-100); transform:translateX(4px); }
.contacto-item .icono{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
.icono-whatsapp{ background:#e7f9ef; color:#25b866; }
.icono-tel{ background:var(--azul-100); color:var(--azul-700); }
.icono-web{ background:var(--naranja-100); color:var(--naranja-600); }
.redes-sociales{ display:flex; gap:12px; margin-top:12px; }
.redes-sociales a{
  width:40px; height:40px; border-radius:50%; background:var(--azul-800); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:.22s ease;
}
.redes-sociales a:hover{ background: var(--grad-coral); transform:translateY(-3px) rotate(-6deg); }

.horario-tabla{ width:100%; border-collapse:collapse; font-size:.9rem; }
.horario-tabla td{ padding:8px 4px; border-bottom:1px solid var(--gris-200); }
.horario-tabla td:first-child{ font-weight:600; color:var(--azul-800); text-transform:capitalize; width:40%; }
.horario-tabla tr:hover{ background:var(--gris-100); }

#mapa-ficha{ width:100%; height:260px; border-radius:var(--radio); }

.video-embed{ position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:var(--radio); }
.video-embed iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* ---------------- Reseñas ---------------- */
.resena{ border-bottom:1px solid var(--gris-200); padding:18px 0; }
.resena:last-child{ border-bottom:none; }
.resena .cabecera{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.resena .autor{ font-weight:600; color:var(--azul-900); }
.resena .fecha{ font-size:.78rem; color:var(--gris-400); }
.estrellas-input{ display:flex; gap:6px; font-size:1.6rem; color:var(--gris-200); cursor:pointer; }
.estrellas-input i{ transition:transform .15s ease; }
.estrellas-input i:hover{ transform:scale(1.2); }
.estrellas-input i.activa{ color:var(--naranja-500); }

/* ---------------- Formularios ---------------- */
.form-grupo{ margin-bottom:16px; }
.form-grupo label{ display:block; font-weight:600; font-size:.88rem; color:var(--azul-800); margin-bottom:6px; }
.form-grupo .ayuda{ font-size:.78rem; color:var(--gris-400); margin-top:4px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=time], textarea, select{
  width:100%; padding:11px 14px; border:1.5px solid var(--gris-200); border-radius:var(--radio-sm);
  font-size:.92rem; font-family:inherit; background:#fff; color:var(--gris-900); transition:border-color .2s ease, box-shadow .2s ease;
}
textarea{ resize:vertical; min-height:100px; }
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--naranja-500); box-shadow:0 0 0 4px var(--naranja-100); }
.fila-doble{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fila-triple{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media(max-width:640px){ .fila-doble, .fila-triple{ grid-template-columns:1fr; } }

.grupo-dinamico{ border:1.5px dashed var(--gris-200); border-radius:var(--radio-sm); padding:14px; margin-bottom:14px; transition:border-color .2s ease; }
.grupo-dinamico:hover{ border-color:var(--naranja-400); }
.grupo-dinamico .fila-item{ display:flex; gap:10px; margin-bottom:10px; align-items:center; }
.grupo-dinamico .fila-item input, .grupo-dinamico .fila-item select{ flex:1; }
.btn-quitar{ background:linear-gradient(135deg,#ff6b6b,#d64545); color:#fff; border:none; border-radius:50%; width:32px; height:32px; flex-shrink:0; transition:transform .18s ease; }
.btn-quitar:hover{ transform:rotate(90deg) scale(1.1); }
.btn-agregar{ background:var(--azul-100); color:var(--azul-800); border:none; padding:9px 18px; border-radius:var(--radio-sm); font-weight:600; font-size:.85rem; transition:all .2s ease; }
.btn-agregar:hover{ background:var(--grad-teal); color:#fff; transform:translateY(-2px); }

.upload-zona{ border:2px dashed var(--gris-200); border-radius:var(--radio); padding:32px; text-align:center; color:var(--gris-400); transition:border-color .2s ease, background .2s ease; }
.upload-zona:hover{ border-color:var(--naranja-400); background:var(--naranja-100); }
.previews-imagenes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-top:14px; }
.preview-img{ position:relative; border-radius:var(--radio-sm); overflow:hidden; height:100px; }
.preview-img img{ width:100%; height:100%; object-fit:cover; }
.preview-img .quitar{ position:absolute; top:4px; right:4px; background:rgba(214,69,69,.9); color:#fff; border:none; border-radius:50%; width:24px; height:24px; font-size:.8rem; transition:transform .18s ease; }
.preview-img .quitar:hover{ transform:scale(1.15); }

/* ---------------- Panel de empresa ---------------- */
.panel-layout{ display:grid; grid-template-columns:220px 1fr; gap:24px; }
@media(max-width:800px){ .panel-layout{ grid-template-columns:1fr; } }
.panel-menu{ background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); padding:16px; height:fit-content; }
.panel-menu a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--radio-sm); font-weight:500; color:var(--azul-800); margin-bottom:4px; transition:all .2s ease; }
.panel-menu a:hover{ background:var(--azul-100); transform:translateX(3px); }
.panel-menu a.activo{ background:var(--grad-naranja-boton); color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.2); }
.tabla-panel{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); }
.tabla-panel th, .tabla-panel td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--gris-200); font-size:.9rem; }
.tabla-panel th{ background:var(--azul-100); color:var(--azul-900); font-weight:700; }
.tabla-panel tr{ transition:background .2s ease; }
.tabla-panel tbody tr:hover{ background:var(--gris-100); }
.badge-estado{ padding:5px 12px; border-radius:999px; font-size:.75rem; font-weight:700; }
.badge-activo{ background:#e7f9ef; color:#25a866; }
.badge-inactivo{ background:#fbe9e9; color:var(--rojo); }

/* ---------------- Alertas ---------------- */
.alerta{ padding:15px 20px; border-radius:var(--radio-sm); margin-bottom:18px; font-size:.9rem; font-weight:500; display:flex; align-items:center; gap:10px; animation:fadeUp .4s ease; }
.alerta-exito{ background:#e7f9ef; color:#1c8a52; border:1px solid #bdeacf; }
.alerta-error{ background:#fbe9e9; color:#b23838; border:1px solid #f3c6c6; }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--azul-900); color:#cfe0e6; padding:46px 0 20px; margin-top:64px; position:relative; overflow:hidden; }
.site-footer::before{
  content:''; position:absolute; width:320px; height:320px; border-radius:50%; left:-100px; bottom:-140px;
  background:radial-gradient(circle, rgba(245,166,35,.12), transparent 70%);
}
.site-footer .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.site-footer a{ color:#cfe0e6; transition:color .2s ease; }
.site-footer a:hover{ color:var(--naranja-400); }
.site-footer .rubros-footer{ display:flex; flex-wrap:wrap; gap:14px; font-size:.85rem; }
.site-footer .copy{ width:100%; text-align:center; font-size:.78rem; opacity:.6; margin-top:26px; border-top:1px solid rgba(255,255,255,.1); padding-top:16px; }

/* ---------------- Responsive nav ---------------- */
@media(max-width:820px){
  .nav-principal{
    position:fixed; top:0; right:-280px; width:270px; height:100vh; background:#fff;
    flex-direction:column; align-items:flex-start; padding:80px 24px; box-shadow:-6px 0 24px rgba(0,0,0,.12);
    transition:right .3s cubic-bezier(.2,.8,.3,1); z-index:200;
  }
  .nav-principal.abierto{ right:0; }
  .menu-toggle{ display:block; }
}

.form-auth{ max-width:420px; margin:60px auto; }
.form-auth .card-blanca{ padding:34px; }
.form-auth h1{ text-align:center; color:var(--azul-900); font-size:1.5rem; margin-bottom:24px; }
.enlace-secundario{ text-align:center; margin-top:14px; font-size:.9rem; }
.enlace-secundario a{ color:var(--naranja-600); font-weight:600; }

/* ---------------- CTA final ---------------- */
.cta-final{
  position:relative; overflow:hidden;
  background: linear-gradient(120deg, var(--naranja-100) 0%, #fff 60%);
}
.cta-final::before{
  content:''; position:absolute; width:200px; height:200px; border-radius:50%; right:5%; top:-60px;
  background:radial-gradient(circle, rgba(139,107,240,.15), transparent 70%);
}
.cta-final::after{
  content:''; position:absolute; width:160px; height:160px; border-radius:50%; left:8%; bottom:-60px;
  background:radial-gradient(circle, rgba(23,182,150,.15), transparent 70%);
}