@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* Código propio de este micrositio (no el HTML/CSS de la web original de
   la asociación), pero con SU logo real y colores que combinan con él:
   azul cielo, mostaza y marrón camello del logo, más el rosa empolvado
   que ya usaban en los botones de su web vieja. */
:root{
  --crema:#faf9f6;
  --gris-claro:#f3f1ec;
  --texto:#332a20;
  --texto-suave:#75695c;
  --marron:#4a3826;
  --azul:#7fb4d9;
  --azul-suave:#eaf3f9;
  --mostaza:#e3c94a;
  --mostaza-suave:#faf3d9;
  --rosa:#c48b90;
  --rosa-oscuro:#a86d73;
  --gris-oscuro:#3d3226;
  --borde:#e8e2d5;
  --sombra:0 10px 30px -12px rgba(74,56,38,.16);
  --sombra-hover:0 16px 40px -14px rgba(74,56,38,.26);
  --radio:16px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--texto);
  background:#fff;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}

.contenedor{max-width:1140px;margin:0 auto;padding:0 20px;}

/* ===== Cabecera =====
   header es el único elemento con position (sticky): el desplegable
   móvil cuelga de él con position:absolute (no fixed), así que no hay
   ningún descendiente position:fixed anidado dentro de un ancestro
   posicionado — la causa real del solapamiento que hubo antes. */
header.cabecera{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
  transition:box-shadow .2s;
}
header.cabecera.con-sombra{box-shadow:0 4px 24px -8px rgba(69,59,50,.15);}

.marca{display:flex;align-items:center;gap:10px;}
.marca img{width:44px;height:44px;flex-shrink:0;border-radius:10px;}
.marca .nombre{font-weight:700;font-size:.95rem;letter-spacing:.02em;color:var(--marron);line-height:1.2;}
.marca .nombre small{display:block;font-weight:500;font-size:.62rem;letter-spacing:.06em;color:var(--texto-suave);text-transform:uppercase;}

nav.principal{
  display:flex;flex-direction:column;gap:0;
  position:absolute;top:100%;left:0;right:0;background:#fff;
  padding:8px 20px 12px;border-bottom:1px solid var(--borde);
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .25s ease, opacity .2s ease;
}
nav.principal.abierto{max-height:320px;opacity:1;box-shadow:0 16px 24px -12px rgba(69,59,50,.18);}
nav.principal a{
  width:100%;text-align:center;font-size:.95rem;font-weight:600;letter-spacing:.02em;
  color:var(--marron);padding:14px 4px;border-bottom:1px solid var(--borde);
}
nav.principal a.activo{color:var(--rosa-oscuro);}

.cabecera-espaciador{display:none;}

.boton-menu{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;border:none;background:none;cursor:pointer;
}
.boton-menu span{display:block;height:2px;width:100%;background:var(--marron);border-radius:2px;transition:transform .2s, opacity .2s;}
.boton-menu.abierto span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.boton-menu.abierto span:nth-child(2){opacity:0;}
.boton-menu.abierto span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== Migas de pan ===== */
.migas{background:var(--gris-claro);padding:14px 0;}
.migas .contenedor{font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-suave);}
.migas span{color:var(--rosa-oscuro);}

/* ===== Secciones ===== */
section{padding:56px 0;}
section.franja-clara{background:var(--gris-claro);}
section.franja-oscura{background:var(--gris-oscuro);color:#e9e8e5;}
h1,h2,h3{color:var(--marron);font-weight:700;}
h1{font-size:1.7rem;letter-spacing:.01em;text-align:center;margin-bottom:14px;line-height:1.25;}
h2{font-size:1.3rem;letter-spacing:.01em;margin-bottom:14px;}
.subtitulo{text-align:center;color:var(--texto-suave);max-width:560px;margin:0 auto 8px;font-size:.98rem;}
.etiqueta{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rosa-oscuro);background:var(--mostaza-suave);padding:6px 14px;border-radius:999px;margin-bottom:14px;
}

/* ===== Botones ===== */
.boton{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--rosa);color:#fff;font-weight:600;
  font-size:.85rem;letter-spacing:.02em;font-family:inherit;
  padding:14px 28px;border-radius:999px;border:none;cursor:pointer;
  box-shadow:0 10px 22px -8px rgba(168,109,115,.5);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.boton:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(168,109,115,.6);background:var(--rosa-oscuro);}
.boton.secundario{background:#fff;color:var(--marron);border:1.5px solid var(--borde);box-shadow:none;}
.boton.secundario:hover{border-color:var(--rosa);color:var(--rosa-oscuro);box-shadow:none;}

/* ===== Marcador "sustituir" =====
   Subrayado amarillo brillante para cualquier texto de ejemplo (citas,
   nombres, cifras) que haya que cambiar por contenido real antes de
   publicar — mismo color en toda la web para que sea reconocible de un
   vistazo, sin tocar el color del propio texto. */
.marcador-sustituir{
  text-decoration:underline;text-decoration-color:#ffe600;text-decoration-thickness:3px;
  text-underline-offset:3px;text-decoration-skip-ink:none;
}

/* ===== Imagen por defecto (placeholder) =====
   Caja con patrón de rayas + icono, allí donde falta una foto real.
   .img-placeholder-etiqueta es el texto "sustituir" dentro de la caja,
   con el mismo subrayado amarillo que .marcador-sustituir. */
.img-placeholder{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:repeating-linear-gradient(45deg, var(--gris-claro), var(--gris-claro) 12px, #fff 12px, #fff 24px);
  border:2px dashed var(--borde);color:var(--texto-suave);text-align:center;padding:14px;
}
.img-placeholder svg{width:26px;height:26px;opacity:.5;flex-shrink:0;}
.img-placeholder-etiqueta{
  font-size:.68rem;font-weight:700;line-height:1.4;max-width:220px;
}

/* ===== Hero ===== */
.hero{position:relative;padding:70px 0 40px;text-align:center;overflow:hidden;color:#fff;}
.hero-foto{
  position:absolute;inset:0;z-index:-2;
  background:#55483a center/cover no-repeat;
}
.hero-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(51,42,32,.72), rgba(51,42,32,.88));
}
.hero .logo-grande{width:96px;height:96px;margin:0 auto 20px;border-radius:50%;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);}
.hero h1{font-size:1.9rem;color:#fff;}
.hero p.intro{max-width:600px;margin:0 auto 26px;color:#e7e3db;font-size:1rem;}
.hero .acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.franja-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px;}
.cifra{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:22px 12px;text-align:center;box-shadow:var(--sombra);}
.cifra .num{font-size:1.7rem;font-weight:800;color:var(--rosa-oscuro);}
.cifra .etq{font-size:.72rem;color:var(--texto-suave);text-transform:uppercase;letter-spacing:.05em;margin-top:4px;}

/* ===== Tarjetas ===== */
.rejilla{display:grid;grid-template-columns:1fr;gap:20px;margin-top:24px;}
.tarjeta{
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra);transition:transform .2s, box-shadow .2s;
}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-hover);}
.tarjeta .cuerpo{padding:22px 20px;}
.tarjeta .icono{
  width:44px;height:44px;border-radius:12px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--azul-suave);color:var(--azul);
}
.tarjeta .icono svg{width:22px;height:22px;}
.tarjeta:nth-child(even) .icono{background:var(--mostaza-suave);color:var(--rosa-oscuro);}
.tarjeta h3{font-size:1.02rem;margin-bottom:8px;}
.tarjeta p{color:var(--texto-suave);font-size:.9rem;}
.tarjeta-foto{aspect-ratio:16/9;border:none;border-radius:0;}
.tarjeta-foto svg{width:22px;height:22px;}
.tarjeta-foto .img-placeholder-etiqueta{font-size:.62rem;max-width:190px;}
.tarjeta-foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* ===== Opiniones ===== */
.rejilla-opiniones{display:grid;grid-template-columns:1fr;gap:20px;margin-top:24px;}
.opinion{
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio);padding:26px 22px;
  box-shadow:var(--sombra);display:flex;flex-direction:column;gap:14px;
}
.opinion-cita{color:var(--texto);font-size:.96rem;line-height:1.55;position:relative;padding-left:26px;}
.opinion-cita::before{content:"“";position:absolute;left:-2px;top:-6px;font-size:2.2rem;color:var(--mostaza);font-weight:800;line-height:1;}
.opinion-autor{display:flex;align-items:center;gap:12px;margin-top:auto;}
.opinion-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg, var(--gris-claro), var(--gris-claro) 5px, #fff 5px, #fff 10px);
  border:2px dashed var(--borde);color:var(--texto-suave);
}
.opinion-avatar svg{width:18px;height:18px;}
.opinion-nombre{font-weight:700;color:var(--marron);font-size:.86rem;line-height:1.3;}
.opinion-comercio{font-size:.76rem;color:var(--texto-suave);}

/* ===== Colaboran con nosotros ===== */
.franja-colaboradores{padding:44px 0;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);}
.colaboradores-titulo{
  text-align:center;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--texto-suave);margin-bottom:22px;
}
.rejilla-colaboradores{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:520px;margin:0 auto;}
.colaborador-logo{
  height:76px;border-radius:14px;padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.colaborador-logo svg{width:24px;height:24px;}
.colaborador-logo img{max-width:100%;max-height:100%;object-fit:contain;}
.colaborador-nombre{font-size:.72rem;font-weight:700;color:var(--texto-suave);}

/* ===== Foto de personas (equipo/fundadoras) ===== */
.foto-equipo{
  aspect-ratio:4/3;border-radius:var(--radio);margin-bottom:18px;
}
.foto-equipo svg{width:30px;height:30px;}

/* ===== Comercios =====
   Todas las tarjetas comparten el mismo tamaño y estructura (portada +
   avatar superpuesto + nombre + categoría). Las 34 asociadas llevan una
   portada de imagen por defecto (patrón + degradado propio, a la espera
   de fotos reales); "Farmacia Demo" es la única con foto real, para que
   se vea la diferencia entre "pendiente" y "ya lleno de datos". */
/* Filtro por categoría (comercios.html) — chips en vez de secciones
   separadas por categoría: con pocos socios por categoría, un titular por
   cada una dejaba la página en franjas de 1-2 tarjetas sueltas; con todos
   juntos y un filtro arriba, la rejilla se ve llena desde el principio y
   sigue funcionando igual cuando haya muchos más socios. */
.chips-categoria{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:22px 0 4px;}
.chip-categoria{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:999px;border:1.5px solid var(--borde);
  background:#fff;color:var(--texto-suave);font-family:inherit;
  font-size:.8rem;font-weight:600;cursor:pointer;transition:border-color .15s, color .15s, background .15s;
}
.chip-categoria:hover{border-color:var(--rosa);color:var(--rosa-oscuro);}
.chip-categoria.activo{background:var(--rosa);border-color:var(--rosa);color:#fff;}
.chip-categoria-num{
  font-size:.68rem;font-weight:700;border-radius:999px;padding:1px 7px;
  background:var(--gris-claro);color:var(--texto-suave);
}
.chip-categoria.activo .chip-categoria-num{background:rgba(255,255,255,.3);color:#fff;}

.rejilla-comercios{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px;}
.comercio{
  display:block;background:#fff;border:1px solid var(--borde);border-radius:16px;
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .2s, box-shadow .2s;
}
.comercio:hover{transform:translateY(-3px);box-shadow:var(--sombra);}
.com-cover{
  height:60px;
  background:
    radial-gradient(rgba(255,255,255,.6) 1px, transparent 1.6px) 0 0/14px 14px,
    linear-gradient(135deg,var(--azul-suave),var(--mostaza-suave));
}
.comercio-demo .com-cover{
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.4) 100%),
    url('https://lixai.es/uploads/covers/f6aab822-cda6-4cfc-afad-4dd91674077c.webp') center 82% / cover no-repeat;
}
.com-cuerpo{padding:0 12px 14px;margin-top:-20px;}
.com-avatar{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:2.5px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.14);
  color:var(--azul);font-weight:700;font-size:.92rem;margin-bottom:8px;
}
.com-avatar-img{
  width:38px;height:38px;border-radius:10px;object-fit:cover;display:block;
  border:2.5px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.14);background:#fff;margin-bottom:8px;
}
.comercio h4{font-size:.86rem;color:var(--marron);margin-bottom:3px;line-height:1.3;}
.comercio .categoria{font-size:.66rem;color:var(--texto-suave);text-transform:uppercase;letter-spacing:.04em;}
.comercio-demo .categoria{color:var(--rosa-oscuro);font-weight:700;}

.aviso-proximamente{
  margin-top:40px;padding:24px 20px;background:linear-gradient(135deg,var(--azul-suave),var(--mostaza-suave));
  border-radius:var(--radio);text-align:center;color:var(--marron);font-size:.92rem;
}
.aviso-proximamente strong{display:block;font-size:1rem;margin-bottom:6px;}

/* ===== Mapa de negocios (index) ===== */
.mapa-negocios-caja{
  margin-top:20px;border-radius:var(--radio);overflow:hidden;border:1px solid var(--borde);
  box-shadow:var(--sombra);
}
#mapa-negocios-leaflet{height:340px;width:100%;background:var(--gris-claro);}
.mapa-negocios-leyenda{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:.78rem;color:var(--texto-suave);}
.mapa-negocios-leyenda span{display:inline-flex;align-items:center;gap:6px;}
.mn-punto{width:10px;height:10px;border-radius:50%;display:inline-block;}
.mn-punto-azul{background:#2563eb;}
.mn-punto-rojo{background:#e0212e;}
.mn-pin svg{filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));}
.mn-popup{font-size:.85rem;min-width:180px;}
.mn-popup .mn-nombre{font-weight:700;color:var(--marron);margin-bottom:2px;}
.mn-popup .mn-badge{display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#fff;background:#2563eb;padding:2px 8px;border-radius:999px;margin-bottom:4px;}
.mn-popup .mn-cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--rosa-oscuro);margin-bottom:4px;}
.mn-popup .mn-dir{color:var(--texto-suave);font-size:.8rem;}
.mn-popup .mn-tel a{color:#2563eb;font-weight:600;}
.mn-popup .mn-ver{display:inline-block;margin-top:6px;color:#2563eb;font-weight:700;font-size:.82rem;}
.mn-popup .mn-aprox{font-size:.68rem;font-style:italic;color:var(--texto-suave);margin-top:2px;}

/* ===== Listas ===== */
ul.lista-objetivos{list-style:none;margin-top:10px;}
ul.lista-objetivos li{padding:12px 0 12px 26px;position:relative;border-bottom:1px solid var(--borde);font-size:.94rem;}
ul.lista-objetivos li::before{
  content:"";position:absolute;left:0;top:20px;width:8px;height:8px;border-radius:50%;background:var(--mostaza);
}
.texto-cuerpo p{margin-bottom:14px;color:var(--texto);font-size:.96rem;}
.texto-cuerpo p:last-child{margin-bottom:0;}

/* ===== Contacto ===== */
.datos-contacto{display:flex;flex-direction:column;gap:22px;margin-top:26px;}
.dato{display:flex;gap:14px;align-items:flex-start;}
.dato .marcador{
  width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--borde);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--rosa-oscuro);
  font-size:1.05rem;box-shadow:var(--sombra);
}
.dato h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-suave);margin-bottom:3px;}
.dato p, .dato a{font-size:.95rem;color:var(--marron);font-weight:500;}
.tarjeta-mapa{
  margin-top:32px;border-radius:var(--radio);overflow:hidden;border:1px solid var(--borde);
  height:220px;background:linear-gradient(135deg,var(--azul-suave),var(--mostaza-suave));
  display:flex;align-items:center;justify-content:center;color:var(--texto-suave);font-size:.85rem;text-align:center;padding:20px;
}

/* ===== Pie ===== */
footer{background:var(--gris-oscuro);color:#c9c8c4;padding:40px 0 20px;font-size:.86rem;}
footer .contenedor{display:flex;flex-direction:column;gap:26px;align-items:center;text-align:center;}
footer .marca-pie{display:flex;flex-direction:column;align-items:center;gap:10px;}
footer .marca-pie img{width:52px;height:52px;}
footer .redes{display:flex;gap:10px;margin-top:2px;}
footer .redes a{
  width:34px;height:34px;border-radius:50%;border:1px solid #4d4536;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s, color .15s;
}
footer .redes a:hover{border-color:#fff;}
footer .redes svg{width:16px;height:16px;}
footer h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;}
footer nav{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}
footer a:hover{color:#fff;}
.pie-nota{text-align:center;margin-top:10px;font-size:.72rem;color:#8f8e8a;}
.pie-nota a{text-decoration:underline;}

/* ===== Aparición al cargar =====
   A propósito NO depende del scroll ni de JS: un IntersectionObserver deja
   invisible para siempre cualquier tarjeta que el usuario se salte (tecla
   Fin, clic en la barra de scroll, un enlace ancla) sin pasar por el
   viewport. La animación CSS es por tiempo, no por posición: termina sola
   y con `both` se queda en el estado final aunque el navegador no soporte
   @keyframes (entonces simplemente no anima, pero nunca oculta nada). */
@keyframes aparecer{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.revelar{animation:aparecer .5s ease both;}
.rejilla .revelar:nth-child(2){animation-delay:.06s;}
.rejilla .revelar:nth-child(3){animation-delay:.12s;}
.rejilla .revelar:nth-child(4){animation-delay:.18s;}
.rejilla .revelar:nth-child(5){animation-delay:.24s;}
.rejilla .revelar:nth-child(6){animation-delay:.3s;}
@media(prefers-reduced-motion: reduce){
  .revelar{animation:none;}
}

/* ===== Alta de socios (alta-socio.html) =====
   Formulario público, sin Bootstrap ni panel.css a propósito (este
   micrositio es independiente del panel de lixai) — pero calcado en su
   estructura visual: portada + logo circular superpuesto, igual que la
   ficha de tienda del panel. Pensado para gente poco puesta en tecnología:
   inputs grandes, poco texto, horario de dos toques por día en vez de
   escribir nada. */
.alta-aviso{
  padding:14px 16px;border-radius:12px;margin-bottom:20px;font-size:.9rem;
}
.alta-aviso-error{background:#fbeaea;color:#8a2b2b;border:1px solid #f0c6c6;}

.alta-imagenes{margin-bottom:30px;}
.alta-cover{
  position:relative;height:140px;border-radius:var(--radio);
  background:linear-gradient(135deg,var(--azul-suave),var(--mostaza-suave)) center/cover no-repeat;
  border:1px solid var(--borde);display:flex;align-items:flex-end;justify-content:flex-end;padding:10px;
}
.alta-cover.tiene-imagen{background-color:#000;}
.alta-cover-boton{
  background:#fff;border:1px solid var(--borde);border-radius:999px;padding:8px 14px;
  font-size:.78rem;font-weight:600;color:var(--marron);cursor:pointer;box-shadow:var(--sombra);
}
.alta-cover-position-row{padding:10px 4px 0;}
.alta-cover-position-row label{display:block;font-size:.76rem;font-weight:600;color:var(--texto-suave);margin-bottom:4px;}
.alta-cover-position-row input[type=range]{width:100%;accent-color:var(--rosa);}
.alta-logo-wrap{margin-top:-32px;padding-left:16px;}
.alta-logo{
  position:relative;width:72px;height:72px;border-radius:50%;
  background:var(--gris-claro) center/cover no-repeat;
  border:3px solid #fff;box-shadow:var(--sombra);
}
.alta-logo-boton{
  position:absolute;bottom:-2px;right:-2px;width:28px;height:28px;border-radius:50%;
  background:var(--rosa);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:700;cursor:pointer;border:2px solid #fff;
}
.alta-imagenes-nota{font-size:.76rem;color:var(--texto-suave);margin-top:10px;padding-left:16px;}

.alta-campo{margin-bottom:20px;}
.alta-campo label{display:block;font-weight:700;font-size:.86rem;color:var(--marron);margin-bottom:6px;}
.alta-campo .req{color:var(--rosa-oscuro);}
.alta-ayuda{font-size:.78rem;color:var(--texto-suave);margin-top:5px;}
.alta-fila{display:grid;grid-template-columns:1fr;gap:16px;}

.alta-campo input[type=text],
.alta-campo input[type=email],
.alta-campo input[type=tel],
.alta-campo input[type=url],
.alta-campo input[type=password],
.alta-campo input[type=number],
.alta-campo input[type=date],
.alta-campo input[type=search],
.alta-campo select,
.alta-campo textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--borde);border-radius:12px;
  font-family:inherit;font-size:.95rem;color:var(--texto);background:#fff;
}
.alta-campo input:focus,
.alta-campo select:focus,
.alta-campo textarea:focus{outline:none;border-color:var(--azul);}
.alta-campo textarea{resize:vertical;}

.alta-consentimiento label{display:flex;align-items:flex-start;gap:10px;font-weight:400;font-size:.82rem;color:var(--texto-suave);line-height:1.5;}
.alta-consentimiento input[type=checkbox]{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--azul);}
.alta-consentimiento a{color:var(--azul);text-decoration:underline;}

.alta-enviar{width:100%;justify-content:center;border:none;font-size:.95rem;padding:16px 28px;margin-top:10px;}

/* Horario: cada día es un bloque grande y separado (para que un dedo poco
   preciso no toque el de al lado), con tres estados elegidos por radio en
   vez de casillas + botones — corrido, partido o cerrado, nada más. */
.horario-dia{border:1px solid var(--borde);border-radius:14px;padding:14px 16px;margin-bottom:10px;background:#fff;}
.horario-dia-nombre{font-weight:700;color:var(--marron);margin-bottom:10px;}
.horario-tipo{display:flex;flex-direction:column;gap:8px;}
.horario-tipo label{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--texto);cursor:pointer;}
.horario-tipo input[type=radio]{width:19px;height:19px;accent-color:var(--rosa);flex-shrink:0;}
.horario-tramos-corrido,.horario-tramos-partido{margin-top:12px;padding-left:29px;}
.horario-tramo{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:.85rem;color:var(--texto-suave);}
.horario-tramo input[type=time]{
  padding:8px 10px;border:1.5px solid var(--borde);border-radius:10px;font-family:inherit;font-size:.9rem;
}

@media(min-width:600px){
  .horario-tipo{flex-direction:row;gap:20px;flex-wrap:wrap;}
}

/* Horario especial (vacaciones, festivos, rangos de fechas con horario
   reducido) — misma tarjeta que .horario-dia, con un rango de fechas en vez
   de un nombre de día. */
.horario-especial-fila{border:1px solid var(--borde);border-radius:14px;padding:14px 16px;margin-bottom:10px;background:#fff;}
.horario-especial-fila .alta-fila{margin-bottom:6px;}
.horario-especial-cerrado{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--texto);cursor:pointer;margin:6px 0 0;}
.horario-especial-cerrado input[type=checkbox]{width:19px;height:19px;accent-color:var(--rosa);flex-shrink:0;}
.horario-especial-horas{margin-top:12px;}
.horario-especial-quitar{margin-top:14px;}

/* Subtítulos de grupo dentro del formulario de ficha (Identidad/Contacto/
   Redes y web/Descripción/Horario...) — mayúsculas espaciadas en rosa
   oscuro, con una línea encima para separar del grupo anterior. */
.ficha-grupo-titulo{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rosa-oscuro);margin:30px 0 16px;padding-top:22px;border-top:1px solid var(--borde);
}
.ficha-grupo-titulo:first-child{margin-top:0;padding-top:0;border-top:none;}

.alta-gracias{text-align:center;padding:50px 20px;}
.alta-gracias-icono{
  width:64px;height:64px;border-radius:50%;background:var(--azul-suave);color:var(--azul);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800;margin:0 auto 20px;
}
.alta-gracias p{color:var(--texto-suave);max-width:420px;margin:0 auto;}

@media(min-width:600px){
  .alta-fila{grid-template-columns:1fr 1fr;}
}

/* ===== Escritorio ===== */
@media(min-width:860px){
  /* Barra en tres columnas (logo · menú · hueco) para que el menú quede
     centrado de verdad, sin importar el ancho del logo. */
  header.cabecera{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:16px 32px;
  }
  .marca img{width:50px;height:50px;}
  .marca{justify-self:start;}
  .boton-menu{display:none;}
  .cabecera-espaciador{display:block;}
  nav.principal{
    position:static;max-height:none;overflow:visible;opacity:1;
    background:none;border:none;padding:0;
    flex-direction:row;gap:30px;justify-self:center;
  }
  nav.principal a{
    width:auto;padding:6px 2px;border-bottom:2px solid transparent;font-size:.82rem;
    text-transform:uppercase;letter-spacing:.06em;
  }
  nav.principal a:hover, nav.principal a.activo{border-color:var(--rosa);color:var(--rosa-oscuro);}

  section{padding:80px 0;}
  h1{font-size:2.5rem;}
  h2{font-size:1.7rem;}
  .hero h1{font-size:2.9rem;}
  .hero p.intro{font-size:1.08rem;}
  .hero .logo-grande{width:120px;height:120px;}

  .franja-cifras{gap:22px;}
  .cifra .num{font-size:2.1rem;}

  .rejilla{grid-template-columns:repeat(3,1fr);gap:26px;}
  .rejilla-comercios{grid-template-columns:repeat(4,1fr);gap:18px;}
  .rejilla-opiniones{grid-template-columns:repeat(3,1fr);gap:26px;}

  .dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}

  #mapa-negocios-leaflet{height:460px;}

  footer .contenedor{flex-direction:row;justify-content:space-between;text-align:left;}
  footer .marca-pie{align-items:flex-start;}
  footer nav{justify-content:flex-start;}
}