:root{--gap:16px;--radius:16px}
*{box-sizing:border-box}
body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:#f7f7f8;color:#222}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.site-header{background:#fff;border-bottom:1px solid #e5e7eb}
.site-header .logo{font-weight:700;text-decoration:none;color:#111;margin-right:16px;display:inline-block;padding:10px 0}
.site-header nav a{margin:0 8px;text-decoration:none;color:#333}
.site-header nav a.active{font-weight:600}
main{padding:24px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gap)}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);padding:12px;overflow:hidden}
.card img{width:100%;height:160px;object-fit:cover;border-radius:12px}
.meta{color:#666;font-size:12px}
.article .hero{width:100%;max-height:360px;object-fit:cover;border-radius:12px;margin:8px 0}
.article .bajada{font-weight:600}
.site-footer{border-top:1px solid #e5e7eb;background:#fff;padding:16px 0;color:#555;margin-top:24px}

/* Header */
.header-inner{display:flex;align-items:center;justify-content:space-between}
.main-nav a{margin:0 10px;text-decoration:none;color:#333;padding:8px 10px;border-radius:10px}
.main-nav a:hover{background:#f1f5f9}

/* Hero */
.hero{position:relative;background:linear-gradient(180deg,#eef2ff, #ffffff);padding:40px 0 20px}
.hero-content{display:flex;align-items:center;gap:24px}
.hero h1{font-size:28px;margin:0 0 6px}
.hero p{margin:0 0 14px;color:#444}
.hero-actions{display:flex;gap:10px}
.btn{display:inline-block;padding:10px 14px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;text-decoration:none;color:#111}
.btn-ghost{background:transparent}
.btn.full{display:block;text-align:center;margin-top:12px}
.hero-wave{height:16px;background:linear-gradient(90deg,#e2e8f0,#f8fafc)}

/* Layout home */
.home-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
@media (max-width: 900px){ .home-grid{grid-template-columns:1fr} }

/* Cards noticias */
.card-news{display:flex;flex-direction:column;overflow:hidden}
.card-news img{width:100%;height:160px;object-fit:cover}
.card-body{padding:10px}
.card-body h3{margin:6px 0 6px;font-size:18px}
.tag{display:inline-block;font-size:12px;padding:2px 8px;border:1px solid #e2e8f0;border-radius:999px;color:#475569;margin-bottom:6px}

/* Turnos */
.card-turno .turno-item{display:flex;gap:10px;border-bottom:1px solid #eef1f4;padding:10px 0}
.card-turno .turno-item:last-child{border-bottom:0}
.turno-label{min-width:80px;font-weight:600;color:#334155}
.turno-info small{display:block;color:#475569}

/* Quick links */
.card-quick .quick{display:block;padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;text-decoration:none;color:#111;margin:8px 0}
.card-quick .quick:hover{background:#f8fafc}

.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filter input{flex:1;min-width:180px}

.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filter input{flex:1;min-width:200px}
.card img{width:100%;height:160px;object-fit:cover;border-radius:12px}
.pagination{display:flex;gap:6px;align-items:center;justify-content:center;margin:18px 0}
.pagination .page{display:inline-block;padding:8px 12px;border:1px solid #e2e8f0;border-radius:10px;text-decoration:none;color:#111;background:#fff}
.pagination .page.current{font-weight:700;border-color:#94a3b8}
.pagination .page.disabled{pointer-events:none;opacity:.5}
.pagination .gap{padding:0 4px;color:#64748b}
@media (prefers-color-scheme: dark){
  .pagination .page{background:#0f172a;border-color:#1e293b;color:#e5e7eb}
  .pagination .page.current{border-color:#334155}
}
/* Hero */
.hero.modern{background:linear-gradient(180deg,#eef2ff,#ffffff);border:1px solid #e5e7eb;border-radius:16px;padding:18px;margin-top:12px}
.searchbar{display:flex;gap:8px;margin-top:10px}
.searchbar input{flex:1;padding:10px;border:1px solid #d1d5db;border-radius:10px}
.searchbar button{padding:10px 14px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;cursor:pointer}

/* Layout 2 columnas */
.layout-2col{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-top:16px}
@media (max-width: 900px){ .layout-2col{grid-template-columns:1fr} }

/* Info cards (dólar/clima) */
.info-cards .info-row{display:flex;justify-content:space-between;gap:10px}
.info-title{font-size:12px;color:#64748b}
.info-value{font-size:20px;font-weight:700}

/* Turnos */
.turno-item{display:flex;gap:10px;border-bottom:1px solid #eef1f4;padding:10px 0}
.turno-item:last-child{border-bottom:0}
.turno-label{min-width:80px;font-weight:600;color:#334155}
.turno-info small{display:block;color:#475569}

/* Banners */
.banner{margin:14px 0}
.banner img{width:100%;border-radius:12px;border:1px solid #e5e7eb}

/* Duo cards */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width: 900px){ .duo{grid-template-columns:1fr} }

/* FAB WhatsApp */
.fab-whatsapp{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-size:24px;text-decoration:none;
  background:#25D366;color:#fff;border:2px solid #1fa857;box-shadow:0 6px 18px rgba(0,0,0,.15);z-index:50}

  .share{display:flex;gap:10px;margin-top:12px}

  /* Ficha comercio */
.article h1{margin:8px 0 4px}
.article .meta{color:#64748b}
.grid .card h3{margin:8px 0 4px}
.grid .card p{margin:4px 0}



nav {
  margin-bottom: 20px;         /* espacio debajo */
}

main.container {
  margin-top: 10px; /* por si querés un respiro extra */
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2 columnas iguales */
  gap: 24px;
}

/* ——— Neutralizar cualquier “panel” heredado en los hijos del grid ——— */
.form-grid > * {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ——— Campos de texto anchos dentro de la columna ——— */
.form-fields input[type="text"],
.form-fields input[type="email"],
.form-fields input[type="url"] {
  width: 100%;
}

/* ——— Fila de botones (abajo, ocupa todo el ancho) ——— */
.form-actions {
  grid-column: 1 / -1;              /* ocupa las 2 columnas del grid */
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* Grid principal de 2 columnas para el formulario */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
/* Evitar que los hijos del grid tomen estilo de “card” */
.form-grid>*{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}
/* Ancho de inputs */
.form-fields input[type="text"],
.form-fields input[type="email"],
.form-fields input[type="url"]{width:100%}
/* Fila de botones abajo (ocupa las 2 columnas) */
.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:12px;border:0!important;background:transparent!important;padding:0!important;box-shadow:none!important}

/* Contenedor máximo cómodo centrado (opcional) */
.card { max-width: 1120px; margin-left: auto; margin-right: auto; }

/* Grid de 2 columnas que SIEMPRE llenan el ancho disponible */
.mc-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr)); /* 2 columnas iguales */
  gap: 32px;
  align-items: start;
  width: 100%;
}

/* Anular cualquier “tarjetita” heredada de tu tema */
.mc-grid > *{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Inputs anchos */
.mc-fields input[type="text"],
.mc-fields input[type="email"],
.mc-fields input[type="url"]{
  width: 100%;
}

/* Si por algún motivo siguen siendo textarea, los achicamos */
.mc-fields textarea[name="facebook"],
.mc-fields textarea[name="instagram"]{
  width: 100%;
  height: 42px !important;
  resize: vertical;
}

/* Fila de botones: abajo ocupando las 2 columnas */
.mc-actions{
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* Tarjeta “vigente ahora” verde */
.card-now { background:#ecfdf5; border:1px solid #34d399; }
.card-badge-ok{ display:inline-block; padding:.2rem .5rem; border-radius:999px; font-size:.85rem; background:#10b981; color:#fff; }
.card-badge { display:inline-block; padding:.2rem .5rem; border-radius:999px; font-size:.85rem; background:#e5edff; color:#3b82f6; }

/* ===== Oficios: cards de listado ===== */
.oficio-card .thumb{
  /* “ventana” de la imagen */
  width:100%;
  aspect-ratio: 16 / 9;           /* o 1/1 si preferís cuadrado */
  border-radius: 14px;
  background:#fff;
  overflow:hidden;
  display:block;
}

.oficio-card .thumb img{
  width:100%;
  height:100%;
  object-fit: contain;            /* evita estiramiento (logos quedan bien) */
  /* Si preferís que las fotos cubran sin bandas: usa cover */
  /* object-fit: cover; */
}

/* Ajustá por zona */
.banner-header  { max-width:200px; }
.banner-sidebar { max-width:180px; }
.banner-footer  { max-width:600px; }
.banner-inline  { max-width:250px; }

/* Contenedor en fila */
.banners-wrap {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Forzar tamaño de las imágenes de banners */
.banners-wrap img.banner-img {
  max-height: 60px !important;   /* ajustá el valor */
  height: auto !important;
  width: auto !important;         /* anula width:100% heredados */
  max-width: 100% !important;
  object-fit: contain !important;
  display: block;
}

.banner-img {
  max-height: 60px;
  object-fit: contain;
  margin: 0 6px;
}

/* ---- Iconitos ---- */
.icon {
  width: 22px; height: 22px;
  display:inline-block; vertical-align:-4px;
  margin-right:8px;
}
.icon-lg { width: 28px; height: 28px; vertical-align:-6px; }

/* Titulares con icono */
.h-title {
  display:flex; align-items:center; gap:10px;
}

/* Botones con icono */
.btn .icon { margin-right:6px; }
.icon { vertical-align: -3px; }
.h-title { display:flex; align-items:center; gap:8px; }
.btn svg { vertical-align: -3px; margin-right: 6px; }

/* Grid de 2 columnas en desktop, 1 en mobile */
.rubros-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

/* En pantallas chicas, 1 columna */
@media (max-width: 860px){
  .rubros-grid{ grid-template-columns: 1fr; }
}

/* Sólo para armonizar títulos con ícono */
.h-title{ display:flex; align-items:center; gap:8px; }
.icon{ vertical-align:-3px; }
.btn svg{ vertical-align:-3px; margin-right:6px; }

.grid-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.job-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.job-card h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.job-card .meta {
  font-size: .9rem;
  color: #555;
  margin: 0 0 10px;
}

.job-card p {
  flex-grow: 1;
  margin-bottom: 12px;
}

.job-card .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  background: #f9f9f9;
  display: block;
  margin: 0 auto 8px;
}

.card .no-logo {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 8px;
}
.card-oficio img {
  width: 100%;
  height: 160px;        /* alto fijo, podés subir a 180–200 si querés más grande */
  object-fit: contain;  /* muestra todo sin recortar */
  object-position: center;
  display: block;
  background: #f9fafb;  /* un gris clarito de fondo */
  border-radius: 6px;
  padding: 6px;         /* para que no toque los bordes */
}
.galeria-img {
  width: 100%;
  height: 180px;         /* todas iguales de alto */
  border-radius: 8px;
  background: #f9f9f9;
  object-fit: cover;     /* recorta pero no deforma */
  display: block;
}

  /* Card contenedor */
  .form-card {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:20px;
    box-shadow: 0 2px 6px rgba(16,24,40,.04);
  }

  /* Título + nota */
  .form-head { margin-bottom:12px; }
  .form-head h1 { margin:0 0 6px; font-size:1.4rem; }
  .form-note { color:#64748b; font-size:.92rem; }

  /* Grilla de campos */
  .form-grid {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px 18px;
    margin-top:12px;
  }
  /* En mobile una sola columna */
  @media (max-width: 720px){
    .form-grid { grid-template-columns: 1fr; }
  }

  .field { display:flex; flex-direction:column; gap:6px; }
  .field label { font-weight:600; font-size:.95rem; }
  .req { color:#ef4444; }

  .hint { color:#94a3b8; font-size:.85rem; }

  /* Inputs */
  .input, textarea, select {
    width:100%;
    border:1px solid #d1d5db;
    background:#fff;
    border-radius:10px;
    padding:10px 12px;
    font-size:1rem;
    outline:none;
    transition:border-color .15s, box-shadow .15s;
  }
  .input:focus, textarea:focus, select:focus {
    border-color:#22c55e;
    box-shadow:0 0 0 3px rgba(34,197,94,.15);
  }
  textarea { min-height:130px; resize:vertical; }

  /* Acciones */
  .form-actions {
    display:flex; gap:10px; flex-wrap:wrap;
    margin-top:14px;
  }
  .btn {
    border:1px solid transparent;
    background:#f8fafc;
    color:#0f172a;
    padding:10px 14px;
    border-radius:10px;
    cursor:pointer;
    transition:background .15s, transform .02s, box-shadow .15s, border-color .15s;
  }
  .btn:active { transform:scale(.99); }
  .btn:hover { background:#eef2ff; }

  .btn-primary {
    background:#16a34a; color:#fff;
    box-shadow: 0 2px 6px rgba(22,163,74,.25);
  }
  .btn-primary:hover { background:#0e9a44; }
  .btn-secondary {
    background:#fff; border-color:#d1d5db;
  }
  .btn-secondary:hover { background:#f9fafb; }

  /* Contador de descripción */
  .count {
    font-size:.82rem;
    color:#94a3b8;
    text-align:right;
    margin-top:-6px;
  }

  /* Mensajes (opcional si usás ?ok=1&err=...) */
  .alert {
    margin-bottom:12px; padding:10px 12px; border-radius:10px;
    border:1px solid;
  }
  .alert-ok { background:#f0fdf4; border-color:#86efac; color:#166534; }
  .alert-err{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }


/* ==== Tooltips pro base (ya los venimos usando) ==== */
.tip{ position:relative; outline:none; }
.tip[data-tip]::after,
.tip[data-tip]::before{
  position:absolute; left:50%; pointer-events:none; opacity:0; visibility:hidden;
  transition:opacity .15s ease-out, transform .15s ease-out, visibility .15s;
}
.tip[data-tip]::after{
  content:attr(data-tip);
  bottom:calc(100% + 10px); transform:translateX(-50%) translateY(4px);
  background:#111827; color:#fff; font-size:.85rem; line-height:1.2;
  padding:6px 8px; border-radius:6px; white-space:nowrap; z-index:50;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.tip[data-tip]::before{
  content:""; bottom:calc(100% + 6px); transform:translateX(-50%) translateY(4px);
  width:0; height:0; border:6px solid transparent; border-top-color:#111827; z-index:51;
}
.tip:hover[data-tip]::after,
.tip:hover[data-tip]::before,
.tip:focus-visible[data-tip]::after,
.tip:focus-visible[data-tip]::before{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
/* evita recortes del globito */
.ofrecido-card, .of-buttons, .ofrecidos-grid { overflow: visible; }

/* ==== Variante A: tooltip verde para WhatsApp ==== */
.tip.tip-wa[data-tip]::after{ background:#25D366; }
.tip.tip-wa[data-tip]::before{ border-top-color:#25D366; }

/* ==== Variante B: tooltip que aparece ABAJO ==== */
.tip.tip-bottom[data-tip]::after{
  top:calc(100% + 10px); bottom:auto;
  transform:translateX(-50%) translateY(-4px);
}
.tip.tip-bottom[data-tip]::before{
  top:calc(100% + 6px); bottom:auto;
  border:6px solid transparent; border-bottom-color:#111827;
  transform:translateX(-50%) translateY(-4px);
}
.tip.tip-bottom:hover[data-tip]::after,
.tip.tip-bottom:hover[data-tip]::before,
.tip.tip-bottom:focus-visible[data-tip]::after,
.tip.tip-bottom:focus-visible[data-tip]::before{
  transform:translateX(-50%) translateY(0);
}

/* ==== Variante C: texto especial para “Postularme” ====
   (no requiere CSS extra, solo el data-tip que te dejo en el HTML) */

/* Botón WhatsApp imagen bien centrada */
.btn-whatsapp img{
  width:18px;height:18px;display:inline-block;vertical-align:middle;
}