/* ============================================================
   eticool — estilos base
   Fuente: Poppins · cuerpo mínimo 16px / interlineado 1.6
   ============================================================ */

:root{
  --morado:#5C2EBC;
  --morado-oscuro:#432290;
  --morado-suave:#EFE9FB;
  --mostaza:#D9A441;
  --mostaza-texto:#88621B; /* mismo tono que --mostaza, pero oscurecido para cumplir el contraste mínimo de accesibilidad cuando se usa como texto o para las estrellas de valoración — --mostaza se queda igual para fondos, ahí no aplica esta regla */
  --mostaza-suave:#FBF0DC;
  --fondo:#FAF7F2;
  --tarjeta:#FFFFFF;
  --texto:#2B2430;
  --texto-sec:#5F5956;
  --borde:#E8E1D6;
  --verde:#5B8A6B;
  --verde-texto:#517B5F; /* misma logica que --mostaza-texto: version oscurecida para cuando se usa como texto */
  --terracota:#C97B5D;
  --terracota-texto:#A85738; /* misma logica: los mensajes de error usan este tono más oscuro para leerse bien */
  --terracota-suave:#F7E9E2;
}

*{ box-sizing:border-box; }

/* Salvaguarda global: ninguna imagen sin tamaño explícito puede desbordar
   su contenedor y forzar scroll horizontal, ni siquiera en un móvil muy
   estrecho (320px). Las imágenes que ya tienen su propio tamaño fijado no
   se ven afectadas. */
img{ max-width:100%; height:auto; }

body{
  margin:0;
  font-family:'Poppins', sans-serif;
  background:var(--fondo);
  color:var(--texto);
  font-size:17px;
  line-height:1.6;
  /* Espacio reservado para la barra inferior fija en móvil, para que el
     contenido final de CUALQUIER página (no solo las que ya lo tenían en
     cuenta a mano) nunca quede tapado debajo — en desktop, listings.css
     lo resetea a 0 porque ahí no hay barra inferior */
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-0.01em; }
h1{ font-size:28px; }
h2{ font-size:23px; }
h3{ font-size:19px; }
h4{ font-size:17px; }

@media(min-width:900px){
  h1{ font-size:40px; }
  h2{ font-size:32px; }
  h3{ font-size:24px; }
  h4{ font-size:20px; }
}

a{ color:inherit; text-decoration:none; }

/* Contenedor de página con margen seguro real — en pantallas estrechas
   (iPhone 11 Pro y similares) 16px a secas se nota justo; con esto nunca
   baja de 20px, y en dispositivos con zona segura lateral (notch en
   horizontal) respeta esa zona también */
.page-wrap{
  margin:0 auto;
  padding-left:max(20px, env(safe-area-inset-left) + 16px);
  padding-right:max(20px, env(safe-area-inset-right) + 16px);
}
button{ font-family:'Poppins', sans-serif; cursor:pointer; }

/* El nombre de marca SIEMPRE en minúsculas */
.brand-name{ text-transform:lowercase; }


/* ------------------------------------------------------------------
   ESCRITORIO (≥900px) — alineación común con la barra superior
   Todo el contenido principal usa el mismo ancho máximo que la barra de
   navegación (1200px), para que el logo, los títulos y las rejillas
   empiecen en la misma línea en vez de cada página a su manera.
   ------------------------------------------------------------------ */
@media(min-width:900px){
  /* Cabeceras moradas a todo lo ancho (blog, reseñas, landings, ayuda…):
     el fondo sigue a todo lo ancho, pero el texto se alinea con el logo */
  .page-hero{
    padding-left:max(28px, calc((100% - 1200px) / 2 + 28px)) !important;
    padding-right:max(28px, calc((100% - 1200px) / 2 + 28px)) !important;
    padding-top:40px !important; padding-bottom:32px !important;
  }
  .page-hero h1{ font-size:34px !important; }
  .page-hero p{ max-width:720px; }
  /* Páginas sin contenedor propio (perfil de vendedor…): todo centrado
     al ancho de la barra superior, con los márgenes internos alineados */
  .desk-page{ max-width:1200px; margin:0 auto; padding:0 12px; box-sizing:border-box; }
  .desk-page .grid{ padding:0 16px 40px; max-width:none; }
  .desk-page .section-title{ margin:32px 16px 16px; }
  /* Landings SEO: texto y títulos alineados con la cabecera y la rejilla */
  .landing-copy, .landing-h2{ margin-left:max(12px, calc((100% - 1200px) / 2 + 12px)) !important; }
  /* Inicio: titular y títulos de sección alineados con la rejilla */
  .hero{ max-width:1200px; margin-left:auto; margin-right:auto; box-sizing:border-box; }
  .section-title{ max-width:1144px; margin-left:auto !important; margin-right:auto !important; padding:0 28px; box-sizing:content-box; }
  @media (min-width:1200px){ .section-title{ padding:0; } }
  /* Perfil: el menú con el mismo ancho exacto que la tarjeta de arriba */
  .profile-menu-wrap{ padding:0 !important; }
  /* Botones y enlaces: cursor de mano en ratón */
  button, [role="button"], .btn-chat, .btn-outline, .btn-next, .chip, .card{ cursor:pointer; }
  a.card:hover, .card:hover{ box-shadow:0 6px 18px rgba(43,36,48,0.10); transition:box-shadow .15s; }
}

/* Iconos de interfaz (sustituyen a los emojis) y estrellas de valoración en SVG */
.eti-ic{ display:inline-flex; align-items:center; justify-content:center; vertical-align:-0.2em; line-height:0; flex-shrink:0; }
.eti-ic svg{ display:block; }
.eti-stars{ display:inline-flex; gap:1px; color:var(--mostaza); vertical-align:-0.15em; line-height:0; }
.eti-stars svg{ display:block; }

/* Texto solo para lectores de pantalla */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Flecha de «Volver» como icono (chevron girado), igual en todas las páginas */
.back-ic{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.back-ic svg{ transform:rotate(180deg); }
.back-link{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin-left:-12px; color:var(--texto); text-decoration:none; }

/* ------------------------------------------------------------------
   Selector de zona para explorar (pages/partials/zone-picker.php)
   ------------------------------------------------------------------ */
.zone-pill{ display:inline-flex; align-items:center; gap:5px; max-width:180px; min-height:36px; padding:0 12px; border:1px solid var(--borde); border-radius:999px; background:var(--tarjeta); color:var(--morado); font-family:'Poppins',sans-serif; font-size:13px; font-weight:600; line-height:1; white-space:nowrap; cursor:pointer; flex-shrink:0; }
.zone-pill.is-browsing{ background:var(--morado-suave); border-color:var(--morado); }
.zone-pill-label{ overflow:hidden; text-overflow:ellipsis; color:var(--texto); }
.zone-pill.is-browsing .zone-pill-label{ color:var(--morado-oscuro); }
.zone-pill-chev{ flex-shrink:0; color:var(--texto-sec); }
.zone-pill:focus-visible, .zone-chip:focus-visible, .zone-gps-btn:focus-visible, .zone-hint button:focus-visible, .zone-results button:focus-visible{ outline:2px solid var(--morado); outline-offset:2px; }
/* Fila móvil bajo la cabecera: zona (+ buscador en resultados) */
.zone-bar{ display:flex; align-items:center; gap:8px; padding:10px 16px 0; }
.zone-bar .zone-bar-search{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:var(--tarjeta); border:1px solid var(--borde); border-radius:999px; padding:0 12px; min-height:36px; color:var(--texto-sec); }
.zone-bar .zone-bar-search input{ border:none; background:none; outline:none; font-family:'Poppins',sans-serif; font-size:16px; width:100%; min-width:0; color:var(--texto); padding:6px 0; }
@media(min-width:900px){ .zone-bar{ display:none; } }
.topnav-zone{ display:none; }
@media(min-width:900px){ .topnav-zone{ display:inline-flex; } }

.zone-backdrop{ position:fixed; inset:0; background:rgba(43,36,48,0.45); z-index:9999; } /* por encima del aviso de cookies mientras está abierto */
.zone-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:10000; background:var(--tarjeta); border-radius:20px 20px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); max-height:85dvh; overflow-y:auto; box-shadow:0 -10px 30px rgba(43,36,48,0.18); font-size:15px; }
.zone-sheet[hidden], .zone-backdrop[hidden]{ display:none; }
html.zone-open{ overflow:hidden; }
@media(min-width:900px){
  .zone-backdrop{ background:transparent; }
  .zone-sheet{ left:auto; right:auto; bottom:auto; top:76px; width:400px; border-radius:16px; border:1px solid var(--borde); box-shadow:0 14px 40px rgba(43,36,48,0.18); max-height:calc(100vh - 100px); }
  html.zone-open{ overflow:auto; }
}
.zone-sheet.is-busy{ opacity:.6; pointer-events:none; }
.zone-sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.zone-sheet-head h2{ font-size:18px; }
.zone-sheet-x{ background:none; border:none; color:var(--texto-sec); min-width:44px; min-height:44px; margin:-10px -10px -10px 0; display:flex; align-items:center; justify-content:center; }
.zone-sheet-now{ font-size:13px; color:var(--texto-sec); margin:0 0 12px; }
.zone-link{ background:none; border:none; padding:0; color:var(--morado); font-weight:600; font-size:13px; text-decoration:underline; }
.zone-gps-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:46px; border:none; border-radius:12px; background:var(--morado); color:#fff; font-weight:600; font-size:15px; }
.zone-gps-btn:disabled{ opacity:.7; }
.zone-search{ display:flex; align-items:center; gap:8px; margin-top:12px; border:1px solid var(--borde); border-radius:12px; padding:0 12px; background:var(--fondo); color:var(--texto-sec); }
.zone-search input{ flex:1; min-width:0; border:none; background:none; outline:none; font-family:'Poppins',sans-serif; font-size:16px; padding:11px 0; color:var(--texto); }
.zone-search:focus-within{ border-color:var(--morado); }
.zone-results{ margin-top:6px; border:1px solid var(--borde); border-radius:12px; overflow:hidden; }
.zone-results[hidden]{ display:none; }
.zone-results button{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:11px 14px; border:none; border-bottom:1px solid var(--borde); background:var(--tarjeta); font-size:14px; color:var(--texto); }
.zone-results button:last-child{ border-bottom:none; }
.zone-results button:hover, .zone-results button:focus{ background:var(--morado-suave); }
.zone-results button svg{ color:var(--morado); flex-shrink:0; }
.zone-results small{ display:block; font-size:11.5px; color:var(--texto-sec); line-height:1.3; }
.zone-noresults{ margin:0; padding:11px 14px; font-size:13px; color:var(--texto-sec); }
.zone-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.zone-chip{ min-height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--borde); background:var(--fondo); color:var(--texto); font-size:13px; font-weight:600; }
.zone-chip:hover{ border-color:var(--morado); color:var(--morado); }
.zone-chip.is-active{ background:var(--morado-suave); border-color:var(--morado); color:var(--morado-oscuro); }
.zone-status{ min-height:1em; margin:10px 0 0; font-size:13px; color:var(--terracota-texto); }

/* Tarjeta de primera visita, NO modal: no tapa nada ni atrapa el foco */
.zone-hint{ position:relative; display:flex; gap:12px; align-items:flex-start; margin:12px 16px 0; padding:14px 44px 14px 14px; background:var(--tarjeta); border:1px solid var(--borde); border-radius:16px; font-size:14px; line-height:1.45; }
@media(min-width:900px){ .zone-hint{ max-width:1144px; margin:16px auto 0; box-sizing:border-box; width:calc(100% - 56px); } }
.zone-hint-ic{ flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--morado-suave); color:var(--morado); display:flex; align-items:center; justify-content:center; }
.zone-hint-body p{ margin:0; color:var(--texto); }
.zone-hint-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.zone-hint-btn{ min-height:38px; padding:0 14px; border-radius:10px; border:none; background:var(--morado); color:#fff; font-size:13px; font-weight:600; }
.zone-hint-btn.is-soft{ background:var(--morado-suave); color:var(--morado); }
.zone-hint-close{ position:absolute; top:4px; right:4px; min-width:40px; min-height:40px; border:none; background:none; color:var(--texto-sec); display:flex; align-items:center; justify-content:center; }