/* pastelerias.net - estilos del sitio (sobre brand.css) */

/* ---------- estructura ---------- */
.contenedor {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 1.25rem;
}

.contenedor-estrecho { max-width: 760px; }

.seccion { padding-block: 3rem; }
.seccion-crema { background: var(--crema); }
.seccion-suelta { margin-block: 2.5rem; }
.seccion-sub { color: color-mix(in srgb, var(--cacao) 72%, var(--rosa)); margin-top: -0.5rem; }
.seccion-mas { margin-top: 1.5rem; font-weight: 600; }

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cacao);
  color: var(--nata);
  padding: 0.5rem 1rem;
  z-index: 100;
}
.salto-contenido:focus { left: 0; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--nata) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-borde);
}

.cabecera-interior {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 64px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--cacao);
}

.marca-texto {
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  font-weight: 700;
}
.marca-texto em { font-style: normal; color: var(--frambuesa); }

.menu {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.menu > a:not(.btn) {
  color: var(--cacao);
  text-decoration: none;
  font-weight: 600;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.menu > a:not(.btn):hover,
.menu > a.activo { border-bottom-color: var(--frambuesa); color: var(--cacao); }

.boton-menu {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
}

.boton-menu-lineas,
.boton-menu-lineas::before,
.boton-menu-lineas::after {
  display: block;
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--cacao);
  content: "";
  transition: transform 150ms ease;
}
.boton-menu-lineas { position: relative; }
.boton-menu-lineas::before { position: absolute; top: -7px; }
.boton-menu-lineas::after { position: absolute; top: 7px; }

@media (max-width: 860px) {
  .boton-menu { display: block; }
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--nata);
    border-bottom: 1px solid var(--color-borde);
    padding: 0.5rem 1.25rem 1rem;
  }
  .menu.abierto { display: flex; }
  .menu > a:not(.btn) { padding: 0.75rem 0; border-bottom: 1px solid var(--color-borde); }
  .menu > .btn { margin-top: 0.75rem; text-align: center; }
}

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(1000px 400px at 85% -10%, color-mix(in srgb, var(--rosa) 38%, transparent), transparent),
    var(--crema);
  border-bottom: 1px solid var(--color-borde);
}

.hero-interior {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 3.5rem;
}

.hero-texto { flex: 1; }

.hero-claim {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--frambuesa);
  margin-bottom: 0.75rem;
}

.hero h1 span { color: var(--frambuesa); }
.hero-sub { font-size: 1.1rem; }
.hero-enlace-encargo { margin-top: 1rem; font-size: 0.95rem; }

.hero-dibujo {
  flex-shrink: 0;
  filter: drop-shadow(0 12px 24px color-mix(in srgb, var(--frambuesa) 25%, transparent));
}

@media (max-width: 860px) {
  .hero-dibujo { display: none; }
  .hero-interior { padding-block: 2.5rem; }
}

/* ---------- buscador ---------- */
.buscador {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
  max-width: 560px;
}

.buscador-campo { position: relative; flex: 1; }
.buscador-campo input { width: 100%; }
.buscador-grande .buscador-campo input { padding: 0.8rem 1rem; font-size: 1.05rem; }

.sugerencias {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-s);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--cacao) 15%, transparent);
  z-index: 30;
  max-height: 300px;
  overflow-y: auto;
}

.sugerencias li { border-radius: 6px; }

.sugerencias a,
.sugerencias button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--cacao);
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
}

.sugerencias li.marcada > *,
.sugerencias a:hover,
.sugerencias button:hover { background: var(--crema); }

.sugerencias small { color: color-mix(in srgb, var(--cacao) 60%, var(--rosa)); }

/* ---------- rejillas y tarjetas ---------- */
.rejilla { display: grid; gap: 1rem; }

.rejilla-especialidades { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.rejilla-municipios { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.rejilla-pastelerias { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.rejilla-entradas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.tarjeta {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  padding: 1.1rem 1.25rem;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

a.tarjeta { text-decoration: none; color: var(--cacao); display: block; }

.tarjeta:hover {
  box-shadow: 0 10px 26px color-mix(in srgb, var(--frambuesa) 16%, transparent);
  transform: translateY(-2px);
}

.tarjeta-pasteleria { display: flex; flex-direction: column; gap: 0.5rem; }
.tarjeta-pasteleria header { display: flex; align-items: baseline; gap: 0.5rem; justify-content: space-between; }
.tarjeta-pasteleria h3 { margin: 0; font-size: 1.15rem; }
.tarjeta-ubicacion { margin: 0; font-size: 0.9rem; color: color-mix(in srgb, var(--cacao) 70%, var(--rosa)); }
.tarjeta-especialidades { margin: 0; font-size: 0.85rem; color: color-mix(in srgb, var(--cacao) 78%, var(--rosa)); }
.tarjeta-acciones { display: flex; gap: 0.6rem; margin-top: auto; padding-top: 0.5rem; }
.tarjeta-acciones .btn { padding: 0.45rem 1.1rem; font-size: 0.92rem; }

.etiqueta-verificada {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--frambuesa);
  border: 1px solid var(--frambuesa);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}

.tarjeta-municipio { display: flex; flex-direction: column; gap: 0.15rem; }
.tarjeta-municipio-nombre { font-weight: 700; font-size: 1.05rem; }
.tarjeta-municipio-provincia { font-size: 0.85rem; color: color-mix(in srgb, var(--cacao) 65%, var(--rosa)); }
.tarjeta-municipio-total { margin-top: 0.35rem; font-size: 0.85rem; color: var(--frambuesa); font-weight: 700; }

.tarjeta-especialidad { display: flex; flex-direction: column; gap: 0.3rem; }
.tarjeta-especialidad .icono-especialidad { width: 34px; height: 34px; color: var(--frambuesa); }
.tarjeta-especialidad-nombre { font-weight: 700; font-size: 1.02rem; }
.tarjeta-especialidad-resumen { font-size: 0.85rem; color: color-mix(in srgb, var(--cacao) 70%, var(--rosa)); }

.tarjeta-entrada { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tarjeta-entrada img { width: 100%; height: 160px; object-fit: cover; display: block; }
.tarjeta-entrada-cuerpo { padding: 1rem 1.25rem 1.25rem; }
.tarjeta-entrada-fecha { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--frambuesa); font-weight: 700; margin-bottom: 0.35rem; }
.tarjeta-entrada h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.tarjeta-entrada h3 a { color: var(--cacao); text-decoration: none; }
.tarjeta-entrada h3 a:hover { color: var(--frambuesa); }
.tarjeta-entrada p:last-child { margin: 0; font-size: 0.92rem; }

/* ---------- sellos dietéticos ---------- */
.sellos { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }

.sello {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--crema);
  border: 1px solid var(--color-borde);
}

.sello-singluten { background: #FBF3D8; border-color: #E8D48A; color: #7A5D00; }
.sello-vegano { background: #E4F2E0; border-color: #A9D3A0; color: #2F6023; }
.sello-sinlactosa { background: #E3EFF7; border-color: #A3C8E4; color: #1F517A; }

/* ---------- migas, chips, listas ---------- */
.migas { padding-top: 1.25rem; font-size: 0.88rem; }
.migas ol { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.migas li + li::before { content: "›"; margin-right: 0.35rem; color: var(--rosa); }
.migas [aria-current] { color: color-mix(in srgb, var(--cacao) 65%, var(--rosa)); }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.chip {
  display: inline-block;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--color-borde);
  background: #fff;
  text-decoration: none;
  color: var(--cacao);
  font-size: 0.9rem;
  font-weight: 600;
}
.chip:hover { border-color: var(--frambuesa); color: var(--frambuesa); }

.lista-comunidades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.5rem;
}

.lista-comunidades li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-s);
  padding: 0.6rem 0.9rem;
}

.lista-comunidades a { text-decoration: none; font-weight: 600; }
.lista-comunidades span {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--frambuesa);
  background: var(--crema);
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
}

.lista-enlaces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.lista-enlaces a { font-size: 0.95rem; }

/* ---------- cabeceras de página ---------- */
.pagina-cabecera { padding-block: 1.5rem 0.5rem; }
.pagina-cabecera-especialidad { display: flex; gap: 1.25rem; align-items: flex-start; }
.pagina-cabecera-especialidad .icono-especialidad { width: 56px; height: 56px; color: var(--frambuesa); flex-shrink: 0; margin-top: 0.5rem; }

/* ---------- banda encargo ---------- */
.banda-encargo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background:
    radial-gradient(500px 200px at 110% 120%, color-mix(in srgb, var(--rosa) 45%, transparent), transparent),
    var(--cacao);
  color: var(--nata);
  border-radius: var(--radio-m);
  padding: 2rem 2.5rem;
}

.banda-encargo h2 { color: var(--nata); margin-bottom: 0.35rem; }
.banda-encargo p { margin: 0; color: color-mix(in srgb, var(--nata) 85%, var(--rosa)); }
.banda-encargo .btn { flex-shrink: 0; }
.banda-encargo-compacta { padding: 1.5rem 2rem; }

@media (max-width: 700px) {
  .banda-encargo { flex-direction: column; align-items: flex-start; padding: 1.75rem 1.5rem; }
}

.seccion-encargo .banda-encargo { margin-block: 0; }

.btn-grande { padding: 0.85rem 2rem; font-size: 1.1rem; }
.btn-claro { border-color: var(--rosa); color: var(--rosa); }
.btn-claro:hover { background: color-mix(in srgb, var(--rosa) 20%, transparent); color: var(--nata); }

/* ---------- filtros ---------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  background: var(--crema);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  padding: 0.75rem 1.25rem;
  margin-block: 1rem;
}

.filtros-titulo { font-weight: 700; font-size: 0.92rem; }
.filtro { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; cursor: pointer; }
.filtro input { accent-color: var(--frambuesa); width: 1.05rem; height: 1.05rem; }
.filtros .btn { padding: 0.35rem 1rem; font-size: 0.9rem; margin-left: auto; }

/* ---------- formularios ---------- */
.formulario { margin-block: 1rem 3rem; }

.formulario fieldset {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  background: #fff;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.formulario legend {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1.15rem;
  padding-inline: 0.5rem;
}

.formulario label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.formulario input:not([type="checkbox"]),
.formulario select,
.formulario textarea { width: 100%; }

.campos-dobles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 640px) { .campos-dobles { grid-template-columns: 1fr; } }

.fieldset-sellos { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.fieldset-sellos legend { font-family: var(--fuente-texto); font-size: 1rem; }

.formulario-legal { font-size: 0.85rem; color: color-mix(in srgb, var(--cacao) 70%, var(--rosa)); }

.campo-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.campo-ubicacion { position: relative; margin: 0 0 1em; }
.campo-ubicacion label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.campo-ubicacion input[type="text"] { width: 100%; }

/* ---------- avisos ---------- */
.aviso {
  border-radius: var(--radio-s);
  padding: 0.9rem 1.25rem;
  margin-block: 1rem;
  border: 1px solid;
}
.aviso p:last-child, .aviso ul:last-child { margin-bottom: 0; }
.aviso-exito { background: #E4F2E0; border-color: #A9D3A0; color: #2F6023; }
.aviso-error { background: #FBE4E4; border-color: #E4A3A3; color: #7A1F1F; }
.aviso-info { background: var(--crema); border-color: var(--color-borde); color: var(--cacao); }

/* ---------- estado vacío ---------- */
.estado-vacio {
  text-align: center;
  background: #fff;
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio-m);
  padding: 2.5rem 1.5rem;
  margin-block: 1.5rem;
}
.estado-vacio p { margin-inline: auto; }
.estado-vacio .btn { margin-top: 0.5rem; }
.acciones-vacio { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* ---------- faq ---------- */
.faq details {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-s);
  padding: 0.9rem 1.25rem;
  margin-bottom: 0.6rem;
}
.faq summary { font-weight: 700; cursor: pointer; }
.faq details[open] summary { margin-bottom: 0.5rem; color: var(--frambuesa); }
.faq p:last-child { margin-bottom: 0; }

/* ---------- modal ficha ---------- */
.modal-ficha {
  border: none;
  border-radius: var(--radio-m);
  padding: 0;
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--cacao) 35%, transparent);
}

.modal-ficha::backdrop { background: color-mix(in srgb, var(--cacao) 55%, transparent); }

.modal-cuerpo { padding: 1.75rem; position: relative; }
.modal-cuerpo h2 { padding-right: 2rem; margin-bottom: 0.2rem; }

.modal-cerrar {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: var(--crema);
  border: none;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--cacao);
}
.modal-cerrar:hover { background: var(--rosa); }

.modal-sub { color: color-mix(in srgb, var(--cacao) 70%, var(--rosa)); margin-bottom: 0.75rem; }
.modal-verificada { color: var(--frambuesa); font-weight: 700; font-size: 0.9rem; }

.modal-datos { margin: 1rem 0; }
.modal-datos > div { display: flex; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--color-borde); }
.modal-datos dt { font-weight: 700; min-width: 110px; font-size: 0.9rem; }
.modal-datos dd { margin: 0; font-size: 0.95rem; overflow-wrap: anywhere; }

.modal-cta { margin: 1.25rem 0; }

.modal-gestion { border-top: 1px solid var(--color-borde); padding-top: 1rem; font-size: 0.92rem; }
.modal-gestion summary { font-weight: 700; cursor: pointer; }
.modal-gestion form { margin-top: 0.75rem; }
.modal-gestion label { display: block; font-weight: 600; }
.modal-gestion input:not(.campo-trampa), .modal-gestion textarea { width: 100%; }
.modal-baja { margin-top: 1rem; font-size: 0.85rem; }

/* ---------- paginación ---------- */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-block: 2rem;
  font-weight: 600;
}
.paginacion .desactivado { color: color-mix(in srgb, var(--cacao) 35%, var(--nata)); }
.paginacion-estado { font-size: 0.92rem; color: color-mix(in srgb, var(--cacao) 70%, var(--rosa)); }

/* ---------- blog ---------- */
.entrada-imagen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio-m);
  margin-block: 1rem;
}
.prosa h2 { margin-top: 1.75em; }
.prosa figure { margin: 1.5rem 0; }
.prosa img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radio-s);
  object-fit: contain;
}
.prosa figure img { width: 100%; }
.prosa figcaption {
  margin-top: 0.5rem;
  color: color-mix(in srgb, var(--cacao) 68%, var(--rosa));
  font-size: 0.92rem;
  line-height: 1.45;
}
.prosa figure + h2 { margin-top: 1.75em; }
.prosa ul, .prosa ol { padding-left: 1.4rem; }
.prosa li { margin-bottom: 0.35em; }

/* ---------- pie ---------- */
.pie { background: var(--cacao); color: color-mix(in srgb, var(--nata) 85%, var(--rosa)); margin-top: 3.5rem; }

.pie-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  padding-block: 2.75rem 1.5rem;
}

.pie h2 { color: var(--nata); font-family: var(--fuente-texto); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; }
.pie-marca { font-family: var(--fuente-titulos); font-size: 1.4rem; font-weight: 700; color: var(--nata); margin-bottom: 0.5rem; }
.pie-marca em { font-style: normal; color: var(--rosa); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 0.45rem; }
.pie a { color: color-mix(in srgb, var(--nata) 90%, var(--rosa)); }
.pie a:hover { color: var(--rosa); }
.pie p { max-width: none; font-size: 0.95rem; }

.pie-final { border-top: 1px solid color-mix(in srgb, var(--nata) 18%, transparent); padding-block: 1rem; }
.pie-final p { font-size: 0.82rem; margin: 0; }

/* ---------- admin ---------- */
.admin-contenido { padding-block: 2rem; }
.admin-kpi { text-decoration: none; color: var(--cacao); }
.admin-kpi strong { display: block; font-size: 1.9rem; color: var(--frambuesa); font-family: var(--fuente-titulos); }

.tabla-admin { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio-s); font-size: 0.9rem; }
.tabla-admin th, .tabla-admin td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-borde); vertical-align: top; }
.tabla-admin th { background: var(--crema); }
.celda-detalle { max-width: 340px; white-space: pre-line; }
.tabla-admin .btn { padding: 0.25rem 0.8rem; font-size: 0.82rem; }

/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}