/* ===========================================================================
   OFERTAS LAGUNA — estilos base

   Todo el aspecto del sitio sale de las variables de :root. Si el cliente
   decide manana que quiere azul en vez de verde, se cambian tres lineas y
   no se toca una sola plantilla.

   Sin fuentes web a proposito: una fuente de Google son 100 o 200 KB extra
   en cada carga y un parpadeo mientras baja. El publico esta en celular con
   datos moviles.
   =========================================================================== */

:root {
  /* Acento. Verde azulado: ninguno de los grandes lo usa (Marketplace azul,
     Mercado Libre amarillo, OLX morado) y no compite con las fotos. */
  --acento-900: #04342C;
  --acento-800: #085041;
  --acento-600: #0F6E56;
  --acento-400: #1D9E75;
  --acento-100: #9FE1CB;
  --acento-50:  #E1F5EE;

  /* Neutros calidos. Ligeramente calidos, no gris azulado: junto a fotos de
     muebles y ropa se ve menos frio. */
  --texto:        #1C1C1A;
  --texto-2:      #5F5E5A;
  --texto-3:      #888780;
  --superficie:   #FFFFFF;
  --superficie-2: #F7F6F3;
  --fondo:        #FFFFFF;
  --borde:        #E4E2DC;
  --borde-fuerte: #C9C6BE;

  /* Semanticos */
  --peligro:      #A32D2D;
  --peligro-bg:   #FCEBEB;
  --aviso:        #854F0B;
  --aviso-bg:     #FAEEDA;
  --exito:        #3B6D11;
  --exito-bg:     #EAF3DE;

  --radio: 8px;
  --radio-card: 12px;
  --sombra-nav: 0 -1px 0 var(--borde);

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

  --alto-nav: 58px;
  --ancho-max: 1100px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --texto:        #EDEBE6;
    --texto-2:      #A9A79F;
    --texto-3:      #7C7A73;
    --superficie:   #1E1E1C;
    --superficie-2: #262624;
    --fondo:        #161615;
    --borde:        #333330;
    --borde-fuerte: #4A4A46;
    --acento-600:   #2FB58C;
    --acento-50:    #113129;
    --peligro-bg:   #3A1717;
    --aviso-bg:     #33260F;
    --exito-bg:     #1D2A12;
  }
}

/* --- Reset minimo ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
  padding-bottom: var(--alto-nav);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0 0 .4rem; font-weight: 500; line-height: 1.3; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p  { margin: 0 0 .75rem; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Estructura --------------------------------------------------------- */
.contenedor { max-width: var(--ancho-max); margin: 0 auto; padding: 0 14px; }

.cabecera {
  background: var(--acento-600);
  color: var(--acento-50);
  padding: 12px 0;
  position: sticky; top: 0; z-index: 20;
}
.cabecera .contenedor {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marca { font-size: 17px; font-weight: 500; color: var(--acento-50); }
.cabecera-iconos { display: flex; gap: 16px; font-size: 20px; color: var(--acento-100); }

/* --- Buscador ----------------------------------------------------------- */
.barra-busqueda { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.buscador {
  display: flex; align-items: center; gap: 8px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 9px 12px;
  width: 100%;
}
.buscador input {
  border: 0; background: transparent; outline: none; width: 100%; font-size: 14px;
}
.chips { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  font-size: 12px; padding: 5px 11px; border-radius: 20px; white-space: nowrap;
  border: 1px solid var(--borde); color: var(--texto-2); background: transparent;
}
.chip.activo {
  background: var(--acento-50); color: var(--acento-900);
  border-color: transparent; font-weight: 500;
}

/* --- Cuadricula de anuncios --------------------------------------------- */
/* Dos columnas en celular, como Marketplace: caben cuatro anuncios en
   pantalla y las fotos siguen viendose. Una columna se siente lenta. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 0;
}
@media (min-width: 620px)  { .rejilla { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; } }
@media (min-width: 900px)  { .rejilla { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.tarjeta {
  border: 1px solid var(--borde);
  border-radius: var(--radio-card);
  overflow: hidden;
  background: var(--superficie);
}
.tarjeta-foto { position: relative; aspect-ratio: 4 / 3; background: var(--superficie-2); }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-cuerpo { padding: 8px 9px 10px; }
/* Precio antes que titulo: la gente escanea precios, no lee titulos. */
.precio { font-size: 15px; font-weight: 500; color: var(--acento-600); margin: 0; }
.precio-grande { font-size: 24px; }
.tarjeta-titulo {
  font-size: 12.5px; margin: 2px 0 0; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.meta { font-size: 11px; color: var(--texto-3); margin: 4px 0 0; }

.etiqueta {
  position: absolute; top: 6px; left: 6px;
  font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 3px;
  background: #FAC775; color: #412402;
}
.agua {
  position: absolute; bottom: 6px; right: 6px;
  font-size: 10px; padding: 2px 5px; border-radius: 3px;
  background: rgba(0,0,0,.55); color: #fff;
}

/* --- Lista de categorias ------------------------------------------------ */
/* Las categorias NO usan .tarjeta: esa lleva foto y aqui solo hay dos
   palabras, asi que quedaban cajas enormes medio vacias. */
.categorias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 0 12px;
}
@media (min-width: 620px) { .categorias { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.categoria {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 11px 12px; font-size: 14px;
}
.categoria:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); }
.categoria i { font-size: 17px; color: var(--texto-3); }

/* --- Botones ------------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--borde-fuerte); background: transparent;
  border-radius: var(--radio); padding: 10px 16px;
  font-size: 15px; cursor: pointer; text-align: center;
}
.boton:hover { background: var(--superficie-2); }
/* Un solo boton de acento por pantalla. Si todo resalta, nada resalta. */
.boton-principal {
  background: var(--acento-600); color: var(--acento-50); border-color: transparent;
  font-weight: 500;
}
.boton-principal:hover { background: var(--acento-800); }
.boton-ancho { width: 100%; }

/* --- Formularios -------------------------------------------------------- */
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-size: 13px; color: var(--texto-2); margin-bottom: 5px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); outline: none;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--acento-600); box-shadow: 0 0 0 3px var(--acento-50);
}
.ayuda { font-size: 12px; color: var(--texto-3); margin-top: 5px; }
.error { font-size: 13px; color: var(--peligro); margin-top: 5px; }

/* --- Avisos ------------------------------------------------------------- */
/* El aviso de seguridad va en ambar, no en gris: la seccion 38 del documento
   legal lo exige visible, y si se ve igual que todo lo demas nadie lo lee. */
.aviso { border-radius: var(--radio); padding: 10px 12px; font-size: 12.5px; line-height: 1.55; }
.aviso-seguridad { background: var(--aviso-bg); color: var(--aviso); }
.aviso-error     { background: var(--peligro-bg); color: var(--peligro); }
.aviso-exito     { background: var(--exito-bg); color: var(--exito); }

.verificado { color: var(--acento-600); font-size: 14px; vertical-align: -2px; }

/* --- Barra inferior ----------------------------------------------------- */
/* Publicar al centro y en color: es la unica accion con acento de la
   pantalla, y es lo que mantiene vivo el sitio. */
.nav-inferior {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  height: var(--alto-nav);
  background: var(--superficie); box-shadow: var(--sombra-nav);
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 8px;
}
.nav-item {
  font-size: 10px; color: var(--texto-3); text-align: center; line-height: 1.2;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 6px;
}
.nav-item.activo { color: var(--acento-600); }
.nav-item i { font-size: 21px; }
.nav-publicar {
  background: var(--acento-600); color: var(--acento-50);
  border-radius: var(--radio); padding: 6px 14px;
}

@media (min-width: 760px) {
  .nav-inferior { display: none; }
  body { padding-bottom: 0; }
}

/* --- Pie ---------------------------------------------------------------- */
.pie {
  border-top: 1px solid var(--borde);
  padding: 18px 0 24px; margin-top: 24px;
  font-size: 12px; color: var(--texto-3);
}
.pie a { text-decoration: underline; }
.pie nav { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }

/* --- Iconos ------------------------------------------------------------- */
/* Trazo, no relleno: asi un solo sprite sirve para cualquier color y tamano.
   currentColor hace que el icono herede el color del texto que lo rodea. */
.i {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.22em;
  flex-shrink: 0;
}
.nav-item .i { width: 22px; height: 22px; vertical-align: 0; }
.cabecera-iconos .i { width: 21px; height: 21px; }

/* --- Paginas legales ---------------------------------------------------- */
/* Ancho limitado a 68 caracteres: mas alla de eso el ojo pierde el renglon
   al saltar de linea, y un documento legal ya es bastante trabajo de leer. */
.legal { max-width: 68ch; margin: 0 auto; padding: 18px 0 30px; }
.legal h1 { font-size: 22px; margin-bottom: 4px; }
.legal h2 { font-size: 17px; margin: 26px 0 8px; padding-top: 4px; }
.legal h3 { font-size: 14px; margin: 18px 0 6px; color: var(--texto-2); }
.legal p, .legal li { font-size: 14.5px; line-height: 1.65; color: var(--texto-2); }
.legal strong { color: var(--texto); font-weight: 500; }
.legal ul, .legal ol { padding-left: 20px; margin: 0 0 .75rem; }
.legal li { margin-bottom: 5px; }
.legal a { color: var(--acento-600); text-decoration: underline; }
.legal hr { border: 0; border-top: 1px solid var(--borde); margin: 28px 0 16px; }
.legal .vigencia { font-size: 12px; color: var(--texto-3); margin-bottom: 20px; }
.legal .firma { font-size: 12px; color: var(--texto-3); line-height: 1.6; }
.legal .destacado {
  background: var(--superficie-2);
  border-radius: var(--radio); padding: 14px 16px; margin: 16px 0;
}
.legal .destacado p:last-child { margin-bottom: 0; }

/* --- Utilidades --------------------------------------------------------- */
.seccion { padding: 10px 0; }
.entre { display: flex; align-items: center; justify-content: space-between; }
.vacio { text-align: center; padding: 40px 16px; color: var(--texto-3); }
.vacio i { font-size: 34px; display: block; margin-bottom: 10px; }