/* abierto24horas.com — LatAm
   Sistema visual «la ciudad de madrugada»: cielo nocturno profundo,
   luz ámbar de sodio, y lo que sigue encendido a las 3 de la mañana. */
:root {
  --ink: #101828;
  --ink-soft: #51607a;
  --muted: #64748b;
  --bg: #ffffff;
  --bg-alt: #f5f7fb;
  --line: #e4e9f2;
  --accent: #f59e0b;
  --accent-hot: #fbbf24;
  --accent-dark: #b45309;
  --accent-bg: #fff8ec;
  --open: #047857;
  --night-950: #050914;
  --night-800: #0d1830;
  --night-650: #1a2a52;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(13, 24, 48, .08);
  --shadow-lift: 0 10px 24px rgba(13, 24, 48, .14);
  --shadow-glow: 0 6px 22px rgba(245, 158, 11, .28);
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 72px; }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; }
a { color: inherit; }
img { max-width: 100%; }
h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.15; letter-spacing: -.015em; }
h2 { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -.01em; margin: 1.8rem 0 1rem; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 1rem; }
.container--narrow { max-width: 760px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.lead { font-size: 1.08rem; color: var(--ink-soft); }

/* resaltado tipo rótulo: subrayado ámbar; dentro del héroe, con halo de neón */
.hl { color: inherit; background: linear-gradient(transparent 72%, rgba(245, 158, 11, .55) 72%); padding: 0 .08em; }
.hero .hl, .page-head .hl { color: var(--accent-hot); background: none; text-shadow: 0 0 18px rgba(251, 191, 36, .55), 0 0 46px rgba(245, 158, 11, .3); }

:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; border-radius: 4px; }
/* sobre superficies nocturnas, el ámbar sí contrasta */
.hero :focus-visible, .page-head :focus-visible, .site-footer :focus-visible, .cookie-banner :focus-visible, .chat-panel__head :focus-visible { outline-color: var(--accent); }
/* texto claro sobre fondo nocturno, sin engordar */
.hero, .page-head, .site-footer, .cookie-banner, .chat-panel__head, .chat-msg--user { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* header */
.site-header { background: rgba(255,255,255,.94); backdrop-filter: blur(8px); color: var(--ink); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: .55rem; padding-bottom: .55rem; }
.logo { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; text-decoration: none; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: .45rem; }
.logo__mark { display: block; width: 34px; height: 34px; }
.logo__24, .logo__tld { color: var(--accent-dark); }
.logo--footer .logo__24, .logo--footer .logo__tld { color: var(--accent); }
.site-nav { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; font-weight: 600; padding: .35rem .15rem; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.site-nav a.btn { border-bottom: 2px solid transparent; }

/* selector de país del menú */
.selector-pais { appearance: none; -webkit-appearance: none; border: 1.5px solid var(--line); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2351607a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .8rem center; padding: .45rem 2rem .45rem .9rem; font-family: inherit; font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--ink); cursor: pointer; transition: border-color .15s; }
.selector-pais:hover { border-color: var(--accent); }
@media (forced-colors: active) { .selector-pais { appearance: auto; -webkit-appearance: auto; background-image: none; } }

/* botones */
.btn { display: inline-block; padding: .7rem 1.4rem; border-radius: 999px; text-decoration: none; font-weight: 700; border: 2px solid transparent; cursor: pointer; font-size: 1rem; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn:active { transform: scale(.98); }
/* .btn.btn--X y no .btn--X: hace falta especificidad 0-2-0 para que un
   contexto como `.site-nav a` (0-1-1) no pueda cambiarles el color. Ese
   fue el fallo: el boton del menu salia con el gris del nav sobre naranja. */
.btn.btn--accent { background: var(--accent); color: #000; }
.btn.btn--accent:hover { background: var(--accent-hot); color: #000; box-shadow: var(--shadow-glow); }
.btn.btn--ghost { border-color: var(--line); background: #fff; color: var(--ink); }
.btn.btn--ghost:hover { border-color: var(--accent); color: var(--ink); }
.btn--small { padding: .4rem .95rem; font-size: .85rem; }
.btn--block { display: block; text-align: center; }

/* héroe: cielo de madrugada con estrellas y resplandor en el horizonte */
.hero {
  position: relative;
  background:
    radial-gradient(1.5px 1.5px at 12% 28%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(1px 1px at 31% 14%, rgba(255,255,255,.38), transparent 55%),
    radial-gradient(1.5px 1.5px at 47% 36%, rgba(255,255,255,.3), transparent 55%),
    radial-gradient(1px 1px at 63% 12%, rgba(255,255,255,.42), transparent 55%),
    radial-gradient(1.5px 1.5px at 78% 30%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1px 1px at 90% 18%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(1px 1px at 22% 55%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,.2), transparent 55%),
    radial-gradient(120% 85% at 50% 118%, rgba(245, 158, 11, .22), transparent 60%),
    linear-gradient(180deg, var(--night-950) 0%, var(--night-800) 62%, var(--night-650) 100%);
  color: #fff;
  padding: 3.6rem 0 3.2rem;
  text-align: center;
}
.hero--premium { padding: 3rem 0 2.5rem; }
.hero__sub { color: #c7d2e8; margin: .9rem auto 1.7rem; max-width: 640px; }
.hero__sub strong { color: #fff; }
.hero__stats { color: #8fa0c0; margin-top: 1.4rem; font-size: .95rem; }
.hero__stats strong { color: var(--accent); }

/* reloj en vivo: dígitos ámbar sobre placa oscura, como un rótulo LED */
#hora-actual {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  background: rgba(3, 6, 14, .72); color: var(--accent-hot);
  border: 1px solid rgba(245, 158, 11, .4); border-radius: 9px;
  padding: .06em .42em; text-shadow: 0 0 10px rgba(251, 191, 36, .55);
}

/* buscador del héroe */
.searchbox, .hero__search { display: flex; gap: .5rem; max-width: 580px; margin: 0 auto; }
.searchbox input, .hero__search input { flex: 1; padding: .85rem 1.25rem; border-radius: 999px; border: 1px solid var(--line); font-size: 1rem; min-width: 0; }
.hero .searchbox input, .hero .hero__search input, .page-head .searchbox input { border: none; box-shadow: 0 0 0 3px rgba(245, 158, 11, .38), 0 8px 26px rgba(3, 6, 14, .45); }
.hero .searchbox input:focus-visible, .hero .hero__search input:focus-visible, .page-head .searchbox input:focus-visible { outline: 3px solid transparent; box-shadow: 0 0 0 4px var(--accent); }
.page-head .searchbox { margin: 1rem 0 0; }
.hero__links { margin-top: 1.15rem; }
.hero__links a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: .5rem 1.15rem; border: 1.5px solid rgba(255,255,255,.28); border-radius: 999px; color: #e7ecf6; text-decoration: none; font-weight: 600; font-size: .95rem; transition: border-color .15s, background .15s; }
.hero__links a:hover { border-color: var(--accent); background: rgba(245, 158, 11, .12); }

/* silueta de ciudad bajo el héroe: lo que sigue encendido */
.skyline { display: block; width: 100%; height: clamp(38px, 6vw, 66px); margin-top: -1px; }
.skyline__b { fill: var(--night-650); }
.skyline__w { fill: var(--accent-hot); }

/* enlace de entrada en las tarjetas de país */
.card__ir { margin-top: .35rem; color: var(--accent-dark); font-weight: 700; font-size: .92rem; transition: transform .15s; }
.card--pais:hover .card__ir { transform: translateX(4px); }

/* cabecera de página interior: la misma noche del héroe, en banda */
.page-head { position: relative; background: linear-gradient(135deg, var(--night-950), var(--night-800) 55%, var(--night-650)); color: #fff; padding: 2.1rem 0 1.9rem; }
.page-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--accent), rgba(245, 158, 11, 0) 65%); }
.page-head .breadcrumb { color: #8fa0c0; margin-bottom: .5rem; }
.page-head .breadcrumb a { color: #b9c5dd; }
.page-head h1 { margin-bottom: .3rem; }
.page-head .muted { color: #b9c5dd; }
.page-head .muted a { color: #e7ecf6; }
.page-head__meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.meta-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #e7ecf6; border-radius: 999px; padding: .28rem .8rem; font-size: .85rem; font-weight: 600; }
.meta-chip strong { color: var(--accent-hot); font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.chip-abierto { display: inline-flex; align-items: center; gap: .45rem; background: rgba(4, 120, 87, .28); border: 1px solid rgba(16, 185, 129, .55); color: #6ee7b7; border-radius: 999px; padding: .3rem .85rem; font-weight: 700; font-size: .88rem; }
.chip-abierto::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, .9); }
.page-head .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.page-head .btn--ghost:hover { border-color: var(--accent); background: rgba(245, 158, 11, .1); }
.page-head .ficha__acciones { margin-top: 1.1rem; }

/* cabecera de la ficha de negocio */
.ficha-hero { display: flex; gap: .9rem; align-items: center; margin: .2rem 0 .5rem; }
.ficha-hero__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .35); font-size: 2rem; flex: 0 0 auto; }
.ficha-hero__tit { min-width: 0; }
.ficha-hero__tit h1 { margin-bottom: .15rem; }

/* secciones */
.section { padding: 2.6rem 0; }
.section > .container > h2:first-child, .ficha__grid > div > h2:first-child { margin-top: 0; }
.section--alt { background: var(--bg-alt); }
.section--cta { background: var(--accent-bg); border-top: 1px solid var(--line); }

/* grids */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem; }

/* tarjetas de país (portada global) */
.card--pais .card__body { gap: .4rem; padding: 1.15rem 1.2rem 1.2rem; }
.pais__cabecera { display: flex; align-items: center; gap: .6rem; }
.pais__bandera { display: block; width: 30px; height: 20px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(13, 24, 48, .12); flex: 0 0 auto; }
.pais__n { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 1.55rem; font-weight: 700; line-height: 1.15; }
.pais__n small { font-family: inherit; font-size: .82rem; font-weight: 500; color: var(--muted); margin-left: .3rem; }
.card--pais h3 { font-family: var(--font-display); font-size: 1.15rem; }
.card--pais .card__open { margin-top: .35rem; }

/* categorías: azulejos (cat-card = alias usado en la portada de país) */
.cat-grid, .grid--cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .8rem; margin-top: 1rem; }
.cat-tile, .cat-card { display: flex; flex-direction: column; align-items: center; gap: .3rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem .6rem 1rem; text-decoration: none; text-align: center; box-shadow: var(--shadow); transition: border-color .15s, transform .15s, box-shadow .15s; }
.cat-tile:hover, .cat-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.cat-tile__icon, .cat-card__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-bg); font-size: 1.55rem; }
.cat-tile__name, .cat-card__name { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.cat-tile__count, .cat-card__n { color: var(--ink-soft); font-size: .8rem; font-variant-numeric: tabular-nums; background: var(--bg-alt); border-radius: 999px; padding: .05rem .55rem; }

/* ciudades */
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; margin-top: 1rem; }
/* página de categoría: primero lo más cercano; la lista de ciudades queda plegada */
.cat-cerca { margin-top: .5rem; }
.cat-cerca h2 { margin-bottom: .3rem; }
.mini-card { flex-wrap: wrap; }
.mini-card__body { display: flex; flex-direction: column; min-width: 0; }
.mini-card--nearest { grid-column: 1 / -1; border: 2px solid var(--accent); font-size: 1rem; padding: .8rem 1rem; box-shadow: 0 6px 18px rgba(245, 158, 11, .18); }
.mini-card--nearest .mini-card__icon { font-size: 1.6rem; }
.mini-card__guardia { display: inline-block; margin-top: .25rem; font-size: .78rem; font-weight: 600; color: #047857; background: #d1fae5; border-radius: 999px; padding: .1rem .55rem; align-self: flex-start; }
.mini-card__tel { display: inline-block; margin-top: .25rem; font-size: .82rem; font-weight: 600; color: var(--ink); }
.city-picker { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.city-picker summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; padding: .4rem 0; list-style: none; }
.city-picker summary::-webkit-details-marker { display: none; }
.city-picker summary::before { content: '▸ '; color: var(--accent); }
.city-picker[open] summary::before { content: '▾ '; }
.city-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem 1rem; text-decoration: none; display: flex; flex-direction: column; transition: border-color .15s; }
.city-tile:hover { border-color: var(--accent); }
.city-tile span { font-weight: 600; }
.city-tile small { color: var(--ink-soft); }
.city-links, .ciudades-lista { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.city-links a, .ciudades-lista a { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .92rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .42rem .95rem; transition: border-color .15s, background .15s; }
.city-links a:hover, .ciudades-lista a:hover { border-color: var(--accent); background: var(--accent-bg); }
.city-links a .muted, .ciudades-lista a .muted, .city-links small { font-weight: 400; font-size: .85em; }
.prov-title { display: flex; align-items: center; gap: .55rem; margin-top: 2rem; font-size: 1.15rem; }
.prov-title::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--accent); flex: 0 0 auto; }

/* tarjetas de listado */
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s, border-color .15s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #cbd5e4; }
/* jerarquía de planes: el Elite viste ORO y el Pro viste PLATA — fondo y borde metálicos */
.card--premium { border: 2px solid transparent; background: linear-gradient(160deg, #ffffff, #eef2f7 60%, #e2e8f0) padding-box, linear-gradient(135deg, #f1f5f9, #94a3b8 45%, #64748b) border-box; }
.card--premium:hover { border-color: transparent; box-shadow: 0 10px 26px rgba(100, 116, 139, .35); }
.card--elite { border: 2px solid transparent; background: linear-gradient(160deg, #fffdf4, #fdf3d0 55%, #fae8a8) padding-box, linear-gradient(135deg, #fde68a, var(--accent) 45%, var(--accent-dark)) border-box; box-shadow: 0 10px 26px rgba(245, 158, 11, .3); }
.card--elite:hover { border-color: transparent; box-shadow: 0 14px 34px rgba(245, 158, 11, .45); }
.card--premium .card__img { background: #eef2f7; }
.card--elite .card__img { background: #fdf5d8; }
.badge-premium { position: absolute; top: .6rem; right: .6rem; background: linear-gradient(135deg, #f1f5f9, #cbd5e1 45%, #94a3b8); color: #1e293b; font-size: .72rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px; z-index: 2; box-shadow: 0 2px 8px rgba(100, 116, 139, .35); }
.badge-premium--inline { position: static; font-size: .8rem; vertical-align: middle; white-space: nowrap; flex: 0 0 auto; }
.badge-premium--elite { background: linear-gradient(135deg, #fde68a, var(--accent-hot) 45%, var(--accent)); color: #000; letter-spacing: .05em; box-shadow: 0 2px 10px rgba(245, 158, 11, .55); }
.card__img { height: 120px; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__icon { font-size: 2.4rem; opacity: .75; }
.card__body { padding: .8rem 1rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.card__body h3 { font-size: 1rem; line-height: 1.3; }
.card__meta { color: var(--ink-soft); font-size: .85rem; }
.card__desc { font-size: .85rem; color: var(--ink-soft); }
.card__open { color: var(--open); font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.card__open::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--open); box-shadow: 0 0 6px rgba(5, 150, 105, .8); }

/* chips de filtro */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: .34rem .85rem; font-size: .85rem; text-decoration: none; background: #fff; transition: border-color .15s, background .15s; }
.chip:hover { border-color: var(--accent); background: var(--accent-bg); }
.chip--on { background: var(--night-800); color: #fff; border-color: var(--night-800); }
.chip--on:hover { background: var(--night-800); }

/* ficha */
.breadcrumb { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1rem; }
.breadcrumb a { color: var(--ink-soft); }
.ficha__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; margin-top: 1.5rem; }
.ficha__photos { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1rem; }
.ficha__photos img { border-radius: 10px; width: 100%; height: auto; max-height: 300px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: .4rem; }
.ficha__foto { margin: 0; }
.ficha__foto figcaption { text-align: center; font-size: .75rem; color: var(--ink-soft); margin-top: .3rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.ficha__extra-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; margin: .5rem 0 1rem; }
.ficha__extra-fotos img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.ficha__info { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.ficha__map { height: 320px; border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: .8rem; }
.claim-box { background: var(--accent-bg); border: 1px dashed var(--accent); border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: 1.5rem; }
.cta-inline { margin-top: 2rem; padding: 1rem 1.2rem; background: var(--bg-alt); border-radius: var(--radius); font-size: .95rem; }

/* planes */
.plan-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; background: #fff; }
.plan--premium { border: 2px solid var(--accent); background: var(--accent-bg); }
.plan h3 { margin-bottom: .5rem; }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: .35rem; margin-bottom: .8rem; font-size: .95rem; }
.plan__price { font-size: 1.6rem; font-weight: 800; margin-bottom: .6rem; }
.plan__price small { font-size: .8rem; color: var(--ink-soft); font-weight: 400; }

/* formularios */
.form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .95rem; }
.form input, .form textarea { padding: .65rem .9rem; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; font-family: inherit; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--accent-dark); border-color: var(--accent-dark); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.alert { padding: 1rem 1.2rem; border-radius: var(--radius); margin: 1rem 0; }
.alert--ok { background: #ecfdf5; border: 1px solid var(--open); }
.alert--err { background: #fef2f2; border: 1px solid #dc2626; }

/* sugerencia de país por IP en la portada global */
.geo-pais { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: #fff; border: 1.5px solid var(--accent); border-radius: 999px; padding: .6rem 1.2rem; margin-bottom: 1.4rem; box-shadow: var(--shadow); }

/* legal */
.legal h2 { font-size: 1.1rem; }
.legal p, .legal ul { margin-bottom: .8rem; color: var(--ink-soft); }
.legal ul { padding-left: 1.2rem; }

/* footer: la misma noche del héroe */
.site-footer { background: linear-gradient(180deg, var(--night-800), var(--night-950)); color: #c2cde2; margin-top: 3rem; padding: 2.6rem 0 1rem; font-size: .9rem; }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1.5rem; }
.site-footer h2, .site-footer h4 { color: #fff; margin: 0 0 .5rem; font-family: var(--font-display); font-size: .98rem; }
.site-footer a { color: #c2cde2; display: block; text-decoration: none; padding: .16rem 0; }
.site-footer a:hover { color: var(--accent-hot); }
.site-footer__grid a[href^='http'] { display: inline; }
.logo--footer { margin-bottom: .5rem; color: #fff; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 1.5rem; padding-top: 1rem; font-size: .8rem; color: #8fa0c0; }
.site-footer__bottom a { display: inline; color: #8fa0c0; text-decoration: underline; }

/* menú móvil */
.nav-toggle { display: none; background: none; border: none; color: var(--ink); font-size: 1.5rem; cursor: pointer; padding: .2rem .5rem; min-width: 44px; min-height: 44px; }

/* aviso de cookies */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--night-950); color: #e2e8f0; padding: .8rem 1rem; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; font-size: .9rem; box-shadow: 0 -2px 12px rgba(0,0,0,.25); }
.cookie-banner p { margin: 0; }
.cookie-banner a { color: var(--accent); }
.cookie-banner__btns { display: flex; gap: .5rem; }
/* mientras el aviso de cookies está a la vista, el botón del chat se retira para no taparlo */
body:has(#cookie-banner:not([hidden])) .chat-fab { display: none; }

/* chat IA */
.chat-fab { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 95; width: 58px; height: 58px; border-radius: 50%; border: none; background: var(--accent); font-size: 1.6rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: transform .15s; }
.chat-fab:hover { transform: scale(1.08); }
.chat-panel { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 96; width: min(370px, calc(100vw - 2rem)); height: min(520px, calc(100vh - 4rem)); height: min(520px, calc(100dvh - 4rem)); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-panel__head { background: var(--night-800); color: #fff; padding: .7rem 1rem; display: flex; justify-content: space-between; align-items: center; }
.chat-panel__head button { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: -.5rem -.6rem -.5rem 0; }
.chat-panel__msgs { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; background: var(--bg-alt); }
.chat-msg { max-width: 85%; padding: .5rem .8rem; border-radius: 12px; font-size: .9rem; line-height: 1.45; }
.chat-msg--bot { background: #fff; border: 1px solid var(--line); align-self: flex-start; }
.chat-msg--user { background: var(--night-800); color: #fff; align-self: flex-end; }
.chat-panel__form { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid var(--line); }
.chat-panel__form input { flex: 1; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: 16px; min-width: 0; }
.chat-panel__notice { font-size: .75rem; color: var(--ink-soft); text-align: center; padding: 0 .8rem .5rem; margin: 0; }

/* tarjetas mini (chat y cerca de mí) */
.mini-card { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; text-decoration: none; font-size: .88rem; }
.mini-card--premium { border: 1.5px solid transparent; background: linear-gradient(150deg, #ffffff, #e8edf4) padding-box, linear-gradient(135deg, #f1f5f9, #94a3b8 50%, #64748b) border-box; }
.mini-card--elite { border: 1.5px solid transparent; background: linear-gradient(150deg, #fffdf4, #fae8a8) padding-box, linear-gradient(135deg, #fde68a, var(--accent) 50%, var(--accent-dark)) border-box; box-shadow: 0 4px 14px rgba(245, 158, 11, .3); }
/* especificidad doble: que el hover genérico de .mini-card no tape los bordes metálicos */
.mini-card.mini-card--premium:hover { border-color: transparent; box-shadow: 0 5px 16px rgba(100, 116, 139, .35); }
.mini-card.mini-card--elite:hover { border-color: transparent; box-shadow: 0 6px 20px rgba(245, 158, 11, .42); }

/* aviso de proximidad (plan Elite): a menos de 1 km de quien consulta */
.aviso-cerca {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem; padding: .8rem .9rem;
  border: 2px solid var(--accent); border-radius: 12px;
  background: linear-gradient(100deg, var(--accent-bg), #fff);
  text-decoration: none; color: inherit;
  box-shadow: 0 3px 14px rgba(245, 158, 11, .22);
  animation: avisoEntra .45s ease-out;
}
.aviso-cerca:hover { box-shadow: 0 5px 20px rgba(245, 158, 11, .32); }
.aviso-cerca__icon { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
.aviso-cerca__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.aviso-cerca__body strong { font-size: 1rem; }
.aviso-cerca__body small { color: var(--muted); font-size: .82rem; }
.aviso-cerca__m {
  flex: 0 0 auto; background: var(--accent); color: #000;
  font-weight: 700; font-size: .82rem; padding: .3rem .7rem; border-radius: 999px; white-space: nowrap;
}
@keyframes avisoEntra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mini-card__icon { font-size: 1.3rem; }
.mini-card__body { display: flex; flex-direction: column; min-width: 0; }
.mini-card__body small { color: var(--ink-soft); }
.mini-card:hover { border-color: var(--accent); }

/* sello verificado */
.sello-verificado { display: inline-block; background: var(--open); color: #fff; font-size: .7rem; font-weight: 800; border-radius: 999px; padding: .05rem .4rem; vertical-align: middle; }
.sello-verificado--grande { font-size: .78rem; padding: .2rem .6rem; }

/* acciones de la ficha */
.ficha__acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.btn--llamar { font-size: 1.05rem; padding: .8rem 1.6rem; }
.ficha__servicios { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .35rem; margin: .3rem 0 1rem; }
.ficha__servicios li { background: var(--bg-alt); border-radius: 8px; padding: .4rem .7rem; font-size: .92rem; }
.card__serv { font-size: .78rem; color: var(--ink-soft); }

/* área de clientes */
.mn-stats { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1rem 0; }
.mn-stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1.3rem; display: flex; flex-direction: column; min-width: 120px; }
.mn-stat strong { font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mn-stat small { color: var(--ink-soft); font-size: .8rem; }
.mn-stat--upsell { border: 2px solid var(--accent); background: var(--accent-bg); }
.mn-fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.mn-servicios { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .3rem; }
.mn-serv { flex-direction: row !important; align-items: center; gap: .4rem; font-weight: 400 !important; font-size: .92rem; }
.mn-confirmar { flex-direction: row !important; align-items: flex-start; gap: .6rem; background: #ecfdf5; border: 1px solid var(--open); border-radius: 10px; padding: .8rem 1rem; font-weight: 400 !important; }
/* casilla obligatoria de condiciones: se distingue del sello opcional de datos verificados */
.mn-confirmar--condiciones { background: #fffbeb; border-color: #d97706; margin-top: .7rem; }
.mn-confirmar--condiciones input { margin-top: .15rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

/* chips de servicios en la app */
.app-chips { display: flex; gap: .35rem; overflow-x: auto; padding: .7rem 0 .2rem; -webkit-overflow-scrolling: touch; }
.app-chips .chip { white-space: nowrap; cursor: pointer; border: 1px solid var(--line); background: #fff; font-size: .82rem; }
.app-chips .chip--on { background: var(--night-800); color: #fff; border-color: var(--night-800); }
.app-item__link { display: flex; gap: .8rem; align-items: center; text-decoration: none; flex: 1; min-width: 0; }
.app-item__acciones { display: flex; gap: .2rem; align-items: center; }
.app-mini { background: none; border: 0; font-size: 1.25rem; cursor: pointer; text-decoration: none; padding: .2rem .3rem; line-height: 1; }

/* visibilidad por dispositivo */
.solo-movil { display: none; }
.solo-escritorio { display: block; }
@media (max-width: 820px) {
  .solo-movil { display: block; }
  .solo-escritorio { display: none; }
}

/* app (PWA) */
.app-controls { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }
.app-radio-label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; min-width: 160px; }
.app-radio-label input { accent-color: var(--accent); }
.app-toggle { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.app-toggle__btn { border: 0; background: #fff; padding: .5rem 1rem; cursor: pointer; font-weight: 700; font-size: .9rem; }
.app-toggle__btn--on { background: var(--night-800); color: #fff; }
.app-avisos { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; margin-top: .7rem; color: var(--ink-soft); cursor: pointer; }
.app-lista { display: flex; flex-direction: column; gap: .5rem; }
.app-lista[hidden], .app-chips[hidden], [hidden] { display: none !important; }
.app-item { display: flex; gap: .8rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; text-decoration: none; }
.app-item--premium { border: 2px solid var(--accent); background: var(--accent-bg); }
.app-item__km { min-width: 62px; text-align: center; font-weight: 800; color: var(--accent-dark); font-size: .9rem; font-variant-numeric: tabular-nums; }
.app-item__cuerpo { display: flex; flex-direction: column; min-width: 0; }
.app-item__cuerpo small { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* cerca de mí */
.cerca-controls { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.cerca-select { padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 999px; font-size: 1rem; background: #fff; max-width: 100%; }

/* FAQ */
.faq { max-width: 760px; }
.faq details { border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .6rem; background: #fff; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin-top: .5rem; color: var(--ink-soft); }

/* tablet */
@media (max-width: 1024px) {
  .ficha__grid { gap: 1.2rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* móvil */
@media (max-width: 720px) {
  .ficha__grid, .plan-compare, .form__row { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .searchbox, .hero__search { flex-direction: column; }
  .searchbox .btn, .hero__search .btn { width: 100%; }
  .nav-toggle { display: block; }
  .site-nav { display: none; width: 100%; flex-direction: column; gap: .2rem; padding: .5rem 0 .8rem; align-items: stretch; }
  .site-nav--open { display: flex; }
  .site-nav a { padding: .7rem .2rem; border-bottom: 1px solid var(--line); }
  .site-nav .btn { margin-top: .5rem; text-align: center; }
  .selector-pais { margin-top: .5rem; width: 100%; }
  .hero { padding: 2.4rem 0 2.1rem; }
  .page-head { padding: 1.6rem 0 1.5rem; }
  .ficha-hero__icon { width: 52px; height: 52px; font-size: 1.6rem; border-radius: 14px; }
  .page-head .searchbox { margin-top: .9rem; }
  .grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .card__img { height: 90px; }
  .cat-grid, .grid--cats { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .cat-tile, .cat-card { padding: .85rem .4rem .8rem; }
  .cat-tile__icon, .cat-card__icon { width: 44px; height: 44px; font-size: 1.35rem; }
  .city-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 1.8rem 0; }
  .ficha__photos img { max-height: 220px; }
  .cookie-banner { font-size: .8rem; }
  .chat-panel { bottom: 0; right: 0; width: 100vw; height: min(560px, 92vh); border-radius: 16px 16px 0 0; }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; }
  .cat-grid, .grid--cats { grid-template-columns: 1fr 1fr; }
  .chips { gap: .35rem; }
  .chip { font-size: .8rem; padding: .25rem .65rem; }
}

/* ---- Planes de pago (Alta / Pro / Elite) ---- */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.2rem; align-items: start; }
.plan-card { position: relative; background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 1.6rem 1.4rem 1.4rem; display: flex; flex-direction: column; }
.plan-card--pro { border-color: #94a3b8; }
.plan-card--elite { border-color: var(--accent); box-shadow: 0 10px 30px rgba(245, 158, 11, .18); }
.plan-card__sello { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #000; font-size: .78rem; font-weight: 800; padding: .3rem .9rem; border-radius: 999px; white-space: nowrap; }
.plan-card__nombre { margin: 0 0 .2rem; font-size: 1.25rem; }
.plan-card__precio { margin: 0; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-card__iva { font-size: .95rem; font-weight: 600; color: var(--muted); }
.plan-card__periodo { margin: .3rem 0 .6rem; font-size: .88rem; color: var(--ink-soft); }
.plan-card__tachado { text-decoration: line-through; color: var(--muted); margin-right: .35rem; }
.plan-card__para { margin: 0 0 .9rem; font-size: .9rem; color: var(--muted); font-style: italic; }
.plan-card__lista { list-style: none; padding: 0; margin: 0 0 1.2rem; font-size: .92rem; line-height: 1.75; flex: 1; }
.plan-card__lista li { margin-bottom: .12rem; }
.plan-card__no { color: var(--muted); }
@media (max-width: 640px) { .plan-card__precio { font-size: 2rem; } }

/* resumen de datos en páginas de ciudad y categoría */
.resumen {
  background: var(--accent-bg); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: .9rem 1.1rem; margin: .9rem 0 1.4rem;
}
.resumen p { margin: 0 0 .5rem; font-size: .96rem; line-height: 1.55; }
.resumen p:last-child { margin-bottom: 0; }

/* blog */
.post-list { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); transition: border-color .15s, transform .15s, box-shadow .15s; }
.post-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.post-card h2 { font-size: 1.12rem; margin: 0 0 .35rem; }
.post-card h2 a { text-decoration: none; color: inherit; }
.post-card h2 a:hover { color: var(--accent-dark); }
.post-card p { margin: 0 0 .4rem; color: var(--muted); font-size: .94rem; line-height: 1.5; }
.post-card time { color: var(--muted); font-size: .82rem; }
.post { line-height: 1.7; }
.post h2 { font-size: 1.28rem; margin: 1.8rem 0 .6rem; }
.post h3 { font-size: 1.08rem; margin: 1.3rem 0 .4rem; }
.post p { margin: 0 0 .9rem; }
.post ul, .post ol { margin: 0 0 1rem 1.2rem; }
.post li { margin-bottom: .35rem; }
.post table { width: 100%; margin: 1rem 0; border-collapse: collapse; font-size: .95rem; }
.post th, .post td { border: 1px solid var(--line); padding: .5rem .75rem; text-align: left; }
.post th { background: var(--bg-alt); font-weight: 700; }
.tabla-scroll { overflow-x: auto; margin: 1rem 0; }
.tabla-scroll table { margin: 0; }
.post img { border-radius: 10px; }
.post blockquote { border-left: 3px solid var(--accent); background: var(--accent-bg); border-radius: 8px; padding: .8rem 1.1rem; margin: 0 0 1rem; color: var(--ink-soft); }
.post a { color: var(--accent-dark); }

/* ---- selector de fechas y gráfico de barras ---- */
.rango { background:#fff; border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem; margin-bottom:1.2rem; }
.rango__pre { display:flex; flex-wrap:wrap; gap:.4rem; }
.rango__btn {
  display:inline-block; padding:.35rem .75rem; border-radius:999px; font-size:.86rem;
  text-decoration:none; color:inherit; border:1px solid var(--line); background:#fff; white-space:nowrap;
}
.rango__btn:hover { border-color:var(--accent); }
.rango__btn--on { background:var(--accent); border-color:var(--accent); color:#000; font-weight:700; }
.rango__cal { display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end; margin-top:.7rem; }
.rango__cal label { font-size:.82rem; color:var(--muted); display:flex; flex-direction:column; gap:.2rem; }
.rango__cal input[type=date] { padding:.32rem .5rem; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:1rem; }
.rango__txt { margin:.65rem 0 0; font-size:.85rem; color:var(--muted); }

.barras { display:flex; align-items:flex-end; gap:2px; height:140px; margin:0 0 1.4rem;
  padding:.6rem .4rem 0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow-x:auto; }
.barras__col { flex:1 1 0; min-width:6px; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; height:100%; }
.barras__b { width:100%; max-width:26px; background:var(--accent); border-radius:3px 3px 0 0; }
.barras__x { font-size:.7rem; color:var(--muted); margin-top:2px; }
@media (max-width:640px) { .barras__x { display:none; } }

/* fichas de resumen del cliente */
.kpis { display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.1rem; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:12px; padding:.8rem 1.1rem; min-width:132px; flex:1 1 132px; }
.kpi__n { font-size:1.7rem; font-weight:800; line-height:1.1; font-variant-numeric: tabular-nums; }
.kpi__t { font-size:.82rem; color:var(--muted); }

/* vídeo del plan Elite: fachada que no carga nada hasta que se pulsa */
.video-fachada {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .5rem; aspect-ratio: 16/9; width: 100%;
  background: linear-gradient(140deg, var(--night-950), var(--night-800)); color: #fff;
  border-radius: 12px; cursor: pointer; margin: 1rem 0; text-align: center;
}
.video-fachada:hover, .video-fachada:focus { outline: 2px solid var(--accent); }
.video-fachada__play {
  width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #000;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; padding-left: 4px;
}
.video-fachada__txt { font-size: .95rem; font-weight: 600; }
.video-fachada__txt small { font-weight: 400; opacity: .75; font-size: .8rem; }
.video-fachada iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }

/* movimiento reducido: sin animaciones ni desplazamientos */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card:hover, .cat-tile:hover, .cat-card:hover { transform: none; }
}